diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 1ad414845..11a37ca48 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -74,6 +74,7 @@ public function getGlobalData() {
             }
         }
         $entityTypes = EntityType::with(['sub_entity_types', 'attributes'])
+            ->withCount('entities')
             ->orderBy('id')
             ->get();
         $entityTypeMap = $entityTypes->getDictionary();
diff --git a/package-lock.json b/package-lock.json
index f9ce472cd..0c1b21ccd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
                 "circular-dependency-plugin": "^5.2.2",
                 "d3-dsv": "^3.0.1",
                 "dayjs": "^1.11.7",
+                "dhc-components": "github:DH-Center-Tuebingen/dhc-components",
                 "emojibase-data": "^16.0.0",
                 "highlight.js": "^11.8.0",
                 "lodash": "^4.17.21",
@@ -503,7 +504,6 @@
             "version": "7.26.2",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
             "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-validator-identifier": "^7.25.9",
@@ -2167,7 +2167,6 @@
             "cpu": [
                 "ppc64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "aix"
@@ -2183,7 +2182,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "android"
@@ -2199,7 +2197,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "android"
@@ -2215,7 +2212,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "android"
@@ -2231,7 +2227,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "darwin"
@@ -2247,7 +2242,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "darwin"
@@ -2263,7 +2257,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "freebsd"
@@ -2279,7 +2272,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "freebsd"
@@ -2295,7 +2287,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -2311,7 +2302,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -2327,7 +2317,6 @@
             "cpu": [
                 "ia32"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -2343,7 +2332,6 @@
             "cpu": [
                 "loong64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -2359,7 +2347,6 @@
             "cpu": [
                 "mips64el"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -2375,7 +2362,6 @@
             "cpu": [
                 "ppc64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -2391,7 +2377,6 @@
             "cpu": [
                 "riscv64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -2407,7 +2392,6 @@
             "cpu": [
                 "s390x"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -2423,7 +2407,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -2439,7 +2422,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "netbsd"
@@ -2455,7 +2437,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "netbsd"
@@ -2471,7 +2452,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "openbsd"
@@ -2487,7 +2467,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "openbsd"
@@ -2503,7 +2482,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "sunos"
@@ -2519,7 +2497,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "win32"
@@ -2535,7 +2512,6 @@
             "cpu": [
                 "ia32"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "win32"
@@ -2551,7 +2527,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "win32"
@@ -3593,7 +3568,6 @@
             "version": "2.5.1",
             "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
             "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
-            "dev": true,
             "hasInstallScript": true,
             "license": "MIT",
             "optional": true,
@@ -3633,7 +3607,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3654,7 +3627,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3675,7 +3647,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3696,7 +3667,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3717,7 +3687,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3738,7 +3707,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3759,7 +3727,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3780,7 +3747,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3801,7 +3767,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3822,7 +3787,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3843,7 +3807,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3864,7 +3827,6 @@
             "cpu": [
                 "ia32"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3885,7 +3847,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3966,7 +3927,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3980,7 +3940,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3994,7 +3953,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4008,7 +3966,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4022,7 +3979,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4036,7 +3992,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4050,7 +4005,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4064,7 +4018,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4078,7 +4031,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4092,7 +4044,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4106,7 +4057,6 @@
             "cpu": [
                 "loong64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4120,7 +4070,6 @@
             "cpu": [
                 "ppc64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4134,7 +4083,6 @@
             "cpu": [
                 "riscv64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4148,7 +4096,6 @@
             "cpu": [
                 "s390x"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4162,7 +4109,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4176,7 +4122,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4190,7 +4135,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4204,7 +4148,6 @@
             "cpu": [
                 "ia32"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -4218,7 +4161,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -5901,6 +5843,21 @@
             "integrity": "sha512-iG4TGfqE3baftbSGF0PhoS+xZOCnV0ChkDo9rwhJ/Qi2YlCdb6tyQCjvyug3jnzncga8+d85kx0WvG7rDYFqiA==",
             "license": "MIT"
         },
+        "node_modules/@vuepic/vue-datepicker": {
+            "version": "11.0.3",
+            "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.3.tgz",
+            "integrity": "sha512-sb2adwqwK2PizLQOpxCYps2SwhVT6/ic2HMIOqHJXuYa6iAJZWGL5YVlS7O4aW+sk6ZyxlDURLO7kDZPL4HB/w==",
+            "license": "MIT",
+            "dependencies": {
+                "date-fns": "^4.1.0"
+            },
+            "engines": {
+                "node": ">=18.12.0"
+            },
+            "peerDependencies": {
+                "vue": ">=3.3.0"
+            }
+        },
         "node_modules/@vueuse/core": {
             "version": "10.11.1",
             "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
@@ -6471,7 +6428,6 @@
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
             "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/at-least-node": {
@@ -6531,14 +6487,13 @@
             }
         },
         "node_modules/axios": {
-            "version": "1.7.9",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
-            "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
-            "devOptional": true,
+            "version": "1.13.1",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.1.tgz",
+            "integrity": "sha512-hU4EGxxt+j7TQijx1oYdAjw4xuIp1wRQSsbMFwSthCWeBQur1eF+qJ5iQ5sN3Tw8YRzQNKb8jszgBdMDVqwJcw==",
             "license": "MIT",
             "dependencies": {
                 "follow-redirects": "^1.15.6",
-                "form-data": "^4.0.0",
+                "form-data": "^4.0.4",
                 "proxy-from-env": "^1.1.0"
             }
         },
@@ -6992,7 +6947,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
             "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
@@ -7477,7 +7431,6 @@
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
             "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "delayed-stream": "~1.0.0"
@@ -7716,7 +7669,6 @@
             "version": "3.40.0",
             "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz",
             "integrity": "sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==",
-            "dev": true,
             "hasInstallScript": true,
             "license": "MIT",
             "funding": {
@@ -8618,6 +8570,16 @@
                 "lodash-es": "^4.17.21"
             }
         },
+        "node_modules/date-fns": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+            "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/kossnocorp"
+            }
+        },
         "node_modules/date-format-parse": {
             "version": "0.2.7",
             "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
@@ -8838,7 +8800,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
             "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.4.0"
@@ -8868,7 +8829,6 @@
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
             "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-            "dev": true,
             "license": "Apache-2.0",
             "optional": true,
             "bin": {
@@ -8899,6 +8859,113 @@
                 "url": "https://github.com/sponsors/wooorm"
             }
         },
+        "node_modules/dhc-components": {
+            "version": "0.0.0",
+            "resolved": "git+ssh://git@github.com/DH-Center-Tuebingen/dhc-components.git#d18f47b534293ca412cf1a3a45ce0f5ece283c93",
+            "dependencies": {
+                "@milkdown/core": "^7.5.0",
+                "@milkdown/plugin-clipboard": "^7.5.0",
+                "@milkdown/plugin-diagram": "^7.5.0",
+                "@milkdown/plugin-emoji": "^7.5.0",
+                "@milkdown/plugin-history": "^7.5.0",
+                "@milkdown/plugin-indent": "^7.5.0",
+                "@milkdown/plugin-listener": "^7.5.0",
+                "@milkdown/plugin-math": "^7.5.0",
+                "@milkdown/plugin-prism": "^7.5.0",
+                "@milkdown/plugin-tooltip": "^7.5.0",
+                "@milkdown/plugin-upload": "^7.5.0",
+                "@milkdown/preset-commonmark": "^7.5.0",
+                "@milkdown/preset-gfm": "^7.5.0",
+                "@milkdown/prose": "^7.5.0",
+                "@milkdown/theme-nord": "^7.5.0",
+                "@milkdown/transformer": "^7.5.0",
+                "@milkdown/vue": "^7.5.0",
+                "@vueform/multiselect": "^2.6.11",
+                "@vuepic/vue-datepicker": "^11.0.2",
+                "axios": "^1.11.0",
+                "dayjs": "^1.11.13",
+                "dhc-utils": "git+https://github.com/Dh-Center-Tuebingen/dhc-utils.git",
+                "emoji-mart-vue-fast": "^15.0.4",
+                "highlight.js": "^11.11.1",
+                "vee-validate": "^4.13.2",
+                "vue": "^3.3.4",
+                "vue-i18n": "^9.13.1",
+                "yup": "^1.6.1"
+            }
+        },
+        "node_modules/dhc-components/node_modules/@intlify/core-base": {
+            "version": "9.14.5",
+            "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.14.5.tgz",
+            "integrity": "sha512-5ah5FqZG4pOoHjkvs8mjtv+gPKYU0zCISaYNjBNNqYiaITxW8ZtVih3GS/oTOqN8d9/mDLyrjD46GBApNxmlsA==",
+            "license": "MIT",
+            "dependencies": {
+                "@intlify/message-compiler": "9.14.5",
+                "@intlify/shared": "9.14.5"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
+            }
+        },
+        "node_modules/dhc-components/node_modules/@intlify/message-compiler": {
+            "version": "9.14.5",
+            "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.14.5.tgz",
+            "integrity": "sha512-IHzgEu61/YIpQV5Pc3aRWScDcnFKWvQA9kigcINcCBXN8mbW+vk9SK+lDxA6STzKQsVJxUPg9ACC52pKKo3SVQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@intlify/shared": "9.14.5",
+                "source-map-js": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
+            }
+        },
+        "node_modules/dhc-components/node_modules/@intlify/shared": {
+            "version": "9.14.5",
+            "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.14.5.tgz",
+            "integrity": "sha512-9gB+E53BYuAEMhbCAxVgG38EZrk59sxBtv3jSizNL2hEWlgjBjAw1AwpLHtNaeda12pe6W20OGEa0TwuMSRbyQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
+            }
+        },
+        "node_modules/dhc-components/node_modules/vue-i18n": {
+            "version": "9.14.5",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.5.tgz",
+            "integrity": "sha512-0jQ9Em3ymWngyiIkj0+c/k7WgaPO+TNzjKSNq9BvBQaKJECqn9cd9fL4tkDhB5G1QBskGl9YxxbDAhgbFtpe2g==",
+            "license": "MIT",
+            "dependencies": {
+                "@intlify/core-base": "9.14.5",
+                "@intlify/shared": "9.14.5",
+                "@vue/devtools-api": "^6.5.0"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
+        "node_modules/dhc-utils": {
+            "version": "0.1.0",
+            "resolved": "git+ssh://git@github.com/Dh-Center-Tuebingen/dhc-utils.git#c8cc1fe86d49b7ba39e66bb9488c959aeb5c6e21",
+            "license": "MIT",
+            "dependencies": {
+                "dayjs": "^1.11.13",
+                "vite-dts": "^1.0.4"
+            }
+        },
         "node_modules/diff": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
@@ -9072,7 +9139,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
             "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.1",
@@ -9133,6 +9199,19 @@
             "integrity": "sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==",
             "license": "EPL-2.0"
         },
+        "node_modules/emoji-mart-vue-fast": {
+            "version": "15.0.5",
+            "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-15.0.5.tgz",
+            "integrity": "sha512-wnxLor8ggpqshoOPwIc33MdOC3A1XFeDLgUwYLPtNPL8VeAtXJAVrnFq1CN5PeCYAFoLo4IufHQZ9CfHD4IZiw==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@babel/runtime": "^7.18.6",
+                "core-js": "^3.23.5"
+            },
+            "peerDependencies": {
+                "vue": ">2.0.0"
+            }
+        },
         "node_modules/emoji-regex": {
             "version": "10.4.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
@@ -9230,7 +9309,6 @@
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
             "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "is-arrayish": "^0.2.1"
@@ -9251,7 +9329,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
             "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -9261,7 +9338,6 @@
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
             "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -9277,7 +9353,6 @@
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
             "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0"
@@ -9286,11 +9361,25 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/es-set-tostringtag": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+            "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.6",
+                "has-tostringtag": "^1.0.2",
+                "hasown": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
         "node_modules/esbuild": {
             "version": "0.25.1",
             "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
             "integrity": "sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==",
-            "dev": true,
             "hasInstallScript": true,
             "bin": {
                 "esbuild": "bin/esbuild"
@@ -10201,7 +10290,6 @@
             "version": "1.15.9",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
             "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-            "devOptional": true,
             "funding": [
                 {
                     "type": "individual",
@@ -10219,14 +10307,15 @@
             }
         },
         "node_modules/form-data": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
-            "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
-            "devOptional": true,
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+            "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
             "license": "MIT",
             "dependencies": {
                 "asynckit": "^0.4.0",
                 "combined-stream": "^1.0.8",
+                "es-set-tostringtag": "^2.1.0",
+                "hasown": "^2.0.2",
                 "mime-types": "^2.1.12"
             },
             "engines": {
@@ -10307,7 +10396,6 @@
             "version": "2.3.3",
             "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
             "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-            "dev": true,
             "hasInstallScript": true,
             "license": "MIT",
             "optional": true,
@@ -10322,7 +10410,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
             "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-            "dev": true,
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
@@ -10372,7 +10459,6 @@
             "version": "1.2.7",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
             "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.1",
@@ -10397,7 +10483,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
             "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "dunder-proto": "^1.0.1",
@@ -10507,7 +10592,6 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
             "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -10578,7 +10662,6 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
             "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -10587,6 +10670,21 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/has-tostringtag": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+            "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+            "license": "MIT",
+            "dependencies": {
+                "has-symbols": "^1.0.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/hash-sum": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
@@ -10598,7 +10696,6 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
             "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "function-bind": "^1.1.2"
@@ -11124,7 +11221,6 @@
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
             "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/is-binary-path": {
@@ -11447,7 +11543,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
             "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/js-yaml": {
@@ -11691,7 +11786,6 @@
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/linkify-it": {
@@ -11703,6 +11797,21 @@
                 "uc.micro": "^2.0.0"
             }
         },
+        "node_modules/load-json-file": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
+            "integrity": "sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==",
+            "license": "MIT",
+            "dependencies": {
+                "graceful-fs": "^4.1.15",
+                "parse-json": "^5.0.0",
+                "strip-bom": "^4.0.0",
+                "type-fest": "^0.6.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/loader-runner": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -12094,7 +12203,6 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
             "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -17553,7 +17661,6 @@
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
             "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-            "dev": true,
             "license": "MIT",
             "optional": true
         },
@@ -18089,7 +18196,6 @@
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
             "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/code-frame": "^7.0.0",
@@ -19437,7 +19543,6 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
             "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/pseudomap": {
@@ -20747,7 +20852,6 @@
             "version": "4.32.0",
             "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.32.0.tgz",
             "integrity": "sha512-JmrhfQR31Q4AuNBjjAX4s+a/Pu/Q8Q9iwjWBsjRH1q52SPFE2NqRMK6fUZKKnvKO6id+h7JIRf0oYsph53eATg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@types/estree": "1.0.6"
@@ -20859,7 +20963,7 @@
             "version": "1.83.4",
             "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz",
             "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "chokidar": "^4.0.0",
@@ -20918,7 +21022,7 @@
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
             "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "readdirp": "^4.0.1"
@@ -20934,14 +21038,14 @@
             "version": "5.0.3",
             "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
             "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/sass/node_modules/readdirp": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.1.tgz",
             "integrity": "sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 14.18.0"
@@ -21543,6 +21647,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/strip-bom": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+            "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/strip-eof": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -22091,7 +22204,6 @@
             "version": "0.6.0",
             "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
             "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-            "dev": true,
             "license": "(MIT OR CC0-1.0)",
             "engines": {
                 "node": ">=8"
@@ -22638,7 +22750,6 @@
             "version": "6.2.3",
             "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.3.tgz",
             "integrity": "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==",
-            "dev": true,
             "dependencies": {
                 "esbuild": "^0.25.0",
                 "postcss": "^8.5.3",
@@ -22705,6 +22816,18 @@
                 }
             }
         },
+        "node_modules/vite-dts": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/vite-dts/-/vite-dts-1.0.4.tgz",
+            "integrity": "sha512-jfRsrBU8vibUS4a/AboDzHdph2/9/dpoMdYgkiD5tb4OXL75wnlzeEZ6D2XoEZNExwnkXqARKAvz7pv5VtUm5g==",
+            "license": "MIT",
+            "dependencies": {
+                "load-json-file": "^6.2.0"
+            },
+            "peerDependencies": {
+                "vite": ">2.0.0-0"
+            }
+        },
         "node_modules/vite-plugin-full-reload": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/vite-plugin-full-reload/-/vite-plugin-full-reload-1.2.0.tgz",
@@ -23644,7 +23767,6 @@
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
             "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
-            "dev": true,
             "optional": true,
             "peer": true,
             "bin": {
diff --git a/package.json b/package.json
index 1443e6a4d..9d4cc9b4b 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
         "circular-dependency-plugin": "^5.2.2",
         "d3-dsv": "^3.0.1",
         "dayjs": "^1.11.7",
+        "dhc-components": "github:DH-Center-Tuebingen/dhc-components",
         "emojibase-data": "^16.0.0",
         "highlight.js": "^11.8.0",
         "lodash": "^4.17.21",
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 3b0872bd6..25f5def39 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -366,7 +366,7 @@
                 </div>
             </div>
         </nav>
-        <div class="container-fluid my-3 col overflow-hidden">
+        <div class="container-fluid col overflow-hidden">
             <template v-if="state.init">
                 <router-view />
             </template>
@@ -465,8 +465,8 @@ export default {
         const userStore = useUserStore();
 
         // FETCH
-        systemStore.initialize(locale).catch(e => {
-            if(e.response.status == 401) {
+        systemStore.initialize(locale).catch(e =>{
+            if(e?.response?.status == 401) {
                 systemStore.setAppState(true);
             } else {
                 throwError(e);
diff --git a/resources/js/app.js b/resources/js/app.js
index 8ac56c845..ce517a143 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -29,6 +29,9 @@ import '@/bootstrap/font.js';
 // Laravel Echo (Frontend part of Reverb aka WebSockets)
 import '@/bootstrap/websocket.js';
 
+// Styles for the dhc-components
+import 'dhc-components/css'
+
 // Plugin System
 import { SpPS } from '@/bootstrap/plugins.js';
 
diff --git a/resources/js/bootstrap/global-components.js b/resources/js/bootstrap/global-components.js
index 29a2bdc5a..95ebe1996 100644
--- a/resources/js/bootstrap/global-components.js
+++ b/resources/js/bootstrap/global-components.js
@@ -1,6 +1,6 @@
 import AttributeList from '@/components/AttributeList.vue';
 import Attribute from '@/components/attribute/Attribute.vue';
-import EntityTypeList from '@/components/EntityTypeList.vue';
+import EntityTypeList from '@/components/data-model/EntityTypeList.vue';
 import EntityTree from '@/components/tree/Entity.vue';
 import EntityBreadcrumbs from '@/components/EntityBreadcrumbs.vue';
 import UserAvatar from '@/components/UserAvatar.vue';
diff --git a/resources/js/bootstrap/router.js b/resources/js/bootstrap/router.js
index f0519b9e5..82c58257a 100644
--- a/resources/js/bootstrap/router.js
+++ b/resources/js/bootstrap/router.js
@@ -18,8 +18,8 @@ import DataImporter from '@/components/view/DataImporter.vue';
 import Users from '@/components/Users.vue';
 import Roles from '@/components/Roles.vue';
 import Plugins from '@/components/Plugins.vue';
-import DataModel from '@/components/DataModel.vue';
-import DataModelDetailView from '@/components/DataModelDetailView.vue';
+import DataModel from '@/components/data-model/DataModel.vue';
+import DataModelDetailView from '@/components/data-model/DataModelDetailView.vue';
 import Preferences from '@/components/Preferences.vue';
 // User
 import UserProfile from '@/components/UserProfile.vue';
diff --git a/resources/js/bootstrap/stores/entity.js b/resources/js/bootstrap/stores/entity.js
index 07b94f1b8..6acadc1c0 100644
--- a/resources/js/bootstrap/stores/entity.js
+++ b/resources/js/bootstrap/stores/entity.js
@@ -47,6 +47,7 @@ import {
     updateAttributeDependency,
     updateAttributeMetadata,
 } from '@/api.js';
+import { moveItem } from '../../helpers/list.js';
 
 function updateSelectionTypeIdList(selection) {
     const tmpDict = {};
@@ -206,6 +207,12 @@ export const useEntityStore = defineStore('entity', {
                 return systemStore.translateConcept(entityType.thesaurus_url);
             };
         },
+        getMinimalEntityTypes(state) {
+            return Object.values(state.entityTypes).map(entityType => ({
+                id: entityType.id,
+                thesaurus_url: entityType.thesaurus_url
+            }));
+        },
         getTreeSelectionCount: state => {
             return Object.keys(state.treeSelection).length;
         },
@@ -257,7 +264,7 @@ export const useEntityStore = defineStore('entity', {
                     } else {
                         const idx = this.tree.findIndex(c => c.rank == node.rank);
                         this.tree.splice(idx, 0, node);
-                        for(let i=idx+1; i<this.tree.length; i++) {
+                        for(let i = idx + 1; i < this.tree.length; i++) {
                             this.tree[i].rank++;
                         }
                     }
@@ -279,7 +286,7 @@ export const useEntityStore = defineStore('entity', {
                             } else {
                                 const idx = parent.children.findIndex(c => c.rank == node.rank);
                                 parent.children.splice(idx, 0, node);
-                                for(let i=idx+1; i<parent.children.length; i++) {
+                                for(let i = idx + 1; i < parent.children.length; i++) {
                                     parent.children[i].rank++;
                                 }
                             }
@@ -506,9 +513,9 @@ export const useEntityStore = defineStore('entity', {
                 return this.updateEntityMetadata(id, except(data, 'user'));
             });
         },
-        async patchEntityMetadata(entityTypeId, attributeId, etAttrId, metadata) {
-            return updateAttributeMetadata(etAttrId, metadata).then(data => {
-                this.updateAttributeMetadata(entityTypeId, attributeId, etAttrId, data.data);
+        async patchEntityMetadata(entityTypeId, attributeId, entityTypeAttributeId, metadata) {
+            return updateAttributeMetadata(entityTypeAttributeId, metadata).then(data => {
+                this.updateAttributeMetadata(entityTypeId, attributeId, entityTypeAttributeId, data.data);
             });
         },
         externalAttributeValueDeleted(entityId, attributeId) {
@@ -757,42 +764,20 @@ export const useEntityStore = defineStore('entity', {
                 }
             });
         },
-        async reorderAttributes(entityTypeId, attributeId, from, to) {
+        async reorderAttributes(entityTypeId, attribute, from, to, target = 'pivot.position') {
+            console.log('reorderAttributes', entityTypeId, attribute, from, to, target);
             if(from == to) {
                 return;
             }
             const attributes = this.getEntityTypeAttributes(entityTypeId);
-            // Already added
-            if(attributes.length < to && attributes[to].id == attributeId) {
-                return;
-            }
-            // Return if moved attribute does not match
-            if(attributes[from].id != attributeId) {
-                return;
+            // For an instant visual feedback, we move the item first
+            const toRank = moveItem(attributes, from, to, target);
+            try {
+                await reorderEntityAttributes(entityTypeId, attribute.id, toRank);
+            } catch(error) {
+                console.error('Error reordering entity attributes:', error);
+                moveItem(attributes, to, from, target);
             }
-            const rank = to + 1;
-            return reorderEntityAttributes(entityTypeId, attributeId, rank).then(_ => {
-                attributes[from].position = rank;
-                const movedAttrs = attributes.splice(from, 1);
-                attributes.splice(to, 0, ...movedAttrs);
-                if(from < to) {
-                    for(let i = from; i < to; i++) {
-                        if(attributes[i].position) {
-                            attributes[i].position++;
-                        } else if(attributes[i].pivot && attributes[i].pivot.position) {
-                            attributes[i].pivot.position++;
-                        }
-                    }
-                } else {
-                    for(let i = to + 1; i <= from; i++) {
-                        if(attributes[i].position) {
-                            attributes[i].position--;
-                        } else if(attributes[i].pivot && attributes[i].pivot.position) {
-                            attributes[i].pivot.position--;
-                        }
-                    }
-                }
-            });
         },
         async updateDependency(entityTypeId, attributeId, dependency) {
             return updateAttributeDependency(entityTypeId, attributeId, dependency).then(response => {
@@ -814,12 +799,28 @@ export const useEntityStore = defineStore('entity', {
         initializeEntityTypes(data) {
             this.entityTypes = {};
             this.entityTypeAttributes = {};
-            for(let k in data) {
-                const entityType = data[k];
+            const entityTypeParents = {};
+            for(let entityType of Object.values(data)) {
                 this.entityTypeAttributes[entityType.id] = entityType.attributes.slice();
+
+                // Collect parents for each sub-entity-type
+                for(let subEntityType of entityType.sub_entity_types) {
+                    if(!entityTypeParents[subEntityType.id]) {
+                        entityTypeParents[subEntityType.id] = new Set();
+                    }
+                    entityTypeParents[subEntityType.id].add(entityType.id);
+                }
+
                 delete entityType.attributes;
             }
+
             this.entityTypes = data;
+
+            // Add parents to each entity type
+            for(let entityType of Object.values(this.entityTypes)) {
+                const parentsArray = entityTypeParents[entityType.id] ? Array.from(entityTypeParents[entityType.id]) : [];
+                entityType.parents = parentsArray;
+            }
         },
         removeAttributeFromEntityTypes: state => attributeId => {
             for(let k in this.entityTypeAttributes) {
diff --git a/resources/js/components/AttributeList.vue b/resources/js/components/AttributeList.vue
index 87ea65abc..86d350702 100644
--- a/resources/js/components/AttributeList.vue
+++ b/resources/js/components/AttributeList.vue
@@ -1,132 +1,69 @@
 <template>
     <draggable
-        v-if="state.componentLoaded"
-        v-model="state.attributeList"
+        :model-value="attributes"
         item-key="id"
         class="attribute-list-container align-content-start"
         :class="classes"
+        ghost-class="vue-draggable-ghost"
         :disabled="disableDrag || preview"
         :group="group"
         :move="handleMove"
         @change="handleUpdate"
+        @start="state.dragging = true"
+        @stop="state.dragging = false"
+        @drop="state.dragging = false"
     >
-        <template #item="{ element, index }">
+        <template #item="{ element: attribute, index }">
             <div
-                v-if="!state.hiddenAttributeList[element.id] || showHidden"
-                class="mt-3 px-2"
-                :class="additionalRowClasses(element)"
+                v-if="!state.hiddenAttributeList[attribute.id] || showHidden"
+                class="px-2"
+                :class="additionalRowClasses(attribute, index)"
                 @mouseenter="onEnter(index)"
                 @mouseleave="onLeave(index)"
             >
-                <div class="d-flex align-items-center gap-2">
+                <div class="d-flex align-items-center gap-2 position-relative">
+                    <slot
+                        name="before-container"
+                        :attribute="attribute"
+                        :index="index"
+                        :hovered="isHovered(index)"
+                        :dragging="state.dragging"
+                    />
                     <div
                         class="row gx-3 flex-fill"
-                        :class="addModerationStateClasses(element.id)"
+                        :class="addModerationStateClasses(attribute)"
                     >
                         <label
                             v-if="!state.hideLabels"
                             class="col-form-label col-md-3 d-flex flex-row justify-content-between text-break align-self-start gap-1 position-relative"
-                            :for="`attr-${element.id}`"
-                            :class="attributeClasses(element)"
-                            @click="e => handleLabelClick(e, element.datatype)"
+                            :for="`attr-${attribute.id}`"
+                            :class="attributeClasses(attribute)"
+                            @click="e => handleLabelClick(e, attribute.datatype)"
                         >
                             <slot
                                 name="before"
-                                :attribute="element"
+                                :attribute="attribute"
+                                :hovered="isHovered(index)"
+                                :dragging="state.dragging"
                             />
                             <div
-                                v-if="hasAttributeChangeIndicator(element)"
+                                v-if="hasAttributeChangeIndicator(attribute)"
                                 class="d-flex align-items-center"
-                                :title="getAttributeChangeIndicatorDescription(element)"
+                                :title="getAttributeChangeIndicatorDescription(attribute)"
                             >
-                                <DotIndicator :type="getAttributeChangeIndicator(element)" />
+                                <DotIndicator :type="getAttributeChangeIndicator(attribute)" />
                             </div>
-                            <div
-                                v-show="!!state.hoverStates[index]"
-                                class="btn-fab-list btn-fab-list-md position-absolute start-0"
-                            >
-                                <button
-                                    v-show="hasEmitter('onReorderList')"
-                                    class="reorder-handle btn btn-outline-secondary btn-fab rounded-circle"
-                                    data-bs-toggle="popover"
-                                    :data-content="t('global.resort')"
-                                    data-trigger="hover"
-                                    data-placement="bottom"
-                                >
-                                    <i class="fas fa-fw fa-sort" />
-                                </button>
-                                <button
-                                    v-show="hasEmitter('onEditElement')"
-                                    class="btn btn-outline-info btn-fab rounded-circle"
-                                    data-bs-toggle="popover"
-                                    :data-content="t('global.edit')"
-                                    data-trigger="hover"
-                                    data-placement="bottom"
-                                    @click="onEditHandler(element)"
-                                >
-                                    <i
-                                        class="fas fa-fw fa-xs fa-edit"
-                                        style="vertical-align: 0;"
-                                    />
-                                </button>
-                                <button
-                                    v-if="!element.is_system"
-                                    v-show="hasEmitter('onRequireElement')"
-                                    class="btn btn-fab rounded-circle"
-                                    :class="{'btn-outline-primary': !element.pivot?.metadata?.required, 'btn-primary': element.pivot?.metadata?.required}"
-                                    data-bs-toggle="popover"
-                                    :data-content="t('global.required')"
-                                    data-trigger="hover"
-                                    data-placement="bottom"
-                                    @click="onRequireHandler(element)"
-                                >
-                                    <i
-                                        class="fas fa-fw fa-xs fa-asterisk"
-                                        style="vertical-align: 0;"
-                                    />
-                                </button>
-                                <button
-                                    v-show="hasEmitter('onRemoveElement')"
-                                    class="btn btn-outline-danger btn-fab rounded-circle"
-                                    data-bs-toggle="popover"
-                                    :data-content="t('global.remove')"
-                                    data-trigger="hover"
-                                    data-placement="bottom"
-                                    @click="onRemoveHandler(element)"
-                                >
-                                    <i
-                                        class="fas fa-fw fa-xs fa-times"
-                                        style="vertical-align: 0;"
-                                    />
-                                </button>
-                                <button
-                                    v-show="hasEmitter('onDeleteElement')"
-                                    class="btn btn-outline-danger btn-fab rounded-circle"
-                                    data-bs-toggle="popover"
-                                    :data-content="t('global.delete')"
-                                    data-trigger="hover"
-                                    data-placement="bottom"
-                                    @click="onDeleteHandler(element)"
-                                >
-                                    <i
-                                        class="fas fa-fw fa-xs fa-trash"
-                                        style="vertical-align: 0;"
-                                    />
-                                </button>
-                            </div>
-                            <div
-                                class="text-end col d-inline-block text-truncate"
-                            >
-                                <span v-if="element.is_system">
+                            <div class="text-end col d-inline-block text-truncate">
+                                <span v-if="attribute.is_system">
                                     &nbsp;
                                 </span>
                                 <span
                                     v-else
-                                    :title="translateConcept(element.thesaurus_url)"
+                                    :title="translateConcept(attribute.thesaurus_url)"
                                 >
-                                    {{ translateConcept(element.thesaurus_url) }}
+                                    {{ translateConcept(attribute.thesaurus_url) }}
                                     <span
-                                        v-if="element.pivot?.metadata?.required"
+                                        v-if="attribute.pivot?.metadata?.required"
                                         class="text-danger"
                                     >
                                         <i class="fas fa-fw fa-xs fa-asterisk align-top" />
@@ -134,32 +71,32 @@
                                 </span>
                             </div>
                             <a
-                                v-if="getConceptNote(element.thesaurus_url)"
+                                v-if="getConceptNote(attribute.thesaurus_url)"
                                 tabindex="0"
                                 class="text-decoration-none text-secondary ms-1 position-relative"
                                 data-bs-toggle="popover"
                                 data-bs-trigger="focus"
                                 data-bs-placement="top"
-                                :data-bs-content="getConceptNote(element.thesaurus_url)"
+                                :data-bs-content="getConceptNote(attribute.thesaurus_url)"
                                 href="#"
                                 @click.prevent
                             >
                                 <i class="fas fa-fw fa-circle-info" />
                             </a>
                             <sup
-                                v-if="hasEmitter('onEditElement') && !!element.pivot.depends_on && Object.keys(element.pivot.depends_on).length > 0"
+                                v-if="hasEmitter('onEditElement') && !!attribute.pivot.depends_on && Object.keys(attribute.pivot.depends_on).length > 0"
                                 :title="t('global.dependency.depends_on.desc')"
                             >
                                 <i class="fas fa-diagram-next text-warning fa-rotate-180" />
                             </sup>
                         </label>
-                        <div :class="expandedClasses(index, element)">
+                        <div :class="expandedClasses(index, attribute)">
                             <Attribute
-                                :ref="el => setRef(el, element.id)"
-                                :data="element"
-                                :value-wrapper="state.attributeValues[element.id]"
-                                :disabled="state.hiddenAttributeList[element.id] || isDisabledInModeration(element.id)"
-                                :react-to="state.rootAttributeValues[element.root_attribute_id]"
+                                :ref="el => setRef(el, attribute.id)"
+                                :data="attribute"
+                                :value-wrapper="values[attribute.id]"
+                                :disabled="isAttributeDisabled(attribute)"
+                                :react-to="state.rootAttributeValues[attribute.root_attribute_id]"
                                 :hide-links="state.hideEntityLink"
                                 :preview="preview"
                                 :preview-data="previewData"
@@ -169,42 +106,42 @@
                             />
 
                             <ModerationPanel
-                                v-if="isInModeration(element.id)"
-                                :element="element"
-                                :value="state.attributeValues[element.id]"
-                                @toggle-data="e => toggleAttributeValue(element.id)"
-                                @moderate="e => handleModeration(element.id, e)"
-                                @edit="e => handleEditModeration(element.id, e)"
+                                v-if="isInModeration(attribute)"
+                                :element="attribute"
+                                :value="values[attribute.id]"
+                                @toggle-data="e => toggleAttributeValue(attribute)"
+                                @moderate="e => handleModeration(attribute, e)"
+                                @edit="e => handleEditModeration(attribute, e)"
                             />
                         </div>
                     </div>
-                    <div
+                    <!-- <div
                         v-if="hasEmitter('onMetadata')"
                         class="pt-2 fs-1r clickable d-flex flex-row align-items-start justify-content-center align-self-start gap-1"
-                        @click="onMetadataHandler(element)"
+                        @click="onMetadataHandler(attribute)"
                     >
                         <ValidityIndicator
                             class="col h-10"
-                            :class="getCertaintyStyle(certainty(element))"
+                            :class="getCertaintyStyle(certainty(attribute))"
                             :center="true"
-                            :state="certainty(element)"
+                            :state="certainty(attribute)"
                         />
                         <span
                             class="col text-center"
-                            :class="inactiveMetadataClass(!hasComment(element))"
+                            :class="inactiveMetadataClass(!hasComment(attribute))"
                         >
                             <i class="fas fa-fw fa-comment" />
                         </span>
                         <span
                             class="col text-center"
-                            :class="inactiveMetadataClass(!hasBookmarks(element))"
+                            :class="inactiveMetadataClass(!hasBookmarks(attribute))"
                         >
                             <i class="fas fa-fw fa-bookmark" />
                         </span>
-                    </div>
+                    </div> -->
                     <slot
                         name="after"
-                        :attribute="element"
+                        :attribute="attribute"
                     />
                 </div>
             </div>
@@ -219,7 +156,9 @@
         onMounted,
         reactive,
         ref,
+        toRef,
         toRefs,
+        useAttrs,
     } from 'vue';
 
     import { useI18n } from 'vue-i18n';
@@ -264,6 +203,11 @@
                 type: Boolean,
                 default: false,
             },
+            disabled: {
+                required: false,
+                type: Boolean,
+                default: false,
+            },
             disableDrag: {
                 required: false,
                 type: Boolean,
@@ -297,6 +241,7 @@
                 type: Object,
                 default: _ => new Object(),
             },
+            //Todo: This is kinda read-only, consider ream
             preview: {
                 required: false,
                 type: Boolean,
@@ -313,23 +258,7 @@
             const { t } = useI18n();
             const attributeStore = useAttributeStore();
             const entityStore = useEntityStore();
-            const {
-                classes,
-                attributes,
-                hiddenAttributes,
-                showHidden,
-                disableDrag,
-                group,
-                metadataAddon,
-                selections,
-                values,
-                options,
-                preview,
-                previewData,
-            } = toRefs(props);
-            // FETCH
-
-            // FUNCTIONS
+
             const handleSelectionUpdate = e => {
                 const elemId = e.elemId;
                 const conceptId = e.conceptId;
@@ -338,10 +267,10 @@
                 }
             };
 
-            const additionalRowClasses = elem => {
+            const additionalRowClasses = (elemement, index) => {
                 const classes = [];
-                if(!state.ignoreMetadata && elem.pivot && elem.pivot.metadata && elem.pivot.metadata.width) {
-                    const width = elem.pivot.metadata.width;
+                if(!state.ignoreMetadata && elemement.pivot && elemement.pivot.metadata && elemement.pivot.metadata.width) {
+                    const width = elemement.pivot.metadata.width;
                     switch(width) {
                         case 50:
                             classes.push('col-6');
@@ -353,6 +282,11 @@
                 } else {
                     classes.push('col-12');
                 }
+
+                if(index != 0) {
+                    classes.push('mt-3');
+                }
+
                 return classes;
             };
             const attributeClasses = attribute => {
@@ -365,9 +299,9 @@
                 }
                 return classes;
             };
-            const expandedClasses = (i, element) => {
+            const expandedClasses = (i, attribute) => {
                 let expClasses = {
-                    ['attribute-' + element.id]: true,
+                    ['attribute-' + attribute.id]: true,
                 };
 
                 if(state.hideLabels || state.expansionStates[i]) {
@@ -388,34 +322,32 @@
             const onAttributeExpand = (e, i) => {
                 state.expansionStates[i] = !state.expansionStates[i];
             };
-            const isInModeration = aid => {
-                const attr = state.attributeValues[aid];
+            const isInModeration = attribute => {
                 // system attributes have no attribute value and are not (yet) moderated
-                if(!attr) {
+                if(!attribute) {
                     return false;
                 }
-                return attr.moderation_state && attr.moderation_state.startsWith('pending');
+                return attribute.moderation_state && attribute.moderation_state.startsWith('pending');
             };
-            const isDisabledInModeration = aid => {
-                const attr = state.attributeValues[aid];
-                return isInModeration(aid) && attr.moderation_edit_state != 'active';
+            const isDisabledInModeration = attribute => {
+                return isInModeration(attribute) && attribute.moderation_edit_state != 'active';
             };
-            const addModerationStateClasses = aid => {
+            const addModerationStateClasses = attribute => {
                 const classes = [];
 
-                if(isInModeration(aid)) {
+                if(isInModeration(attribute)) {
                     classes.push('bg-danger');
                     classes.push('py-2');
                 }
 
                 return classes;
             };
-            const toggleAttributeValue = aid => {
-                const tmpVal = state.attributeValues[aid].value;
-                state.attributeValues[aid].value = state.attributeValues[aid].original_value;
-                state.attributeValues[aid].original_value = tmpVal;
+            const toggleAttributeValue = attribute => {
+                const tmpVal = attribute.value;
+                attribute.value = attribute.original_value;
+                attribute.original_value = tmpVal;
             };
-            const handleModeration = (aid, e, overwrite_value = null) => {
+            const handleModeration = (attribute, e, overwrite_value = null) => {
                 const action = e.action;
                 const entity_id = e.entity_id;
                 const active = e.active;
@@ -423,49 +355,48 @@
                     (action == 'accept' && active == 'original') ||
                     (action == 'deny' && active == 'moderation')
                 ) {
-                    toggleAttributeValue(aid);
+                    toggleAttributeValue(attribute);
                 }
                 entityStore.patchEntityDataModerations(action, entity_id, aid, overwrite_value);
             };
-            const handleEditModeration = (aid, e) => {
-                const attr = state.attributeValues[aid];
+            const handleEditModeration = (attribute, e) => {
                 const action = e.action;
                 if(action == 'enable') {
-                    attr.moderation_edit_state = 'active';
+                    attribute.moderation_edit_state = 'active';
                 } else if(action == 'reset') {
-                    attrRefs.value[aid].resetFieldState();
+                    attrRefs.value[attribute.id].resetFieldState();
                 } else if(action == 'cancel') {
-                    delete attr.moderation_edit_state;
-                    attrRefs.value[aid].resetFieldState();
+                    delete attribute.moderation_edit_state;
+                    attrRefs.value[attribute.id].resetFieldState();
                 } else if(action == 'accept') {
-                    attrRefs.value[aid].undirtyField();
-                    const editValue = attrRefs.value[aid].v.value;
+                    attrRefs.value[attribute.id].undirtyField();
+                    const editValue = attrRefs.value[attribute.id].v.value;
                     const data = {
                         action: action,
                         entity_id: e.entity_id,
                     };
-                    handleModeration(aid, data, editValue);
+                    handleModeration(attribute, data, editValue);
                 }
             };
 
             const onEnter = i => {
-                state.hoverStates[i] = state.isHoveringPossible;
+                state.hovered = i;
             };
             const onLeave = i => {
-                state.hoverStates[i] = false;
+                if(state.hovered == i) state.hovered = -1;
             };
-            const handleMove = (e, orgE) => {
+            const handleMove = (e) => {
                 // Preview does not allow dragging
-                if(preview.value) return false;
+                const draggedAid = e.draggedContext?.element?.id;
+                if(props.preview || !draggedAid) return false;
 
-                const draggedAid = e.draggedContext.element.id;
-                return !(showHidden.value && Object.keys(state.hiddenAttributeList).some(aid => aid == draggedAid)) && !disableDrag.value;
+                return !(props.showHidden && Object.keys(state.hiddenAttributeList).some(aid => aid == draggedAid)) && !props.disableDrag;
             };
             const handleUpdate = (e) => {
                 if(!!e.moved) {
                     // only handle event if position changed
                     if(e.moved.oldIndex != e.moved.newIndex) {
-                        onReorderHandler({
+                        context.emit('reorder-list', {
                             element: e.moved.element,
                             from: e.moved.oldIndex,
                             to: e.moved.newIndex,
@@ -530,7 +461,7 @@
                 // state.changeTracker.local[e.attribute_id] = true;
                 state.changeTracker.local[e.attribute_id] = e.dirty;
                 // Do not update dirty state if attribute is currently in moderation edit mode
-                if(state.attributeValues[e.attribute_id].moderation_edit_state == 'active') {
+                if(props.values[e.attribute_id].moderation_edit_state == 'active') {
                     return;
                 }
                 const dirtyValues = getDirtyValues();
@@ -542,7 +473,7 @@
                 state.changeTracker.external = {};
                 for(let k in attrRefs.value) {
                     // skip all attributes currently in moderation edit mode
-                    if(state.attributeValues[k].moderation_edit_state == 'active') {
+                    if(props.values[k].moderation_edit_state == 'active') {
                         continue;
                     }
                     const curr = attrRefs.value[k];
@@ -556,7 +487,7 @@
                 state.changeTracker.external = {};
                 for(let k in attrRefs.value) {
                     // skip all attributes currently in moderation edit mode
-                    if(state.attributeValues[k].moderation_edit_state == 'active') {
+                    if(props.values[k].moderation_edit_state == 'active') {
                         continue;
                     }
                     const curr = attrRefs.value[k];
@@ -569,7 +500,7 @@
                 for(let k in changes) {
                     if(attrRefs.value[k]) {
                         // Broadcast changes to Attribute component...
-                        state.attributeValues[k].value = changes[k].value;
+                        props.values[k].value = changes[k].value;
                         attrRefs.value[k].handleExternalChange(changes[k]);
                         // ... but also display info
                         state.changeTracker.external[k] = changes[k];
@@ -609,31 +540,6 @@
             const setRef = (el, id) => {
                 attrRefs.value[id] = el;
             };
-            const onReorderHandler = data => {
-                context.emit('reorder-list', data);
-            };
-            const onEditHandler = element => {
-                context.emit('edit-element', {
-                    element: element
-                });
-            };
-            const onRequireHandler = element => {
-                context.emit('require-element', {
-                    element: element,
-                    active: !element.pivot?.metadata?.required,
-                });
-            };
-            const onRemoveHandler = element => {
-                context.emit('remove-element', {
-                    element: element,
-                    modal: true,
-                });
-            };
-            const onDeleteHandler = element => {
-                context.emit('delete-element', {
-                    element: element
-                });
-            };
             const onMetadataHandler = element => {
                 context.emit('metadata', {
                     element: element
@@ -644,14 +550,14 @@
             };
 
             const certainty = attribute => {
-                return state.attributeValues?.[attribute.id]?.certainty ?? null;
+                return props.values?.[attribute.id]?.certainty ?? null;
             };
 
             const hasComment = attribute => {
-                return state.attributeValues[attribute.id]?.comments_count > 0;
+                return props.values[attribute.id]?.comments_count > 0;
             };
             const hasBookmarks = attribute => {
-                return metadataAddon.value && metadataAddon.value(attribute.thesaurus_url);
+                return props.metadataAddon && props.metadataAddon(attribute.thesaurus_url);
             };
 
             const inactiveMetadataClass = inactive => {
@@ -666,48 +572,52 @@
                 }
             };
 
-            const attrs = context.attrs;
+            const isHovered = index => {
+                return state.hovered === index;
+            };
+
+            const isAttributeDisabled = attribute => {
+                if(props.disabled) {
+                    return true;
+                }
+                return state.hiddenAttributeList[attribute.id] || isDisabledInModeration(attribute.id);
+            };
+
+            const attrs = useAttrs();
             // DATA
             const attrRefs = ref({});
             const state = reactive({
-                attributeList: attributes,
-                attributeValues: values,
                 rootAttributeValues: {},
                 visibleAttributeNotes: {},
                 changeTracker: {
                     local: {},
                     external: {},
                 },
+                dragging: false,
                 entity: computed(_ => entityStore.selectedEntity),
                 dynamicSelectionList: computed(_ => {
                     const list = [];
-                    state.attributeList.forEach(a => {
+                    props.attributes.forEach(a => {
                         if(a.root_attribute_id) {
                             list.push(a.root_attribute_id);
                         }
                     });
                     return list;
                 }),
-                hoverStates: new Array(attributes.value.length).fill(false),
-                expansionStates: new Array(attributes.value.length).fill(false),
-                componentLoaded: computed(_ => state.attributeValues),
-                isHoveringPossible: computed(_ => {
-                    return !!attrs.onReorderList || !!attrs.onEditElement || !!attrs.onRequireElement || !!attrs.onRemoveElement || !!attrs.onDeleteElement;
-                }),
+                hovered: -1,
+                expansionStates: new Array(props.attributes.length).fill(false),
                 hiddenAttributeList: computed(_ => {
-                    if(!state.componentLoaded) return {};
-
                     const list = {};
-                    for(let i = 0; i < hiddenAttributes.value.length; i++) {
-                        const disId = hiddenAttributes.value[i];
+                    for(let i = 0; i < props.hiddenAttributes.length; i++) {
+                        const disId = props.hiddenAttributes[i];
                         list[disId] = true;
                     }
                     return list;
                 }),
-                hideLabels: computed(_ => options.value.hide_labels),
-                hideEntityLink: computed(_ => options.value.hide_entity_link),
-                ignoreMetadata: computed(_ => options.value.ignore_metadata),
-                itemClasses: computed(_ => options.value.item_classes),
+                hideLabels: computed(_ => props.options.hide_labels),
+                hideEntityLink: computed(_ => props.options.hide_entity_link),
+                ignoreMetadata: computed(_ => props.options.ignore_metadata),
+                itemClasses: computed(_ => props.options.item_classes),
             });
 
             const initializeTooltips = _ => {
@@ -726,7 +636,7 @@
             // ON MOUNTED
             onMounted(_ => {
                 state.dynamicSelectionList.forEach(rootId => {
-                    const attrValue = state.attributeValues[rootId].value;
+                    const attrValue = props.values[rootId].value;
                     if(attrValue) {
                         handleSelectionUpdate({
                             elemId: rootId,
@@ -748,43 +658,41 @@
                 translateConcept,
                 getConceptNote,
                 // LOCAL
-                attributeChanged,
-                certainty,
-                handleSelectionUpdate,
                 additionalRowClasses,
+                addModerationStateClasses,
+                attributeChanged,
                 attributeClasses,
+                broadcastAttributeChanges,
+                certainty,
                 expandedClasses,
-                onAttributeExpand,
-                isInModeration,
-                isDisabledInModeration,
-                addModerationStateClasses,
-                toggleAttributeValue,
-                handleModeration,
+                getAttributeChangeIndicator,
+                getAttributeChangeIndicatorDescription,
+                getCertaintyStyle,
+                getDirtyValues,
                 handleEditModeration,
-                onEnter,
-                onLeave,
+                handleLabelClick,
+                handleModeration,
                 handleMove,
+                handleSelectionUpdate,
                 handleUpdate,
-                getCertaintyStyle,
-                getDirtyValues,
-                updateDirtyState,
-                resetListValues,
-                undirtyList,
-                broadcastAttributeChanges,
                 hasAttributeChangeIndicator,
-                getAttributeChangeIndicator,
-                getAttributeChangeIndicatorDescription,
-                setRef,
-                onEditHandler,
-                onRequireHandler,
-                onRemoveHandler,
-                onDeleteHandler,
-                onMetadataHandler,
-                hasEmitter,
-                hasComment,
                 hasBookmarks,
+                hasComment,
+                hasEmitter,
                 inactiveMetadataClass,
-                handleLabelClick,
+                isAttributeDisabled,
+                isDisabledInModeration,
+                isHovered,
+                isInModeration,
+                onAttributeExpand,
+                onEnter,
+                onLeave,
+                onMetadataHandler,
+                resetListValues,
+                setRef,
+                toggleAttributeValue,
+                undirtyList,
+                updateDirtyState,
                 // STATE
                 attrRefs,
                 state,
diff --git a/resources/js/components/DataModel.vue b/resources/js/components/DataModel.vue
deleted file mode 100644
index d28a6e65a..000000000
--- a/resources/js/components/DataModel.vue
+++ /dev/null
@@ -1,487 +0,0 @@
-<template>
-    <div
-        v-dcan="'entity_data_write|entity_data_read'"
-        class="row d-flex flex-row overflow-hidden h-100"
-    >
-        <div class="col-md-2 py-2 h-100 d-flex flex-column bg-light-dark">
-            <h4 class="d-flex flex-row gap-2 align-items-center">
-                {{ t('main.datamodel.entity.title') }}
-                <button
-                    type="button"
-                    class="btn btn-outline-success btn-sm"
-                    @click="addEntityType()"
-                >
-                    <i class="fas fa-fw fa-plus" /> {{ t('main.datamodel.entity.add_button') }}
-                </button>
-            </h4>
-            <EntityTypeList
-                class="col px-0 h-100 d-flex flex-column"
-                :data="state.entityTypes"
-                :selected-id="state.selectedEntityType"
-                @delete-element="requestDeleteEntityType"
-                @duplicate-element="duplicateEntityType"
-                @edit-element="editEntityType"
-                @select-element="setEntityType"
-            />
-        </div>
-        <div class="col-md-6 py-2 h-100 bg-light-dark rounded-end ">
-            <router-view />
-        </div>
-        <div class="col-md-4 py-2 h-100 d-flex flex-column">
-            <div class="d-flex flex-row justify-content-between">
-                <h4 class="d-flex flex-row gap-2 align-items-center">
-                    {{ t('main.datamodel.attribute.title') }}
-                    <button
-                        type="button"
-                        class="btn btn-outline-success btn-sm"
-                        @click="createAttribute()"
-                    >
-                        <i class="fas fa-fw fa-plus" /> {{ t('main.datamodel.attribute.add_button') }}
-                    </button>
-                </h4>
-                <div class="dropdown">
-                    <span
-                        id="dme-attribute-list-options-dropdown"
-                        class="clickable text-body align-middle"
-                        data-bs-toggle="dropdown"
-                        role="button"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                    >
-                        <i class="fas fa-fw fa-ellipsis-vertical" />
-                    </span>
-                    <div
-                        class="dropdown-menu"
-                        aria-labelledby="dme-attribute-list-options-dropdown"
-                    >
-                        <a
-                            href="#"
-                            class="dropdown-item"
-                            @click.prevent="state.showHiddenAttributes = !state.showHiddenAttributes"
-                        >
-                            <span v-show="state.showHiddenAttributes">
-                                <i class="fas fa-fw fa-eye-slash" />
-                                {{ t('main.datamodel.attribute.hide_hidden') }}
-                            </span>
-                            <span v-show="!state.showHiddenAttributes">
-                                <i class="fas fa-fw fa-eye" />
-                                {{ t('main.datamodel.attribute.show_hidden') }}
-                            </span>
-                        </a>
-                        <a
-                            href="#"
-                            class="dropdown-item"
-                            @click.prevent="state.showAttributesInGroups = !state.showAttributesInGroups"
-                        >
-                            <span v-show="state.showAttributesInGroups">
-                                <i class="fas fa-fw fa-list" />
-                                {{ t('main.datamodel.attribute.separated') }}
-                            </span>
-                            <span v-show="!state.showAttributesInGroups">
-                                <i class="fas fa-fw fa-table-list" />
-                                {{ t('main.datamodel.attribute.in_groups') }}
-                            </span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="col overflow-hidden mt-2 d-flex flex-column">
-                <attribute-list
-                    :group="{ name: 'attribute-selection', pull: true, put: false }"
-                    :classes="'mx-2 px-2 py-3 rounded-3 bg-secondary bg-opacity-10'"
-                    :attributes="state.systemAttributeList"
-                    :values="[]"
-                    :options="{ 'hide_labels': true }"
-                    :selections="{}"
-                    :is-source="true"
-                />
-                <hr>
-                <div class="d-flex flex-row justify-content-between align-items-center mb-2">
-                    <div class="input-group w-50">
-                        <span
-                            id="dme-attribute-search"
-                            class="input-group-text"
-                        >
-                            <i class="fas fa-fw fa-search" />
-                        </span>
-                        <input
-                            v-model="state.attributeQuery"
-                            :placeholder="t('global.search')"
-                            type="text"
-                            class="form-control"
-                        >
-                    </div>
-                    <div
-                        class="btn-group btn-group-sm"
-                        role="group"
-                    >
-                        <button
-                            v-if="state.showAttributesInGroups"
-                            type="button"
-                            class="btn btn-outline-primary"
-                            :title="t('main.datamodel.expand_groups')"
-                            @click="setAttributeGroupExpand(true)"
-                        >
-                            <i class="fas fa-fw fa-angles-down" />
-                        </button>
-                        <button
-                            v-if="state.showAttributesInGroups"
-                            type="button"
-                            class="btn btn-outline-primary"
-                            :title="t('main.datamodel.collapse_groups')"
-                            @click="setAttributeGroupExpand(false)"
-                        >
-                            <i class="fas fa-fw fa-angles-up" />
-                        </button>
-                        <button
-                            type="button"
-                            class="btn btn-outline-primary"
-                            :class="{ 'active': state.sortAttributes }"
-                            @click="state.sortAttributes = !state.sortAttributes"
-                        >
-                            <span
-                                v-if="state.sortAttributes"
-                                :title="t('main.datamodel.sort_by_name')"
-                            >
-                                <i class="fas fa-fw fa-arrow-down-a-z" />
-                            </span>
-                            <span
-                                v-if="!state.sortAttributes"
-                                :title="t('main.datamodel.sort_by_creation_date')"
-                            >
-                                <i class="fas fa-fw fa-arrow-down-1-9" />
-                            </span>
-                        </button>
-                    </div>
-                </div>
-                <div
-                    v-if="state.showAttributesInGroups && state.attributeList.length > 0"
-                    class="col overflow-hidden d-flex flex-column"
-                >
-                    <div
-                        id="dme-attribute-list-accordion"
-                        ref="accordionRef"
-                        class="accordion accordion-flush flex-grow-1 overflow-y-auto overflow-x-hidden pe-2"
-                    >
-                        <template
-                            v-for="([type, attrGrp], index) in state.sortedAttributeListGroups"
-                            :key="`dme-attribute-list-${type}-grp`"
-                        >
-                            <div
-                                v-show="attributeGroupHasItems(attrGrp)"
-                                class="accordion-item"
-                                :class="{
-                                    'border-bottom': index == state.sortedAttributeListGroups.length - 1,
-                                }"
-                            >
-                                <h2 class="accordion-header">
-                                    <button
-                                        class="accordion-button collapsed"
-                                        :class="{ 'text-muted': attributeGroupItemCount(attrGrp) == 0 }"
-                                        type="button"
-                                        data-bs-toggle="collapse"
-                                        :data-bs-target="`#dme-attribute-list-${type}-grp-container`"
-                                        aria-expanded="false"
-                                        :aria-controls="`dme-attribute-list-${type}-grp-container`"
-                                    >
-                                        <span class="flex-fill">
-                                            <span v-if="isFromPlugin(type)">
-                                                {{ t(getPluginLabel(type)) }}
-                                                <i class="fas fa-fw fa-puzzle-piece" />
-                                            </span>
-                                            <span v-else>
-                                                {{ t(`global.attributes.${type}`) }}
-                                            </span>
-                                        </span>
-                                        <span
-                                            class="badge bg-primary mx-2 d-flex flex-row"
-                                            :class="{ 'bg-opacity-50': attributeGroupItemCount(attrGrp) == 0 }"
-                                        >
-                                            <span>{{ attributeGroupItemCount(attrGrp) }}</span>
-                                            <span>/</span>
-                                            <span>{{ attrGrp.length }}</span>
-                                        </span>
-                                    </button>
-                                    <!--
-                                        This was really useful, when adding multiple attributes of the same type
-                                        But with the bootstrap accordion, it could not be put on the header.
-                                        It would be nice to put it on the header of a custom accordion component. [SO]
-                                    -->
-                                    <!--
-                                    <button
-                                        class="btn btn-sm btn-outline-success"
-                                        @click.stop="createAttribute(type)"
-                                    >
-                                        +
-                                    </button> -->
-                                </h2>
-                                <div
-                                    :id="`dme-attribute-list-${type}-grp-container`"
-                                    class="accordion-collapse collapse"
-                                >
-                                    <div class="accordion-body px-2 pb-3 pt-0">
-                                        <attribute-list
-                                            :group="{ name: `attribute-selection-${type}`, pull: true, put: false }"
-                                            :attributes="attrGrp"
-                                            :hidden-attributes="state.selectedEntityTypeAttributeIds"
-                                            :show-hidden="state.showHiddenAttributes"
-                                            :values="state.attributeListValues"
-                                            :selections="{}"
-                                            :is-source="true"
-                                            :show-info="true"
-                                            @delete-element="onDeleteAttribute"
-                                        >
-                                            <template #after="{ attribute }">
-                                                <AttributeUsageIndicator :count="attribute.entity_types_count" />
-                                            </template>
-                                        </attribute-list>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-                <attribute-list
-                    v-else-if="!state.showAttributesInGroups"
-                    :classes="'pe-2 col overflow-y-auto overflow-x-hidden'"
-                    :group="{ name: 'attribute-selection', pull: true, put: false }"
-                    :attributes="state.attributeList"
-                    :hidden-attributes="state.selectedEntityTypeAttributeIds"
-                    :show-hidden="state.showHiddenAttributes"
-                    :values="state.attributeListValues"
-                    :selections="{}"
-                    :is-source="true"
-                    :show-info="true"
-                    @delete-element="onDeleteAttribute"
-                >
-                    <template #after="{ attribute }">
-                        <AttributeUsageIndicator :count="attribute.entity_types_count" />
-                    </template>
-                </attribute-list>
-                <Alert
-                    v-if="state.attributeList.length == 0"
-                    class="mb-0"
-                    :message="`${t('global.search_no_results_for')} ${state.attributeQuery}`"
-                    :type="'info'"
-                    :noicon="false"
-                    :icontext="t('global.information')"
-                />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import {
-        computed,
-        reactive,
-        ref,
-    } from 'vue';
-
-    import { useI18n } from 'vue-i18n';
-
-    import {
-        useRoute,
-    } from 'vue-router';
-
-    import useAttributeStore from '@/bootstrap/stores/attribute.js';
-    import useEntityStore from '@/bootstrap/stores/entity.js';
-    import useSystemStore from '@/bootstrap/stores/system.js';
-    import router from '%router';
-
-    import AttributeUsageIndicator from '@/components/dme/AttributeUsageIndicator.vue';
-
-    import {
-        getEntityTypeOccurrenceCount,
-        getAttributeOccurrenceCount,
-    } from '@/api.js';
-
-    import {
-        getEntityTypeAttributes,
-        getInitialAttributeValue,
-        translateConcept,
-    } from '@/helpers/helpers.js';
-
-    import {
-        showAddEntityType,
-        showDeleteEntityType,
-        showAddAttribute,
-        showDeleteAttribute,
-        showEditEntityType,
-    } from '@/helpers/modal.js';
-
-    export default {
-        components: {
-            AttributeUsageIndicator,
-        },
-        setup(props, context) {
-            const { t } = useI18n();
-            const currentRoute = useRoute();
-            const attributeStore = useAttributeStore();
-            const entityStore = useEntityStore();
-            const systemStore = useSystemStore();
-
-            // FETCH
-
-            // FUNCTIONS
-            const setEntityType = event => {
-                router.push({
-                    name: 'dmdetail',
-                    params: {
-                        id: event.type.id
-                    }
-                });
-            };
-            const addEntityType = _ => {
-                showAddEntityType();
-            };
-            const duplicateEntityType = event => {
-                entityStore.duplicateEntityType(event.id);
-            };
-            const editEntityType = e => {
-                showEditEntityType(e.type);
-            };
-            const requestDeleteEntityType = event => {
-                getEntityTypeOccurrenceCount(event.type.id).then(data => {
-                    const metadata = {
-                        entityCount: data,
-                    };
-                    showDeleteEntityType(event.type, metadata, _ => {
-                        if(currentRoute.name == 'dmdetail' && currentRoute.params.id == event.type.id) {
-                            router.push({
-                                name: 'dme',
-                            });
-                        }
-                    });
-                });
-            };
-            const createAttribute = _ => {
-                showAddAttribute(null);
-            };
-            const onDeleteAttribute = e => {
-                const attribute = e.element;
-                getAttributeOccurrenceCount(attribute.id).then(data => {
-                    const metadata = {
-                        attributeCount: data,
-                    };
-                    showDeleteAttribute(attribute, metadata);
-                });
-            };
-            const setAttributeGroupExpand = (expand = true) => {
-                const parent = accordionRef.value;
-                const buttons = parent.querySelectorAll('.accordion-button');
-                const containers = parent.querySelectorAll('.accordion-collapse');
-                if(expand) {
-                    buttons.forEach(btn => btn.classList.remove('collapsed'));
-                    containers.forEach(btn => btn.classList.add('show'));
-                } else {
-                    buttons.forEach(btn => btn.classList.add('collapsed'));
-                    containers.forEach(btn => btn.classList.remove('show'));
-                }
-            };
-            const attributeGroupItemCount = (items, onlyVisible = true) => {
-                if(!onlyVisible) {
-                    return items.length;
-                } else {
-                    return items.filter(itm => !state.selectedEntityTypeAttributeIds.includes(itm.id)).length;
-                }
-            };
-            const attributeGroupHasItems = items => {
-                if(state.showHiddenAttributes && items.length > 0) return true;
-
-                return attributeGroupItemCount(items) > 0;
-            };
-
-            const isFromPlugin = datatype => attributeStore.isFromPlugin(datatype);
-            const getPluginLabel = datatype => attributeStore.getPluginAttributeLabel(datatype);
-
-            // DATA
-            const accordionRef = ref(null);
-            const state = reactive({
-                siu: computed(_ => systemStore.getDatatypeDataOf('si-unit')),
-                systemAttributeList: computed(_ => attributeStore.getAttributeListBy('system')),
-                userAttributeList: computed(_ => attributeStore.getAttributeListBy()),
-                attributeList: computed(_ => {
-                    if(!state.sortAttributes) return state.filteredAttributeList;
-
-                    return state.filteredAttributeList.toSorted((a, b) => {
-                        const conceptA = translateConcept(a.thesaurus_url);
-                        const conceptB = translateConcept(b.thesaurus_url);
-                        return conceptA.localeCompare(conceptB);
-                    });
-                }),
-                filteredAttributeList: computed(_ => {
-                    if(!state.attributeQuery) return state.userAttributeList;
-
-                    return state.userAttributeList.filter(attribute => {
-                        return translateConcept(attribute.thesaurus_url).toLowerCase().indexOf(state.attributeQuery.toLowerCase()) > -1;
-                    });
-                }),
-                // set values for all attributes to '', so values in <attribute-list> are existant
-                attributeListValues: computed(_ => {
-                    if(!state.attributeList) return;
-                    let data = {};
-                    for(let i = 0; i < state.attributeList.length; i++) {
-                        let a = state.attributeList[i];
-                        data[a.id] = {
-                            value: getInitialAttributeValue(a, 'datatype'),
-                        };
-                    }
-                    return data;
-                }),
-                attributeListGroups: computed(_ => {
-                    const grps = {};
-                    state.attributeList.forEach(a => {
-                        if(!grps[a.datatype]) {
-                            grps[a.datatype] = [];
-                        }
-                        grps[a.datatype].push(a);
-                    });
-                    return grps;
-                }),
-                sortedAttributeListGroups: computed(_ => {
-                    const groupList = Object.entries(state.attributeListGroups);
-
-                    return groupList.sort((a, b) => {
-                        const labelA = isFromPlugin(a[0]) ?
-                            t(getPluginLabel(a[0])) :
-                            t(`global.attributes.${a[0]}`);
-                        const labelB = isFromPlugin(b[0]) ?
-                            t(getPluginLabel(b[0])) :
-                            t(`global.attributes.${b[0]}`);
-                        return labelA.localeCompare(labelB);
-                    });
-                }),
-                showHiddenAttributes: false,
-                entityTypes: computed(_ => Object.values(entityStore.entityTypes)),
-                showAttributesInGroups: true,
-                sortAttributes: true,
-                attributeQuery: '',
-                selectedEntityType: computed(_ => parseInt(currentRoute.params.id)),
-                selectedEntityTypeAttributeIds: computed(_ => state.selectedEntityType ? getEntityTypeAttributes(state.selectedEntityType).map(a => a.id) : []),
-            });
-
-            // RETURN
-            return {
-                t,
-                // HELPERS
-                // LOCAL
-                setEntityType,
-                addEntityType,
-                duplicateEntityType,
-                editEntityType,
-                requestDeleteEntityType,
-                createAttribute,
-                onDeleteAttribute,
-                setAttributeGroupExpand,
-                attributeGroupItemCount,
-                attributeGroupHasItems,
-                isFromPlugin,
-                getPluginLabel,
-                // STATE
-                accordionRef,
-                state,
-            };
-        },
-    };
-</script>
diff --git a/resources/js/components/DataModelDetailView.vue b/resources/js/components/DataModelDetailView.vue
deleted file mode 100644
index 4a2f66531..000000000
--- a/resources/js/components/DataModelDetailView.vue
+++ /dev/null
@@ -1,599 +0,0 @@
-<template>
-    <div
-        v-if="state.entityAvailable"
-        class="h-100 d-flex flex-column"
-    >
-        <h4>
-            {{ t('main.datamodel.detail.properties.title') }}
-            <small>
-                {{ translateConcept(state.entityType.thesaurus_url) }}
-            </small>
-        </h4>
-        <div
-            v-if="state.entityType.id"
-            class="col d-flex flex-column"
-        >
-            <form
-                role="form"
-                @submit.prevent="updateEntityType"
-            >
-                <div class="row mb-3">
-                    <div class="offset-3 col row align-items-center">
-                        <div class="form-check form-switch">
-                            <input
-                                id="entity-type-root-toggle"
-                                v-model="state.properties.is_root"
-                                class="form-check-input"
-                                type="checkbox"
-                            >
-                            <label
-                                class="form-check-label"
-                                for="entity-type-root-toggle"
-                            >
-                                {{ t('main.datamodel.detail.properties.top_level') }}
-                            </label>
-                        </div>
-                    </div>
-                    <div class="col align-items-center">
-                        <div class="row align-items-center">
-                            <label
-                                for="entity-color"
-                                style="width: min-content;"
-                            >
-                                {{ t('global.color') }}
-                            </label>
-                            <div class="col align-items-center">
-                                <input
-                                    v-model="state.properties.color"
-                                    type="color"
-                                    class="form-control form-control-color w-100"
-                                >
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- TODO: This should be handled using a @PluginHook from within the map plugin! -->
-                <div
-                    v-if="state.entityType?.layer?.type"
-                    class="mb-3 row"
-                >
-                    <label
-                        for="entity-geometrytype-ro"
-                        class="col-form-label col-md-3 text-end"
-                    >
-                        {{ t('global.geometry_type') }}
-                    </label>
-                    <div class="col-md-9 d-flex align-items-center">
-                        <span>
-                            {{ state.entityType?.layer?.type ?? "" }}
-                        </span>
-                        <!-- <router-link :to="{name: 'ldetail', params: { id: state.entityType.layer.id }}">
-                            {{ t('main.datamodel.detail.manage_layer') }}
-                        </router-link> -->
-                    </div>
-                </div>
-                <div class="mb-2 row">
-                    <label
-                        for="dme-allowed-sub-entity-types-select"
-                        class="col-form-label col-md-3 text-end"
-                    >
-                        {{ t('main.datamodel.detail.properties.sub_types') }}
-                    </label>
-                    <div class="col-md-9">
-                        <multiselect
-                            id="dme-allowed-sub-entity-types-select"
-                            v-model="state.properties.sub_entity_types"
-                            :object="true"
-                            :mode="'tags'"
-                            :label="'thesaurus_url'"
-                            :track-by="'thesaurus_url'"
-                            :value-prop="'id'"
-                            :options="state.minimalEntityTypes"
-                            :close-on-select="false"
-                            :close-on-deelect="false"
-                            :placeholder="t('global.select.placeholder')"
-                        >
-                            <template #option="{ option }">
-                                {{ translateConcept(option.thesaurus_url) }}
-                            </template>
-                            <template #tag="{ option, handleTagRemove, disabled }">
-                                <div class="multiselect-tag">
-                                    {{ translateConcept(option.thesaurus_url) }}
-                                    <span
-                                        v-if="!disabled"
-                                        class="multiselect-tag-remove"
-                                        @click.prevent
-                                        @mousedown.prevent.stop="handleTagRemove(option, $event)"
-                                    >
-                                        <span class="multiselect-tag-remove-icon" />
-                                    </span>
-                                </div>
-                            </template>
-                        </multiselect>
-                        <div class="mt-2 d-flex flex-row gap-2">
-                            <div
-                                class="btn-group"
-                                role="group"
-                            >
-                                <button
-                                    type="button"
-                                    class="btn btn-outline-success btn-sm"
-                                    @click="addAllEntityTypes"
-                                >
-                                    <i class="fas fa-fw fa-tasks" /> {{ t('global.select_all') }}
-                                </button>
-                                <button
-                                    type="button"
-                                    class="btn btn-outline-danger btn-sm"
-                                    @click="removeAllEntityTypes"
-                                >
-                                    <i class="fas fa-fw fa-times" /> {{ t('global.select_none') }}
-                                </button>
-                            </div>
-                            <div class="col" />
-                            <button
-                                type="submit"
-                                class="btn btn-outline-success btn-sm"
-                                :disabled="!state.propertiesDirty || state.propertiesSaving"
-                            >
-                                <i class="fas fa-fw fa-save" /> {{ t('global.save') }}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </form>
-            <hr>
-            <h3>{{ t('main.datamodel.detail.attribute.title') }}</h3>
-            <div class="col overflow-hidden flex-grow-1 position-relative">
-                <div
-                    v-if="state.entityAttributes.length == 0"
-                    class="position-absolute d-flex justify-content-center align-items-center h-100 w-100 rounded text-muted bg-light-dark border border-3 border-secondary border-dashed"
-                >
-                    <h4>Drag attributes here</h4>
-                </div>
-                <attribute-list
-                    class="h-100 overflow-y-auto overflow-x-hidden"
-                    style="padding-bottom: 10rem;"
-                    :group="{ name: 'attribute-selection', pull: false, put: true }"
-                    :attributes="state.entityAttributes"
-                    :values="state.entityValues"
-                    :disable-drag="false"
-                    :selections="{}"
-                    :show-info="true"
-                    @add-element="addAttributeToEntityType"
-                    @edit-element="onEditEntityAttribute"
-                    @require-element="onRequireEntityAttribute"
-                    @remove-element="onRemoveAttributeFromEntityType"
-                    @reorder-list="reorderEntityAttribute"
-                />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import {
-        computed,
-        onMounted,
-        reactive,
-        watch,
-    } from 'vue';
-
-    import {
-        useRoute,
-    } from 'vue-router';
-
-    import { useI18n } from 'vue-i18n';
-
-    import useEntityStore from '@/bootstrap/stores/entity.js';
-
-    import { useToast } from '@/plugins/toast.js';
-
-    import {
-        getInitialAttributeValue,
-        getEntityTypeAttributes,
-        translateConcept,
-        _cloneDeep,
-    } from '@/helpers/helpers.js';
-
-    import {
-        getAttributeOccurrenceCount,
-    } from '@/api.js';
-
-    import {
-        showEditAttribute,
-        showRemoveAttribute,
-    } from '@/helpers/modal.js';
-
-    export default {
-        setup(props, context) {
-            const { t } = useI18n();
-            const entityStore = useEntityStore();
-            const currentRoute = useRoute();
-            const toast = useToast();
-            // FETCH
-
-            // FUNCTIONS
-            const updateEntityType = _ => {
-                if(!state.entityType.id) return;
-
-                const et = state.entityType;
-
-                entityStore.updateEntityType(et.id, state.properties).then(_ => {
-                    state.propertiesSaving = true;
-                    const name = translateConcept(state.entityType.thesaurus_url);
-                    toast.$toast(
-                        t('main.datamodel.toasts.updated_type.msg', {
-                            name: name
-                        }),
-                        t('main.datamodel.toasts.updated_type.title'),
-                        {
-                            channel: 'success',
-                        }
-                    );
-                }).finally(_ => {
-                    state.propertiesSaving = false;
-                });
-            };
-            const addAllEntityTypes = _ => {
-                state.properties.sub_entity_types = state.minimalEntityTypes.slice();
-            };
-            const removeAllEntityTypes = _ => {
-                state.properties.sub_entity_types = [];
-            };
-            const addAttributeToEntityType = async e => {
-                try {
-                    const data = await entityStore.addEntityTypeAttribute(state.entityType.id, e.element.id, e.to + 1);
-                    if(e.element.is_system && e.element.datatype == 'system-separator') {
-                        showEditAttribute(data.id, state.entityType.id, {
-                            is_system: e.element.is_system,
-                            datatype: data.datatype,
-                            pivot: data.pivot,
-                        });
-                    }
-                } catch(e) {
-                    console.error(e);
-                    const errorMessage = e?.response?.data?.error || 'Unknown error occured!';
-                    toast.$toast(
-                        errorMessage,
-                        t('global.error.alert_title'),
-                        {
-                            channel: 'danger',
-                        }
-                    );
-                }
-            };
-            const onEditEntityAttribute = e => {
-                showEditAttribute(e.element.id, state.entityType.id, {
-                    is_system: e.element.is_system,
-                    datatype: e.element.datatype,
-                    pivot: e.element.pivot,
-                });
-            };
-            const onRequireEntityAttribute = e => {
-                const attribute = state.entityAttributes.find(attribute => {
-                    return attribute.id == e.element.id;
-                });
-                if(attribute) {
-                    const isRequired = e.active === true;
-                    const metadata = {
-                        required: isRequired,
-                    };
-                    const attributeId = e.element.id;
-                    const entityAttributeId = e.element.pivot.id;
-                    entityStore.patchEntityMetadata(
-                        state.entityType.id,
-                        attributeId,
-                        entityAttributeId,
-                        metadata,
-                    ).then(_ => {
-                        if(!attribute.pivot.metadata) {
-                            attribute.pivot.metadata = {};
-                        }
-                        attribute.pivot.metadata.required = isRequired;
-                    });
-                }
-            };
-            const onRemoveAttributeFromEntityType = e => {
-                const etid = currentRoute.params.id;
-                const aid = e.element.id;
-                const id = e.element.pivot.id;
-                if(e.modal) {
-                    if(e.element.is_system && e.element.datatype == 'system-separator') {
-                        showRemoveAttribute(etid, aid, id, {
-                            is_system: e.element.is_system,
-                            datatype: e.element.datatype,
-                            pivot: e.element.pivot,
-                        });
-                    } else {
-                        getAttributeOccurrenceCount(aid, etid).then(cnt => {
-                            showRemoveAttribute(etid, aid, id, {
-                                cnt: cnt
-                            });
-                        });
-                    }
-                } else {
-                    entityStore.removeEntityTypeAttribute(id, etid);
-                }
-            };
-            const reorderEntityAttribute = e => {
-                entityStore.reorderAttributes(currentRoute.params.id, e.element.id, e.from, e.to);
-            };
-
-            const getDefaultPropertyValues = function () {
-                return {
-                    id: null,
-                    is_root: undefined,
-                    sub_entity_types: [],
-                    color: undefined,
-                };
-            };
-
-            // DATA
-            const state = reactive({
-                entityType: computed(_ => {
-                    const entityType = _cloneDeep(entityStore.getEntityType(currentRoute.params.id));
-
-                    // We need to ensure that sub_entity_types is set
-                    // otherwise the dirties calculation may fail.
-                    if(!entityType.sub_entity_types)
-                        entityType.sub_entity_types = [];
-                    return entityType;
-                }),
-                propertiesDirty: computed(_ => {
-                    if(!state.entityType) return false;
-                    const rootDirty = state.entityType.is_root !== state.properties.is_root;
-                    const colorDirty = state.entityType.color !== state.properties.color;
-                    const subTypesDirty = state.entityType.sub_entity_types.length !== state.properties.sub_entity_types.length ||
-                        state.properties.sub_entity_types.every((v, i) => v.id !== state.entityType.sub_entity_types[i].id);
-
-                    return rootDirty || colorDirty || subTypesDirty;
-                }),
-                propertiesSaving: false,
-                properties: getDefaultPropertyValues(),
-                entityAttributes: computed(_ => getEntityTypeAttributes(currentRoute.params.id)),
-                entityValues: computed(_ => {
-                    let data = {};
-                    if(!state.entityAttributes) return data;
-                    for(let i = 0; i < state.entityAttributes.length; i++) {
-                        const curr = state.entityAttributes[i];
-                        // several datatypes require a "valid"/non-string v-model
-                        data[curr.id] = {
-                            value: getInitialAttributeValue(curr, 'datatype'),
-                        };
-                    }
-                    return data;
-                }),
-                entitySelections: {},
-                entityDependencies: [],
-                entityAvailable: computed(_ => !!state.entityType),
-                selectedDependency: {
-                    attribute: {},
-                    operator: undefined,
-                    value: undefined
-                },
-                depends: {
-                    attributes: [],
-                    values: []
-                },
-                minimalEntityTypes: computed(_ => {
-                    return Object.values(entityStore.entityTypes).map(et => ({
-                        id: et.id,
-                        thesaurus_url: et.thesaurus_url
-                    }));
-                }),
-                openedModal: '',
-                modalSelectedAttribute: {},
-                modalSelectedEntityType: {},
-                attributeValueCount: 0,
-                dependencyOperators: computed(_ => {
-                    if(!state.selectedDependency.attribute) return [];
-                    switch(state.selectedDependency.attribute.datatype) {
-                        case 'boolean':
-                            return [
-                                { id: '=' }
-                            ];
-                        case 'double':
-                        case 'integer':
-                        case 'date':
-                        case 'percentage':
-                            return [
-                                { id: '<' },
-                                { id: '>' },
-                                { id: '=' },
-                            ];
-                        default:
-                            return [
-                                { id: '=' }
-                            ];
-                    }
-                }),
-                dependencyType: computed(_ => {
-                    if(!state.selectedDependency.attribute) return '';
-                    switch(state.selectedDependency.attribute.datatype) {
-                        case 'boolean':
-                            return 'boolean';
-                        case 'double':
-                            return 'double';
-                        case 'integer':
-                        case 'date':
-                        case 'percentage':
-                            return 'integer';
-                        case 'string-sc':
-                        case 'string-mc':
-                            return 'select';
-                        default:
-                            return 'string';
-                    }
-                }),
-                editEntityAttributeDisabled: computed(_ => {
-                    return !state.modalSelectedAttribute ||
-                        // Either all or none of the deps must be set to be valid
-                        !(
-                            (
-                                state.selectedDependency.attribute &&
-                                state.selectedDependency.attribute.id &&
-                                state.selectedDependency.operator &&
-                                state.selectedDependency.operator.id &&
-                                state.selectedDependency.value
-                            )
-                            ||
-                            (
-                                (
-                                    !state.selectedDependency.attribute ||
-                                    !state.selectedDependency.attribute.id
-                                ) &&
-                                (
-                                    !state.selectedDependency.operator ||
-                                    !state.selectedDependency.operator.id
-                                ) &&
-                                !state.selectedDependency.value
-                            )
-                        )
-                        ;
-                }),
-            });
-
-            function updateProperties(entityType) {
-                if(entityType && entityType.id) {
-                    state.properties.id = entityType.id;
-                    state.properties.is_root = entityType.is_root;
-                    state.properties.sub_entity_types = entityType.sub_entity_types;
-                    state.properties.color = entityType.color;
-                } else {
-                    state.properties = getDefaultPropertyValues();
-                }
-            }
-
-            onMounted(() => {
-                updateProperties(state.entityType);
-            });
-
-            watch(() => state.entityType, (newValue, oldValue) => {
-                if(newValue?.id !== oldValue?.id) {
-                    updateProperties(newValue);
-                }
-            }, { deep: true });
-
-            // RETURN
-            return {
-                t,
-                // HELPERS
-                translateConcept,
-                // LOCAL
-                updateEntityType,
-                addAllEntityTypes,
-                removeAllEntityTypes,
-                addAttributeToEntityType,
-                onEditEntityAttribute,
-                onRequireEntityAttribute,
-                onRemoveAttributeFromEntityType,
-                reorderEntityAttribute,
-                // PROPS
-                // STATE
-                state,
-            };
-        },
-        // methods: {
-        //     editEntityAttribute(attribute, options) {
-        //         const vm = this;
-        //         if(vm.editEntityAttributeDisabled) return;
-        //         const aid = attribute.id;
-        //         const ctid = attribute.entity_type_id;
-        //         let data = {
-        //             d_attribute: options.attribute.id,
-        //             d_operator: options.operator.id
-        //         };
-        //         data.d_value = vm.getDependencyValue(options.value, options.attribute.datatype);
-        //         $httpQueue.add(() => vm.$http.patch(`/editor/dm/entity_type/${ctid}/attribute/${aid}/dependency`, data).then(function(response) {
-        //             vm.hideEditEntityAttributeModal();
-        //         }));
-        //     },
-        //     onEditEntityAttribute(attribute) {
-        //         const ctid = this.entityType.id;
-        //         this.depends.attributes = this.entityAttributes.filter(function(a) {
-        //             return a.id != attribute.id;
-        //         });
-        //         let attrDependency = {};
-        //         for(let k in this.entityDependencies) {
-        //             const attrDeps = this.entityDependencies[k];
-        //             const dep = attrDeps.find(function(ad) {
-        //                 return ad.dependant == attribute.id;
-        //             });
-        //             if(dep) {
-        //                 attrDependency[k] = dep;
-        //             }
-        //         }
-        //         this.setModalSelectedAttribute(attribute);
-        //         if(Object.keys(attrDependency).length) {
-        //             this.setSelectedDependency(attrDependency);
-        //         }
-        //         this.openedModal = 'edit-entity-attribute-modal';
-        //         this.$modal.show('edit-entity-attribute-modal');
-        //     },
-        //     dependencyAttributeSelected(attribute) {
-        //         const vm = this;
-        //         if(!attribute) {
-        //             vm.depends.values = [];
-        //             return;
-        //         }
-        //         const id = attribute.id;
-        //         switch(attribute.datatype) {
-        //             case 'string-sc':
-        //             case 'string-mc':
-        //                 $httpQueue.add(() => vm.$http.get(`/editor/attribute/${id}/selection`).then(function(response) {
-        //                     vm.depends.values = [];
-        //                     const selections = response.data;
-        //                     if(selections) {
-        //                         for(let i=0; i<selections.length; i++) {
-        //                             vm.depends.values.push(selections[i]);
-        //                         }
-        //                     }
-        //                 }));
-        //                 break;
-        //             default:
-        //                 vm.depends.values = [];
-        //                 break;
-        //         }
-        //     },
-        //     getDependencyValue(valObject, type) {
-        //         switch(type) {
-        //             case 'string-sc':
-        //             case 'string-mc':
-        //                 return valObject.concept_url;
-        //             default:
-        //                 return valObject;
-        //         }
-        //     },
-        //     // Modal Methods
-        //     setSelectedDependency(values) {
-        //         if(!values) return;
-        //         let aid;
-        //         // We have an object with only one key
-        //         // Hacky way to get that key
-        //         for(let k in values) {
-        //             aid = k;
-        //             break;
-        //         }
-        //         this.selectedDependency.attribute = this.entityAttributes.find(function(a) {
-        //             return a.id == aid;
-        //         });
-        //         this.selectedDependency.operator = {id: values[aid].operator};
-        //         if(this.selectedDependency.attribute) {
-        //             switch(this.selectedDependency.attribute.datatype) {
-        //                 case 'string-sc':
-        //                 case 'string-mc':
-        //                     this.selectedDependency.value = {
-        //                         concept_url: values[aid].value
-        //                     };
-        //                     break;
-        //                 default:
-        //                     this.selectedDependency.value = values[aid].value;
-        //                     break;
-        //             }
-        //         }
-        //     },
-        // },
-    };
-</script>
diff --git a/resources/js/components/EntityTypeList.vue b/resources/js/components/EntityTypeList.vue
deleted file mode 100644
index 801ad3988..000000000
--- a/resources/js/components/EntityTypeList.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<template>
-    <div class="entity-type-list">
-        <div class="mb-2">
-            <ListToolbar v-model="state.order" />
-        </div>
-        <div class="list-group overflow-y-auto">
-            <Alert
-                v-if="state.entries.length > 0 && state.sortedEntries.length === 0"
-                type="info"
-                :message="t('global.search_no_results_for') + ' ' + state.order.text"
-            />
-            <a
-                v-for="(entry, i) in state.sortedEntries"
-                :key="i"
-                href="#"
-                class="list-group-item list-group-item-action d-flex flex-row align-items-center py-1 px-3"
-                :class="{ 'active': entry.id == selectedId }"
-                @click.prevent="selectEntry(entry)"
-                @mouseenter="onEnter(i)"
-                @mouseleave="onLeave(i)"
-            >
-                <div class="d-flex flex-fill">
-                    <span class="flex-fill">
-                        {{ translateConcept(entry.thesaurus_url) }}
-                    </span>
-                </div>
-                <div
-                    v-if="state.hasOnHoverListener"
-                    v-show="state.hoverStates[i]"
-                    class="ms-auto btn-fab-list btn-fab-list-sm bg-white position-absolute z-1 end-0 me-2"
-                    :class="activeClasses(entry)"
-                >
-                    <button
-                        v-if="state.hasEditListener"
-                        class="btn btn-outline-info btn-fab rounded-circle"
-                        data-bs-toggle="popover"
-                        :data-content="t('global.edit')"
-                        data-trigger="hover"
-                        data-placement="bottom"
-                        @click="onEdit(entry)"
-                    >
-                        <i
-                            class="fas fa-fw fa-xs fa-edit"
-                            style="vertical-align: 0;"
-                        />
-                    </button>
-                    <button
-                        v-if="state.hasDuplicateListener"
-                        class="btn btn-outline-primary btn-fab rounded-circle"
-                        data-bs-toggle="popover"
-                        :data-content="t('global.duplicate')"
-                        data-trigger="hover"
-                        data-placement="bottom"
-                        @click="onDuplicate(entry)"
-                    >
-                        <i
-                            class="fas fa-fw fa-xs fa-clone"
-                            style="vertical-align: 0;"
-                        />
-                    </button>
-                    <button
-                        v-if="state.hasDeleteListener"
-                        class="btn btn-outline-danger btn-fab rounded-circle"
-                        data-bs-toggle="popover"
-                        :data-content="t('global.delete')"
-                        data-trigger="hover"
-                        data-placement="bottom"
-                        @click="onDelete(entry)"
-                    >
-                        <i
-                            class="fas fa-fw fa-xs fa-trash"
-                            style="vertical-align: 0;"
-                        />
-                    </button>
-                </div>
-            </a>
-        </div>
-    </div>
-</template>
-
-<script>
-    import {
-        computed,
-        onMounted,
-        reactive,
-        toRefs,
-    } from 'vue';
-
-    import { useI18n } from 'vue-i18n';
-
-    import {
-        _cloneDeep,
-        translateConcept,
-    } from '@/helpers/helpers.js';
-    import ListToolbar from './forms/ListToolbar.vue';
-
-    export default {
-        components: {
-            ListToolbar,
-        },
-        props: {
-            data: {
-                type: Array,
-                required: true
-            },
-            selectedId: {
-                type: Number,
-                required: false,
-                default: -1,
-            },
-            onDeleteElement: {
-                type: Function,
-                required: false,
-            },
-            onDuplicateElement: {
-                type: Function,
-                required: false,
-            },
-            onEditElement: {
-                type: Function,
-                required: false,
-            },
-            onSelectElement: {
-                type: Function,
-                required: false,
-            },
-        },
-        setup(props, context) {
-            const { t } = useI18n();
-            const {
-                data,
-                selectedId,
-                onDeleteElement,
-                onDuplicateElement,
-                onEditElement,
-            } = toRefs(props);
-
-            // FETCH
-
-            // FUNCTIONS
-            const onEnter = i => {
-                state.hoverStates[i] = true;
-            };
-            const onLeave = i => {
-                state.hoverStates[i] = false;
-            };
-            const activeClasses = entry => {
-                // if(entry.id != selectedId.value) return [];
-
-                return ['badge', 'rounded-pill', 'bg-light'];
-            };
-            const selectEntry = entityType => {
-                context.emit('select-element', { type: entityType });
-            };
-            const onEdit = entityType => {
-                context.emit('edit-element', { type: entityType });
-            };
-            const onDuplicate = entityType => {
-                context.emit('duplicate-element', { id: entityType.id });
-            };
-            const onDelete = entityType => {
-                context.emit('delete-element', { type: entityType });
-            };
-
-            // DATA
-            const state = reactive({
-                hoverStates: new Array(data.value.length).fill(false),
-                entries: computed(_ => data.value.slice()),
-                sortedEntries: computed(_ => {
-                    let entries = _cloneDeep(state.entries);
-                    entries = entries.map(entry => {
-                        entry.translated = translateConcept(entry.thesaurus_url);
-                        return entry;
-                    });
-                    let filtered = entries.filter((entry) => {
-                        return entry.translated.toLowerCase().includes(state.order.text.toLowerCase());
-                    });
-
-                    if(state.order.type === 'text') {
-                        return filtered.toSorted((a, b) => a.translated.localeCompare(b.translated) * (state.order.asc ? 1 : -1));
-                    } else {
-                        return state.order.asc ? filtered : filtered.reverse();
-                    }
-                }),
-                hasDeleteListener: !!onDeleteElement.value,
-                hasDuplicateListener: !!onDuplicateElement.value,
-                hasEditListener: !!onEditElement.value,
-                hasOnHoverListener: computed(_ => state.hasDeleteListener || state.hasDuplicateListener || state.hasEditListener),
-                order: {
-                    text: '',
-                    asc: true,
-                    type: 'number',
-                }
-            });
-
-            // RETURN
-            return {
-                t,
-                // HELPERS
-                translateConcept,
-                // LOCAL
-                onEnter,
-                onLeave,
-                activeClasses,
-                selectEntry,
-                onEdit,
-                onDuplicate,
-                onDelete,
-                // STATE
-                state,
-            };
-        },
-    };
-</script>
diff --git a/resources/js/components/attribute/AttributeListControls.vue b/resources/js/components/attribute/AttributeListControls.vue
new file mode 100644
index 000000000..1236d0102
--- /dev/null
+++ b/resources/js/components/attribute/AttributeListControls.vue
@@ -0,0 +1,50 @@
+<template>
+    <FabButtonList
+        class="position-absolute start-0 top-0"
+        :buttons="buttons"
+    />
+</template>
+
+<script>
+    import { computed } from 'vue';
+    import { useI18n } from 'vue-i18n';
+
+    import { FabButtonList } from 'dhc-components';
+
+    export default {
+        components: {
+            FabButtonList,
+        },
+        emits: [
+            'delete',
+        ],
+        props: {
+            attribute: {
+                type: Object,
+                required: true,
+            },
+        },
+        setup(props, { emit }) {
+            const { t } = useI18n();
+
+            const buttons = computed(() => {
+                return [
+                {
+                    icon: 'fas fa-fw fa-xs fa-trash',
+                    title: t('global.delete'),
+                    classes: 'btn-outline-danger',
+                    action: () => {
+                        emit('delete');
+                    },
+                },
+            ]});
+
+            return {
+                t,
+                buttons,
+            };
+        },
+
+    };
+
+</script>
\ No newline at end of file
diff --git a/resources/js/components/attribute/AttributeSelectionList.vue b/resources/js/components/attribute/AttributeSelectionList.vue
new file mode 100644
index 000000000..6457c6259
--- /dev/null
+++ b/resources/js/components/attribute/AttributeSelectionList.vue
@@ -0,0 +1,420 @@
+<template>
+    <div class="col-md-4 h-100 d-flex flex-column">
+        <header class="d-flex flex-row justify-content-between align-items-center">
+            <slot name="header">
+                <div></div>
+            </slot>
+            <div class="toolbar d-flex gap-1 align-items-center">
+                <button
+                    type="button"
+                    class="btn btn-outline-success btn-sm"
+                    @click="createAttribute()"
+                >
+                    <i class="fas fa-fw fa-plus" />
+                </button>
+                <div class="dropdown">
+                    <span
+                        id="dme-attribute-list-options-dropdown"
+                        class="clickable text-body align-middle"
+                        data-bs-toggle="dropdown"
+                        role="button"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                    >
+                        <i class="fas fa-fw fa-ellipsis-vertical" />
+                    </span>
+                    <div
+                        class="dropdown-menu"
+                        aria-labelledby="dme-attribute-list-options-dropdown"
+                    >
+                        <a
+                            href="#"
+                            class="dropdown-item"
+                            @click.prevent="state.showHiddenAttributes = !state.showHiddenAttributes"
+                        >
+                            <span v-show="state.showHiddenAttributes">
+                                <i class="fas fa-fw fa-eye-slash" />
+                                {{ t('main.datamodel.attribute.hide_hidden') }}
+                            </span>
+                            <span v-show="!state.showHiddenAttributes">
+                                <i class="fas fa-fw fa-eye" />
+                                {{ t('main.datamodel.attribute.show_hidden') }}
+                            </span>
+                        </a>
+                        <a
+                            href="#"
+                            class="dropdown-item"
+                            @click.prevent="state.showAttributesInGroups = !state.showAttributesInGroups"
+                        >
+                            <span v-show="state.showAttributesInGroups">
+                                <i class="fas fa-fw fa-list" />
+                                {{ t('main.datamodel.attribute.separated') }}
+                            </span>
+                            <span v-show="!state.showAttributesInGroups">
+                                <i class="fas fa-fw fa-table-list" />
+                                {{ t('main.datamodel.attribute.in_groups') }}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <div class="col overflow-hidden mt-2 d-flex flex-column">
+            <attribute-list
+                :group="{ name: 'attribute-selection', pull: true, put: false }"
+                :classes="'mx-2 px-2 py-3 rounded-3 bg-secondary bg-opacity-10'"
+                :attributes="state.systemAttributeList"
+                :values="[]"
+                :options="{ 'hide_labels': true }"
+                :selections="{}"
+                :is-source="true"
+            />
+            <hr>
+            <div class="d-flex flex-row justify-content-between align-items-center mb-2 gap-2">
+                <div class="input-group w-50 flex-fill">
+                    <span
+                        id="dme-attribute-search"
+                        class="input-group-text"
+                    >
+                        <i class="fas fa-fw fa-search" />
+                    </span>
+                    <input
+                        v-model="state.attributeQuery"
+                        :placeholder="t('global.search')"
+                        type="text"
+                        class="form-control"
+                    >
+                </div>
+                <div
+                    class="btn-group btn-group-sm"
+                    role="group"
+                >
+                    <button
+                        v-if="state.showAttributesInGroups"
+                        type="button"
+                        class="btn btn-outline-primary"
+                        :title="t('main.datamodel.expand_groups')"
+                        @click="setAttributeGroupExpand(true)"
+                    >
+                        <i class="fas fa-fw fa-angles-down" />
+                    </button>
+                    <button
+                        v-if="state.showAttributesInGroups"
+                        type="button"
+                        class="btn btn-outline-primary"
+                        :title="t('main.datamodel.collapse_groups')"
+                        @click="setAttributeGroupExpand(false)"
+                    >
+                        <i class="fas fa-fw fa-angles-up" />
+                    </button>
+                    <button
+                        type="button"
+                        class="btn btn-outline-primary"
+                        :class="{ 'active': state.sortAttributes }"
+                        @click="state.sortAttributes = !state.sortAttributes"
+                    >
+                        <span
+                            v-if="state.sortAttributes"
+                            :title="t('main.datamodel.sort_by_name')"
+                        >
+                            <i class="fas fa-fw fa-arrow-down-a-z" />
+                        </span>
+                        <span
+                            v-if="!state.sortAttributes"
+                            :title="t('main.datamodel.sort_by_creation_date')"
+                        >
+                            <i class="fas fa-fw fa-arrow-down-1-9" />
+                        </span>
+                    </button>
+                </div>
+            </div>
+            <div
+                v-if="state.showAttributesInGroups && state.attributeList.length > 0"
+                class="col overflow-hidden d-flex flex-column"
+            >
+                <div
+                    id="dme-attribute-list-accordion"
+                    ref="accordionRef"
+                    class="accordion accordion-flush flex-grow-1 overflow-y-auto overflow-x-hidden pe-2"
+                >
+                    <template
+                        v-for="([type, attrGrp], index) in state.sortedAttributeListGroups"
+                        :key="`dme-attribute-list-${type}-grp`"
+                    >
+                        <div
+                            v-show="attributeGroupHasItems(attrGrp)"
+                            class="accordion-item"
+                            :class="{
+                                'border-bottom': index == state.sortedAttributeListGroups.length - 1,
+                            }"
+                        >
+                            <h2 class="accordion-header">
+                                <button
+                                    class="accordion-button collapsed"
+                                    :class="{ 'text-muted': attributeGroupItemCount(attrGrp) == 0 }"
+                                    type="button"
+                                    data-bs-toggle="collapse"
+                                    :data-bs-target="`#dme-attribute-list-${type}-grp-container`"
+                                    aria-expanded="false"
+                                    :aria-controls="`dme-attribute-list-${type}-grp-container`"
+                                >
+                                    <span class="flex-fill">
+                                        <span v-if="isFromPlugin(type)">
+                                            {{ t(getPluginLabel(type)) }}
+                                            <i class="fas fa-fw fa-puzzle-piece" />
+                                        </span>
+                                        <span v-else>
+                                            {{ t(`global.attributes.${type}`) }}
+                                        </span>
+                                    </span>
+                                    <span
+                                        class="badge bg-primary mx-2 d-flex flex-row"
+                                        :class="{ 'bg-opacity-50': attributeGroupItemCount(attrGrp) == 0 }"
+                                    >
+                                        <span>{{ attributeGroupItemCount(attrGrp) }}</span>
+                                        <span>/</span>
+                                        <span>{{ attrGrp.length }}</span>
+                                    </span>
+                                </button>
+                                <!--
+                                        This was really useful, when adding multiple attributes of the same type
+                                        But with the bootstrap accordion, it could not be put on the header.
+                                        It would be nice to put it on the header of a custom accordion component. [SO]
+                                    -->
+                                <!--
+                                    <button
+                                        class="btn btn-sm btn-outline-success"
+                                        @click.stop="createAttribute(type)"
+                                    >
+                                        +
+                                    </button> -->
+                            </h2>
+                            <div
+                                :id="`dme-attribute-list-${type}-grp-container`"
+                                class="accordion-collapse collapse"
+                            >
+                                <div class="accordion-body px-2 py-3">
+                                    <attribute-list
+                                        :group="{ name: `attribute-selection-${type}`, pull: true, put: false }"
+                                        :attributes="attrGrp"
+                                        :hidden-attributes="state.selectedEntityTypeAttributeIds"
+                                        :show-hidden="state.showHiddenAttributes"
+                                        :values="state.attributeListValues"
+                                        :selections="{}"
+                                        :is-source="true"
+                                        :show-info="true"
+                                        @delete-element="onDeleteAttribute"
+                                    >
+                                        <template #before-container="{ attribute, hovered, dragging }">
+                                            <AttributeListControls
+                                                v-if="hovered && !dragging"
+                                                class="position-absolute start-0 top-50 translate-middle-y"
+                                                :attribute="attribute"
+                                                @delete="onDeleteAttribute(attribute)"
+                                            />
+                                        </template>
+                                        <template #after="{ attribute }">
+                                            <AttributeUsageIndicator :count="attribute.entity_types_count" />
+                                        </template>
+                                    </attribute-list>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <attribute-list
+                v-else-if="!state.showAttributesInGroups"
+                :classes="'pe-2 col overflow-y-auto overflow-x-hidden'"
+                :group="{ name: 'attribute-selection', pull: true, put: false }"
+                :attributes="state.attributeList"
+                :hidden-attributes="state.selectedEntityTypeAttributeIds"
+                :show-hidden="state.showHiddenAttributes"
+                :values="state.attributeListValues"
+                :selections="{}"
+                :is-source="true"
+                :show-info="true"
+            >
+                <template #after="{ attribute, hovered, dragging }">
+                    <AttributeUsageIndicator
+                        v-if="hovered && !dragging"
+                        :count="attribute.entity_types_count"
+                        @delete="onDeleteAttribute"
+                    />
+                </template>
+            </attribute-list>
+            <Alert
+                v-if="state.attributeList.length == 0"
+                class="mb-0"
+                :message="`${t('global.search_no_results_for')} ${state.attributeQuery}`"
+                :type="'info'"
+                :noicon="false"
+                :icontext="t('global.information')"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+    import { useI18n } from 'vue-i18n';
+    import {
+        computed,
+        reactive,
+        ref,
+    } from 'vue';
+
+    import {
+        getAttributeOccurrenceCount,
+    } from '@/api.js';
+
+    import {
+        getInitialAttributeValue,
+        translateConcept,
+    } from '@/helpers/helpers.js';
+
+    import {
+        showAddAttribute,
+        showDeleteAttribute,
+    } from '@/helpers/modal.js';
+
+    import useAttributeStore from '@/bootstrap/stores/attribute.js';
+
+    import AttributeUsageIndicator from '@/components/data-model/AttributeUsageIndicator.vue';
+    import AttributeListControls from '@/components/attribute/AttributeListControls.vue';
+
+    export default {
+        components: {
+            AttributeListControls,
+            AttributeUsageIndicator,
+        },
+        props: {
+            selectedEntityType: {
+                type: Object,
+                required: false,
+                default: null,
+            },
+        },
+        setup(props) {
+            const { t } = useI18n();
+
+            const accordionRef = ref(null);
+            const attributeStore = useAttributeStore();
+            const attributeGroupItemCount = (items, onlyVisible = true) => {
+                if(!onlyVisible) {
+                    return items.length;
+                } else {
+                    return items.filter(itm => !state.selectedEntityTypeAttributeIds.includes(itm.id)).length;
+                }
+            };
+
+            const attributeGroupHasItems = items => {
+                if(state.showHiddenAttributes && items.length > 0) return true;
+
+                return attributeGroupItemCount(items) > 0;
+            };
+
+            const createAttribute = _ => {
+                showAddAttribute(null);
+            };
+            const onDeleteAttribute = attribute => {
+                getAttributeOccurrenceCount(attribute.id).then(data => {
+                    const metadata = {
+                        attributeCount: data,
+                    };
+                    showDeleteAttribute(attribute, metadata);
+                });
+            };
+            const setAttributeGroupExpand = (expand = true) => {
+                const parent = accordionRef.value;
+                const buttons = parent.querySelectorAll('.accordion-button');
+                const containers = parent.querySelectorAll('.accordion-collapse');
+                if(expand) {
+                    buttons.forEach(btn => btn.classList.remove('collapsed'));
+                    containers.forEach(btn => btn.classList.add('show'));
+                } else {
+                    buttons.forEach(btn => btn.classList.add('collapsed'));
+                    containers.forEach(btn => btn.classList.remove('show'));
+                }
+            };
+
+            const isFromPlugin = datatype => attributeStore.isFromPlugin(datatype);
+            const getPluginLabel = datatype => attributeStore.getPluginAttributeLabel(datatype);
+
+            const state = reactive({
+                attributeList: computed(_ => {
+                    if(!state.sortAttributes) return state.filteredAttributeList;
+
+                    return state.filteredAttributeList.toSorted((a, b) => {
+                        const conceptA = translateConcept(a.thesaurus_url);
+                        const conceptB = translateConcept(b.thesaurus_url);
+                        return conceptA.localeCompare(conceptB);
+                    });
+                }),
+                // set values for all attributes to '', so values in <attribute-list> are existant
+                attributeListValues: computed(_ => {
+                    if(!state.attributeList) return;
+                    let data = {};
+                    for(let i = 0; i < state.attributeList.length; i++) {
+                        let a = state.attributeList[i];
+                        data[a.id] = {
+                            value: getInitialAttributeValue(a, 'datatype'),
+                        };
+                    }
+                    return data;
+                }),
+                attributeQuery: '',
+                filteredAttributeList: computed(_ => {
+                    if(!state.attributeQuery) return state.userAttributeList;
+
+                    return state.userAttributeList.filter(attribute => {
+                        return translateConcept(attribute.thesaurus_url).toLowerCase().indexOf(state.attributeQuery.toLowerCase()) > -1;
+                    });
+                }),
+                attributeListGroups: computed(_ => {
+                    const grps = {};
+                    state.attributeList.forEach(a => {
+                        if(!grps[a.datatype]) {
+                            grps[a.datatype] = [];
+                        }
+                        grps[a.datatype].push(a);
+                    });
+                    return grps;
+                }),
+                selectedEntityTypeAttributeIds: computed(_ => props.selectedEntityType ? props.selectedEntityType.map(a => a.id) : []),
+                showHiddenAttributes: false,
+                sortedAttributeListGroups: computed(_ => {
+                    const groupList = Object.entries(state.attributeListGroups);
+
+                    return groupList.sort((a, b) => {
+                        const labelA = isFromPlugin(a[0]) ?
+                            t(getPluginLabel(a[0])) :
+                            t(`global.attributes.${a[0]}`);
+                        const labelB = isFromPlugin(b[0]) ?
+                            t(getPluginLabel(b[0])) :
+                            t(`global.attributes.${b[0]}`);
+                        return labelA.localeCompare(labelB);
+                    });
+                }),
+                showAttributesInGroups: true,
+                sortAttributes: true,
+                systemAttributeList: computed(_ => attributeStore.getAttributeListBy('system')),
+                userAttributeList: computed(_ => attributeStore.getAttributeListBy()),
+
+            })
+
+
+            return {
+                t,
+                state,
+                accordionRef,
+                attributeGroupItemCount,
+                attributeGroupHasItems,
+                createAttribute,
+                getPluginLabel,
+                isFromPlugin,
+                onDeleteAttribute,
+                setAttributeGroupExpand,
+            };
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/resources/js/components/attribute/EntityAttributeListControls.vue b/resources/js/components/attribute/EntityAttributeListControls.vue
new file mode 100644
index 000000000..e18526b8d
--- /dev/null
+++ b/resources/js/components/attribute/EntityAttributeListControls.vue
@@ -0,0 +1,81 @@
+<template>
+    <FabButtonList
+        class="position-absolute start-0 top-0 z-1"
+        :buttons="buttons"
+    />
+</template>
+
+<script>
+    import { computed } from 'vue';
+    import { useI18n } from 'vue-i18n';
+
+    import { FabButtonList } from 'dhc-components';
+
+    export default {
+        components: {
+            FabButtonList,
+        },
+        emits: [
+            'edit',
+            'require',
+            'remove'
+        ],
+        props: {
+            attribute: {
+                type: Object,
+                required: true,
+            },
+        },
+        setup(props, { emit }) {
+            const { t } = useI18n();
+
+            const active = computed(() => {
+                return props.attribute?.pivot?.metadata?.required ?? false;
+            });
+
+            const buttons = computed(() => {
+                const baseIconClass = 'fas fa-xs ';
+                return [
+                    {
+                        icon: baseIconClass + 'fa-sort',
+                        title: t('global.resort'),
+                        action: () => {
+                            // No action needed, just a handle
+                        },
+                    },
+                    {
+                        icon: baseIconClass + 'fa-edit',
+                        title: t('global.edit'),
+                        action: () => {
+                            emit('edit');
+                        },
+                    },
+                    {
+                        icon: 'fas fa-xs fa-asterisk',
+                        title: t('global.required'),
+                        color: active.value ? 'primary' : 'secondary',
+                        active: active.value,
+                        action: () => {
+                            emit('require');
+                        },
+                    },
+                    {
+                        icon: baseIconClass + 'fa-times',
+                        title: t('global.remove'),
+                        classes: 'btn-outline-danger',
+                        action: () => {
+                            emit('remove');
+                        },
+                    },
+                ];
+            });
+
+            return {
+                t,
+                buttons,
+            };
+        },
+
+    };
+
+</script>
\ No newline at end of file
diff --git a/resources/js/components/dme/AttributeUsageIndicator.vue b/resources/js/components/data-model/AttributeUsageIndicator.vue
similarity index 100%
rename from resources/js/components/dme/AttributeUsageIndicator.vue
rename to resources/js/components/data-model/AttributeUsageIndicator.vue
diff --git a/resources/js/components/data-model/DataModel.vue b/resources/js/components/data-model/DataModel.vue
new file mode 100644
index 000000000..2fd2ada63
--- /dev/null
+++ b/resources/js/components/data-model/DataModel.vue
@@ -0,0 +1,112 @@
+<template>
+    <div
+        v-dcan="'entity_data_write|entity_data_read'"
+        class="row d-flex flex-row overflow-hidden h-100 pt-3"
+    >
+        <EntityTypeList
+            class="col-md-2 h-100 d-flex flex-column"
+            :data="state.entityTypes"
+            :selected-id="state.selectedEntityTypeId"
+            @select="setEntityType"
+        >
+            <template #header>
+                <div class="d-flex flex-row gap-2 align-items-center justify-content-between mb-2">
+                    <h2 class="fs-heading fw-bold m-0">
+                        {{ t('main.datamodel.entity.title') }}
+                    </h2>
+                    <div class="toolbar d-flex gap-1 align-items-center">
+                        <button
+                            type="button"
+                            class="btn btn-outline-success btn-sm"
+                            @click="showAddEntityType()"
+                        >
+                            <i class="fas fa-fw fa-plus" />
+                        </button>
+                    </div>
+                </div>
+            </template>
+        </EntityTypeList>
+        <div class="col-md-6 h-100 px-3 pb-3">
+            <router-view />
+        </div>
+        <AttributeSelectionList :selectedEntityType="state.selectedEntityType">
+            <template #header>
+                <h2 class="fs-heading fw-bold m-0">
+                    {{ t('main.datamodel.attribute.title') }}
+                </h2>
+            </template>
+        </AttributeSelectionList>
+    </div>
+</template>
+
+<script>
+    import {
+        computed,
+        reactive,
+    } from 'vue';
+
+    import { useI18n } from 'vue-i18n';
+
+    import {
+        useRoute,
+    } from 'vue-router';
+
+    import useEntityStore from '@/bootstrap/stores/entity.js';
+    import router from '%router';
+
+    import {
+        getEntityTypeAttributes,
+    } from '@/helpers/helpers.js';
+
+    import {
+        getEntityTypeOccurrenceCount,
+    } from '@/api.js';
+
+    import {
+        showAddEntityType,
+    } from '@/helpers/modal.js';
+
+
+    import AttributeSelectionList from '@/components/attribute/AttributeSelectionList.vue';
+
+    export default {
+        components: {
+            AttributeSelectionList
+        },
+        setup(props, context) {
+            const { t } = useI18n();
+            const currentRoute = useRoute();
+            const entityStore = useEntityStore();
+
+            // FETCH
+
+            // FUNCTIONS
+            const setEntityType = event => {
+                router.push({
+                    name: 'dmdetail',
+                    params: {
+                        id: event.type.id
+                    }
+                });
+            };
+
+            // DATA
+            const state = reactive({
+                entityTypes: computed(_ => Object.values(entityStore.entityTypes)),
+                selectedEntityTypeId: computed(_ => parseInt(currentRoute.params.id)),
+                selectedEntityType: computed(_ => {
+                    return getEntityTypeAttributes(state.selectedEntityTypeId)
+                }),
+            });
+
+            // RETURN
+            return {
+                t,
+                state,
+                // LOCAL
+                setEntityType,
+                showAddEntityType,
+            };
+        },
+    };
+</script>
diff --git a/resources/js/components/data-model/DataModelDetailView.vue b/resources/js/components/data-model/DataModelDetailView.vue
new file mode 100644
index 000000000..649fbc5dc
--- /dev/null
+++ b/resources/js/components/data-model/DataModelDetailView.vue
@@ -0,0 +1,382 @@
+<template>
+    <div
+        v-if="state.entityAvailable"
+        class="h-100 d-flex flex-column bg-light-dark rounded border border-1 border-gray h-100 overflow-y-auto"
+    >
+        <header class="d-flex flex-row align-items-center justify-content-between gap-3 border-bottom py-2 px-3">
+            <div class="heading d-flex flex-row align-items-center gap-3 h-100">
+                <div
+                    class="rounded"
+                    :style="{
+                        aspectRatio: '1 / 1',
+                        height: '100%',
+                        backgroundColor: `${color} !important` || '#666666',
+                    }"
+                ></div>
+                <h2 class="m-0 fs-regular fw-bold">
+                    {{ translateConcept(state.entityType.thesaurus_url) }}
+                </h2>
+            </div>
+            <div class="toolbar d-flex flex-row align-items-center gap-4">
+                <IconStatsGroup :value="stats" />
+
+                <button
+                    type="button"
+                    class="btn btn-sm p-0"
+                >
+                    <i class="fas fa-fw fa-sliders" />
+                </button>
+            </div>
+        </header>
+        <div
+            v-if="state.entityType.id"
+            class="col d-flex flex-column position-relative p-3"
+        >
+            <div class="col overflow-hidden flex-grow-1 position-relative">
+                <div
+                    v-if="state.entityAttributes.length == 0"
+                    class="position-absolute d-flex justify-content-center align-items-center h-100 w-100 rounded text-muted bg-light-dark border border-3 border-secondary border-dashed"
+                >
+                    <span class="fw-bold fs-heading">Drag attributes here</span>
+                </div>
+                <attribute-list
+                    class="h-100 overflow-y-auto overflow-x-hidden pt-0"
+                    style="padding-bottom: 10rem;"
+                    :disabled="true"
+                    :group="{ name: 'attribute-selection', pull: false, put: true }"
+                    :attributes="state.entityAttributes"
+                    :values="state.entityValues"
+                    :disable-drag="false"
+                    :selections="{}"
+                    :show-info="true"
+                    @add-element="addAttributeToEntityType"
+                    @reorder-list="reorderEntityAttribute"
+                >
+                    <template #before-container="{ attribute, dragging, hovered }">
+                        <EntityAttributeListControls
+                            v-if="hovered && !dragging"
+                            :attribute="attribute"
+                            class="top-50 translate-middle-y"
+                            @edit="() => onEditEntityAttribute(attribute)"
+                            @require="() => onRequireEntityAttribute(attribute)"
+                            @remove="() => onRemoveAttributeFromEntityType(attribute, true)"
+                        />
+                    </template>
+                </attribute-list>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        computed,
+        onMounted,
+        reactive,
+        watch,
+    } from 'vue';
+
+    import {
+        useRoute,
+    } from 'vue-router';
+
+    import { IconStatsGroup } from 'dhc-components'
+    import { useI18n } from 'vue-i18n';
+    import { useToast } from '@/plugins/toast.js';
+    import {
+        faCodeMerge,
+        faCubes,
+        faLevelDown,
+        faLevelUp,
+    } from '@fortawesome/free-solid-svg-icons';
+
+    import useEntityStore from '@/bootstrap/stores/entity.js';
+
+    import {
+        getInitialAttributeValue,
+        getEntityTypeAttributes,
+        translateConcept,
+        _cloneDeep,
+    } from '@/helpers/helpers.js';
+
+    import {
+        getAttributeOccurrenceCount,
+    } from '@/api.js';
+
+    import {
+        showEditAttribute,
+        showRemoveAttribute,
+    } from '@/helpers/modal.js';
+
+    import EntityAttributeListControls from '@/components/attribute/EntityAttributeListControls.vue';
+    import {
+        isRequired as isAttributeRequired,
+        setRequired as setAttributeRequired
+    } from '@/helpers/attribute.js';
+
+    import EntityTypeSettings from '@/components/data-model/EntityTypeSettings.vue';
+
+
+
+    export default {
+        components: {
+            EntityAttributeListControls,
+            EntityTypeSettings,
+            IconStatsGroup,
+        },
+        setup(props, context) {
+            const { t } = useI18n();
+            const entityStore = useEntityStore();
+            const currentRoute = useRoute();
+            const toast = useToast();
+
+            const addAttributeToEntityType = async e => {
+                try {
+                    const data = await entityStore.addEntityTypeAttribute(state.entityType.id, e.element.id, e.to + 1);
+                    if(e.element.is_system && e.element.datatype == 'system-separator') {
+                        showEditAttribute(data.id, state.entityType.id, {
+                            is_system: e.element.is_system,
+                            datatype: data.datatype,
+                            pivot: data.pivot,
+                        });
+                    }
+                } catch(e) {
+                    console.error(e);
+                    const errorMessage = e?.response?.data?.error || 'Unknown error occured!';
+                    toast.$toast(
+                        errorMessage,
+                        t('global.error.alert_title'),
+                        {
+                            channel: 'danger',
+                        }
+                    );
+                }
+            };
+            const onEditEntityAttribute = attribute => {
+                showEditAttribute(attribute.id, state.entityType.id, {
+                    is_system: attribute.is_system,
+                    datatype: attribute.datatype,
+                    pivot: attribute.pivot,
+                });
+            };
+
+            const onRequireEntityAttribute = async attribute => {
+                if(attribute) {
+                    const isRequired = !isAttributeRequired(attribute);
+                    const metadata = {
+                        required: isRequired,
+                    };
+                    await entityStore.patchEntityMetadata(
+                        state.entityType.id,
+                        attribute.id,
+                        attribute.pivot.id,
+                        metadata,
+                    )
+
+                    console.log(attribute.pivot.metadata);
+                    if(!attribute.pivot.metadata) {
+                        attribute.pivot.metadata = {};
+                    }
+
+                    setAttributeRequired(attribute, isRequired);
+                }
+            };
+            const onRemoveAttributeFromEntityType = (attribute, modal = false) => {
+                const entityTypeId = state.entityType.id;
+                const pivotId = attribute?.pivot?.id;
+                if(modal) {
+                    if(attribute.is_system && attribute.datatype == 'system-separator') {
+                        showRemoveAttribute(entityTypeId, attribute.id, pivotId, {
+                            is_system: attribute.is_system,
+                            datatype: attribute.datatype,
+                            pivot: attribute.pivot,
+                        });
+                    } else {
+                        getAttributeOccurrenceCount(attribute.id, entityTypeId).then(cnt => {
+                            showRemoveAttribute(entityTypeId, attribute.id, pivotId, {
+                                cnt: cnt
+                            });
+                        });
+                    }
+                } else {
+                    entityStore.removeEntityTypeAttribute(pivotId, entityTypeId);
+                }
+            };
+            const reorderEntityAttribute = ({ element, from, to }) => {
+                entityStore.reorderAttributes(currentRoute.params.id, element, from, to);
+            };
+
+            const getDefaultPropertyValues = function () {
+                return {
+                    id: null,
+                    is_root: undefined,
+                    sub_entity_types: [],
+                    color: undefined,
+                };
+            };
+
+            // DATA
+            const state = reactive({
+                entityType: computed(_ => {
+                    const entityType = _cloneDeep(entityStore.getEntityType(currentRoute.params.id));
+
+                    // We need to ensure that sub_entity_types is set
+                    // otherwise the dirties calculation may fail.
+                    if(!entityType.sub_entity_types)
+                        entityType.sub_entity_types = [];
+                    return entityType;
+                }),
+
+                entityAttributes: computed(_ => getEntityTypeAttributes(currentRoute.params.id)),
+                entityValues: computed(_ => {
+                    let data = {};
+                    if(!state.entityAttributes) return data;
+                    for(let i = 0; i < state.entityAttributes.length; i++) {
+                        const curr = state.entityAttributes[i];
+                        // several datatypes require a "valid"/non-string v-model
+                        data[curr.id] = {
+                            value: getInitialAttributeValue(curr, 'datatype'),
+                        };
+                    }
+                    return data;
+                }),
+                entitySelections: {},
+                entityDependencies: [],
+                entityAvailable: computed(_ => !!state.entityType),
+                selectedDependency: {
+                    attribute: {},
+                    operator: undefined,
+                    value: undefined
+                },
+                depends: {
+                    attributes: [],
+                    values: []
+                },
+                openedModal: '',
+                modalSelectedAttribute: {},
+                modalSelectedEntityType: {},
+                attributeValueCount: 0,
+                dependencyOperators: computed(_ => {
+                    if(!state.selectedDependency.attribute) return [];
+                    switch(state.selectedDependency.attribute.datatype) {
+                        case 'boolean':
+                            return [
+                                { id: '=' }
+                            ];
+                        case 'double':
+                        case 'integer':
+                        case 'date':
+                        case 'percentage':
+                            return [
+                                { id: '<' },
+                                { id: '>' },
+                                { id: '=' },
+                            ];
+                        default:
+                            return [
+                                { id: '=' }
+                            ];
+                    }
+                }),
+                dependencyType: computed(_ => {
+                    if(!state.selectedDependency.attribute) return '';
+                    switch(state.selectedDependency.attribute.datatype) {
+                        case 'boolean':
+                            return 'boolean';
+                        case 'double':
+                            return 'double';
+                        case 'integer':
+                        case 'date':
+                        case 'percentage':
+                            return 'integer';
+                        case 'string-sc':
+                        case 'string-mc':
+                            return 'select';
+                        default:
+                            return 'string';
+                    }
+                }),
+                editEntityAttributeDisabled: computed(_ => {
+                    return !state.modalSelectedAttribute ||
+                        // Either all or none of the deps must be set to be valid
+                        !(
+                            (
+                                state.selectedDependency.attribute &&
+                                state.selectedDependency.attribute.id &&
+                                state.selectedDependency.operator &&
+                                state.selectedDependency.operator.id &&
+                                state.selectedDependency.value
+                            )
+                            ||
+                            (
+                                (
+                                    !state.selectedDependency.attribute ||
+                                    !state.selectedDependency.attribute.id
+                                ) &&
+                                (
+                                    !state.selectedDependency.operator ||
+                                    !state.selectedDependency.operator.id
+                                ) &&
+                                !state.selectedDependency.value
+                            )
+                        )
+                        ;
+                }),
+            });
+
+            const color = computed(() => {
+                return state.entityType?.color || '#ff00ff';
+            })
+
+            const stats = computed(() => {
+                if(!state.entityType) return [];
+
+                const entityType = state.entityType;
+
+                const stats = [
+                    {
+                        icon: faLevelUp,
+                        text: entityType?.parents?.length || 0,
+                    },
+                    {
+                        icon: faLevelDown,
+                        text: entityType?.sub_entity_types?.length || 0,
+                    },
+                    {
+                        icon: faCubes,
+                        text: entityType?.entities_count || 0,
+                    },
+                ];
+
+                if(entityType?.is_root) {
+                    stats.unshift({
+                        icon: faCodeMerge,
+                        iconOnly: true,
+                        color: 'primary',
+                    });
+                }
+
+                return stats;
+            })
+
+
+            // RETURN
+            return {
+                t,
+                // HELPERS
+                translateConcept,
+                // LOCAL
+                color,
+                addAttributeToEntityType,
+                onEditEntityAttribute,
+                onRequireEntityAttribute,
+                onRemoveAttributeFromEntityType,
+                reorderEntityAttribute,
+                // PROPS
+                // STATE
+                state,
+                stats,
+            };
+        },
+    };
+</script>
diff --git a/resources/js/components/data-model/EntityTypeList.vue b/resources/js/components/data-model/EntityTypeList.vue
new file mode 100644
index 000000000..a54844c97
--- /dev/null
+++ b/resources/js/components/data-model/EntityTypeList.vue
@@ -0,0 +1,182 @@
+<template>
+    <div class="entity-type-list">
+        <header v-if="$slots.header">
+            <slot name="header"></slot>
+        </header>
+        <div class="mb-2">
+            <ListToolbar v-model="state.order" />
+        </div>
+        <div class="list-group overflow-y-auto">
+            <Alert
+                v-if="state.entries.length > 0 && state.sortedEntityTypes.length === 0"
+                type="info"
+                :message="t('global.search_no_results_for') + ' ' + state.order.text"
+            />
+            <a
+                v-for="(entityType, index) in state.sortedEntityTypes"
+                :key="index"
+                href="#"
+                class="list-group-item list-group-item-action d-flex flex-row align-items-center py-1 px-3"
+                :class="{ 'active': entityType.id == selectedId }"
+                @click.prevent="selectEntityType(entityType)"
+                @mouseenter="onEnter(index)"
+                @mouseleave="onLeave(index)"
+            >
+                <div class="d-flex flex-fill">
+                    <span class="flex-fill">
+                        {{ translateConcept(entityType.thesaurus_url) }}
+                    </span>
+                </div>
+                <FabButtonList
+                    v-if="index == state.hoveredItem"
+                    class="position-absolute end-0 me-2"
+                    :buttons="getControlButtons(entityType)"
+                />
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        computed,
+        onMounted,
+        reactive,
+        toRefs,
+    } from 'vue';
+    
+    import { FabButtonList } from 'dhc-components';
+
+    import { useI18n } from 'vue-i18n';
+
+    import {
+        _cloneDeep,
+        sortAlphabeticallyBy,
+        translateConcept,
+    } from '@/helpers/helpers.js';
+
+    import {
+        showDeleteEntityType,
+        showEditEntityType,
+    } from '@/helpers/modal.js';
+    
+    import ListToolbar from '../forms/ListToolbar.vue';
+
+    export default {
+        components: {
+            FabButtonList,
+            ListToolbar,
+        },
+        emits: ['select'],
+        props: {
+            data: {
+                type: Array,
+                required: true
+            },
+            selectedId: {
+                type: Number,
+                required: false,
+                default: -1,
+            },
+        },
+        setup(props, context) {
+            const { t } = useI18n();
+
+            // FUNCTIONS
+            const onEnter = i => {
+                state.hoveredItem = i;
+            };
+            const onLeave = i => {
+                state.hoveredItem = -1;
+            };
+            const activeClasses = entry => {
+                return ['badge', 'rounded-pill', 'bg-light'];
+            };
+            
+            const selectEntityType = entityType => {
+                context.emit('select', { type: entityType });
+            };
+
+            const requestDeleteEntityType = async event => {
+                getEntityTypeOccurrenceCount(event.type.id).then(data => {
+                    const metadata = {
+                        entityCount: data,
+                    };
+                    showDeleteEntityType(event.type, metadata, _ => {
+                        if(currentRoute.name == 'dmdetail' && currentRoute.params.id == event.type.id) {
+                            router.push({
+                                name: 'dme',
+                            });
+                        }
+                    });
+                });
+            };
+
+            // DATA
+            const state = reactive({
+                hoverStates: new Array(props.data.length).fill(false),
+                entries: computed(_ => props.data.slice()),
+                sortedEntityTypes: computed(_ => {
+                    let entries = _cloneDeep(state.entries);
+                    entries = entries.map(entry => {
+                        entry.translated = translateConcept(entry.thesaurus_url);
+                        return entry;
+                    });
+                    let filtered = entries.filter((entry) => {
+                        return entry.translated.toLowerCase().includes(state.order.text.toLowerCase());
+                    });
+
+                    if(state.order.type === 'text') {
+                        return filtered.toSorted(sortAlphabeticallyBy("translated", state.order.asc));
+                    } else {
+                        return state.order.asc ? filtered : filtered.reverse();
+                    }
+                }),
+                order: {
+                    text: '',
+                    asc: true,
+                    type: 'number',
+                }
+            });
+
+            const getControlButtons = (entityType) => {
+                let buttons = [];
+                buttons.push({
+                    icon: 'fas fa-xs fa-edit',
+                    title: t('global.edit'),
+                    action: async () => {
+                        console.log('edit entity type', entityType);
+                        showEditEntityType(entityType)
+                    }
+                });
+                buttons.push({
+                    icon: 'fas fa-xs fa-clone',
+                    title: t('global.duplicate'),
+                    action: async () => entityStore.duplicateEntityType(entityType.id),
+                });
+                buttons.push({
+                    icon: 'fas fa-xs fa-trash',
+                    title: t('global.delete'),
+                    color: 'danger',
+                    action: async () => requestDeleteEntityType(entityType),
+                });
+                return buttons;
+            };
+
+            // RETURN
+            return {
+                t,
+                // HELPERS
+                translateConcept,
+                // LOCAL
+                getControlButtons,
+                onEnter,
+                onLeave,
+                activeClasses,
+                selectEntityType,
+                // STATE
+                state,
+            };
+        },
+    };
+</script>
diff --git a/resources/js/components/data-model/EntityTypeSettings.vue b/resources/js/components/data-model/EntityTypeSettings.vue
new file mode 100644
index 000000000..2b03dd0c1
--- /dev/null
+++ b/resources/js/components/data-model/EntityTypeSettings.vue
@@ -0,0 +1,253 @@
+<template>
+    <form
+        role="form"
+        @submit.prevent="updateEntityType"
+    >
+        <div class="row mb-3">
+            <div class="offset-3 col row align-items-center">
+                <div class="form-check form-switch">
+                    <input
+                        id="entity-type-root-toggle"
+                        v-model="properties.is_root"
+                        class="form-check-input"
+                        type="checkbox"
+                    >
+                    <label
+                        class="form-check-label"
+                        for="entity-type-root-toggle"
+                    >
+                        {{ t('main.datamodel.detail.properties.top_level') }}
+                    </label>
+                </div>
+            </div>
+            <div class="col align-items-center">
+                <div class="row align-items-center">
+                    <label
+                        for="entity-color"
+                        style="width: min-content;"
+                    >
+                        {{ t('global.color') }}
+                    </label>
+                    <div class="col align-items-center">
+                        <input
+                            v-model="properties.color"
+                            type="color"
+                            class="form-control form-control-color w-100"
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- TODO: This should be handled using a @PluginHook from within the map plugin! -->
+        <div
+            v-if="properties?.layer?.type"
+            class="mb-3 row"
+        >
+            <label
+                for="entity-geometrytype-ro"
+                class="col-form-label col-md-3 text-end"
+            >
+                {{ t('global.geometry_type') }}
+            </label>
+            <div class="col-md-9 d-flex align-items-center">
+                <span>
+                    {{ properties?.layer?.type ?? "" }}
+                </span>
+                <!-- <router-link :to="{name: 'ldetail', params: { id: entityType.layer.id }}">
+                            {{ t('main.datamodel.detail.manage_layer') }}
+                        </router-link> -->
+            </div>
+        </div>
+        <div class="mb-2 row">
+            <label
+                for="dme-allowed-sub-entity-types-select"
+                class="col-form-label col-md-3 text-end"
+            >
+                {{ t('main.datamodel.detail.properties.sub_types') }}
+            </label>
+            <div class="col-md-9">
+                <multiselect
+                    id="dme-allowed-sub-entity-types-select"
+                    v-model="properties.sub_entity_types"
+                    :object="true"
+                    :mode="'tags'"
+                    :label="'thesaurus_url'"
+                    :track-by="'thesaurus_url'"
+                    :value-prop="'id'"
+                    :options="state.minimalEntityTypes"
+                    :close-on-select="false"
+                    :close-on-deelect="false"
+                    :placeholder="t('global.select.placeholder')"
+                >
+                    <template #option="{ option }">
+                        {{ translateConcept(option.thesaurus_url) }}
+                    </template>
+                    <template #tag="{ option, handleTagRemove, disabled }">
+                        <div class="multiselect-tag">
+                            {{ translateConcept(option.thesaurus_url) }}
+                            <span
+                                v-if="!disabled"
+                                class="multiselect-tag-remove"
+                                @click.prevent
+                                @mousedown.prevent.stop="handleTagRemove(option, $event)"
+                            >
+                                <span class="multiselect-tag-remove-icon" />
+                            </span>
+                        </div>
+                    </template>
+                </multiselect>
+                <div class="mt-2 d-flex flex-row gap-2">
+                    <div
+                        class="btn-group"
+                        role="group"
+                    >
+                        <button
+                            type="button"
+                            class="btn btn-outline-success btn-sm"
+                            @click="addAll"
+                        >
+                            <i class="fas fa-fw fa-tasks" /> {{ t('global.select_all') }}
+                        </button>
+                        <button
+                            type="button"
+                            class="btn btn-outline-danger btn-sm"
+                            @click="removeAll"
+                        >
+                            <i class="fas fa-fw fa-times" /> {{ t('global.select_none') }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <header class="d-flex justify-content-end mt-4">
+                <LoadingButton
+                    :loading="state.saving"
+                    :icon="faSave"
+                    :disabled="!state.dirty || state.saving"
+                    color="success"
+                >
+                    {{ t('global.save') }}
+                </LoadingButton>
+            </header>
+        </div>
+    </form>
+</template>
+
+<script>
+    import {
+        computed,
+        reactive,
+        watch
+    } from 'vue';
+    import { faSave } from '@fortawesome/free-regular-svg-icons';
+    import { LoadingButton } from 'dhc-components';
+    import { useI18n } from 'vue-i18n';
+
+    import {
+        translateConcept,
+    } from '@/helpers/helpers.js';
+
+    import { useToast } from '@/plugins/toast.js';
+    import useEntityStore from '@/bootstrap/stores/entity.js';
+    
+
+
+    export default {
+        components: {
+            LoadingButton,
+        },
+        props: {
+            entityType: {
+                type: Object,
+                required: true,
+            },
+        },
+        setup(props) {
+            const { t } = useI18n();
+            const entityStore = useEntityStore();
+            const toast = useToast();
+
+            const properties = reactive({
+                color: props.entityType.color,
+                is_root: props.entityType.is_root,
+                sub_entity_types: props.entityType.sub_entity_types,
+            });
+            
+            watch(() => props.entityType, (newVal) => {
+                properties.color = newVal.color;
+                properties.is_root = newVal.is_root;
+                properties.sub_entity_types = newVal.sub_entity_types;
+            });
+
+            const state = reactive({
+                saving: false,
+                dirty: computed(_ => {
+                    if(!props.entityType) return false;
+                    const rootDirty = props.entityType.is_root !== properties.is_root;
+                    const colorDirty = props.entityType.color !== properties.color;
+                    const subTypesDirty = props.entityType.sub_entity_types.length !== properties.sub_entity_types.length ||
+                        properties.sub_entity_types.every((v, i) => v.id !== props.entityType.sub_entity_types[i].id);
+
+                    return rootDirty || colorDirty || subTypesDirty;
+                }),
+                minimalEntityTypes: computed(_ => {
+                    return Object.values(entityStore.entityTypes).map(et => ({
+                        id: et.id,
+                        thesaurus_url: et.thesaurus_url
+                    }));
+                }),
+            });
+
+            // FUNCTIONS
+            const updateEntityType = async _ => {
+                if(!props.entityType.id) return;
+
+                const et = props.entityType;
+
+                try {
+                    state.saving = true;
+                    await entityStore.updateEntityType(et.id, properties);
+                    const name = translateConcept(props.entityType.thesaurus_url);
+                    toast.$toast(
+                        t('main.datamodel.toasts.updated_type.msg', {
+                            name: name
+                        }),
+                        t('main.datamodel.toasts.updated_type.title'),
+                        {
+                            channel: 'success',
+                        }
+                    );
+                } catch(error) {
+                    toast.$toast(
+                        error?.message ?? error,
+                        "Error",
+                        {
+                            channel: 'danger',
+                        }
+                    );
+                } finally {
+                    state.saving = false;
+                }
+            }
+
+            const addAll = _ => {
+                entityType.sub_entity_types = state.minimalEntityTypes.slice();
+            };
+
+            const removeAll = _ => {
+                entityType.sub_entity_types = [];
+            };
+
+            return {
+                t,
+                state,
+                properties,
+                faSave: faSave,
+                addAll,
+                updateEntityType,
+                removeAll,
+                translateConcept,
+            };
+
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/resources/js/components/modals/entitytype/Edit.vue b/resources/js/components/modals/entitytype/Edit.vue
index 6c35b76a9..2adca9bd5 100644
--- a/resources/js/components/modals/entitytype/Edit.vue
+++ b/resources/js/components/modals/entitytype/Edit.vue
@@ -1,18 +1,20 @@
 <template>
     <vue-final-modal
         class="modal-container modal"
-        content-class="sp-modal-content sp-modal-content-sm"
+        content-class="sp-modal-content sp-modal-content-md"
         name="edit-entity-type-modal"
     >
-        <div class="sp-modal-content sp-modal-content-sm">
+        <div class="sp-modal-content sp-modal-content-md">
             <div class="modal-header">
-                <h5 class="modal-title">
+                <h5 class="modal-title fs-heading fw-bold">
                     {{
-                        t('main.entity.modals.edit.title_type', {
-                            name: translateConcept(entityType.thesaurus_url)
-                        })
+                        t('global.settings.title')
                     }}
+
                 </h5>
+                <span class="ms-2">
+                    {{ translateConcept(entityType.thesaurus_url) }}
+                </span>
                 <button
                     type="button"
                     class="btn-close"
@@ -25,21 +27,110 @@
                 <form
                     id="edit-entity-type-form"
                     name="edit-entity-type-form"
+                    class="d-flex flex-column gap-3"
                     role="form"
                     @submit.prevent="confirmEdit()"
                 >
+
+                    <div class="row">
+                        <div class="offset-3 col row align-items-center">
+                            <div class="form-check form-switch">
+                                <input
+                                    id="entity-type-root-toggle"
+                                    v-model="properties.is_root"
+                                    class="form-check-input"
+                                    type="checkbox"
+                                >
+                                <label
+                                    class="form-check-label"
+                                    for="entity-type-root-toggle"
+                                >
+                                    {{ t('main.datamodel.detail.properties.top_level') }}
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col align-items-center">
+                            <div class="row align-items-center">
+                                <label
+                                    for="entity-color"
+                                    style="width: min-content;"
+                                >
+                                    {{ t('global.color') }}
+                                </label>
+                                <div class="col align-items-center">
+                                    <input
+                                        v-model="properties.color"
+                                        type="color"
+                                        class="form-control form-control-color w-100"
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <div class="row">
                         <label
-                            class="col-form-label col-3"
+                            for="dme-allowed-sub-entity-types-select"
+                            class="col-form-label col-md-3 text-end"
+                        >
+                            {{ t('main.datamodel.detail.properties.sub_types') }}
+                        </label>
+                        <div class="col-md-9 d-flex">
+                            <multiselect
+                                id="dme-allowed-sub-entity-types-select"
+                                v-model="properties.sub_entity_types"
+                                :object="true"
+                                :mode="'tags'"
+                                :label="'thesaurus_url'"
+                                :track-by="'thesaurus_url'"
+                                :value-prop="'id'"
+                                :options="entityStore.getMinimalEntityTypes"
+                                :close-on-select="false"
+                                :close-on-deelect="false"
+                                :placeholder="t('global.select.placeholder')"
+                            >
+                                <template #option="{ option }">
+                                    {{ translateConcept(option.thesaurus_url) }}
+                                </template>
+                                <template #tag="{ option, handleTagRemove, disabled }">
+                                    <div class="multiselect-tag">
+                                        {{ translateConcept(option.thesaurus_url) }}
+                                        <span
+                                            v-if="!disabled"
+                                            class="multiselect-tag-remove"
+                                            @click.prevent
+                                            @mousedown.prevent.stop="handleTagRemove(option, $event)"
+                                        >
+                                            <span class="multiselect-tag-remove-icon" />
+                                        </span>
+                                    </div>
+                                </template>
+                            </multiselect>
+                            <div
+                                class="btn-group"
+                                role="group"
+                            >
+                                <button
+                                    type="button"
+                                    class="btn btn-outline-success btn-sm"
+                                    @click="addAll"
+                                >
+                                    <i class="fas fa-fw fa-tasks" />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <label
+                            class="col-form-label col-3 text-end"
                             for="label"
                         >
-                            {{ t('global.label') }}:
+                            {{ t('global.label') }}
                         </label>
                         <div class="col-9">
                             <simple-search
                                 :endpoint="searchLabel"
                                 :key-fn="getConceptLabel"
-                                :value="state.defaultConcept"
+                                :value="properties.label"
                                 @selected="labelSelected"
                             />
                         </div>
@@ -51,9 +142,9 @@
                     type="submit"
                     class="btn btn-outline-success"
                     form="edit-entity-type-form"
-                    :disabled="!state.isValid"
+                    :disabled="!isDirty"
                 >
-                    <i class="fas fa-fw fa-plus" /> {{ t('global.save') }}
+                    <i class="fas fa-fw fa-save" /> {{ t('global.save') }}
                 </button>
                 <button
                     type="button"
@@ -87,6 +178,8 @@
         getConcept,
     } from '@/helpers/helpers.js';
 
+    import useEntityStore from '@/bootstrap/stores/entity';
+
     export default {
         props: {
             entityType: {
@@ -97,65 +190,91 @@
         emits: ['closing', 'confirm'],
         setup(props, context) {
             const { t } = useI18n();
-            const {
-                entityType,
-            } = toRefs(props);
+
+            const entityStore = useEntityStore();
+
+            function getDirtyValues() {
+                const dirtyValues = {};
+
+                if(properties.is_root !== props.entityType.is_root) {
+                    dirtyValues.is_root = properties.is_root;
+                }
+                if(properties.color !== props.entityType.color) {
+                    dirtyValues.color = properties.color;
+                }
+                const oldSubEntityTypeIds = props.entityType.sub_entity_types.map(et => et.id).toSorted();
+                const newSubEntityTypeIds = properties.sub_entity_types.map(et => et.id).toSorted();
+                
+                if(JSON.stringify(oldSubEntityTypeIds) !== JSON.stringify(newSubEntityTypeIds)) {
+                    dirtyValues.sub_entity_types = properties.sub_entity_types;
+                }
+                if(properties?.label?.thesaurus_url && properties.label.thesaurus_url !== props.entityType.thesaurus_url) {
+                    dirtyValues.thesaurus_url = properties.label.thesaurus_url;
+                }
+
+                return dirtyValues;
+            }
+
+            const isDirty = computed(_ => {
+                const dirtyValues = getDirtyValues();
+                console.log('isDirty check', dirtyValues);
+                return Object.keys(dirtyValues).length > 0;
+            });
 
             // FUNCTIONS
             const confirmEdit = _ => {
-                if(!state.isValid) return;
-                context.emit('confirm', state.editedProps);
+                context.emit('confirm', getDirtyValues());
             };
             const closeModal = _ => {
                 context.emit('closing', false);
             };
             const labelSelected = label => {
-                if(label === null){
-                    state.editedProps.thesaurus_url = label.concept_url;
-                }else if(label.concept_url){
-                    state.editedProps.thesaurus_url = label.concept_url;
-                }else{
-                    console.error('Entity Type Label: unexpected value', label);
+                properties.label = label;
+
+                // We need to set the thesaurus_url when the
+                // concept_url is given only.
+                if(label.concept_url) {
+                    properties.label.thesaurus_url = label.concept_url;
                 }
+
             };
-            const getDefaultConcept = url => {
+            const resetProperties = () => {
+                const entityType = props.entityType;
+
                 const concept = {
-                    ...getConcept(url)
+                    ...getConcept(entityType.thesaurus_url)
                 };
+
                 if(!concept.labels) {
                     concept.labels = [{
                         label: concept.label,
                     }];
                 }
-                return concept;
+
+                Object.assign(properties, {
+                    is_root: entityType.is_root,
+                    color: entityType.color,
+                    sub_entity_types: entityType.sub_entity_types.slice(),
+                    label: concept,
+                });
+            };
+
+            const addAll = _ => {
+                properties.sub_entity_types = entityStore.getMinimalEntityTypes.slice();
             };
 
-            // DATA
-            const state = reactive({
-                defaultConcept: getDefaultConcept(entityType.value.thesaurus_url),
-                editedProps: {
-                    thesaurus_url: null,
-                },
-                isValid: computed(_ => {
-                    for(let k in state.editedProps) {
-                        if(!state.editedProps[k]) {
-                            return false;
-                        }
-                    }
-                    return true;
-                }),
+            const properties = reactive({
+                is_root: null,
+                color: null,
+                sub_entity_types: null,
+                label: null,
             });
+            resetProperties();
 
             // WATCHER
-            watch(entityType.value, (newValue, oldValue) => {
-                state.editedProps.thesaurus_url = null;
-                state.defaultConcept = getDefaultConcept(newValue.thesaurus_url);
+            watch(props.entityType, (newValue, oldValue) => {
+                resetProperties();
             });
-            // watch(state.defaultConcept, (newValue, oldValue) => {
-            //     if(!newValue) {
-            //     } else {
-            //     }
-            // });
 
             // RETURN
             return {
@@ -164,13 +283,16 @@
                 translateConcept,
                 getConceptLabel,
                 searchLabel,
+                isDirty,
                 // PROPS
                 // LOCAL
+                addAll,
                 confirmEdit,
                 closeModal,
                 labelSelected,
                 // STATE
-                state,
+                entityStore,
+                properties,
             };
         },
     };
diff --git a/resources/js/helpers/attribute.js b/resources/js/helpers/attribute.js
new file mode 100644
index 000000000..49fd129ee
--- /dev/null
+++ b/resources/js/helpers/attribute.js
@@ -0,0 +1,13 @@
+export function isRequired(attribute) {
+    return attribute?.pivot?.metadata?.required ?? false;
+}
+
+export function setRequired(attribute, required) {
+    if(!attribute.pivot) {
+        attribute.pivot = {};
+    }
+    if(!attribute.pivot.metadata) {
+        attribute.pivot.metadata = {};
+    }
+    attribute.pivot.metadata.required = required;
+}
\ No newline at end of file
diff --git a/resources/js/helpers/list.js b/resources/js/helpers/list.js
new file mode 100644
index 000000000..aad25725a
--- /dev/null
+++ b/resources/js/helpers/list.js
@@ -0,0 +1,27 @@
+import { getObjectValueByArray, setObjectValueByArray } from "./object";
+
+
+export function moveItem(array, from, to, rankPath = "pivot.position") {
+    if(from === to) {
+        return;
+    }
+
+    let increment = from < to ? 1 : -1;
+    const fromItem = array[from];
+    const toItem = array[to];
+    array.splice(from, 1);
+    
+
+    const toItemRank = getObjectValueByArray(toItem, rankPath)    
+    setObjectValueByArray(fromItem, rankPath, toItemRank)
+    setObjectValueByArray(toItem, rankPath, toItemRank)
+    array.splice(to, 0, fromItem);
+
+    let updatedRank = toItemRank;
+    for(let i = to; i !== (from - increment); i -= increment) {
+        setObjectValueByArray(array[i], rankPath, updatedRank);
+        updatedRank -= increment;
+    }
+    
+    return toItemRank;
+}
\ No newline at end of file
diff --git a/resources/js/helpers/object.js b/resources/js/helpers/object.js
new file mode 100644
index 000000000..8af2cf353
--- /dev/null
+++ b/resources/js/helpers/object.js
@@ -0,0 +1,60 @@
+
+
+/**
+ * Retrieve a value from an object using a dot-notation path.
+ *
+ * @param {Object} object - Target object to retrieve value from
+ * @param {string} path - Dot-notation path to the desired value (e.g., "user.profile.name")
+ * @param {*} [defaultValue=null] - Value to return if the path is not found
+ * @returns {*} The value at the specified path, or defaultValue if not found
+ * @example
+ * const obj = { user: { profile: { name: 'John' } } };
+ * getObjectValueByArray(obj, 'user.profile.name'); // returns 'John'
+ * getObjectValueByArray(obj, 'user.age', 25); // returns 25
+ */
+export function getObjectValueByArray(object, path, defaultValue = null) {
+  const pathArray = path.split(".")
+
+  while(pathArray.length) {
+    const key = pathArray.shift();
+    // Check if the key exists in the object or return the default value
+    if(object && Object.hasOwnProperty.call(object, key)) {
+      object = object[key];
+    } else {
+      return defaultValue;
+    }
+  }
+  return object;
+}
+
+/**
+ * Set a value in an object using a dot-notation path.
+ *
+ * @param {Object} object - Target object to set value in
+ * @param {string} path - Dot-notation path to the desired location (e.g., "user.profile.name")
+ * @param {*} value - Value to set at the specified path
+ * @returns {Object} The modified object
+ * @example
+ * const obj = { user: { profile: { name: 'John' } } };
+ * setObjectValueByArray(obj, 'user.profile.name', 'Jane');
+ * // obj.user.profile.name is now 'Jane'
+ */
+export function setObjectValueByArray(object, path, value, defaultValue = null) {
+  const pathArray = path.split(".")
+
+  while(pathArray.length) {
+    const key = pathArray.shift();
+    // Check if the key exists in the object or return the default value
+    if(object && Object.hasOwnProperty.call(object, key)) {
+      if(pathArray.length === 0) {
+        object[key] = value;
+      } else {
+        object = object[key];
+      }
+    } else {
+        console.log("setObjectValueByArray: path not found", defaultValue);
+      return defaultValue;
+    }
+  }
+  return object;
+}
\ No newline at end of file
diff --git a/resources/js/i18n/de.json b/resources/js/i18n/de.json
index fb5e4dcfb..5987adc8d 100644
--- a/resources/js/i18n/de.json
+++ b/resources/js/i18n/de.json
@@ -761,7 +761,7 @@
                 }
             },
             "attribute": {
-                "title": "Verfügbare Attribute",
+                "title": "Attribute",
                 "add_button": "Attribut hinzufügen",
                 "show_hidden": "Ausgeblendete anzeigen",
                 "hide_hidden": "Ausgeblendete verstecken",
@@ -778,7 +778,7 @@
                 }
             },
             "entity": {
-                "title": "Verfügbare Entitätstypen",
+                "title": "Entitätstypen",
                 "add_button": "Entitätstyp hinzufügen",
                 "modal": {
                     "new": {
diff --git a/resources/js/i18n/en.json b/resources/js/i18n/en.json
index ae03a8351..8c936da64 100644
--- a/resources/js/i18n/en.json
+++ b/resources/js/i18n/en.json
@@ -761,7 +761,7 @@
                 }
             },
             "attribute": {
-                "title": "Available Attributes",
+                "title": "Attributes",
                 "add_button": "Add Attribute",
                 "show_hidden": "Show hidden",
                 "hide_hidden": "Hide hidden",
@@ -778,7 +778,7 @@
                 }
             },
             "entity": {
-                "title": "Available Entity-Types",
+                "title": "Entity-Types",
                 "add_button": "Add Entity-Type",
                 "modal": {
                     "new": {
diff --git a/resources/sass/_style.scss b/resources/sass/_style.scss
index 2a01826b4..692b4c3f4 100644
--- a/resources/sass/_style.scss
+++ b/resources/sass/_style.scss
@@ -110,54 +110,6 @@ dl.dl-0-mb > dd:last-child {
     margin-left: 0 !important;
 }
 
-.btn-fab {
-    @extend .rounded-circle;
-    padding: 0;
-    height: 1.8rem;
-    width: 1.8rem;
-    /* background-color: $white; */
-}
-
-.btn-fab:disabled {
-    background-color: $gray-200;
-    opacity: 1;
-}
-
-.btn-fab-xl {
-    @extend .btn-fab;
-    height: 4rem;
-    width: 4rem;
-    font-size: 1.6rem;
-}
-
-.btn-fab-list-sm > .btn-fab, .btn-fab-sm {
-    padding: 0;
-    height: 1.25rem;
-    width: 1.25rem;
-    font-size: 0.8rem;
-    line-height: normal;
-}
-
-.btn-fab-list-md > .btn-fab {
-    padding: 0;
-    height: 1.5rem;
-    width: 1.5rem;
-    font-size: 0.9rem;
-    line-height: normal;
-}
-
-.btn-fab-list > .btn-fab,
-.btn-fab-list > .btn-fab-sm,
-.btn-fab-list > .btn-fab-xl {
-    margin-right: 0.25rem;
-}
-
-.btn-fab-list > .btn-fab:last-child,
-.btn-fab-list > .btn-fab-sm:last-child
-.btn-fab-list > .btn-fab-xl:last-child {
-    margin-right: 0;
-}
-
 .notification-info, .stacked-icon-text {
     margin-left: -.5rem;
 }
@@ -307,3 +259,16 @@ table.table-sticky .dropdown-menu {
     min-width: 250px;
     z-index: $zindex-sticky-in-page + 1;
 }
+
+/**
+* The vue-draggable (to be more precise the 'sortablejs' library it uses) 
+* doesn't support multiple classes for the ghost element out of the box.
+* Therefore we need to define a specific class for it here.
+*/
+.vue-draggable-ghost {
+    background-color: $light;
+    border-radius: $border-radius;
+    border-color: $secondary;
+    border-width: map-get($map: $border-widths, $key: 2);
+    border-style: dashed;
+}
\ No newline at end of file
diff --git a/resources/sass/_utilities.scss b/resources/sass/_utilities.scss
index 4a3898fd6..4ed27f3f1 100644
--- a/resources/sass/_utilities.scss
+++ b/resources/sass/_utilities.scss
@@ -6,6 +6,14 @@
     font-size: 50%;
 }
 
+.fs-heading {
+    font-size: $font-size-base * 1.2 !important;
+}
+
+.fs-regular {
+    font-size: $font-size-base !important;
+}
+
 .fs-xs {
     font-size: $font-size-base * 0.6 !important;
 }