diff --git a/package-lock.json b/package-lock.json
index ca71dd5f..c7552b76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,8 @@
         "@fortawesome/free-regular-svg-icons": "^7.0.0",
         "@fortawesome/free-solid-svg-icons": "^7.0.0",
         "@fortawesome/vue-fontawesome": "^3.1.1",
+        "@primevue/themes": "^4.4.1",
+        "@tailwindcss/vite": "^4.1.16",
         "@unhead/vue": "^2.0.17",
         "axios": "^1.11.0",
         "chart.js": "^4.4.1",
@@ -51,12 +53,13 @@
         "pluralize": "^8.0.0",
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
-        "primevue": "3.52.0",
+        "primevue": "^4.4.1",
         "rest-client-vue": "^1.2.0-b2",
+        "tailwindcss": "^4.1.16",
         "universal-base64url": "~1.1.0",
         "uuid": "^9.0.1",
         "vee-validate": "^4.12.2",
-        "vue": "^3.3.11",
+        "vue": "^3.4.0",
         "vue-debounce": "^4.0.1",
         "vue-router": "^4.2.5",
         "vuex": "^4.1.0",
@@ -101,21 +104,21 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
-      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.4"
+        "@babel/types": "^7.28.5"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -125,13 +128,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
-      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1"
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -144,7 +147,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -160,7 +162,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -176,7 +177,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -192,7 +192,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -208,7 +207,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -224,7 +222,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -240,7 +237,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -256,7 +252,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -272,7 +267,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -288,7 +282,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -304,7 +297,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -320,7 +312,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -336,7 +327,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -352,7 +342,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -368,7 +357,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -384,7 +372,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -400,7 +387,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -416,7 +402,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -432,7 +417,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -448,7 +432,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -464,7 +447,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -480,7 +462,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -496,7 +477,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -846,12 +826,51 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@jsep-plugin/assignment": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@jsep-plugin/assignment/-/assignment-1.3.0.tgz",
@@ -942,6 +961,87 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
+      "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styles": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.2.5.tgz",
+      "integrity": "sha512-nypFRct/oaaBZqP4jinT0puW8ZIfs4u+l/vqUFmJEPU332fl5ePj6DoOpQgTLzo3OfmvSmz5a5/5b4OJJmmi7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.3"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.2.5.tgz",
+      "integrity": "sha512-n3YkwJrHQaEESc/D/A/iD815sxp8cKnmzscA6a8Tm8YvMtYU32eCahwLLe6h5rywghVwxASWuG36XBgISYOIjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.3"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.2.tgz",
+      "integrity": "sha512-l+li4z6UAwamqbu4xodN3lqr1G4S37DKEJ7Y/nE3MjEx7zJ+KIBkb5voF26Nuly1UCmIcRWQJokhLRF7+sRhyg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.4.1.tgz",
+      "integrity": "sha512-RG56iDKIJT//EtntjQzOiWOHZZJczw/qWWtdL5vFvw8/QDS9DPKn8HLpXK7N5Le6KK1MLXUsxoiGTZK+poUFUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.4.1.tgz",
+      "integrity": "sha512-UfDimrIjVdY6EziwieyV4zPKzW6mnKHKhy4Dgyjv2oI6pNeuim+onbJo1ce22PEGXW78vfblG/3/JIzVHFweqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1",
+        "@primevue/core": "4.4.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/themes": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.4.1.tgz",
+      "integrity": "sha512-3qofw+UhTG5rZXUU+RtYY1ea5Q84LvfHtDuzFLUSK9pL1SLS+S4CBnoMuVM9I009FdVyNGT0Bib3sLMf21SBVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/themes": "^1.2.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.29",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz",
@@ -956,7 +1056,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -969,7 +1068,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -982,7 +1080,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -995,7 +1092,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1008,7 +1104,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1021,7 +1116,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1034,7 +1128,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1047,7 +1140,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1060,7 +1152,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1073,7 +1164,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1086,7 +1176,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1099,7 +1188,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1112,7 +1200,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1125,7 +1212,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1138,7 +1224,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1151,7 +1236,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1164,7 +1248,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1177,7 +1260,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1190,7 +1272,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1203,7 +1284,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1216,6 +1296,263 @@
       "hasInstallScript": true,
       "license": "Apache-2.0"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
+      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.19",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.16"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
+      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-x64": "4.1.16",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
+      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
+      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
+      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
+      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
+      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
+      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
+      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
+      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
+      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
+      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
+      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
+      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.16.tgz",
+      "integrity": "sha512-bbguNBcDxsRmi9nnlWJxhfDWamY3lmcyACHcdO1crxfzuLpOhHLLtEIN/nCbbAtj5rchUgQD17QVAKi1f7IsKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.16",
+        "@tailwindcss/oxide": "4.1.16",
+        "tailwindcss": "4.1.16"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
     "node_modules/@types/argparse": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-2.0.17.tgz",
@@ -2068,53 +2405,53 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.21.tgz",
-      "integrity": "sha512-8i+LZ0vf6ZgII5Z9XmUvrCyEzocvWT+TeR2VBUVlzIH6Tyv57E20mPZ1bCS+tbejgUgmjrEh7q/0F0bibskAmw==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
+      "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.3",
-        "@vue/shared": "3.5.21",
+        "@babel/parser": "^7.28.4",
+        "@vue/shared": "3.5.22",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.21.tgz",
-      "integrity": "sha512-jNtbu/u97wiyEBJlJ9kmdw7tAr5Vy0Aj5CgQmo+6pxWNQhXZDPsRr1UWPN4v3Zf82s2H3kF51IbzZ4jMWAgPlQ==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz",
+      "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.21",
-        "@vue/shared": "3.5.21"
+        "@vue/compiler-core": "3.5.22",
+        "@vue/shared": "3.5.22"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.21.tgz",
-      "integrity": "sha512-SXlyk6I5eUGBd2v8Ie7tF6ADHE9kCR6mBEuPyH1nUZ0h6Xx6nZI29i12sJKQmzbDyr2tUHMhhTt51Z6blbkTTQ==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
+      "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.3",
-        "@vue/compiler-core": "3.5.21",
-        "@vue/compiler-dom": "3.5.21",
-        "@vue/compiler-ssr": "3.5.21",
-        "@vue/shared": "3.5.21",
+        "@babel/parser": "^7.28.4",
+        "@vue/compiler-core": "3.5.22",
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.18",
+        "magic-string": "^0.30.19",
         "postcss": "^8.5.6",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.21.tgz",
-      "integrity": "sha512-vKQ5olH5edFZdf5ZrlEgSO1j1DMA4u23TVK5XR1uMhvwnYvVdDF0nHXJUblL/GvzlShQbjhZZ2uvYmDlAbgo9w==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.22.tgz",
+      "integrity": "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.21",
-        "@vue/shared": "3.5.21"
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/shared": "3.5.22"
       }
     },
     "node_modules/@vue/compiler-vue2": {
@@ -2285,53 +2622,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.21.tgz",
-      "integrity": "sha512-3ah7sa+Cwr9iiYEERt9JfZKPw4A2UlbY8RbbnH2mGCE8NwHkhmlZt2VsH0oDA3P08X3jJd29ohBDtX+TbD9AsA==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.22.tgz",
+      "integrity": "sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.21"
+        "@vue/shared": "3.5.22"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.21.tgz",
-      "integrity": "sha512-+DplQlRS4MXfIf9gfD1BOJpk5RSyGgGXD/R+cumhe8jdjUcq/qlxDawQlSI8hCKupBlvM+3eS1se5xW+SuNAwA==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.22.tgz",
+      "integrity": "sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.21",
-        "@vue/shared": "3.5.21"
+        "@vue/reactivity": "3.5.22",
+        "@vue/shared": "3.5.22"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.21.tgz",
-      "integrity": "sha512-3M2DZsOFwM5qI15wrMmNF5RJe1+ARijt2HM3TbzBbPSuBHOQpoidE+Pa+XEaVN+czbHf81ETRoG1ltztP2em8w==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.22.tgz",
+      "integrity": "sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.21",
-        "@vue/runtime-core": "3.5.21",
-        "@vue/shared": "3.5.21",
+        "@vue/reactivity": "3.5.22",
+        "@vue/runtime-core": "3.5.22",
+        "@vue/shared": "3.5.22",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.21.tgz",
-      "integrity": "sha512-qr8AqgD3DJPJcGvLcJKQo2tAc8OnXRcfxhOJCPF+fcfn5bBGz7VCcO7t+qETOPxpWK1mgysXvVT/j+xWaHeMWA==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.22.tgz",
+      "integrity": "sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.21",
-        "@vue/shared": "3.5.21"
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22"
       },
       "peerDependencies": {
-        "vue": "3.5.21"
+        "vue": "3.5.22"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.21.tgz",
-      "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz",
+      "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
       "license": "MIT"
     },
     "node_modules/@vue/tsconfig": {
@@ -3972,6 +4309,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -4078,6 +4424,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -4295,7 +4654,6 @@
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -4690,7 +5048,8 @@
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
     },
     "node_modules/esutils": {
       "version": "2.0.3",
@@ -4969,7 +5328,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,
       "optional": true,
       "os": [
@@ -5129,6 +5487,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -5926,6 +6290,15 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
@@ -6090,6 +6463,255 @@
         "immediate": "~3.0.5"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lit": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.0.tgz",
@@ -6206,9 +6828,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.19",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -8092,11 +8714,19 @@
       "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
     },
     "node_modules/primevue": {
-      "version": "3.52.0",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.52.0.tgz",
-      "integrity": "sha512-HLOVP5YI0ArFKUhIyfZsWmTNMaBYNCBWC/3DYvdd/Po4LY5/WXf7yIYvArE2q/3OuwSXJXvjlR8UNQeJYRSQog==",
-      "peerDependencies": {
-        "vue": "^3.0.0"
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.4.1.tgz",
+      "integrity": "sha512-JbHBa5k30pZ7mn/z4vYBOnyt5GrR15eM3X0wa3VanonxnFLYkTEx8OMh33aU6ndWeOfi7Ef57dOL3bTH+3f4hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^1.2.5",
+        "@primeuix/utils": "^0.6.1",
+        "@primevue/core": "4.4.1",
+        "@primevue/icons": "4.4.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
       }
     },
     "node_modules/process-nextick-args": {
@@ -8433,7 +9063,6 @@
       "version": "4.46.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.3.tgz",
       "integrity": "sha512-RZn2XTjXb8t5g13f5YclGoilU/kwT696DIkY3sywjdZidNSi3+vseaQov7D7BZXVJCPv3pDWUN69C78GGbXsKw==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -9254,6 +9883,25 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
+      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -9818,7 +10466,6 @@
       "version": "5.4.20",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.20.tgz",
       "integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
@@ -9888,16 +10535,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.21.tgz",
-      "integrity": "sha512-xxf9rum9KtOdwdRkiApWL+9hZEMWE90FHh8yS1+KJAiWYh+iGWV1FquPjoO9VUHQ+VIhsCXNNyZ5Sf4++RVZBA==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
+      "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.21",
-        "@vue/compiler-sfc": "3.5.21",
-        "@vue/runtime-dom": "3.5.21",
-        "@vue/server-renderer": "3.5.21",
-        "@vue/shared": "3.5.21"
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-sfc": "3.5.22",
+        "@vue/runtime-dom": "3.5.22",
+        "@vue/server-renderer": "3.5.22",
+        "@vue/shared": "3.5.22"
       },
       "peerDependencies": {
         "typescript": "*"
diff --git a/package.json b/package.json
index 7e84ab58..d28a0213 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "@fortawesome/free-regular-svg-icons": "^7.0.0",
     "@fortawesome/free-solid-svg-icons": "^7.0.0",
     "@fortawesome/vue-fontawesome": "^3.1.1",
+    "@primevue/themes": "^4.4.1",
+    "@tailwindcss/vite": "^4.1.16",
     "@unhead/vue": "^2.0.17",
     "axios": "^1.11.0",
     "chart.js": "^4.4.1",
@@ -52,12 +54,13 @@
     "pluralize": "^8.0.0",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "3.52.0",
+    "primevue": "^4.4.1",
     "rest-client-vue": "^1.2.0-b2",
+    "tailwindcss": "^4.1.16",
     "universal-base64url": "~1.1.0",
     "uuid": "^9.0.1",
     "vee-validate": "^4.12.2",
-    "vue": "^3.3.11",
+    "vue": "^3.4.0",
     "vue-debounce": "^4.0.1",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0",
diff --git a/src/assets/.DS_Store b/src/assets/.DS_Store
deleted file mode 100644
index 2d338bc6..00000000
Binary files a/src/assets/.DS_Store and /dev/null differ
diff --git a/src/assets/app.css b/src/assets/app.css
index bc9aa5fd..d0aaf7ad 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 * {
   text-rendering: optimizeLegibility;
   font-family: 'Raleway', sans-serif;
@@ -26,4 +28,91 @@ body .p-button {
 
 .p-badge {
   text-align: center;
-}
\ No newline at end of file
+}
+
+
+/* Float label styles to match PrimeVue 3 theme */
+
+.p-float-label {
+  position: relative;
+  display: block;
+}
+/* Base label positioning - add missing properties to existing rule */
+.p-float-label > label {
+  position: absolute;
+  left: 0.75rem;
+  top: 1.5rem;
+  transform: translateY(-50%);
+  color: rgba(0, 0, 0, 0.6);
+  transition-duration: 0.2s;
+  transition-property: top, transform, font-size, color, background-color;
+  pointer-events: none;
+  font-size: 1rem;
+  line-height: 1;
+  z-index: 1;
+}
+
+/* Enhanced focused/filled label positioning */
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+  top: -0.5rem !important;
+  transform: none;
+  font-size: 0.75rem;
+  background-color: #ffffff;
+  padding: 2px 4px;
+  margin-left: -4px;
+  margin-top: 0;
+}
+
+/* Hide placeholder text in float label components since label acts as placeholder */
+.p-float-label input::placeholder,
+.p-float-label textarea::placeholder,
+.p-float-label .p-chips-multiple-container input::placeholder {
+  color: transparent !important;
+}
+
+/* Show placeholder text when label is floated (focused or filled) */
+.p-float-label input:focus::placeholder,
+.p-float-label input.p-filled::placeholder,
+.p-float-label textarea:focus::placeholder,
+.p-float-label textarea.p-filled::placeholder,
+.p-float-label .p-inputwrapper-focus input::placeholder,
+.p-float-label .p-inputwrapper-filled input::placeholder,
+.p-float-label .p-chips-multiple-container input:focus::placeholder,
+.p-float-label .p-multiselect:focus-within .p-multiselect-label {
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+
+/* Style Chips components to match PrimeVue 3 appearance */
+.p-inputchips-chip-item {
+  background: #e9ecef !important;
+  color: #495057 !important;
+  border-radius: 1rem !important;
+  padding: 0.25rem 0.5rem !important;
+  margin-right: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+  margin-bottom: auto !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+.p-inputchips-chip-item .pi-times,
+.p-inputchips-chip-item .pi-times-circle {
+  margin-left: 0.5rem !important;
+  cursor: pointer !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Prevent autocomplete overlay from taking full page width */
+.p-autocomplete-overlay {
+  max-width: 75% !important;
+}
+
+.p-tablist-tab-list .p-tab-active {
+  background-color: #3f51b51f !important;
+}
diff --git a/src/assets/forms.css b/src/assets/forms.css
index 80686fde..c2952f32 100644
--- a/src/assets/forms.css
+++ b/src/assets/forms.css
@@ -53,7 +53,7 @@
 }
 
 .field:deep(.p-tabview .p-tabview-nav) {
-  flex-direction: column;
+  flex-direction: column !important;
   padding-left: 5px;
   border: 0 none;
   background: transparent;
diff --git a/src/assets/layout.css b/src/assets/layout.css
index c4ab0890..45100914 100644
--- a/src/assets/layout.css
+++ b/src/assets/layout.css
@@ -17,7 +17,6 @@
 .mave-collection-badges {
   flex: 0 1 auto;
   font-size: 12px;
-  line-height: 29px;
   margin-right: 5px;
   padding: 0 0 0 7px;
 }
diff --git a/public/theme.css b/src/assets/theme.css
similarity index 99%
rename from public/theme.css
rename to src/assets/theme.css
index 3a0e20d7..4422fb97 100644
--- a/public/theme.css
+++ b/src/assets/theme.css
@@ -1012,14 +1012,14 @@
 .p-inputtext.p-invalid.p-component {
   border-color: #B00020;
 }
-.p-inputtext.p-inputtext-sm {
+/* .p-inputtext.p-inputtext-sm {
   font-size: 0.875rem;
   padding: 0.65625rem 0.65625rem;
-}
-.p-inputtext.p-inputtext-lg {
+} */
+/* .p-inputtext.p-inputtext-lg {
   font-size: 1.25rem;
   padding: 0.9375rem 0.9375rem;
-}
+} */
 
 .p-float-label > label {
   left: 0.75rem;
@@ -1526,7 +1526,7 @@
 .p-button {
   color: #ffffff;
   background: #3F51B5;
-  border: 0 none;
+  border: 0 none !important;
   padding: 0.571rem 0.75rem;
   font-size: 1rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -1545,7 +1545,7 @@
 .p-button.p-button-outlined {
   background-color: transparent;
   color: #3F51B5;
-  border: 1px solid;
+  border: 1px solid !important;
 }
 .p-button.p-button-outlined:enabled:hover {
   background: rgba(63, 81, 181, 0.04);
@@ -1570,19 +1570,19 @@
   color: rgba(0, 0, 0, 0.6);
 }
 .p-button.p-button-text {
-  background-color: transparent;
-  color: #3F51B5;
-  border-color: transparent;
+  background-color: transparent !important;
+  color: #3F51B5 !important;
+  border-color: transparent !important;
 }
 .p-button.p-button-text:enabled:hover {
-  background: rgba(63, 81, 181, 0.04);
-  color: #3F51B5;
-  border-color: transparent;
+  background: rgba(63, 81, 181, 0.04) !important;
+  color: #3F51B5 !important;
+  border-color: transparent !important;
 }
 .p-button.p-button-text:enabled:active {
-  background: rgba(63, 81, 181, 0.16);
-  color: #3F51B5;
-  border-color: transparent;
+  background: rgba(63, 81, 181, 0.16) !important;
+  color: #3F51B5 !important;
+  border-color: transparent !important;
 }
 .p-button.p-button-text.p-button-plain {
   color: rgba(0, 0, 0, 0.6);
@@ -1640,7 +1640,7 @@
 }
 .p-button.p-button-sm {
   font-size: 0.875rem;
-  padding: 0.499625rem 0.65625rem;
+  padding: 0.2rem 0.4rem;
 }
 .p-button.p-button-sm .p-button-icon {
   font-size: 0.875rem;
@@ -4846,7 +4846,7 @@
 
 .p-tag {
   background: #3F51B5;
-  color: #ffffff;
+  color: #ffffff !important;
   font-size: 0.75rem;
   font-weight: 700;
   padding: 0.25rem 0.4rem;
@@ -5110,19 +5110,19 @@
 }
 
 .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus {
-  background: rgba(156, 39, 176, 0.76);
+  background: rgba(156, 39, 176, 0.76) !important;
 }
 .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active {
-  background: rgba(156, 39, 176, 0.68);
+  background: rgba(156, 39, 176, 0.68) !important;
 }
 .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus {
-  background: rgba(156, 39, 176, 0.12);
+  background: rgba(156, 39, 176, 0.12) !important;
 }
 .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active {
-  background: rgba(156, 39, 176, 0.16);
+  background: rgba(156, 39, 176, 0.16) !important;
 }
 .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink {
-  background-color: rgba(156, 39, 176, 0.16);
+  background-color: rgba(156, 39, 176, 0.16) !important;
 }
 
 .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus {
diff --git a/src/components/CalibrationTable.vue b/src/components/CalibrationTable.vue
index d2b0a9e4..99d80bc3 100644
--- a/src/components/CalibrationTable.vue
+++ b/src/components/CalibrationTable.vue
@@ -13,7 +13,7 @@
         <PrimeButton
           v-tooltip.right="{value: scoreCalibration.baselineScoreDescription, autoHide: false}"
           aria-label="Info"
-          class="p-button-help mavedb-help-tooltip-button"
+          class="p-button-help mavedb-help-tooltip-button size-2!"
           icon="pi pi-info"
           outlined
           rounded
@@ -47,7 +47,7 @@
               <PrimeButton
                 v-tooltip.right="{value: range.description, autoHide: false}"
                 aria-label="Info"
-                class="p-button-help mavedb-help-tooltip-button"
+                class="p-button-help mavedb-help-tooltip-button size-2!"
                 icon="pi pi-info"
                 outlined
                 rounded
@@ -198,7 +198,7 @@
               autoHide: false
             }"
             aria-label="Threshold sources info"
-            class="p-button-help mavedb-help-tooltip-button"
+            class="p-button-help mavedb-help-tooltip-button size-2!"
             icon="pi pi-info"
             outlined
             rounded
@@ -234,7 +234,7 @@
               autoHide: false
             }"
             aria-label="Method sources info"
-            class="p-button-help mavedb-help-tooltip-button"
+            class="p-button-help mavedb-help-tooltip-button size-2!"
             icon="pi pi-info"
             outlined
             rounded
@@ -267,7 +267,7 @@
               autoHide: false
             }"
             aria-label="Evidence calculation sources info"
-            class="p-button-help mavedb-help-tooltip-button"
+            class="p-button-help mavedb-help-tooltip-button size-2!"
             icon="pi pi-info"
             outlined
             rounded
@@ -770,8 +770,6 @@ export default defineComponent({
 /* Tooltips */
 .mavedb-help-tooltip-button {
   margin-left: 0.6rem;
-  height: 0.5rem;
-  width: 0.5rem;
   vertical-align: middle;
   margin-top: 0;
   margin-bottom: 0;
diff --git a/src/components/CollectionAdder.vue b/src/components/CollectionAdder.vue
index 8cde832c..d1d8f52b 100644
--- a/src/components/CollectionAdder.vue
+++ b/src/components/CollectionAdder.vue
@@ -272,8 +272,4 @@ export default {
 .mave-collection-option-sharing {
   color: #999;
 }
-
-.mave-create-collection-button {
-  display: inline;
-}
 </style>
diff --git a/src/components/ScoreSetHistogram.vue b/src/components/ScoreSetHistogram.vue
index 4e069ef4..6f3118e3 100644
--- a/src/components/ScoreSetHistogram.vue
+++ b/src/components/ScoreSetHistogram.vue
@@ -1,6 +1,16 @@
 <template>
   <div class="mavedb-histogram-controls">
-    <TabMenu v-if="hasTabBar" v-model:active-index="activeViz" class="mave-histogram-viz-select" :model="vizOptions" />
+    <Tabs v-if="hasTabBar" v-model:value="activeViz">
+      <TabList>
+        <Tab
+          v-for="(option, index) of vizOptions"
+          :key="index"
+          :value="index"
+        >
+          {{ option.label }}
+        </tab>
+      </TabList>
+    </Tabs>
     <div v-if="showCalibrations" class="mavedb-histogram-thresholds-control">
       <div class="mavedb-histogram-control">
         <label class="mavedb-histogram-control-label" for="mavedb-histogram-viz-select">Thresholds: </label>
@@ -117,13 +127,13 @@
 <script lang="ts">
 import axios from 'axios'
 import _ from 'lodash'
-import Accordion from 'primevue/accordion'
-import AccordionTab from 'primevue/accordiontab'
 import Checkbox from 'primevue/checkbox'
 import Dropdown from 'primevue/dropdown'
 import ProgressSpinner from 'primevue/progressspinner'
 import Rating from 'primevue/rating'
-import TabMenu from 'primevue/tabmenu'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
 import {defineComponent, PropType} from 'vue'
 
 import useScopedId from '@/composables/scoped-id'
@@ -184,7 +194,7 @@ interface Margins {
 export default defineComponent({
   name: 'ScoreSetHistogram',
 
-  components: {Accordion, AccordionTab, Checkbox, Dropdown, Rating, TabMenu, ProgressSpinner},
+  components: {Checkbox, Dropdown, Rating, Tabs, TabList, Tab, ProgressSpinner},
 
   props: {
     coordinates: {
diff --git a/src/components/common/HighlightsView.vue b/src/components/common/HighlightsView.vue
index e1320ebb..83e24500 100644
--- a/src/components/common/HighlightsView.vue
+++ b/src/components/common/HighlightsView.vue
@@ -3,82 +3,96 @@
     <Card>
       <template #title>Target Gene Highlights</template>
       <template #content>
-        <TabView @update:active-index="(idx) => { this.field = targetLeaderboardFields[idx] }"
-          v-model:activeIndex="activeTabIndex">
-          <TabPanel v-for="tab in targetLeaderboardFields" :key="tab"
-            :header="targetLeaderboardFieldTitles[tab]">
-            <div v-if="loading" class="highlights-spinner-container" ref="spinner">
-              <ProgressSpinner class="highlights-progress" />
-            </div>
-            <div v-else>
-              <DataTable
-                :ref="`targetDataTable${tab}`"
-                :exportFilename="`mavedb-${pluralize(tab)}`"
-                paginator
-                :rows="5"
-                :rowsPerPageOptions="[5, 10, 20]"
-                size="small"
-                sortField="count"
-                :sortOrder="-1"
-                :value="leaderboardData"
-              >
-                <template #paginatorstart>
-                  <Button type="button" icon="pi pi-download" text @click="exportCsv('target', tab)" />
-                </template>
-                <Column v-for="col of targetLeaderboardColumns[this.field]" :field="col.field" :header="col.header"
-                  :sortable="col.field == 'count'" :key="col.field" :style="`width: ${col.width || auto}`">
-                  <!-- Link any identifier columns or `column` (in this compoenent representative of some db key) to a MaveDB search page -->
-                  <template v-if="this.field == 'accession' && col.field == 'column'" #body="slotProps">
-                    <a :href="`${config.appBaseUrl}/#/search?target-accession=${slotProps.data[col.field]}`">{{
-                      slotProps.data[col.field] }}</a>
+        <Tabs v-model:value="activeTabIndex" @update:value="(idx) => { field = targetLeaderboardFields[idx] }">
+          <TabList>
+            <Tab v-for="(tab, index) in targetLeaderboardFields" :key="tab" :value="index">{{ targetLeaderboardFieldTitles[tab] }}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel v-for="(tab, index) in targetLeaderboardFields" :key="tab" :value="index">
+              <div v-if="loading" ref="spinner" class="flex justify-center">
+                <ProgressSpinner class="size-12!" />
+              </div>
+              <div v-else>
+                <DataTable
+                  :ref="`targetDataTable${tab}`"
+                  :export-filename="`mavedb-${pluralize(tab)}`"
+                  paginator
+                  :rows="5"
+                  :rows-per-page-options="[5, 10, 20]"
+                  size="small"
+                  sort-field="count"
+                  :sort-order="-1"
+                  :value="leaderboardData"
+                >
+                  <template #paginatorstart>
+                    <Button icon="pi pi-download" text type="button" @click="exportCsv('target', tab)" />
                   </template>
-                  <template v-else-if="this.field == 'gene' && col.field == 'column'" #body="slotProps">
-                    <a :href="`${config.appBaseUrl}/#/search?search=${slotProps.data[col.field]}`">{{
-                      slotProps.data[col.field] }}</a>
-                  </template>
-                  <template v-else-if="this.field == 'organism' && col.field == 'column'" #body="slotProps">
-                    <a :href="`${config.appBaseUrl}/#/search?target-organism-name=${slotProps.data[col.field]}`">{{
-                      slotProps.data[col.field] }}</a>
-                  </template>
-                  <template v-else-if="col.field == 'identifier'" #body="slotProps">
-                    <a :href="`${config.appBaseUrl}/#/search?search=${slotProps.data[col.field]}`">{{
-                      slotProps.data[col.field] }}</a>
-                  </template>
-                  <!-- Handle url columns separately, so that we can fill in any missing DB data -->
-                  <template v-else-if="this.field == 'uniprot-identifier' && col.field == 'url'" #body="slotProps">
-                    <a :href="slotProps.data[col.field] ? `${slotProps.data[col.field]}` : `http://purl.uniprot.org/uniprot/${slotProps.data.identifier}`"
-                      target="_blank">{{
-                      slotProps.data.url ? slotProps.data.url :
-                      `http://purl.uniprot.org/uniprot/${slotProps.data.identifier}` }}</a>
-                  </template>
-                  <template v-else-if="this.field == 'refseq-identifier' && col.field == 'url'" #body="slotProps">
-                    <a :href="slotProps.data[col.field] ? `${slotProps.data[col.field]}` : `http://www.ncbi.nlm.nih.gov/entrez/viewer.fcgi?val=${slotProps.data.identifier}`"
-                      target="_blank">{{
-                      slotProps.data.url ? slotProps.data.url :
-                      `http://www.ncbi.nlm.nih.gov/entrez/viewer.fcgi?val=${slotProps.data.identifier}` }}</a>
-                  </template>
-                  <template v-else-if="this.field == 'ensembl-identifier' && col.field == 'url'" #body="slotProps">
-                    <a :href="slotProps.data[col.field] ? `${slotProps.data[col.field]}` : `http://www.ensembl.org/id/${slotProps.data.identifier}`"
-                      target="_blank">{{
-                      slotProps.data.url ? slotProps.data.url : `http://www.ensembl.org/id/${slotProps.data.identifier}`
-                      }}</a>
-                  </template>
-                  <!-- Handle generic url columns  -->
-                  <template v-else-if="col.field == 'url'" #body="slotProps">
-                    <a :href="`${slotProps.data.url}`" target="_blank">{{
-                      slotProps.data.url }}</a>
-                  </template>
-                </Column>
-              </DataTable>
-            </div>
-          </TabPanel>
-        </TabView>
-        <div class="chart-container">
-          <div v-if="showCategoryChart" class="chart">
-            <Chart type="pie" :data="categoryChartData" :options="categoryChartOptions"></Chart>
+                  <Column
+                    v-for="col of targetLeaderboardColumns[field]"
+                    :key="col.field"
+                    :field="col.field" :header="col.header"
+                    :sortable="col.field == 'count'"
+                    :style="`width: ${col.width || auto}`">
+                    <!-- Link any identifier columns or `column` (in this compoenent representative of some db key) to a MaveDB search page -->
+                    <template v-if="field == 'accession' && col.field == 'column'" #body="slotProps">
+                      <a :href="`${config.appBaseUrl}/#/search?target-accession=${slotProps.data[col.field]}`">{{
+                        slotProps.data[col.field] }}</a>
+                    </template>
+                    <template v-else-if="field == 'gene' && col.field == 'column'" #body="slotProps">
+                      <a :href="`${config.appBaseUrl}/#/search?search=${slotProps.data[col.field]}`">{{
+                        slotProps.data[col.field] }}</a>
+                    </template>
+                    <template v-else-if="field == 'organism' && col.field == 'column'" #body="slotProps">
+                      <a :href="`${config.appBaseUrl}/#/search?target-organism-name=${slotProps.data[col.field]}`">{{
+                        slotProps.data[col.field] }}</a>
+                    </template>
+                    <template v-else-if="col.field == 'identifier'" #body="slotProps">
+                      <a :href="`${config.appBaseUrl}/#/search?search=${slotProps.data[col.field]}`">
+                        {{ slotProps.data[col.field] }}
+                      </a>
+                    </template>
+                    <!-- Handle url columns separately, so that we can fill in any missing DB data -->
+                    <template v-else-if="field == 'uniprot-identifier' && col.field == 'url'" #body="slotProps">
+                      <a
+                        :href="slotProps.data[col.field] ? `${slotProps.data[col.field]}` : `http://purl.uniprot.org/uniprot/${slotProps.data.identifier}`"
+                        target="_blank"
+                      >
+                        {{ slotProps.data.url ? slotProps.data.url : `http://purl.uniprot.org/uniprot/${slotProps.data.identifier}` }}
+                      </a>
+                    </template>
+                    <template v-else-if="field == 'refseq-identifier' && col.field == 'url'" #body="slotProps">
+                      <a
+                        :href="slotProps.data[col.field] ? `${slotProps.data[col.field]}` : `http://www.ncbi.nlm.nih.gov/entrez/viewer.fcgi?val=${slotProps.data.identifier}`"
+                        target="_blank"
+                      >
+                      {{ slotProps.data.url ? slotProps.data.url : `http://www.ncbi.nlm.nih.gov/entrez/viewer.fcgi?val=${slotProps.data.identifier}` }}
+                      </a>
+                    </template>
+                    <template v-else-if="field == 'ensembl-identifier' && col.field == 'url'" #body="slotProps">
+                      <a
+                        :href="slotProps.data[col.field] ? `${slotProps.data[col.field]}` : `http://www.ensembl.org/id/${slotProps.data.identifier}`"
+                        target="_blank"
+                      >
+                      {{ slotProps.data.url ? slotProps.data.url : `http://www.ensembl.org/id/${slotProps.data.identifier}` }}
+                      </a>
+                    </template>
+                    <!-- Handle generic url columns  -->
+                    <template v-else-if="col.field == 'url'" #body="slotProps">
+                      <a :href="`${slotProps.data.url}`" target="_blank">{{
+                        slotProps.data.url }}</a>
+                    </template>
+                  </Column>
+                </DataTable>
+              </div>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+        <div class="flex flex-wrap justify-evenly">
+          <div v-if="showCategoryChart" class="flex-initial">
+            <Chart :data="categoryChartData" :options="categoryChartOptions" type="pie"></Chart>
           </div>
-          <div v-if="showOrganismChart" class="chart">
-            <Chart type="pie" :data="organismChartData" :options="organismChartOptions"></Chart>
+          <div v-if="showOrganismChart" class="flex-initial">
+            <Chart :data="organismChartData" :options="organismChartOptions" type="pie"></Chart>
           </div>
         </div>
       </template>
@@ -88,50 +102,56 @@
     <Card>
       <template #title>Score Set Highlights</template>
       <template #content>
-        <TabView @tab-change="(event) => { this.field = scoreSetLeaderboardFields[event.index] }"
-          v-model:activeIndex="activeTabIndex">
-          <TabPanel v-for="tab in scoreSetLeaderboardFields" :key="tab"
-            :header="scoreSetLeaderboardFieldTitles[tab]">
-            <div v-if="loading" class="highlights-spinner-container" ref="spinner">
-              <ProgressSpinner class="highlights-progress" />
-            </div>
-            <div v-else>
-              <DataTable
-                :ref="`scoreSetDataTable${tab}`"
-                :exportFilename="`mavedb-${pluralize(tab)}`"
-                :value="leaderboardData"
-                sortField="count"
-                :sortOrder="-1"
-                paginator
-                :rows="5"
-                :rowsPerPageOptions="[5, 10, 20]"
-                size="small"
-              >
-                <template #paginatorstart>
-                  <Button type="button" icon="pi pi-download" text @click="exportCsv('scoreSet', tab)" />
-                </template>
-                <Column v-for="col of scoreSetLeaderboardColumns[this.field]" :field="col.field" :header="col.header"
-                  :sortable="col.field == 'count'" :key="col.field" :style="`width: ${col.width || auto}`">
-                  <!-- Link publication identifiers to their MaveDB page -->
-                  <template v-if="this.field == 'publication-identifiers' && col.field == 'identifier'" #body="slotProps">
-                    <a
-                      :href="`${config.appBaseUrl}/publication-identifiers/${slotProps.data.dbName}/${encodeURIComponent(slotProps.data[col.field])}`">{{
-                        slotProps.data[col.field] }}</a>
-                  </template>
-                  <template v-else-if="this.field == 'doi-identifiers' && col.field == 'identifier'" #body="slotProps">
-                    <a :href="`${config.appBaseUrl}/#/search?search=${slotProps.data[col.field]}`">{{
-                      slotProps.data[col.field] }}</a>
-                  </template>
-                  <!-- Link out any remaining URLs to the appropriate location -->
-                  <template v-else-if="col.field == 'url'" #body="slotProps">
-                    <a :href="`${slotProps.data.url}`" target="_blank">{{
-                      slotProps.data.url }}</a>
+        <Tabs v-model:value="activeTabIndex" @update:value="(idx) => { field = scoreSetLeaderboardFields[idx] }">
+          <TabList>
+            <Tab v-for="(tab, index) in scoreSetLeaderboardFields" :key="tab" :value="index">{{ scoreSetLeaderboardFieldTitles[tab] }}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel v-for="(tab, index) in scoreSetLeaderboardFields" :key="tab" :value="index">
+              <div v-if="loading" ref="spinner" class="flex justify-center">
+                <ProgressSpinner class="size-12!" />
+              </div>
+              <div v-else>
+                <DataTable
+                  :ref="`scoreSetDataTable${tab}`"
+                  :export-filename="`mavedb-${pluralize(tab)}`"
+                  paginator
+                  :rows="5"
+                  :rows-per-page-options="[5, 10, 20]"
+                  size="small"
+                  sort-field="count"
+                  :sort-order="-1"
+                  :value="leaderboardData"
+                >
+                  <template #paginatorstart>
+                    <Button icon="pi pi-download" text type="button" @click="exportCsv('scoreSet', tab)" />
                   </template>
-                </Column>
-              </DataTable>
-            </div>
-          </TabPanel>
-        </TabView>
+                  <Column
+                    v-for="col of scoreSetLeaderboardColumns[this.field]"
+                    :key="col.field"
+                    :field="col.field"
+                    :header="col.header" :sortable="col.field == 'count'" :style="`width: ${col.width || auto}`">
+                    <!-- Link publication identifiers to their MaveDB page -->
+                    <template v-if="this.field == 'publication-identifiers' && col.field == 'identifier'" #body="slotProps">
+                      <a
+                        :href="`${config.appBaseUrl}/publication-identifiers/${slotProps.data.dbName}/${encodeURIComponent(slotProps.data[col.field])}`">{{
+                          slotProps.data[col.field] }}</a>
+                    </template>
+                    <template v-else-if="this.field == 'doi-identifiers' && col.field == 'identifier'" #body="slotProps">
+                      <a :href="`${config.appBaseUrl}/#/search?search=${slotProps.data[col.field]}`">{{
+                        slotProps.data[col.field] }}</a>
+                    </template>
+                    <!-- Link out any remaining URLs to the appropriate location -->
+                    <template v-else-if="col.field == 'url'" #body="slotProps">
+                      <a :href="`${slotProps.data.url}`" target="_blank">{{
+                        slotProps.data.url }}</a>
+                    </template>
+                  </Column>
+                </DataTable>
+              </div>
+            </TabPanel>
+        </TabPanels>
+        </Tabs>
       </template>
     </Card>
   </div>
@@ -139,34 +159,50 @@
     <Card>
       <template #title>Experiment Highlights</template>
       <template #content>
-        <TabView @tab-change="(event) => { this.field = experimentLeaderboardFields[event.index] }"
-          v-model:activeIndex="activeTabIndex">
-          <TabPanel v-for="tab in experimentLeaderboardFields" :key="tab"
-            :header="tab.charAt(0).toUpperCase() + tab.slice(1)">
-            <div v-if="loading" class="highlights-spinner-container" ref="spinner">
-              <ProgressSpinner class="highlights-progress" />
-            </div>
-            <div v-else>
-              <DataTable :value="leaderboardData" sortField="count" :sortOrder="-1" paginator :rows="5"
-                :rowsPerPageOptions="[5, 10, 20]" size="small">
-                <Column v-for="col of experimentLeaderboardColumns[this.field]" :field="col.field" :header="col.header"
-                  :sortable="col.field == 'count'" :key="col.field" :style="`width: ${col.width || auto}`">
-                  <!-- Link publication identifiers to their MaveDB page -->
-                  <template v-if="this.field == 'publication-identifiers' && col.field == 'identifier'" #body="slotProps">
-                    <a
-                      :href="`${config.appBaseUrl}/publication-identifiers/${slotProps.data.dbName}/${encodeURIComponent(slotProps.data[col.field])}`">{{
-                        slotProps.data[col.field] }}</a>
-                  </template>
-                  <!-- Link out any URLs to the appropriate location -->
-                  <template v-else-if="col.field == 'url'" #body="slotProps">
-                    <a :href="`${slotProps.data.url}`" target="_blank">{{
-                      slotProps.data.url }}</a>
-                  </template>
-                </Column>
-              </DataTable>
-            </div>
-          </TabPanel>
-        </TabView>
+        <Tabs v-model:value="activeTabIndex" @update:value="(idx) => { field = experimentLeaderboardFields[idx] }">
+          <TabList>
+            <Tab v-for="(tab, index) in experimentLeaderboardFields" :key="tab" :value="index">{{ tab.charAt(0).toUpperCase() + tab.slice(1) }}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel v-for="(tab, index) in experimentLeaderboardFields" :key="tab" :value="index">
+              <div v-if="loading" ref="spinner" class="flex justify-center">
+                <ProgressSpinner class="size-12!" />
+              </div>
+              <div v-else>
+                <DataTable
+                  paginator
+                  :rows="5"
+                  :rows-per-page-options="[5, 10, 20]"
+                  size="small"
+                  sort-field="count"
+                  :sort-order="-1"
+                  :value="leaderboardData"
+                >
+                  <Column
+                    v-for="col of experimentLeaderboardColumns[field]"
+                    :key="col.field"
+                    :field="col.field"
+                    :header="col.header"
+                    :sortable="col.field == 'count'"
+                    :style="`width: ${col.width || auto}`"
+                  >
+                    <!-- Link publication identifiers to their MaveDB page -->
+                    <template v-if="field == 'publication-identifiers' && col.field == 'identifier'" #body="slotProps">
+                      <a
+                        :href="`${config.appBaseUrl}/publication-identifiers/${slotProps.data.dbName}/${encodeURIComponent(slotProps.data[col.field])}`">{{
+                          slotProps.data[col.field] }}</a>
+                    </template>
+                    <!-- Link out any URLs to the appropriate location -->
+                    <template v-else-if="col.field == 'url'" #body="slotProps">
+                      <a :href="`${slotProps.data.url}`" target="_blank">{{
+                        slotProps.data.url }}</a>
+                    </template>
+                  </Column>
+                </DataTable>
+              </div>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       </template>
     </Card>
   </div>
@@ -179,7 +215,10 @@ import Button from 'primevue/button'
 import Column from 'primevue/column'
 import Card from 'primevue/card'
 import DataTable from 'primevue/datatable'
-import TabView from 'primevue/tabview'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
+import TabPanels from 'primevue/tabpanels'
 import TabPanel from 'primevue/tabpanel'
 import ProgressSpinner from 'primevue/progressspinner'
 import Chart from 'primevue/chart'
@@ -190,7 +229,7 @@ import useItem from '@/composition/item'
 
 export default defineComponent({
   name: 'HighlightsView',
-  components: {Button, Card, Chart, Column, DataTable, TabView, TabPanel, ProgressSpinner},
+  components: {Button, Card, Chart, Column, DataTable, Tabs, TabList, Tab, TabPanels, TabPanel, ProgressSpinner},
 
   setup: (props) => {
     const targetAccessionAssemblyStatistic = useItem({ itemTypeName: 'target-accession-statistics' })
@@ -331,10 +370,10 @@ export default defineComponent({
     categoryChartData: function() { return this.chartDataForTarget(this.targetGeneCategoryFieldCounts) },
     organismChartData: function() { return this.chartDataForTarget(this.targetGeneOrganismFieldCounts) },
     categoryChartOptions: function() {
-       return this.setChartOptions('Target Gene Category', this.chartDataForTarget(this.targetGeneCategoryFieldCounts), 'target-type') 
+       return this.setChartOptions('Target Gene Category', this.chartDataForTarget(this.targetGeneCategoryFieldCounts), 'target-type')
     },
     organismChartOptions: function() {
-       return this.setChartOptions('Target Organism', this.chartDataForTarget(this.targetGeneOrganismFieldCounts), 'target-organism-name') 
+       return this.setChartOptions('Target Organism', this.chartDataForTarget(this.targetGeneOrganismFieldCounts), 'target-organism-name')
     },
   },
 
@@ -394,7 +433,7 @@ export default defineComponent({
           if (!model) {
             model = 'search'
           }
-          
+
           const clickedLabel = data.labels[element[0].index]
           if (clickedLabel == 'Others') {
             return
@@ -588,28 +627,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style>
-.p-tabview-panel .highlights-spinner-container {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding-top: 18px;
-  width: 100%;
-}
-
-.p-tabview-panel .highlights-progress {
-  height: 50px;
-  width: 50px;
-}
-
-.chart-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-}
-
-.chart {
-  flex: 0 1 auto;
-}
-</style>
diff --git a/src/components/layout/DefaultLayout.vue b/src/components/layout/DefaultLayout.vue
index c791399b..324ce6e5 100644
--- a/src/components/layout/DefaultLayout.vue
+++ b/src/components/layout/DefaultLayout.vue
@@ -29,6 +29,7 @@
 import '@fontsource/raleway'
 
 import '@/assets/app.css'
+import '@/assets/theme.css'
 import Toolbar from '@/components/layout/Toolbar.vue'
 import Footer from '@/components/layout/Footer.vue'
 import EmailPrompt from '@/components/common/EmailPrompt.vue'
diff --git a/src/components/layout/Toolbar.vue b/src/components/layout/Toolbar.vue
index 133ded7d..80f688c0 100644
--- a/src/components/layout/Toolbar.vue
+++ b/src/components/layout/Toolbar.vue
@@ -19,20 +19,21 @@
           <img v-else alt="MaveDB" src="@/assets/logo-mavedb.png" />
         </router-link>
         <div style="display: inline-block; margin-left: 40px">
-          <div class="p-inputgroup" style="max-width: 300px; width: 300px">
+          <div class="p-inputgroup" style="max-width: 300px; width: 300px; display: flex; align-items: stretch;">
             <InputText
               ref="searchTextInput"
               v-model="searchText"
-              class="p-inputtext-sm"
+              class="p-inputtext-sm !rounded-r-none"
               placeholder="Search"
-              style="width: 200px"
+              style="width: 200px; height: auto;"
               type="search"
               @keyup.enter="search"
             />
             <Button
-              class="p-button-default p-button-sm"
+              class="p-button-default p-button-sm !rounded-l-none"
               :enabled="searchText && searchText.length > 0"
               icon="pi pi-search"
+              style="height: auto;"
               @click="search"
             />
           </div>
@@ -282,10 +283,6 @@ export default {
   margin-right: 0.5rem;
 }
 
-.mavedb-menubar .mavedb-title {
-  font-size: 2rem;
-}
-
 .mavedb-beta-banner {
   background-color: #eb9c3f;
   color: #fff;
diff --git a/src/components/screens/AboutView.vue b/src/components/screens/AboutView.vue
index 849e88d8..14f27b22 100644
--- a/src/components/screens/AboutView.vue
+++ b/src/components/screens/AboutView.vue
@@ -1,10 +1,10 @@
 <template>
     <DefaultLayout>
-        <section class="about-view">
-            <header class="about-view__header">
-                <h1>About MaveDB</h1>
+        <section class="p-4">
+            <header>
+                <h1 class="text-3xl font-extrabold pb-4">About MaveDB</h1>
             </header>
-            <main class="about-view__content">
+            <main class="leading-relaxed flex flex-col space-y-4">
                 <p>
                 MaveDB is a public repository for datasets from Multiplexed Assays of Variant Effect (MAVEs),
                 such as those generated by deep mutational scanning (DMS) or massively parallel reporter assay
@@ -80,16 +80,16 @@
                 </p>
                 <hr style="border:0; border-top:1px solid #ccc; height:0; margin:1.5rem 0;" />
 
-                <h2>Citing MaveDB</h2>
+                <h2 class="text-2xl font-extrabold">Citing MaveDB</h2>
                 <p>
                 To cite MaveDB, please cite our most recent publication:
                 </p>
-                <blockquote>
+                <blockquote class="ml-10">
                     Rubin, A.F., Stone, J., Bianchi, A.H. <i>et al.</i> MaveDB 2024: a curated community database with over seven million variant effects
                     from multiplexed functional assays. <i>Genome Biol</i> <b>26</b>, 13 (2025). <a href=https://doi.org/10.1186/s13059-025-03476-y>https://doi.org/10.1186/s13059-025-03476-y</a>
                 </blockquote>
-                Previous MaveDB publications are listed below:
-                <blockquote>
+                <p>Previous MaveDB publications are listed below:</p>
+                <blockquote class="ml-10">
                 Daniel Esposito, Jochen Weile, Jay Shendure, Lea M Starita, Anthony T Papenfuss, Frederick P Roth, Douglas M Fowler, Alan F Rubin.
                 MaveDB: an open-source platform to distribute and interpret data from multiplexed assays of variant effect.
                 <i>Genome Biol</i> <b>20</b>, 223 (2019). <a href="https://doi.org/10.1186/s13059-019-1845-6">https://doi.org/10.1186/s13059-019-1845-6</a>
@@ -115,23 +115,3 @@ export default defineComponent({
     }
 });
 </script>
-
-<style scoped>
-.about-view {
-    display: flex;
-    flex-direction: column;
-    padding: 1.5rem;
-    gap: 1rem;
-}
-
-.about-view__header h1 {
-    margin: 0;
-    font-size: 1.75rem;
-    font-weight: 600;
-}
-
-.about-view__content {
-    font-size: 1rem;
-    line-height: 1.5;
-}
-</style>
diff --git a/src/components/screens/DashboardView.vue b/src/components/screens/DashboardView.vue
index caba6f0f..6f136a2d 100644
--- a/src/components/screens/DashboardView.vue
+++ b/src/components/screens/DashboardView.vue
@@ -1,25 +1,46 @@
 <template>
   <DefaultLayout :require-auth="true">
-    <h1>Welcome to MaveDB</h1>
+    <h1 class="text-4xl font-bold py-4">Welcome to MaveDB</h1>
     <TabView>
       <TabPanel header="Published">
         <div class="mavedb-search-view">
-          <div class="mavedb-search-header" style="display: none">
-            <h1>Search MaveDB Experiments and Score Sets</h1>
-          </div>
-          <h2 class="mave-score-set-section-title">Published Score sets</h2>
+          <h2 class="text-xl font-bold py-2">Published Score sets</h2>
           <div class="mavedb-search-form">
-            <span class="p-input-icon-left">
+            <!-- <span class="p-input-icon-left">
               <i class="pi pi-search" />
               <InputText ref="searchTextInput" v-model="searchText" placeholder="Search" type="text" @change="search" />
-            </span>
+            </span> -->
+            <div style="display: inline-block; margin-left: 40px">
+              <div class="p-inputgroup" style="max-width: 300px; width: 300px; display: flex; align-items: stretch;">
+                <InputText
+                  ref="searchTextInput"
+                  v-model="searchText"
+                  class="p-inputtext-sm rounded-r-none!"
+                  placeholder="Search"
+                  style="width: 200px; height: auto;"
+                  type="text"
+                  @change="search"
+                />
+                <Button
+                  class="p-button-default p-button-sm rounded-l-none!"
+                  :enabled="searchText && searchText.length > 0"
+                  icon="pi pi-search"
+                  @click="search"
+                />
+                <ProgressSpinner
+                  v-if="isSearching"
+                  class="size-8! m-1"
+                />
+              </div>
+            </div>
           </div>
+
           <ScoreSetTable :data="publishedScoreSets" :language="language" :scroll-x="true" :scroll-y="true" />
         </div>
       </TabPanel>
       <TabPanel header="Unpublished">
         <div class="mavedb-search-view">
-          <h2 class="mave-score-set-section-title">Unpublished Score sets</h2>
+          <h2 class="text-xl font-bold py-2">Unpublished Score sets</h2>
           <ScoreSetTable :data="unpublishedScoreSets" :language="language" :scroll-x="true" :scroll-y="true" />
         </div>
       </TabPanel>
@@ -33,6 +54,8 @@ import InputText from 'primevue/inputtext'
 import TabPanel from 'primevue/tabpanel'
 import TabView from 'primevue/tabview'
 import {useHead} from '@unhead/vue'
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
 
 import config from '@/config'
 import ScoreSetTable from '@/components/ScoreSetTable.vue'
@@ -41,7 +64,7 @@ import DefaultLayout from '@/components/layout/DefaultLayout'
 export default {
   name: 'HomeView',
 
-  components: {DefaultLayout, ScoreSetTable, InputText, TabView, TabPanel},
+  components: {DefaultLayout, ScoreSetTable, InputText, TabView, TabPanel, Button, ProgressSpinner},
 
   setup: () => {
     useHead({title: 'My dashboard'})
@@ -57,7 +80,8 @@ export default {
       displayedUnplublishedScoreSets: false,
       language: {
         emptyTable: 'You do not have any score sets matching the request.'
-      }
+      },
+      isSearching: false,
     }
   },
 
@@ -77,7 +101,9 @@ export default {
 
   methods: {
     search: async function () {
+      this.isSearching = true
       await this.fetchSearchResults()
+      this.isSearching = false
       /*
       if (this.searchText && this.searchText.length > 0) {
         await this.fetchSearchResults()
diff --git a/src/components/screens/DocumentationView.vue b/src/components/screens/DocumentationView.vue
index ad477fda..7bd9c22e 100644
--- a/src/components/screens/DocumentationView.vue
+++ b/src/components/screens/DocumentationView.vue
@@ -1,24 +1,26 @@
 <template>
   <DefaultLayout>
-    <h1>Documentation</h1>
-    <p>Welcome to the documentation page for MaveDB and its associated packages.</p>
-    <ul>
-      <li><a href="/docs/mavedb/index.html">MaveDB documentation homepage</a></li>
-      <ul>
-        <li>View project on <a href="https://github.com/VariantEffect/mavedb-api">GitHub</a></li>
-        <li><a :href="apiDocumentationUrl">API documentation</a></li>
+    <div class="ml-12 mt-4">
+      <h1 class="text-2xl font-extrabold mb-4">Documentation</h1>
+      <p class="mb-4">Welcome to the documentation page for MaveDB and its associated packages.</p>
+      <ul class="ml-10 list-disc">
+        <li><a href="/docs/mavedb/index.html">MaveDB documentation homepage</a></li>
+        <ul class="ml-10 list-disc">
+          <li>View project on <a href="https://github.com/VariantEffect/mavedb-api">GitHub</a></li>
+          <li><a :href="apiDocumentationUrl">API documentation</a></li>
+        </ul>
+        <li><a href="/docs/mavehgvs/index.html">MAVE-HGVS documentation homepage</a></li>
+        <ul class="ml-10 list-disc">
+          <li>View project on <a href="https://github.com/VariantEffect/mavehgvs">GitHub</a></li>
+          <li>View project on <a href="https://pypi.org/project/mavehgvs/">PyPI</a></li>
+        </ul>
+        <li><a href="/docs/mavetools/index.html">MaveTools documentation homepage</a></li>
+        <ul class="ml-10 list-disc">
+          <li>View project on <a href="https://github.com/VariantEffect/MaveTools">GitHub</a></li>
+          <li>View project on <a href="https://pypi.org/project/mavetools/">PyPI</a></li>
+        </ul>
       </ul>
-      <li><a href="/docs/mavehgvs/index.html">MAVE-HGVS documentation homepage</a></li>
-      <ul>
-        <li>View project on <a href="https://github.com/VariantEffect/mavehgvs">GitHub</a></li>
-        <li>View project on <a href="https://pypi.org/project/mavehgvs/">PyPI</a></li>
-      </ul>
-      <li><a href="/docs/mavetools/index.html">MaveTools documentation homepage</a></li>
-      <ul>
-        <li>View project on <a href="https://github.com/VariantEffect/MaveTools">GitHub</a></li>
-        <li>View project on <a href="https://pypi.org/project/mavetools/">PyPI</a></li>
-      </ul>
-    </ul>
+    </div>
   </DefaultLayout>
 </template>
 
diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index 92be08d5..3c46e4c7 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -10,7 +10,7 @@
         <div class="mave-screen-title">Edit experiment {{ item.urn }}</div>
         <div v-if="item" class="mavedb-screen-title-controls">
           <Button @click="saveEditContent">Save changes</Button>
-          <Button class="p-button-help" @click="resetForm">Clear</Button>
+          <Button severity="help" @click="resetForm">Clear</Button>
           <Button class="p-button-warning" @click="viewItem">Cancel</Button>
         </div>
       </div>
@@ -18,30 +18,23 @@
         <div class="mave-screen-title">Create a new experiment</div>
         <div class="mavedb-screen-title-controls">
           <Button @click="validateAndSave">Save</Button>
-          <Button class="p-button-help" @click="resetForm">Clear</Button>
+          <Button severity="help" @click="resetForm">Clear</Button>
           <Button class="p-button-warning" @click="backDashboard">Cancel</Button>
         </div>
       </div>
       <div class="mavedb-wizard">
-        <Stepper v-model:active-step="activeWizardStep">
-          <StepperPanel>
-            <template #header="{index, clickCallback}">
-              <button
-                class="p-stepper-action"
-                :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
-                role="tab"
-                @click="clickCallback"
-              >
-                <span class="p-stepper-number">{{ index + 1 }}</span>
-                <span class="p-stepper-title">Experiment information</span>
-              </button>
-            </template>
-            <template #content="{nextCallback: showNextWizardStep}">
+        <Stepper v-model:value="activeWizardStep">
+          <StepList>
+              <Step :value="1">Experiment information</Step>
+              <Step :disabled="maxWizardStepEntered < activeWizardStep || maxWizardStepValidated < activeWizardStep - 1" :value="2">Keywords</Step>
+          </StepList>
+          <StepPanels>
+            <StepPanel v-slot="{ value, activateCallback }" :value="1">
               <div class="mavedb-wizard-form">
                 <div class="mavedb-wizard-form-content-background"></div>
                 <div class="mavedb-wizard-row">
                   <div class="mavedb-wizard-content-pane">
-                    <Message severity="info">
+                    <Message closable severity="info">
                       You are currently adding an experiment to a new experiment set. To add an experiment to an
                       existing experiment set, navigate to the existing experiment set and click the "Add experiment"
                       button.
@@ -99,18 +92,24 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <TabView>
-                      <TabPanel header="Edit">
-                        <span class="p-float-label">
-                          <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="10" />
-                          <label :for="scopedId('input-abstractText')">Abstract</label>
-                        </span>
-                      </TabPanel>
-                      <TabPanel header="Preview">
-                        <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div class="mavedb-wizard-rendered-markdown" v-html="markdownToHtml(abstractText)"></div>
-                      </TabPanel>
-                    </TabView>
+                    <Tabs value="0">
+                      <TabList>
+                        <Tab value="0"> Edit </Tab>
+                        <Tab value="1"> Preview </Tab>
+                      </TabList>
+                      <TabPanels>
+                        <TabPanel header="Edit" value="0">
+                          <span class="p-float-label">
+                            <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="10" />
+                            <label :for="scopedId('input-abstractText')">Abstract</label>
+                          </span>
+                        </TabPanel>
+                        <TabPanel header="Preview" value="1">
+                          <!-- eslint-disable-next-line vue/no-v-html -->
+                          <div class="mavedb-wizard-rendered-markdown" v-html="markdownToHtml(abstractText)"></div>
+                        </TabPanel>
+                      </TabPanels>
+                    </Tabs>
                     <span v-if="validationErrors.abstractText" class="mave-field-error">{{
                       validationErrors.abstractText
                     }}</span>
@@ -135,18 +134,24 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <TabView>
-                      <TabPanel header="Edit">
-                        <span class="p-float-label">
-                          <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="10" />
-                          <label :for="scopedId('input-methodText')">Methods</label>
-                        </span>
-                      </TabPanel>
-                      <TabPanel header="Preview">
-                        <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div class="mavedb-wizard-rendered-markdown" v-html="markdownToHtml(methodText)"></div>
-                      </TabPanel>
-                    </TabView>
+                    <Tabs value="0">
+                      <TabList>
+                        <Tab value="0"> Edit </Tab>
+                        <Tab value="1"> Preview </Tab>
+                      </TabList>
+                      <TabPanels>
+                        <TabPanel header="Edit" value="0">
+                          <span class="p-float-label">
+                            <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="10" />
+                            <label :for="scopedId('input-methodText')">Methods</label>
+                          </span>
+                        </TabPanel>
+                        <TabPanel header="Preview" value="1">
+                          <!-- eslint-disable-next-line vue/no-v-html -->
+                          <div class="mavedb-wizard-rendered-markdown" v-html="markdownToHtml(methodText)"></div>
+                        </TabPanel>
+                      </TabPanels>
+                    </Tabs>
                     <span v-if="validationErrors.methodText" class="mave-field-error">{{
                       validationErrors.methodText
                     }}</span>
@@ -175,7 +180,10 @@
                       >
                         <template #chip="slotProps">
                           <div>
-                            <span>{{ slotProps.value.identifier }}</span>
+                              <span>{{ slotProps.value?.identifier }}</span>
+                          </div>
+                          <div>
+                            <i class="pi pi-times-circle" @click="removeDoiIdentifier(slotProps.value)"></i>
                           </div>
                         </template>
                       </Chips>
@@ -203,7 +211,7 @@
                           v-model="contributors"
                           :add-on-blur="true"
                           :allow-duplicate="false"
-                          placeholder="Type or paste ORCID IDs here."
+                          :placeholder="contributors?.length > 0 ? '' : 'Type or paste ORCID IDs here.'"
                           @add="newContributorsAdded"
                           @keyup.escape="clearContributorSearch"
                         >
@@ -216,6 +224,9 @@
                               </div>
                               <div v-else>{{ slotProps.value.orcidId }}</div>
                             </div>
+                            <div>
+                              <i class="pi pi-times-circle" @click="removeContributor(slotProps.value)"></i>
+                            </div>
                           </template>
                         </Chips>
                         <label :for="scopedId('input-contributors')">Contributors</label>
@@ -241,30 +252,29 @@
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
                         <AutoComplete
-                          :id="scopedId('input-publicationIdentifiers')"
-                          ref="publicationIdentifiersInput"
+                          :id="scopedId('input-publicationIdentifiers')"                          ref="publicationIdentifiersInput"
                           v-model="publicationIdentifiers"
                           :multiple="true"
                           option-label="identifier"
                           :suggestions="publicationIdentifierSuggestionsList"
                           @complete="searchPublicationIdentifiers"
-                          @item-select="acceptNewPublicationIdentifier"
-                          @item-unselect="removePublicationIdentifier"
                           @keyup.escape="clearPublicationIdentifierSearch"
+                          @option-select="acceptNewPublicationIdentifier"
                         >
                           <template #chip="slotProps">
-                            <div>
+                            <div class="p-inputchips-chip-item">
+                              {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
                               <div>
-                                {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
+                                <i class="pi pi-times-circle" @click="removePublicationIdentifier(slotProps.value)"></i>
                               </div>
                             </div>
                           </template>
-                          <template #item="slotProps">
+                          <template #option="slotProps">
                             <div>
-                              <div>Title: {{ slotProps.item.title }}</div>
-                              <div>DOI: {{ slotProps.item.doi }}</div>
-                              <div>Identifier: {{ slotProps.item.identifier }}</div>
-                              <div>Database: {{ slotProps.item.dbName }}</div>
+                              <div>Title: {{ slotProps.option.title }}</div>
+                              <div>DOI: {{ slotProps.option.doi }}</div>
+                              <div>Identifier: {{ slotProps.option.identifier }}</div>
+                              <div>Database: {{ slotProps.option.dbName }}</div>
                             </div>
                           </template>
                         </AutoComplete>
@@ -285,6 +295,7 @@
                           :id="scopedId('input-primaryPublicationIdentifiers')"
                           ref="primaryPublicationIdentifiersInput"
                           v-model="primaryPublicationIdentifiers"
+                          class="p-inputwrapper-filled"
                           option-label="identifier"
                           :options="publicationIdentifiers"
                           placeholder="Select a primary publication (Where the dataset is described)"
@@ -335,11 +346,14 @@
                           :add-on-blur="true"
                           :allow-duplicate="false"
                           @add="acceptNewRawReadIdentifier"
-                        >
                           @keyup.escape="clearRawReadIdentifierSearch"
+                        >
                           <template #chip="slotProps">
                             <div>
-                              <span>{{ slotProps.value.identifier }}</span>
+                                <span>{{ slotProps.value.identifier }} </span>
+                            </div>
+                            <div>
+                              <i class="pi pi-times-circle" @click="removeRawReadIdentifier(slotProps.value)"></i>
                             </div>
                           </template>
                         </Chips>
@@ -388,26 +402,13 @@
                     icon="pi pi-arrow-right"
                     icon-pos="right"
                     label="Next"
-                    @click="showNextWizardStepIfValid(showNextWizardStep)"
+                    @click="showNextWizardStepIfValid(activateCallback)"
                   />
                 </div>
               </div>
-            </template>
-          </StepperPanel>
-          <StepperPanel v-if="itemStatus == 'NotLoaded' || item.private" header="Keywords">
-            <template #header="{index, clickCallback}">
-              <button
-                class="p-stepper-action"
-                :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
-                role="tab"
-                @click="clickCallback"
-              >
-                <span class="p-stepper-number">{{ index + 1 }}</span>
-                <span class="p-stepper-title">Keywords</span>
-              </button>
-            </template>
-            <template #content="{prevCallback: showPreviousWizardStep}">
-              <Message>
+            </StepPanel>
+            <StepPanel v-if="itemStatus == 'NotLoaded' || item.private" v-slot="{ activateCallback }" :value="2">
+              <Message closable>
                 Experiments can be tagged with optional keywords. In a future release, the keyword vocabulary will
                 become restricted and keyword selection will be mandatory.
               </Message>
@@ -482,9 +483,9 @@
               </div>
               <div class="mavedb-wizard-step-controls-row">
                 <div class="flex justify-content-between mavedb-wizard-step-controls pt-4">
-                  <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="showPreviousWizardStep" />
+                  <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="activateCallback(activeWizardStep - 1)" />
                   <Button
-                    :disabled="maxWizardStepValidated < activeWizardStep"
+                    :disabled="maxWizardStepValidated == -2"
                     icon="pi pi-arrow-right"
                     icon-pos="right"
                     label="Save"
@@ -492,8 +493,8 @@
                   />
                 </div>
               </div>
-            </template>
-          </StepperPanel>
+            </StepPanel>
+          </StepPanels>
         </Stepper>
       </div>
     </div>
@@ -516,9 +517,15 @@ import Message from 'primevue/message'
 import Multiselect from 'primevue/multiselect'
 import ProgressSpinner from 'primevue/progressspinner'
 import Stepper from 'primevue/stepper'
-import StepperPanel from 'primevue/stepperpanel'
+import StepPanel from 'primevue/steppanel'
+import StepPanels from 'primevue/steppanels'
+import StepList from 'primevue/steplist'
+import Step from 'primevue/step'
+import Tabs from 'primevue/tabs'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import TabPanels from 'primevue/tabpanels'
 import TabPanel from 'primevue/tabpanel'
-import TabView from 'primevue/tabview'
 import Textarea from 'primevue/textarea'
 import {useHead} from '@unhead/vue'
 
@@ -632,9 +639,15 @@ export default {
     Multiselect,
     ProgressSpinner,
     Stepper,
-    StepperPanel,
+    StepPanel,
+    StepPanels,
+    StepList,
+    Step,
+    Tabs,
+    Tab,
+    TabList,
+    TabPanels,
     TabPanel,
-    TabView,
     Textarea
   },
 
@@ -737,10 +750,10 @@ export default {
     },
 
     /** The currently active step. */
-    activeWizardStep: 0,
+    activeWizardStep: 1,
 
     /** The highest step that the user has entered. This can be used to prevent the user from jumping ahead. */
-    maxWizardStepEntered: 0,
+    maxWizardStepEntered: 1,
 
     stepFields: [
       [
@@ -892,6 +905,25 @@ export default {
       }
     },
 
+    removeContributor: function (contributor) {
+      const index = this.contributors.findIndex(c => c.orcidId === contributor.orcidId)
+      if (index !== -1) {
+        this.contributors.splice(index, 1)
+      }
+    },
+    removeRawReadIdentifier: function (rawReadIdentifier) {
+      const index = this.rawReadIdentifiers.findIndex(r => r.identifier === rawReadIdentifier.identifier)
+      if (index !== -1) {
+        this.rawReadIdentifiers.splice(index, 1)
+      }
+    },
+    removeDoiIdentifier: function (doiIdentifier) {
+      const index = this.doiIdentifiers.findIndex(d => d.identifier === doiIdentifier.identifier)
+      if (index !== -1) {
+        this.doiIdentifiers.splice(index, 1)
+      }
+    },
+
     suggestionsForAutocomplete: function (suggestions) {
       // The PrimeVue AutoComplete doesn't seem to like it if we set the suggestion list to [].
       // This causes the drop-down to stop appearing when we later populate the list.
@@ -914,12 +946,12 @@ export default {
 
     minStepWithError: function () {
       const numSteps = this.stepFields.length
-      for (let i = 0; i < numSteps; i++) {
+      for (let i = 1; i < numSteps + 1; i++) {
         if (this.wizardStepHasError(i)) {
           return i
         }
       }
-      return numSteps - 1
+      return numSteps
     },
 
     wizardStepHasError: function (step) {
@@ -940,7 +972,7 @@ export default {
     showNextWizardStepIfValid: function (navigate) {
       if (this.maxWizardStepValidated >= this.activeWizardStep) {
         this.maxWizardStepEntered = Math.max(this.maxWizardStepEntered, this.activeWizardStep + 1)
-        navigate()
+        navigate(this.activeWizardStep + 1)
       }
     },
 
@@ -996,8 +1028,12 @@ export default {
     },
 
     removePublicationIdentifier: function (event) {
+      const removedIdentifier = event.identifier
+      const publicationIdx = this.publicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
+      if (publicationIdx != -1) {
+        this.publicationIdentifiers.splice(publicationIdx, 1)
+      }
       // If we are removing a primary publication identifier, also remove it from that list.
-      const removedIdentifier = event.value.identifier
       const primaryIdx = this.primaryPublicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
       if (primaryIdx != -1) {
         this.primaryPublicationIdentifiers.splice(primaryIdx, 1)
@@ -1341,7 +1377,7 @@ export default {
 }
 </script>
 
-<style scoped src="../../assets/forms.css"></style>
+<style src="../../assets/forms.css"></style>
 
 <style scoped>
 /* Cards */
@@ -1372,8 +1408,10 @@ export default {
 
 .keyword-button {
   margin-left: 8px;
-  height: 32px;
-  width: 32px;
+  height: 32px !important;
+  width: 32px !important;
+  min-width: 32px !important;
+  padding: 0 !important;
 }
 
 .keyword-button:deep(.p-button-icon) {
@@ -1403,6 +1441,7 @@ export default {
 .mavedb-wizard-form {
   position: relative;
   z-index: 0;
+  background-color: #f7f7f7;
 }
 
 /* Give the right side of the wizard a white background, without gaps between rows. */
@@ -1454,7 +1493,7 @@ export default {
 .mavedb-wizard-content-pane {
   float: right;
   width: 676px;
-  padding: 0 10px;
+  padding: 10px 10px;
   background-color: #fff;
 }
 
@@ -1473,6 +1512,7 @@ export default {
 .mavedb-wizard-step-controls {
   padding-left: 10px;
   max-width: 100vw;
+  background-color: #f7f7f7;
 }
 
 .field:deep(.mavedb-wizard-rendered-markdown) {
@@ -1491,4 +1531,18 @@ export default {
   right: 5px;
   z-index: 1001;
 }
+
+.p-inputwrapper, .p-textarea, .p-inputtext {
+  width: 100%;
+}
+.keyword-description-input, .keyword-dropdown {
+  width: 450px;
+}
+
+/* Fix list bullets in help text */
+.mavedb-help-small ul {
+  list-style-type: disc;
+  list-style-position: inside;
+  padding-left: 1rem;
+}
 </style>
diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 53163711..92592307 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -80,7 +80,10 @@
                   >
                     <template #chip="slotProps">
                       <div>
-                        <span>{{ slotProps.value.identifier }}</span>
+                          <span>{{ slotProps.value?.identifier }}</span>
+                      </div>
+                      <div>
+                        <i class="pi pi-times-circle" @click="removeDoiIdentifier(slotProps.value)"></i>
                       </div>
                     </template>
                   </Chips>
@@ -100,21 +103,23 @@
                     option-label="identifier"
                     :suggestions="publicationIdentifierSuggestionsList"
                     @complete="searchPublicationIdentifiers"
-                    @item-select="acceptNewPublicationIdentifier"
-                    @item-unselect="removePublicationIdentifier"
                     @keyup.escape="clearPublicationIdentifierSearch"
+                    @option-select="acceptNewPublicationIdentifier"
                   >
                     <template #chip="slotProps">
-                      <div>
-                        <div>{{ slotProps.value.identifier }}</div>
+                      <div class="p-inputchips-chip-item">
+                        {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
+                        <div>
+                          <i class="pi pi-times-circle" @click="removePublicationIdentifier(slotProps.value)"></i>
+                        </div>
                       </div>
                     </template>
-                    <template #item="slotProps">
+                    <template #option="slotProps">
                       <div>
-                        <div>Title: {{ slotProps.item.title }}</div>
-                        <div>DOI: {{ slotProps.item.doi }}</div>
-                        <div>Identifier: {{ slotProps.item.identifier }}</div>
-                        <div>Database: {{ slotProps.item.dbName }}</div>
+                        <div>Title: {{ slotProps.option.title }}</div>
+                        <div>DOI: {{ slotProps.option.doi }}</div>
+                        <div>Identifier: {{ slotProps.option.identifier }}</div>
+                        <div>Database: {{ slotProps.option.dbName }}</div>
                       </div>
                     </template>
                   </AutoComplete>
@@ -130,6 +135,7 @@
                     :id="scopedId('input-primaryPublicationIdentifiers')"
                     ref="primaryPublicationIdentifiersInput"
                     v-model="primaryPublicationIdentifiers"
+                    class="p-inputwrapper-filled"
                     option-label="identifier"
                     :options="publicationIdentifiers"
                     placeholder="Select a primary publication (Where the dataset is described)"
@@ -159,11 +165,14 @@
                     :add-on-blur="true"
                     :allow-duplicate="false"
                     @add="acceptNewRawReadIdentifier"
-                  >
                     @keyup.escape="clearRawReadIdentifierSearch"
+                  >
                     <template #chip="slotProps">
                       <div>
-                        <span>{{ slotProps.value.identifier }}</span>
+                          <span>{{ slotProps.value?.identifier }}</span>
+                      </div>
+                      <div>
+                        <i class="pi pi-times-circle" @click="removeRawReadIdentifier(slotProps.value)"></i>
                       </div>
                     </template>
                   </Chips>
@@ -215,7 +224,7 @@
                     v-model="contributors"
                     :add-on-blur="true"
                     :allow-duplicate="false"
-                    placeholder="Type or paste ORCID IDs here."
+                    :placeholder="contributors.length > 0 ? '' : 'Type or paste ORCID IDs here.'"
                     @add="newContributorsAdded"
                     @keyup.escape="clearContributorSearch"
                   >
@@ -228,6 +237,9 @@
                         </div>
                         <div v-else>{{ slotProps.value.orcidId }}</div>
                       </div>
+                      <div>
+                        <i class="pi pi-times-circle" @click="removeContributor(slotProps.value)"></i>
+                      </div>
                     </template>
                   </Chips>
                   <label :for="scopedId('input-contributors')">Contributors</label>
@@ -312,6 +324,15 @@
                       rounded
                       @click="keywordToggleInput(keyword.key)"
                     />
+                    <Button
+                      aria-label="Delete"
+                      class="keyword-description-button"
+                      :disabled="!keywordKeys[keyword.key]"
+                      icon="pi pi-times"
+                      rounded
+                      severity="danger"
+                      @click="deleteKeyword(keyword.key)"
+                    />
                     &nbsp;<i
                       class="pi pi-info-circle"
                       style="color: green; cursor: pointer"
@@ -801,20 +822,47 @@ export default {
     },
 
     removePublicationIdentifier: function (event) {
+      const removedIdentifier = event.identifier
+      const publicationIdx = this.publicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
+      if (publicationIdx != -1) {
+        this.publicationIdentifiers.splice(publicationIdx, 1)
+      }
       // If we are removing a primary publication identifier, also remove it from that list.
-      const removedIdentifier = event.value.identifier
       const primaryIdx = this.primaryPublicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
       if (primaryIdx != -1) {
         this.primaryPublicationIdentifiers.splice(primaryIdx, 1)
       }
     },
 
+    removeContributor: function (contributor) {
+      const index = this.contributors.findIndex(c => c.orcidId === contributor.orcidId)
+      if (index !== -1) {
+        this.contributors.splice(index, 1)
+      }
+    },
+    removeRawReadIdentifier: function (rawReadIdentifier) {
+      const index = this.rawReadIdentifiers.findIndex(r => r.identifier === rawReadIdentifier.identifier)
+      if (index !== -1) {
+        this.rawReadIdentifiers.splice(index, 1)
+      }
+    },
+    removeDoiIdentifier: function (doiIdentifier) {
+      const index = this.doiIdentifiers.findIndex(d => d.identifier === doiIdentifier.identifier)
+      if (index !== -1) {
+        this.doiIdentifiers.splice(index, 1)
+      }
+    },
+
     clearPublicationIdentifierSearch: function () {
       // This could change with a new Primevue version.
       const input = this.$refs.publicationIdentifiersInput
       input.$refs.focusInput.value = ''
     },
 
+    truncatePublicationTitle: function (title) {
+      return title.length > 50 ? title.slice(0, 50) + '...' : title
+    },
+
     searchPublicationIdentifiers: function (event) {
       const searchText = (event.query || '').trim()
       if (searchText.length > 0) {
@@ -1134,6 +1182,12 @@ export default {
       this.keywordTextVisible[field] = !this.keywordTextVisible[field]
     },
 
+    deleteKeyword: function (field) {
+      this.keywordKeys[field] = null
+      this.keywordDescriptions[field] = null
+      this.keywordTextVisible[field] = false
+    },
+
     showDialog: function (index) {
       this.dialogVisible[index] = true
     }
@@ -1141,7 +1195,7 @@ export default {
 }
 </script>
 
-<style scoped src="../../assets/forms.css"></style>
+<style src="../../assets/forms.css"></style>
 
 <style scoped>
 /* Cards */
@@ -1170,7 +1224,7 @@ export default {
 /* Keywords */
 
 .keyword-dropdown {
-  width: 450px;
+  width: 450px !important;
   height: 45px;
 }
 
@@ -1181,8 +1235,10 @@ export default {
 
 .keyword-description-button {
   margin-left: 8px;
-  height: 32px;
-  width: 32px;
+  height: 32px !important;
+  width: 32px !important;
+  min-width: 32px !important;
+  padding: 0 !important;
 }
 
 .keyword-description-button:deep(.p-button-icon) {
@@ -1202,4 +1258,8 @@ export default {
 .padded-button {
   margin-left: 5px;
 }
+
+.p-inputwrapper, .p-textarea, .p-inputtext {
+  width: 100%;
+}
 </style>
diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index 53aa449f..662be2d9 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -34,7 +34,7 @@
         <div v-if="item.creationDate">
           Created {{ formatDate(item.creationDate) }}
           <span v-if="item.createdBy">
-            <a :href="`https://orcid.org/${item.createdBy.orcidId}`" target="blank"
+            <a class="flex items-center gap-1" :href="`https://orcid.org/${item.createdBy.orcidId}`" target="blank"
               ><img alt="ORCIDiD" src="@/assets/ORCIDiD_icon.png" />{{ item.createdBy.firstName }}
               {{ item.createdBy.lastName }}</a
             ></span
@@ -42,8 +42,8 @@
         </div>
         <div v-if="item.modificationDate">
           Last updated {{ formatDate(item.modificationDate) }}
-          <span v-if="item.modifiedBy">
-            <a :href="`https://orcid.org/${item.modifiedBy.orcidId}`" target="blank"
+          <span v-if="item.modifiedBy" class="flex">
+            <a class="flex items-center gap-1" :href="`https://orcid.org/${item.modifiedBy.orcidId}`" target="blank"
               ><img alt="ORCIDiD" src="@/assets/ORCIDiD_icon.png" />{{ item.modifiedBy.firstName }}
               {{ item.modifiedBy.lastName }}</a
             ></span
@@ -54,7 +54,7 @@
           <a
             v-for="contributor in contributors"
             :key="contributor.orcidId"
-            class="mave-contributor"
+            class="mave-contributor flex items-center gap-1"
             :href="`https://orcid.org/${contributor.orcidId}`"
             target="blank"
           >
@@ -74,7 +74,7 @@
 
         <div class="mave-score-set-section-title">Score Sets</div>
         <div v-if="associatedScoreSets.length != 0">
-          <ul>
+          <ul class="list-disc pl-4">
             <li v-for="scoreSet in associatedScoreSets" :key="scoreSet.id">
               <router-link :to="{name: 'scoreSet', params: {urn: scoreSet.urn}}">{{ scoreSet.urn }}</router-link>
             </li>
@@ -96,7 +96,7 @@
         <div class="mave-score-set-section-title">Primary References</div>
         <div v-if="item.primaryPublicationIdentifiers.length > 0">
           <div v-for="publication in item.primaryPublicationIdentifiers" :key="publication">
-            <ul style="list-style-type: square">
+            <ul class="pl-4" style="list-style-type: square">
               <!-- eslint-disable-next-line vue/no-v-html -->
               <li v-html="markdownToHtml(publication.referenceHtml)"></li>
               <div>
@@ -116,7 +116,7 @@
         <div class="mave-score-set-section-title">Secondary References</div>
         <div v-if="item.secondaryPublicationIdentifiers.length > 0">
           <div v-for="publication in item.secondaryPublicationIdentifiers" :key="publication">
-            <ul style="list-style-type: square">
+            <ul class="pl-4" style="list-style-type: square">
               <!-- eslint-disable-next-line vue/no-v-html -->
               <li v-html="markdownToHtml(publication.referenceHtml)"></li>
               <div>
@@ -254,7 +254,7 @@
         <div class="mave-score-set-section-title">External identifier</div>
         <strong>DOI: </strong>
         <div v-if="item.doiIdentifiers.length != 0">
-          <ul style="list-style-type: square">
+          <ul class="pl-4" style="list-style-type: square">
             <li v-for="(doi, i) of item.doiIdentifiers" :key="i">
               <a :href="`${doi.url}`" target="blank">{{ doi.identifier }}</a>
             </li>
@@ -263,7 +263,7 @@
         <template v-else>No associated DOIs<br /></template>
         <strong>Raw reads: </strong>
         <div v-if="item.rawReadIdentifiers.length != 0">
-          <ul style="list-style-type: square">
+          <ul class="pl-4" style="list-style-type: square">
             <li v-for="(read, i) of item.rawReadIdentifiers" :key="i">
               <a :href="`${read.url}`" target="blank">{{ read.identifier }}</a>
             </li>
diff --git a/src/components/screens/HomeScreen.vue b/src/components/screens/HomeScreen.vue
index c47fa3b7..144c86e4 100644
--- a/src/components/screens/HomeScreen.vue
+++ b/src/components/screens/HomeScreen.vue
@@ -1,15 +1,14 @@
 <template>
   <DefaultLayout>
-    <div class="grid" style="margin: 10px 0;">
+    <div class="grid my-2!">
       <div class="col-12">
-        <p class="mavedb-mavemd-notice">
-          <router-link to="/mavemd"><img alt="MaveMD" class="mavedb-mavemd-logo" src="@/assets/mavemd-logo.png" /></router-link>
-          &nbsp;
-          Looking for the new MaveMD clinical features? <router-link to="/mavemd">Click here.</router-link>
-        </p>
+        <div class="flex justify-center flex-row gap-4 m-2">
+          <router-link to="/mavemd"><img alt="MaveMD" class="h-10" src="@/assets/mavemd-logo.png" /></router-link>
+          <span class="text-lg my-auto">Looking for the new MaveMD clinical features? <router-link to="/mavemd">Click here.</router-link></span>
+        </div>
       </div>
-      <div class="col-8">
-        <Card>
+      <div class="col-8 flex">
+        <Card class="flex-1">
           <template #title>About</template>
           <template #content>
             <p>
@@ -40,8 +39,8 @@
           </template>
         </Card>
       </div>
-      <div class="col-4">
-        <Card>
+      <div class="col-4 flex flex-column">
+        <Card class="flex-1">
           <template #title>Featured Searches</template>
           <template #content>
             <table>
@@ -123,12 +122,12 @@
             <p>
               To cite MaveDB, please cite our most recent publication:
             </p>
-            <blockquote>
+            <blockquote class="m-5 my-2">
                 Rubin, A.F., Stone, J., Bianchi, A.H. <i>et al.</i> MaveDB 2024: a curated community database with over seven million variant effects
                 from multiplexed functional assays. <i>Genome Biol</i> <b>26</b>, 13 (2025). <a href=https://doi.org/10.1186/s13059-025-03476-y>https://doi.org/10.1186/s13059-025-03476-y</a>
             </blockquote>
             Previous MaveDB publications are listed below:
-            <blockquote>
+            <blockquote class="mx-5 my-2">
               Daniel Esposito, Jochen Weile, Jay Shendure, Lea M Starita, Anthony T Papenfuss, Frederick P Roth, Douglas M Fowler, Alan F Rubin.
               MaveDB: an open-source platform to distribute and interpret data from multiplexed assays of variant effect.
               <i>Genome Biol</i> <b>20</b>, 223 (2019). <a href="https://doi.org/10.1186/s13059-019-1845-6">https://doi.org/10.1186/s13059-019-1845-6</a>
@@ -162,8 +161,8 @@ export default {
     const addExperiment = () => {
         router.push({ name: 'createExperiment' })
     }
-    return { 
-      addScoreSet, 
+    return {
+      addScoreSet,
       addExperiment,
     }
   },
@@ -191,6 +190,7 @@ td, th {
 
 ul {
   padding-left: 1em;
+  list-style-type: disc;
 }
 
 .mave-hgvs-example {
@@ -199,12 +199,4 @@ ul {
   cursor: pointer;
 }
 
-.mavedb-mavemd-notice {
-  text-align: center; font-size: 120%;
-}
-
-.mavedb-mavemd-logo {
-  height: 40px;
-  vertical-align: middle;
-}
 </style>
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 15e2d444..4f3a0cd8 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -13,1459 +13,1474 @@
         </div>
       </div>
       <div class="mavedb-wizard">
-        <Stepper v-model:active-step="activeWizardStep">
-          <StepperPanel>
-            <template #header="{index, clickCallback}">
-              <button
-                class="p-stepper-action"
-                :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
-                role="tab"
-                @click="clickCallback"
-              >
-                <span class="p-stepper-number">{{ index + 1 }}</span>
-                <span class="p-stepper-title">Parent experiment and context</span>
-              </button>
-            </template>
-            <template #content="{nextCallback: showNextWizardStep}">
-              <div class="mavedb-wizard-form">
-                <div class="mavedb-wizard-form-content-background"></div>
-                <div v-if="experimentUrn && experiment">
+        <Stepper v-model:value="activeWizardStep">
+          <StepList>
+            <Step :value="0">Parent experiment and context</Step>
+            <Step :value="1">Score set information</Step>
+            <Step :value="2">Targets</Step>
+            <Step v-for="(targetNum, targetIdx) in numTargets" :key="targetIdx" :value="targetIdx + 3">Target {{ targetIdx + 1 }}</Step>
+            <Step :value="numTargets + 3">Score Calibration</Step>
+            <Step :value="numTargets + 4">Variant Scores</Step>
+          </StepList>
+          <StepPanels>
+            <StepPanel v-slot="{ activateCallback }" :value="0">
+              <!-- <template #header="{index, clickCallback}">
+                <button
+                  class="p-stepper-action"
+                  :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
+                  role="tab"
+                  @click="clickCallback"
+                >
+                  <span class="p-stepper-number">{{ index + 1 }}</span>
+                  <span class="p-stepper-title">Parent experiment and context</span>
+                </button>
+              </template> -->
+              <!-- <template #content="{nextCallback: showNextWizardStep}"> -->
+                <div class="mavedb-wizard-form">
+                  <div class="mavedb-wizard-form-content-background"></div>
+                  <div v-if="experimentUrn && experiment">
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-experiment')"> Experiment: {{ experimentUrn }} </label>
+                        <div class="mavedb-help-small">
+                          To add a score set to a different experiment, supercede a score set or add a score set to
+                          meta-analysis, please navigate to "New score set". For more on the relationship between score
+                          sets and experiments, see the
+                          <a :href="`${config.appBaseUrl}/docs/mavedb/record_types.html#record-types`" target="_blank"
+                            >documentation</a
+                          >.
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        Experiment title:
+                        <router-link :to="{name: 'experiment', params: {urn: experimentUrn}}">
+                          {{ experiment.title }}
+                        </router-link>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-else>
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-superseding-score-set-label')">
+                          Does this score set correct errors in and replace a score set previously published on MaveDB
+                          that you created?
+                        </label>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <InputSwitch
+                          v-model="isSupersedingScoreSet"
+                          :aria-labelledby="scopedId('input-superseding-score-set-label')"
+                        />
+                        <div class="mavedb-switch-value">
+                          {{
+                            isSupersedingScoreSet
+                              ? 'Yes, this supersedes another score set'
+                              : 'No, this does not supersede another score set'
+                          }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-is-meta-analysis-label')">Is this score set a meta-analysis?</label>
+                        <div class="mavedb-help-small">
+                          Meta-analyses are score sets derived from data in other score sets that were created by you or
+                          other users. For example:
+                          <ul>
+                            <li>a score set that combines data from two other score sets to produce new scores, or</li>
+                            <li>a score set that adds imputed missing values to the scores in another score set.</li>
+                          </ul>
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <InputSwitch
+                          v-model="isMetaAnalysis"
+                          :aria-labelledby="scopedId('input-is-meta-analysis-label')"
+                        />
+                        <div class="mavedb-switch-value">
+                          {{ isMetaAnalysis ? 'Yes, this is a meta-analysis' : 'No, this is not a meta-analysis' }}
+                        </div>
+                      </div>
+                    </div>
+                    <div v-if="!isSupersedingScoreSet && !isMetaAnalysis" class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        To which experiment does this score set belong?
+                        <div class="mavedb-help-small">
+                          For more on the relationship between score sets and experiments, see the
+                          <a :href="`${config.appBaseUrl}/docs/mavedb/record_types.html#record-types`" target="_blank"
+                            >documentation</a
+                          >.
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <div style="position: relative">
+                          <span class="p-float-label">
+                            <Dropdown
+                              :id="scopedId('input-experiment')"
+                              ref="experimentInput"
+                              v-model="experiment"
+                              filter
+                              option-label="title"
+                              :options="editableExperiments"
+                              style="width: 100%"
+                              :virtual-scroller-options="{itemSize: 50}"
+                              @change="populateExperimentMetadata"
+                            >
+                              <template #option="slotProps">
+                                {{ slotProps.option.urn }}: {{ slotProps.option.title }}
+                              </template>
+                              <template #empty>
+                                <div style="padding: 10px; text-align: center">No experiments found.</div>
+                              </template>
+                            </Dropdown>
+                            <label :for="scopedId('input-experiment')">Experiment</label>
+                          </span>
+                          <span v-if="validationErrors.experiment" class="mave-field-error">{{
+                            validationErrors.experiment
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div v-if="isSupersedingScoreSet" class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        What score set does this supersede?
+                        <div class="mavedb-help-small">
+                          Type the superseded score set's MaveDB URN here and select it from the list.
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <div class="field">
+                          <span class="p-float-label">
+                            <AutoComplete
+                              :id="scopedId('input-supersededScoreSet')"
+                              ref="supersededScoreSetInput"
+                              v-model="supersededScoreSet"
+                              field="title"
+                              :force-selection="true"
+                              :suggestions="supersededScoreSetSuggestionsList"
+                              @change="populateSupersededScoreSetMetadata"
+                              @complete="searchSupersededScoreSets"
+                            >
+                              <template #item="slotProps">
+                                {{ slotProps.item.urn }}: {{ slotProps.item.title }}
+                              </template>
+                            </AutoComplete>
+                            <label :for="scopedId('input-supersededScoreSet')">Supersedes</label>
+                          </span>
+                          <span v-if="validationErrors.supersededScoreSetUrn" class="mave-field-error">{{
+                            validationErrors.supersededScoreSetUrn
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div v-if="isMetaAnalysis" class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        What score set(s) does this score set analyze?
+                        <div class="mavedb-help-small">
+                          Type a score set's MaveDB URN here and select it from the list. You may choose more than one
+                          score set.
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <div class="field">
+                          <span class="p-float-label">
+                            <AutoComplete
+                              :id="scopedId('input-metaAnalyzesScoreSets')"
+                              ref="metaAnalyzesScoreSetsInput"
+                              v-model="metaAnalyzesScoreSets"
+                              field="title"
+                              :force-selection="true"
+                              :multiple="true"
+                              :suggestions="metaAnalyzesScoreSetSuggestionsList"
+                              @complete="searchMetaAnalyzesScoreSets"
+                            >
+                              <template #item="slotProps">
+                                {{ slotProps.item.urn }}: {{ slotProps.item.title }}
+                              </template>
+                            </AutoComplete>
+                            <label :for="scopedId('input-metaAnalyzesScoreSets')">Meta-analysis for</label>
+                          </span>
+                          <span v-if="validationErrors.metaAnalyzesScoreSetUrns" class="mave-field-error">{{
+                            validationErrors.metaAnalyzesScoreSetUrns
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="mavedb-wizard-step-controls-row">
+                  <div class="flex justify-content-end mavedb-wizard-step-controls pt-4">
+                    <Button
+                      :disabled="maxWizardStepValidated < activeWizardStep"
+                      icon="pi pi-arrow-right"
+                      icon-pos="right"
+                      label="Next"
+                      @click="showNextWizardStepIfValid(activateCallback)"
+                    />
+                  </div>
+                </div>
+              <!-- </template> -->
+            </StepPanel>
+            <StepPanel v-slot="{ activateCallback }" :value="1" >
+              <!-- <template #header="{index, clickCallback}">
+                <button
+                  class="p-stepper-action"
+                  :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
+                  role="tab"
+                  @click="clickCallback"
+                >
+                  <span class="p-stepper-number">{{ index + 1 }}</span>
+                  <span class="p-stepper-title">Score set information</span>
+                </button>
+              </template> -->
+              <!-- <template #content="{prevCallback: showPreviousWizardStep, nextCallback: showNextWizardStep}"> -->
+                <div class="mavedb-wizard-form">
+                  <div class="mavedb-wizard-form-content-background"></div>
+                  <div v-if="experiment" class="mavedb-wizard-row">
+                    <div class="mavedb-wizard-content-pane">
+                      <Message closable severity="info">
+                        Some fields were autopopulated based on the selected experiment and should be inspected to ensure
+                        they are still relevant to this score set.
+                      </Message>
+                    </div>
+                  </div>
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-experiment')"> Experiment: {{ experimentUrn }} </label>
+                      <label
+                        >A short title for the score set, to be displayed at the top of the score set's own page.</label
+                      >
                       <div class="mavedb-help-small">
-                        To add a score set to a different experiment, supercede a score set or add a score set to
-                        meta-analysis, please navigate to "New score set". For more on the relationship between score
-                        sets and experiments, see the
-                        <a :href="`${config.appBaseUrl}/docs/mavedb/record_types.html#record-types`" target="_blank"
-                          >documentation</a
-                        >.
+                        Examples: CBS low-B6 imputed and refined, NUDT15 protein stability assay, Arrestin-1 binding,
+                        SpCas9 positive selection
                       </div>
                     </div>
-                    <div class="mavedb-wizard-content">
-                      Experiment title:
-                      <router-link :to="{name: 'experiment', params: {urn: experimentUrn}}">
-                        {{ experiment.title }}
-                      </router-link>
+                    <div class="mavedb-wizard-content field">
+                      <span class="p-float-label">
+                        <InputText :id="scopedId('input-title')" v-model="title" />
+                        <label :for="scopedId('input-title')">Title</label>
+                      </span>
+                      <span v-if="validationErrors.title" class="mave-field-error">{{ validationErrors.title }}</span>
                     </div>
                   </div>
-                </div>
-                <div v-else>
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-superseding-score-set-label')">
-                        Does this score set correct errors in and replace a score set previously published on MaveDB
-                        that you created?
+                      <label>
+                        A high-level description of the score set in one or two sentences, to be displayed in search
+                        results.
                       </label>
-                    </div>
-                    <div class="mavedb-wizard-content">
-                      <InputSwitch
-                        v-model="isSupersedingScoreSet"
-                        :aria-labelledby="scopedId('input-superseding-score-set-label')"
-                      />
-                      <div class="mavedb-switch-value">
-                        {{
-                          isSupersedingScoreSet
-                            ? 'Yes, this supersedes another score set'
-                            : 'No, this does not supersede another score set'
-                        }}
+                      <div class="mavedb-help-small">
+                        Example: A Deep Mutational Scan of the human cystathionine-beta-synthase (CBS) using functional
+                        complementation in yeast via DMS-TileSeq at low levels of Vitamin B6.
                       </div>
                     </div>
+                    <div class="mavedb-wizard-content field">
+                      <span class="p-float-label">
+                        <Textarea :id="scopedId('input-shortDescription')" v-model="shortDescription" rows="4" />
+                        <label :for="scopedId('input-shortDescription')">Short description</label>
+                      </span>
+                      <span v-if="validationErrors.shortDescription" class="mave-field-error">{{
+                        validationErrors.shortDescription
+                      }}</span>
+                    </div>
                   </div>
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-is-meta-analysis-label')">Is this score set a meta-analysis?</label>
+                      <label> The motivation for and approach of the score set. </label>
                       <div class="mavedb-help-small">
-                        Meta-analyses are score sets derived from data in other score sets that were created by you or
-                        other users. For example:
-                        <ul>
-                          <li>a score set that combines data from two other score sets to produce new scores, or</li>
-                          <li>a score set that adds imputed missing values to the scores in another score set.</li>
-                        </ul>
+                        May be formatted using
+                        <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>. It is
+                        common for a score set to have the same abstract text as the experiment that it belongs to. The
+                        focus should be on the MAVE data, rather than the full research contribution, so use your
+                        judgement when deciding what details are relevant.
                       </div>
                     </div>
-                    <div class="mavedb-wizard-content">
-                      <InputSwitch
-                        v-model="isMetaAnalysis"
-                        :aria-labelledby="scopedId('input-is-meta-analysis-label')"
-                      />
-                      <div class="mavedb-switch-value">
-                        {{ isMetaAnalysis ? 'Yes, this is a meta-analysis' : 'No, this is not a meta-analysis' }}
-                      </div>
+                    <div class="mavedb-wizard-content field">
+                      <Tabs value="0">
+                        <TabList>
+                          <Tab value="0">Edit</Tab>
+                          <Tab value="1">Preview</Tab>
+                        </TabList>
+                        <TabPanels>
+                          <TabPanel header="Edit" value="0">
+                            <span class="p-float-label">
+                              <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="10" />
+                              <label :for="scopedId('input-abstractText')">Abstract</label>
+                            </span>
+                          </TabPanel>
+                          <TabPanel header="Preview" value="1">
+                            <!-- eslint-disable-next-line vue/no-v-html -->
+                            <div class="mavedb-wizard-rendered-markdown" v-html="markdownToHtml(abstractText)"></div>
+                          </TabPanel>
+                        </TabPanels>
+                      </Tabs>
+                      <span v-if="validationErrors.abstractText" class="mave-field-error">{{
+                        validationErrors.abstractText
+                      }}</span>
                     </div>
                   </div>
-                  <div v-if="!isSupersedingScoreSet && !isMetaAnalysis" class="mavedb-wizard-row">
+                  <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      To which experiment does this score set belong?
+                      <label>
+                        A condensed description of the data analysis, starting from raw sequence data, suitable for a
+                        specialist audience of MAVE researchers.
+                      </label>
                       <div class="mavedb-help-small">
-                        For more on the relationship between score sets and experiments, see the
-                        <a :href="`${config.appBaseUrl}/docs/mavedb/record_types.html#record-types`" target="_blank"
-                          >documentation</a
-                        >.
+                        May be formatted using
+                        <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>. Should
+                        include:
+                        <ul>
+                          <template v-if="isMetaAnalysis">
+                            <li>
+                              a description of how the scores in this score set were generated from the data in the
+                              analyzed score sets, and
+                            </li>
+                          </template>
+                          <template v-else>
+                            <li>
+                              a description of how scores were generated from raw data, including any normalization,
+                            </li>
+                            <li>the sequence read filtering approach used,</li>
+                            <li>details of how replicates were combined (if applicable), and</li>
+                          </template>
+                          <li>
+                            a description of any additional data columns included in the score and count tables, including
+                            column naming conventions.
+                          </li>
+                        </ul>
                       </div>
                     </div>
-                    <div class="mavedb-wizard-content">
-                      <div style="position: relative">
+                    <div class="mavedb-wizard-content field">
+                      <TabView>
+                        <TabPanel header="Edit">
+                          <span class="p-float-label">
+                            <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="10" />
+                            <label :for="scopedId('input-methodText')">Methods</label>
+                          </span>
+                        </TabPanel>
+                        <TabPanel header="Preview">
+                          <!-- eslint-disable-next-line vue/no-v-html -->
+                          <div class="mavedb-wizard-rendered-markdown" v-html="markdownToHtml(methodText)"></div>
+                        </TabPanel>
+                      </TabView>
+                      <span v-if="validationErrors.methodText" class="mave-field-error">{{
+                        validationErrors.methodText
+                      }}</span>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label>
+                          The license under which the data in the score set is made available to the public.
+                        </label>
+                        <div class="mavedb-help-small">
+                          For more on data licensing in MaveDB, see the
+                          <a :href="`${config.appBaseUrl}/docs/mavedb/data_licensing.html#data-licensing`" target="_blank"
+                            >documentation</a
+                          >.
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content field">
                         <span class="p-float-label">
                           <Dropdown
-                            :id="scopedId('input-experiment')"
-                            ref="experimentInput"
-                            v-model="experiment"
-                            filter
-                            option-label="title"
-                            :options="editableExperiments"
-                            style="width: 100%"
-                            :virtual-scroller-options="{itemSize: 50}"
-                            @change="populateExperimentMetadata"
+                            :id="scopedId('input-targetLicenseId')"
+                            v-model="licenseId"
+                            option-label="longName"
+                            option-value="id"
+                            :options="licenses"
+                            style="min-width: 500px"
+                          />
+                          <label :for="scopedId('input-targetLicenseId')">License</label>
+                        </span>
+                        <Message
+                          v-if="licenseId && licenses && licenses.find((l) => l.id == licenseId)?.shortName != 'CC0'"
+                          closable
+                          severity="warn"
+                        >
+                          Choosing a license with these restrictions may cause your score set to be excluded from data
+                          federation and aggregation by MaveDB collaborators.
+                        </Message>
+                      </div>
+                    </div>
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        Would you like to define any additional restrictions governing the usage of data within this score
+                        set?
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <InputSwitch
+                          v-model="hasCustomUsagePolicy"
+                          :aria-labelledby="scopedId('input-has-custom-usage-policy')"
+                        />
+                        <div class="mavedb-switch-value">
+                          {{
+                            hasCustomUsagePolicy
+                              ? 'Yes, I would like to define additional usage guidelines'
+                              : 'No, I do not need to define additional usage guidenlines'
+                          }}
+                        </div>
+                      </div>
+                    </div>
+                    <div v-if="hasCustomUsagePolicy" class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label> Any additional guidelines governing the usage of the data in this score set. </label>
+                        <div class="mavedb-help-small">
+                          This may assert, for example, the original author's right to publish the data first.
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content field">
+                        <span class="p-float-label">
+                          <Textarea :id="scopedId('input-dataUsagePolicy')" v-model="dataUsagePolicy" rows="4" />
+                          <label :for="scopedId('input-dataUsagePolicy')">Data usage guidelines</label>
+                        </span>
+                        <span v-if="validationErrors.dataUsagePolicy" class="mave-field-error">{{
+                          validationErrors.dataUsagePolicy
+                        }}</span>
+                      </div>
+                    </div>
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label>
+                          Contributors who may edit this score set. Enter each contributor's
+                          <a href="https://orcid.org" target="_blank">ORCID</a> ID and confirm their name.
+                        </label>
+                        <div class="mavedb-help-small">Examples: 1111-1111-1111-1111</div>
+                      </div>
+                      <div class="mavedb-wizard-content field">
+                        <span class="p-float-label">
+                          <Chips
+                            :id="scopedId('input-contributors')"
+                            ref="contributorsInput"
+                            v-model="contributors"
+                            :add-on-blur="true"
+                            :allow-duplicate="false"
+                            placeholder="Type or paste ORCID IDs here."
+                            @add="newContributorsAdded"
+                            @keyup.escape="clearContributorSearch"
                           >
-                            <template #option="slotProps">
-                              {{ slotProps.option.urn }}: {{ slotProps.option.title }}
-                            </template>
-                            <template #empty>
-                              <div style="padding: 10px; text-align: center">No experiments found.</div>
+                            <template #chip="slotProps">
+                              <div>
+                                <div v-if="slotProps.value.givenName || slotProps.value.familyName">
+                                  {{ slotProps.value.givenName }} {{ slotProps.value.familyName }} ({{
+                                    slotProps.value.orcidId
+                                  }})
+                                </div>
+                                <div v-else>{{ slotProps.value.orcidId }}</div>
+                              </div>
                             </template>
-                          </Dropdown>
-                          <label :for="scopedId('input-experiment')">Experiment</label>
+                          </Chips>
+                          <label :for="scopedId('input-contributors')">Contributors</label>
                         </span>
-                        <span v-if="validationErrors.experiment" class="mave-field-error">{{
-                          validationErrors.experiment
+                        <span v-if="validationErrors.contributors" class="mave-field-error">{{
+                          validationErrors.contributors
                         }}</span>
                       </div>
                     </div>
-                  </div>
-                  <div v-if="isSupersedingScoreSet" class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      What score set does this supersede?
-                      <div class="mavedb-help-small">
-                        Type the superseded score set's MaveDB URN here and select it from the list.
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-doiIdentifiers')">
+                          The DOIs of any digital resources associated with the score set.
+                        </label>
+                        <div class="mavedb-help-small">
+                          Please note: If you would like to associate publications with this score set via their DOI,
+                          please do not do so here. Instead, use the publication identifiers field below.
+                        </div>
                       </div>
-                    </div>
-                    <div class="mavedb-wizard-content">
-                      <div class="field">
+                      <div class="mavedb-wizard-content field">
                         <span class="p-float-label">
-                          <AutoComplete
-                            :id="scopedId('input-supersededScoreSet')"
-                            ref="supersededScoreSetInput"
-                            v-model="supersededScoreSet"
-                            field="title"
-                            :force-selection="true"
-                            :suggestions="supersededScoreSetSuggestionsList"
-                            @change="populateSupersededScoreSetMetadata"
-                            @complete="searchSupersededScoreSets"
+                          <Chips
+                            :id="scopedId('input-doiIdentifiers')"
+                            v-model="doiIdentifiers"
+                            :add-on-blur="true"
+                            :allow-duplicate="false"
+                            @add="acceptNewDoiIdentifier"
                           >
-                            <template #item="slotProps">
-                              {{ slotProps.item.urn }}: {{ slotProps.item.title }}
+                            <template #chip="slotProps">
+                              <div>
+                                <div>{{ slotProps.value.identifier }}</div>
+                              </div>
                             </template>
-                          </AutoComplete>
-                          <label :for="scopedId('input-supersededScoreSet')">Supersedes</label>
+                          </Chips>
+                          <label :for="scopedId('input-doiIdentifiers')">DOI identifiers</label>
                         </span>
-                        <span v-if="validationErrors.supersededScoreSetUrn" class="mave-field-error">{{
-                          validationErrors.supersededScoreSetUrn
+                        <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
+                          validationErrors.doiIdentifiers
                         }}</span>
                       </div>
                     </div>
-                  </div>
-                  <div v-if="isMetaAnalysis" class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      What score set(s) does this score set analyze?
-                      <div class="mavedb-help-small">
-                        Type a score set's MaveDB URN here and select it from the list. You may choose more than one
-                        score set.
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label>
+                          Any publications associated with the score set. You can search for publications to add by DOI,
+                          PubMed ID, bioRxiv ID, or medRxiv ID.
+                        </label>
+                        <div class="mavedb-help-small">
+                          Example searches: https://doi.org/10.1038/s41467-023-43041-4 (DOI as link),
+                          10.1038/s41467-023-43041-4 (DOI), 38057330 (a Pubmed ID), 2022.06.10.22276179 (a bioRxiv or
+                          medRxiv ID)
+                        </div>
                       </div>
-                    </div>
-                    <div class="mavedb-wizard-content">
-                      <div class="field">
+                      <div class="mavedb-wizard-content field">
                         <span class="p-float-label">
                           <AutoComplete
-                            :id="scopedId('input-metaAnalyzesScoreSets')"
-                            ref="metaAnalyzesScoreSetsInput"
-                            v-model="metaAnalyzesScoreSets"
-                            field="title"
-                            :force-selection="true"
+                            :id="scopedId('input-publicationIdentifiers')"
+                            ref="publicationIdentifiersInput"
+                            v-model="publicationIdentifiers"
                             :multiple="true"
-                            :suggestions="metaAnalyzesScoreSetSuggestionsList"
-                            @complete="searchMetaAnalyzesScoreSets"
+                            option-label="identifier"
+                            :suggestions="publicationIdentifierSuggestionsList"
+                            @complete="searchPublicationIdentifiers"
+                            @item-select="acceptNewPublicationIdentifier"
+                            @item-unselect="removePublicationIdentifier"
+                            @keyup.escape="clearPublicationIdentifierSearch"
                           >
+                            <template #chip="slotProps">
+                              <div>
+                                <div>
+                                  {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
+                                </div>
+                              </div>
+                            </template>
                             <template #item="slotProps">
-                              {{ slotProps.item.urn }}: {{ slotProps.item.title }}
+                              <div>
+                                <div>Title: {{ slotProps.item.title }}</div>
+                                <div>DOI: {{ slotProps.item.doi }}</div>
+                                <div>Identifier: {{ slotProps.item.identifier }}</div>
+                                <div>Database: {{ slotProps.item.dbName }}</div>
+                              </div>
                             </template>
                           </AutoComplete>
-                          <label :for="scopedId('input-metaAnalyzesScoreSets')">Meta-analysis for</label>
+                          <label :for="scopedId('input-publicationIdentifiers')">Publication identifiers</label>
                         </span>
-                        <span v-if="validationErrors.metaAnalyzesScoreSetUrns" class="mave-field-error">{{
-                          validationErrors.metaAnalyzesScoreSetUrns
+                        <span v-if="validationErrors.publicationIdentifiers" class="mave-field-error">{{
+                          validationErrors.publicationIdentifiers
                         }}</span>
                       </div>
                     </div>
-                  </div>
-                </div>
-              </div>
-              <div class="mavedb-wizard-step-controls-row">
-                <div class="flex justify-content-end mavedb-wizard-step-controls pt-4">
-                  <Button
-                    :disabled="maxWizardStepValidated < activeWizardStep"
-                    icon="pi pi-arrow-right"
-                    icon-pos="right"
-                    label="Next"
-                    @click="showNextWizardStepIfValid(showNextWizardStep)"
-                  />
-                </div>
-              </div>
-            </template>
-          </StepperPanel>
-          <StepperPanel>
-            <template #header="{index, clickCallback}">
-              <button
-                class="p-stepper-action"
-                :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
-                role="tab"
-                @click="clickCallback"
-              >
-                <span class="p-stepper-number">{{ index + 1 }}</span>
-                <span class="p-stepper-title">Score set information</span>
-              </button>
-            </template>
-            <template #content="{prevCallback: showPreviousWizardStep, nextCallback: showNextWizardStep}">
-              <div class="mavedb-wizard-form">
-                <div class="mavedb-wizard-form-content-background"></div>
-                <div v-if="experiment" class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-content-pane">
-                    <Message severity="info">
-                      Some fields were autopopulated based on the selected experiment and should be inspected to ensure
-                      they are still relevant to this score set.
-                    </Message>
-                  </div>
-                </div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label
-                      >A short title for the score set, to be displayed at the top of the score set's own page.</label
-                    >
-                    <div class="mavedb-help-small">
-                      Examples: CBS low-B6 imputed and refined, NUDT15 protein stability assay, Arrestin-1 binding,
-                      SpCas9 positive selection
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
-                      <InputText :id="scopedId('input-title')" v-model="title" />
-                      <label :for="scopedId('input-title')">Title</label>
-                    </span>
-                    <span v-if="validationErrors.title" class="mave-field-error">{{ validationErrors.title }}</span>
-                  </div>
-                </div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label>
-                      A high-level description of the score set in one or two sentences, to be displayed in search
-                      results.
-                    </label>
-                    <div class="mavedb-help-small">
-                      Example: A Deep Mutational Scan of the human cystathionine-beta-synthase (CBS) using functional
-                      complementation in yeast via DMS-TileSeq at low levels of Vitamin B6.
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
-                      <Textarea :id="scopedId('input-shortDescription')" v-model="shortDescription" rows="4" />
-                      <label :for="scopedId('input-shortDescription')">Short description</label>
-                    </span>
-                    <span v-if="validationErrors.shortDescription" class="mave-field-error">{{
-                      validationErrors.shortDescription
-                    }}</span>
-                  </div>
-                </div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label> The motivation for and approach of the score set. </label>
-                    <div class="mavedb-help-small">
-                      May be formatted using
-                      <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>. It is
-                      common for a score set to have the same abstract text as the experiment that it belongs to. The
-                      focus should be on the MAVE data, rather than the full research contribution, so use your
-                      judgement when deciding what details are relevant.
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-content field">
-                    <TabView>
-                      <TabPanel header="Edit">
+                    <div v-if="publicationIdentifiers.length > 1" class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label> Of the above publications, the primary publication that describes the score set. </label>
+                      </div>
+                      <div class="mavedb-wizard-content field">
                         <span class="p-float-label">
-                          <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="10" />
-                          <label :for="scopedId('input-abstractText')">Abstract</label>
+                          <Multiselect
+                            :id="scopedId('input-primaryPublicationIdentifiers')"
+                            ref="primaryPublicationIdentifiersInput"
+                            v-model="primaryPublicationIdentifiers"
+                            option-label="identifier"
+                            :options="publicationIdentifiers"
+                            placeholder="Select a primary publication (Where the dataset is described)"
+                            :selection-limit="1"
+                            style="width: 100%"
+                          >
+                            <template #option="slotProps">
+                              <div class="field">
+                                <div>Title: {{ slotProps.option.title }}</div>
+                                <div>DOI: {{ slotProps.option.doi }}</div>
+                                <div>Identifier: {{ slotProps.option.identifier }}</div>
+                                <div>Database: {{ slotProps.option.dbName }}</div>
+                              </div>
+                            </template>
+                          </Multiselect>
+                          <label :for="scopedId('input-primaryPublicationIdentifiers')">Primary publication</label>
                         </span>
-                      </TabPanel>
-                      <TabPanel header="Preview">
-                        <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div class="mavedb-wizard-rendered-markdown" v-html="markdownToHtml(abstractText)"></div>
-                      </TabPanel>
-                    </TabView>
-                    <span v-if="validationErrors.abstractText" class="mave-field-error">{{
-                      validationErrors.abstractText
-                    }}</span>
-                  </div>
-                </div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label>
-                      A condensed description of the data analysis, starting from raw sequence data, suitable for a
-                      specialist audience of MAVE researchers.
-                    </label>
-                    <div class="mavedb-help-small">
-                      May be formatted using
-                      <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>. Should
-                      include:
-                      <ul>
-                        <template v-if="isMetaAnalysis">
-                          <li>
-                            a description of how the scores in this score set were generated from the data in the
-                            analyzed score sets, and
-                          </li>
-                        </template>
-                        <template v-else>
-                          <li>
-                            a description of how scores were generated from raw data, including any normalization,
-                          </li>
-                          <li>the sequence read filtering approach used,</li>
-                          <li>details of how replicates were combined (if applicable), and</li>
-                        </template>
-                        <li>
-                          a description of any additional data columns included in the score and count tables, including
-                          column naming conventions.
-                        </li>
-                      </ul>
+                        <span v-if="validationErrors.primaryPublicationIdentifiers" class="mave-field-error">{{
+                          validationErrors.primaryPublicationIdentifiers
+                        }}</span>
+                      </div>
                     </div>
-                  </div>
-                  <div class="mavedb-wizard-content field">
-                    <TabView>
-                      <TabPanel header="Edit">
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label> Any additional metadata about the score set, as a JSON file. </label>
+                      </div>
+                      <div class="mavedb-wizard-content field">
                         <span class="p-float-label">
-                          <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="10" />
-                          <label :for="scopedId('input-methodText')">Methods</label>
+                          <FileUpload
+                            :id="scopedId('input-extraMetadataFile')"
+                            accept="application/json"
+                            :auto="false"
+                            choose-label="Extra metadata"
+                            :class="inputClasses.extraMetadataFile"
+                            :custom-upload="true"
+                            :file-limit="1"
+                            :show-cancel-button="false"
+                            :show-upload-button="false"
+                            @remove="fileCleared('extraMetadataFile')"
+                            @select="fileSelected('extraMetadataFile', $event)"
+                          >
+                            <template #empty>
+                              <p>Upload a JSON file here.</p>
+                            </template>
+                          </FileUpload>
                         </span>
-                      </TabPanel>
-                      <TabPanel header="Preview">
-                        <!-- eslint-disable-next-line vue/no-v-html -->
-                        <div class="mavedb-wizard-rendered-markdown" v-html="markdownToHtml(methodText)"></div>
-                      </TabPanel>
-                    </TabView>
-                    <span v-if="validationErrors.methodText" class="mave-field-error">{{
-                      validationErrors.methodText
-                    }}</span>
+                        <span v-if="validationErrors.extraMetadata" class="mave-field-error">{{
+                          validationErrors.extraMetadata
+                        }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="mavedb-wizard-step-controls-row">
+                  <div class="flex justify-content-between mavedb-wizard-step-controls pt-4">
+                    <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="activateCallback(activeWizardStep - 1)" />
+                    <Button
+                      :disabled="maxWizardStepValidated < activeWizardStep"
+                      icon="pi pi-arrow-right"
+                      icon-pos="right"
+                      label="Next"
+                      @click="showNextWizardStepIfValid(activateCallback)"
+                    />
                   </div>
                 </div>
-                <div>
+              <!-- </template> -->
+            </StepPanel>
+
+            <StepPanel v-slot="{ activateCallback }" :value="2" >
+              <!-- <template #header="{index, clickCallback}">
+                <button
+                  class="p-stepper-action"
+                  :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
+                  role="tab"
+                  @click="clickCallback"
+                >
+                  <span class="p-stepper-number">{{ index + 1 }}</span>
+                  <span class="p-stepper-title">Targets</span>
+                </button>
+              </template> -->
+              <!-- <template #content="{prevCallback: showPreviousWizardStep, nextCallback: showNextWizardStep}"> -->
+                <div class="mavedb-wizard-form">
+                  <div class="mavedb-wizard-form-content-background"></div>
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label>
-                        The license under which the data in the score set is made available to the public.
-                      </label>
+                      <label :id="scopedId('input-scoreSetIsSequenceBasedLabel')"
+                        >Will you be uploading the target sequences used for your assay?</label
+                      >
                       <div class="mavedb-help-small">
-                        For more on data licensing in MaveDB, see the
-                        <a :href="`${config.appBaseUrl}/docs/mavedb/data_licensing.html#data-licensing`" target="_blank"
-                          >documentation</a
-                        >.
+                        The target sequence is the sequence that was mutagenized to create the variant library, such as in
+                        a cDNA-based deep mutational scan. If your variants were generated by editing the genome directly
+                        (e.g., using saturation genome editing or base editing), you should provide an Ensembl or RefSeq
+                        accession instead of uploading the target locus sequence as your own target.
                       </div>
                     </div>
-                    <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
-                        <Dropdown
-                          :id="scopedId('input-targetLicenseId')"
-                          v-model="licenseId"
-                          option-label="longName"
-                          option-value="id"
-                          :options="licenses"
-                          style="min-width: 500px"
-                        />
-                        <label :for="scopedId('input-targetLicenseId')">License</label>
-                      </span>
-                      <Message
-                        v-if="licenseId && licenses && licenses.find((l) => l.id == licenseId)?.shortName != 'CC0'"
-                        severity="warn"
-                      >
-                        Choosing a license with these restrictions may cause your score set to be excluded from data
-                        federation and aggregation by MaveDB collaborators.
-                      </Message>
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      Would you like to define any additional restrictions governing the usage of data within this score
-                      set?
-                    </div>
                     <div class="mavedb-wizard-content">
                       <InputSwitch
-                        v-model="hasCustomUsagePolicy"
-                        :aria-labelledby="scopedId('input-has-custom-usage-policy')"
+                        v-model="isTargetSequence"
+                        :aria-labelledby="scopedId('input-scoreSetIsSequenceBasedLabel')"
                       />
                       <div class="mavedb-switch-value">
                         {{
-                          hasCustomUsagePolicy
-                            ? 'Yes, I would like to define additional usage guidelines'
-                            : 'No, I do not need to define additional usage guidenlines'
+                          isTargetSequence
+                            ? 'Yes, variants are described relative to a target sequence.'
+                            : 'No, variants are described relative to a RefSeq or Ensembl accession (either a transcript or chromosome).'
                         }}
                       </div>
                     </div>
                   </div>
-                  <div v-if="hasCustomUsagePolicy" class="mavedb-wizard-row">
+
+                  <div v-if="!isTargetSequence" class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label> Any additional guidelines governing the usage of the data in this score set. </label>
+                      <label :id="scopedId('input-isBaseEditorData')"
+                        >Does this score set reperesent base editor data?</label
+                      >
                       <div class="mavedb-help-small">
-                        This may assert, for example, the original author's right to publish the data first.
+                        Base editor data is a type of functional assay that is similar in many respects to MAVE data. When
+                        uploading base editor data, you must also include a 'guide_sequence' column in your uploaded
+                        scores (and counts) file(s).
                       </div>
                     </div>
-                    <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
-                        <Textarea :id="scopedId('input-dataUsagePolicy')" v-model="dataUsagePolicy" rows="4" />
-                        <label :for="scopedId('input-dataUsagePolicy')">Data usage guidelines</label>
-                      </span>
-                      <span v-if="validationErrors.dataUsagePolicy" class="mave-field-error">{{
-                        validationErrors.dataUsagePolicy
-                      }}</span>
+                    <div class="mavedb-wizard-content">
+                      <InputSwitch v-model="isBaseEditor" :aria-labelledby="scopedId('input-isBaseEditorData')" />
+                      <div class="mavedb-switch-value">
+                        {{
+                          isBaseEditor
+                            ? 'Yes, this score set represents base editor data.'
+                            : 'No, this score set does not represent base editor data.'
+                        }}
+                      </div>
                     </div>
                   </div>
+
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label>
-                        Contributors who may edit this score set. Enter each contributor's
-                        <a href="https://orcid.org" target="_blank">ORCID</a> ID and confirm their name.
-                      </label>
-                      <div class="mavedb-help-small">Examples: 1111-1111-1111-1111</div>
+                      <label :id="scopedId('input-scoreSetHasMultipleTargetsLabel')"
+                        >Does this score set describe variants with respect to more than one target?</label
+                      >
+                      <div class="mavedb-help-small">
+                        Some experiments might describe variants against two or more distinct target sequences. If this is
+                        the case, your variants will need to be described explicitly from the target they came from.
+                      </div>
                     </div>
-                    <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
-                        <Chips
-                          :id="scopedId('input-contributors')"
-                          ref="contributorsInput"
-                          v-model="contributors"
-                          :add-on-blur="true"
-                          :allow-duplicate="false"
-                          placeholder="Type or paste ORCID IDs here."
-                          @add="newContributorsAdded"
-                          @keyup.escape="clearContributorSearch"
-                        >
-                          <template #chip="slotProps">
-                            <div>
-                              <div v-if="slotProps.value.givenName || slotProps.value.familyName">
-                                {{ slotProps.value.givenName }} {{ slotProps.value.familyName }} ({{
-                                  slotProps.value.orcidId
-                                }})
-                              </div>
-                              <div v-else>{{ slotProps.value.orcidId }}</div>
-                            </div>
-                          </template>
-                        </Chips>
-                        <label :for="scopedId('input-contributors')">Contributors</label>
-                      </span>
-                      <span v-if="validationErrors.contributors" class="mave-field-error">{{
-                        validationErrors.contributors
-                      }}</span>
+                    <div class="mavedb-wizard-content">
+                      <InputSwitch
+                        v-model="isMultiTarget"
+                        :aria-labelledby="scopedId('input-scoreSetHasMultipleTargetsLabel')"
+                      />
+                      <div class="mavedb-switch-value">
+                        {{
+                          isMultiTarget
+                            ? 'Yes, variants are described relative to multiple target sequences.'
+                            : 'No, variants are described relative to a single target sequence.'
+                        }}
+                      </div>
                     </div>
                   </div>
-                  <div class="mavedb-wizard-row">
+
+                  <div v-if="isMultiTarget" class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-doiIdentifiers')">
-                        The DOIs of any digital resources associated with the score set.
-                      </label>
-                      <div class="mavedb-help-small">
-                        Please note: If you would like to associate publications with this score set via their DOI,
-                        please do not do so here. Instead, use the publication identifiers field below.
-                      </div>
+                      <label>How many targets will be included with this score set?</label>
                     </div>
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
-                        <Chips
-                          :id="scopedId('input-doiIdentifiers')"
-                          v-model="doiIdentifiers"
-                          :add-on-blur="true"
-                          :allow-duplicate="false"
-                          @add="acceptNewDoiIdentifier"
-                        >
-                          <template #chip="slotProps">
-                            <div>
-                              <div>{{ slotProps.value.identifier }}</div>
-                            </div>
-                          </template>
-                        </Chips>
-                        <label :for="scopedId('input-doiIdentifiers')">DOI identifiers</label>
+                        <InputNumber
+                          :id="scopedId(`input-numTargets`)"
+                          v-model="numTargets"
+                          button-layout="stacked"
+                          :min="isMultiTarget ? 2 : 1"
+                          show-buttons
+                          suffix=" targets"
+                        />
+                        <label :for="scopedId(`input-numTargets`)">Targets</label>
                       </span>
-                      <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
-                        validationErrors.doiIdentifiers
-                      }}</span>
                     </div>
                   </div>
-                  <div class="mavedb-wizard-row">
+                </div>
+                <div class="mavedb-wizard-step-controls-row">
+                  <div class="flex justify-content-between mavedb-wizard-step-controls pt-4">
+                    <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="activateCallback(activeWizardStep - 1)" />
+                    <Button
+                      :disabled="maxWizardStepValidated < activeWizardStep"
+                      icon="pi pi-arrow-right"
+                      icon-pos="right"
+                      label="Next"
+                      @click="showNextWizardStepIfValid(activateCallback)"
+                    />
+                  </div>
+                </div>
+              <!-- </template> -->
+            </StepPanel>
+            <StepPanel v-slot="{ activateCallback }" v-for="(targetNum, targetIdx) in numTargets" :key="targetIdx" :value="targetIdx + 3">
+              <!-- <template #header="{index, clickCallback}">
+                <button
+                  class="p-stepper-action"
+                  :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
+                  role="tab"
+                  @click="clickCallback"
+                >
+                  <span class="p-stepper-number">{{ index + 1 }}</span>
+                  <span class="p-stepper-title">Target {{ targetNum }}</span>
+                </button>
+              </template> -->
+              <!-- <template #content="{prevCallback: showPreviousWizardStep, nextCallback: showNextWizardStep}"> -->
+                <div class="mavedb-wizard-form">
+                  <div class="mavedb-wizard-form-content-background"></div>
+                  <div v-if="isTargetSequence" class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label>
-                        Any publications associated with the score set. You can search for publications to add by DOI,
-                        PubMed ID, bioRxiv ID, or medRxiv ID.
-                      </label>
+                      <label>Copy target from a previously created target</label>
                       <div class="mavedb-help-small">
-                        Example searches: https://doi.org/10.1038/s41467-023-43041-4 (DOI as link),
-                        10.1038/s41467-023-43041-4 (DOI), 38057330 (a Pubmed ID), 2022.06.10.22276179 (a bioRxiv or
-                        medRxiv ID)
+                        Use this autocomplete field to find an existing target from one of your published or unpublished
+                        score sets in MaveDB and fill this target with its metadata. You'll still be able to edit any
+                        fields below.
                       </div>
                     </div>
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
                         <AutoComplete
-                          :id="scopedId('input-publicationIdentifiers')"
-                          ref="publicationIdentifiersInput"
-                          v-model="publicationIdentifiers"
-                          :multiple="true"
-                          option-label="identifier"
-                          :suggestions="publicationIdentifierSuggestionsList"
-                          @complete="searchPublicationIdentifiers"
-                          @item-select="acceptNewPublicationIdentifier"
-                          @item-unselect="removePublicationIdentifier"
-                          @keyup.escape="clearPublicationIdentifierSearch"
+                          :id="scopedId('input-existingTargetGene')"
+                          ref="existingTargetGeneInput"
+                          v-model="createdTargetGenes[targetIdx].autofilledTargetGene"
+                          field="name"
+                          :force-selection="true"
+                          :suggestions="targetGeneSuggestionsList"
+                          @complete="searchTargetGenes"
+                          @item-select="autofillFromExistingTarget($event, targetIdx)"
                         >
-                          <template #chip="slotProps">
-                            <div>
-                              <div>
-                                {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                              </div>
-                            </div>
-                          </template>
                           <template #item="slotProps">
                             <div>
-                              <div>Title: {{ slotProps.item.title }}</div>
-                              <div>DOI: {{ slotProps.item.doi }}</div>
-                              <div>Identifier: {{ slotProps.item.identifier }}</div>
-                              <div>Database: {{ slotProps.item.dbName }}</div>
+                              <div>Name: {{ slotProps.item.name }}</div>
+                              <div>Category: {{ textForTargetGeneCategory(slotProps.item.category) }}</div>
+                              <div
+                                v-for="externalIdentifier of slotProps.item.externalIdentifiers"
+                                :key="externalIdentifier.identifier"
+                              >
+                                {{ externalIdentifier.identifier.dbName }}:
+                                {{ externalIdentifier.identifier.identifier }}, Offset: {{ externalIdentifier.offset }}
+                              </div>
                             </div>
                           </template>
                         </AutoComplete>
-                        <label :for="scopedId('input-publicationIdentifiers')">Publication identifiers</label>
+                        <label :for="scopedId('input-existingTargetGene')">Copy from an existing target</label>
                       </span>
-                      <span v-if="validationErrors.publicationIdentifiers" class="mave-field-error">{{
-                        validationErrors.publicationIdentifiers
-                      }}</span>
                     </div>
                   </div>
-                  <div v-if="publicationIdentifiers.length > 1" class="mavedb-wizard-row">
+                  <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label> Of the above publications, the primary publication that describes the score set. </label>
+                      <label>The name of the target</label>
+                      <div class="mavedb-help-small">
+                        This name will be used to identify the target on the score set page and can be used to autofill
+                        from this target in the future. Most users choose to name this target after the associated gene,
+                        if applicable.
+                      </div>
                     </div>
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
-                        <Multiselect
-                          :id="scopedId('input-primaryPublicationIdentifiers')"
-                          ref="primaryPublicationIdentifiersInput"
-                          v-model="primaryPublicationIdentifiers"
-                          option-label="identifier"
-                          :options="publicationIdentifiers"
-                          placeholder="Select a primary publication (Where the dataset is described)"
-                          :selection-limit="1"
+                        <InputText
+                          :id="scopedId('input-targetGeneName')"
+                          v-model="createdTargetGenes[targetIdx].targetGene.name"
                           style="width: 100%"
-                        >
-                          <template #option="slotProps">
-                            <div class="field">
-                              <div>Title: {{ slotProps.option.title }}</div>
-                              <div>DOI: {{ slotProps.option.doi }}</div>
-                              <div>Identifier: {{ slotProps.option.identifier }}</div>
-                              <div>Database: {{ slotProps.option.dbName }}</div>
-                            </div>
-                          </template>
-                        </Multiselect>
-                        <label :for="scopedId('input-primaryPublicationIdentifiers')">Primary publication</label>
+                        />
+                        <label :for="scopedId('input-targetGeneName')">Target name</label>
                       </span>
-                      <span v-if="validationErrors.primaryPublicationIdentifiers" class="mave-field-error">{{
-                        validationErrors.primaryPublicationIdentifiers
+                      <span v-if="validationErrors[`targetGene.${targetIdx}.name`]" class="mave-field-error">{{
+                        validationErrors[`targetGene.${targetIdx}.name`]
                       }}</span>
                     </div>
                   </div>
-                  <div class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      <label> Any additional metadata about the score set, as a JSON file. </label>
-                    </div>
-                    <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
-                        <FileUpload
-                          :id="scopedId('input-extraMetadataFile')"
-                          accept="application/json"
-                          :auto="false"
-                          choose-label="Extra metadata"
-                          :class="inputClasses.extraMetadataFile"
-                          :custom-upload="true"
-                          :file-limit="1"
-                          :show-cancel-button="false"
-                          :show-upload-button="false"
-                          @remove="fileCleared('extraMetadataFile')"
-                          @select="fileSelected('extraMetadataFile', $event)"
+
+                  <div v-if="isTargetSequence">
+                    <div v-if="numTargets > 1" class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label>The label of the target</label>
+                        <div class="mavedb-help-small">
+                          This label is what you use in your variants file to indicate which of your targets the variant
+                          is described relative to. Because it is used with MAVE-HGVS strings, it may not contain any
+                          spaces or colons.
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content field">
+                        <span class="p-float-label">
+                          <InputText
+                            :id="scopedId('input-targetGeneLabel')"
+                            v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.label"
+                            style="width: 100%"
+                          />
+                          <label :for="scopedId('input-targetGeneLabel')">Target label</label>
+                        </span>
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.label`]"
+                          class="mave-field-error"
+                          >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.label`] }}</span
                         >
-                          <template #empty>
-                            <p>Upload a JSON file here.</p>
-                          </template>
-                        </FileUpload>
-                      </span>
-                      <span v-if="validationErrors.extraMetadata" class="mave-field-error">{{
-                        validationErrors.extraMetadata
-                      }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="mavedb-wizard-step-controls-row">
-                <div class="flex justify-content-between mavedb-wizard-step-controls pt-4">
-                  <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="showPreviousWizardStep" />
-                  <Button
-                    :disabled="maxWizardStepValidated < activeWizardStep"
-                    icon="pi pi-arrow-right"
-                    icon-pos="right"
-                    label="Next"
-                    @click="showNextWizardStepIfValid(showNextWizardStep)"
-                  />
-                </div>
-              </div>
-            </template>
-          </StepperPanel>
-
-          <StepperPanel>
-            <template #header="{index, clickCallback}">
-              <button
-                class="p-stepper-action"
-                :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
-                role="tab"
-                @click="clickCallback"
-              >
-                <span class="p-stepper-number">{{ index + 1 }}</span>
-                <span class="p-stepper-title">Targets</span>
-              </button>
-            </template>
-            <template #content="{prevCallback: showPreviousWizardStep, nextCallback: showNextWizardStep}">
-              <div class="mavedb-wizard-form">
-                <div class="mavedb-wizard-form-content-background"></div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label :id="scopedId('input-scoreSetIsSequenceBasedLabel')"
-                      >Will you be uploading the target sequences used for your assay?</label
-                    >
-                    <div class="mavedb-help-small">
-                      The target sequence is the sequence that was mutagenized to create the variant library, such as in
-                      a cDNA-based deep mutational scan. If your variants were generated by editing the genome directly
-                      (e.g., using saturation genome editing or base editing), you should provide an Ensembl or RefSeq
-                      accession instead of uploading the target locus sequence as your own target.
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-content">
-                    <InputSwitch
-                      v-model="isTargetSequence"
-                      :aria-labelledby="scopedId('input-scoreSetIsSequenceBasedLabel')"
-                    />
-                    <div class="mavedb-switch-value">
-                      {{
-                        isTargetSequence
-                          ? 'Yes, variants are described relative to a target sequence.'
-                          : 'No, variants are described relative to a RefSeq or Ensembl accession (either a transcript or chromosome).'
-                      }}
+                      </div>
                     </div>
-                  </div>
-                </div>
 
-                <div v-if="!isTargetSequence" class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label :id="scopedId('input-isBaseEditorData')"
-                      >Does this score set reperesent base editor data?</label
-                    >
-                    <div class="mavedb-help-small">
-                      Base editor data is a type of functional assay that is similar in many respects to MAVE data. When
-                      uploading base editor data, you must also include a 'guide_sequence' column in your uploaded
-                      scores (and counts) file(s).
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-content">
-                    <InputSwitch v-model="isBaseEditor" :aria-labelledby="scopedId('input-isBaseEditorData')" />
-                    <div class="mavedb-switch-value">
-                      {{
-                        isBaseEditor
-                          ? 'Yes, this score set represents base editor data.'
-                          : 'No, this score set does not represent base editor data.'
-                      }}
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-targetGeneCategory')">The functional category of the target</label>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <span class="p-float-label">
+                          <span class="p-float-label">
+                            <SelectButton
+                              :id="scopedId('input-targetGeneCategory')"
+                              v-model="createdTargetGenes[targetIdx].targetGene.category"
+                              :option-label="textForTargetGeneCategory"
+                              :options="targetGeneCategories"
+                            />
+                          </span>
+                        </span>
+                        <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{
+                          validationErrors[`targetGene.${targetIdx}.category`]
+                        }}</span>
+                      </div>
                     </div>
-                  </div>
-                </div>
 
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label :id="scopedId('input-scoreSetHasMultipleTargetsLabel')"
-                      >Does this score set describe variants with respect to more than one target?</label
-                    >
-                    <div class="mavedb-help-small">
-                      Some experiments might describe variants against two or more distinct target sequences. If this is
-                      the case, your variants will need to be described explicitly from the target they came from.
+                    <div v-for="dbName of externalGeneDatabases" :key="dbName" class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId(`input-targetGeneExternalDatabase${dbName}Label`)"
+                          >Link this target to a {{ dbName }} accession</label
+                        >
+                        <!-- only display this verbose help on the first of the external gene database selections. -->
+                        <div v-if="dbName === externalGeneDatabases[0]" class="mavedb-help-small">
+                          If the target sequence provided to MaveDB starts partway through the linked sequence (such as an
+                          assay targeting a single functional domain), the target should also have an “offset”. The offset
+                          is the integer value that should be added to the MaveDB coordinates (which are relative to the
+                          target sequence) in order to match the coordinates in the linked sequence.
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <InputSwitch
+                          v-model="createdTargetGenes[targetIdx].linkedAccessions[dbName]"
+                          :aria-labelledby="scopedId(`input-targetGeneExternalDatabase${dbName}Label`)"
+                        />
+                        <div class="mavedb-switch-value">
+                          {{
+                            createdTargetGenes[targetIdx].linkedAccessions[dbName]
+                              ? `Yes, link this target to a ${dbName} accession.`
+                              : `No, do not link this target to a ${dbName} accession.`
+                          }}
+                        </div>
+                        <div
+                          v-if="createdTargetGenes[targetIdx].linkedAccessions[dbName]"
+                          class="mavedb-wizard-subcontent field-columns"
+                        >
+                          <div class="p-float-label field-column">
+                            <AutoComplete
+                              :id="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
+                              v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].identifier"
+                              field="identifier"
+                              :force-selection="false"
+                              style="width: 100%"
+                              :suggestions="targetGeneIdentifierSuggestionsList[dbName]"
+                              @change="externalTargetIdentifierChanged(dbName, targetIdx, $event)"
+                              @complete="searchTargetGeneIdentifiers(dbName, $event)"
+                            />
+                            <label :for="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
+                              >{{ dbName }} identifier</label
+                            >
+                          </div>
+                          <span class="p-float-label">
+                            <InputNumber
+                              :id="scopedId(`input-${dbName.toLowerCase()}Offset`)"
+                              v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].offset"
+                              button-layout="stacked"
+                              :min="0"
+                              show-buttons
+                              suffix=" bp"
+                            />
+                            <label :for="scopedId(`input-${dbName.toLowerCase()}Offset`)">Offset</label>
+                          </span>
+                        </div>
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}`]"
+                          class="mave-field-error"
+                          >{{ validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}`] }}</span
+                        >
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.identifier`]"
+                          class="mave-field-error"
+                          >{{
+                            validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.identifier`]
+                          }}</span
+                        >
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.offset`]"
+                          class="mave-field-error"
+                          >{{ validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.offset`] }}</span
+                        >
+                      </div>
                     </div>
-                  </div>
-                  <div class="mavedb-wizard-content">
-                    <InputSwitch
-                      v-model="isMultiTarget"
-                      :aria-labelledby="scopedId('input-scoreSetHasMultipleTargetsLabel')"
-                    />
-                    <div class="mavedb-switch-value">
-                      {{
-                        isMultiTarget
-                          ? 'Yes, variants are described relative to multiple target sequences.'
-                          : 'No, variants are described relative to a single target sequence.'
-                      }}
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-targetGeneTaxonomyLabel')"
+                          >The taxonomy group to which this target belongs</label
+                        >
+                        <div class="mavedb-help-small">
+                          For more details about taxonomy, see the
+                          <a href="https://www.ncbi.nlm.nih.gov/books/NBK53758/" target="_blank"
+                            >NCBI taxonomy help page.</a
+                          >
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <span class="p-float-label">
+                          <AutoComplete
+                            :id="scopedId('input-targetGeneTaxonomyLabel')"
+                            ref="taxonomyInput"
+                            v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.taxonomy"
+                            dropdown
+                            field="organismName"
+                            force-selection
+                            :multiple="false"
+                            :options="taxonomies"
+                            style="width: 100%"
+                            :suggestions="taxonomySuggestionsList"
+                            @complete="searchTaxonomies"
+                            @keyup.escape="clearTaxonomySearch"
+                          >
+                            <template #item="slotProps">
+                              {{ slotProps.item.code }} - {{ slotProps.item.organismName }}
+                              <template v-if="slotProps.item.commonName !== 'NULL' && slotProps.item.commonName !== null"
+                                >/ {{ slotProps.item.commonName }}</template
+                              >
+                            </template>
+                          </AutoComplete>
+                          <label :for="scopedId('input-targetGeneTaxonomyLabel')">Taxonomy</label>
+                        </span>
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.taxonomy`]"
+                          class="mave-field-error"
+                          >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.taxonomy`] }}</span
+                        >
+                      </div>
                     </div>
-                  </div>
-                </div>
-
-                <div v-if="isMultiTarget" class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label>How many targets will be included with this score set?</label>
-                  </div>
-                  <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
-                      <InputNumber
-                        :id="scopedId(`input-numTargets`)"
-                        v-model="numTargets"
-                        button-layout="stacked"
-                        :min="isMultiTarget ? 2 : 1"
-                        show-buttons
-                        suffix=" targets"
-                      />
-                      <label :for="scopedId(`input-numTargets`)">Targets</label>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div class="mavedb-wizard-step-controls-row">
-                <div class="flex justify-content-between mavedb-wizard-step-controls pt-4">
-                  <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="showPreviousWizardStep" />
-                  <Button
-                    :disabled="maxWizardStepValidated < activeWizardStep"
-                    icon="pi pi-arrow-right"
-                    icon-pos="right"
-                    label="Next"
-                    @click="showNextWizardStepIfValid(showNextWizardStep)"
-                  />
-                </div>
-              </div>
-            </template>
-          </StepperPanel>
-
-          <!-- Annoyingly, `idx in numTargets` is 1-indexed. -->
-          <StepperPanel v-for="(targetNum, targetIdx) in numTargets" :key="targetIdx">
-            <template #header="{index, clickCallback}">
-              <button
-                class="p-stepper-action"
-                :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
-                role="tab"
-                @click="clickCallback"
-              >
-                <span class="p-stepper-number">{{ index + 1 }}</span>
-                <span class="p-stepper-title">Target {{ targetNum }}</span>
-              </button>
-            </template>
-            <template #content="{prevCallback: showPreviousWizardStep, nextCallback: showNextWizardStep}">
-              <div class="mavedb-wizard-form">
-                <div class="mavedb-wizard-form-content-background"></div>
-                <div v-if="isTargetSequence" class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label>Copy target from a previously created target</label>
-                    <div class="mavedb-help-small">
-                      Use this autocomplete field to find an existing target from one of your published or unpublished
-                      score sets in MaveDB and fill this target with its metadata. You'll still be able to edit any
-                      fields below.
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-targetGeneSequenceTypeLabel')">The sequence type of the target</label>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <span class="p-float-label">
+                          <SelectButton
+                            :id="scopedId('input-targetGeneSequenceType')"
+                            v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.sequenceType"
+                            :options="sequenceTypes"
+                          />
+                        </span>
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.sequenceType`]"
+                          class="mave-field-error"
+                          >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.sequenceType`] }}</span
+                        >
+                      </div>
                     </div>
-                  </div>
-                  <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
-                      <AutoComplete
-                        :id="scopedId('input-existingTargetGene')"
-                        ref="existingTargetGeneInput"
-                        v-model="createdTargetGenes[targetIdx].autofilledTargetGene"
-                        field="name"
-                        :force-selection="true"
-                        :suggestions="targetGeneSuggestionsList"
-                        @complete="searchTargetGenes"
-                        @item-select="autofillFromExistingTarget($event, targetIdx)"
-                      >
-                        <template #item="slotProps">
-                          <div>
-                            <div>Name: {{ slotProps.item.name }}</div>
-                            <div>Category: {{ textForTargetGeneCategory(slotProps.item.category) }}</div>
-                            <div
-                              v-for="externalIdentifier of slotProps.item.externalIdentifiers"
-                              :key="externalIdentifier.identifier"
-                            >
-                              {{ externalIdentifier.identifier.dbName }}:
-                              {{ externalIdentifier.identifier.identifier }}, Offset: {{ externalIdentifier.offset }}
-                            </div>
-                          </div>
-                        </template>
-                      </AutoComplete>
-                      <label :for="scopedId('input-existingTargetGene')">Copy from an existing target</label>
-                    </span>
-                  </div>
-                </div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label>The name of the target</label>
-                    <div class="mavedb-help-small">
-                      This name will be used to identify the target on the score set page and can be used to autofill
-                      from this target in the future. Most users choose to name this target after the associated gene,
-                      if applicable.
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-targetGeneSequenceFileLabel')">The sequence of the target</label>
+                        <div class="mavedb-help-small">
+                          Variants will be validated against this sequence. Note that the first position in the sequence
+                          is numbered as position 1 when validating variants.
+                        </div>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <span class="p-float-label">
+                          <FileUpload
+                            :id="scopedId('input-targetGeneSequenceFileLabel')"
+                            ref="sequenceFileUpload"
+                            :auto="false"
+                            choose-label="Reference sequence"
+                            :class="inputClasses.targetGeneTargetSequenceSequenceFile"
+                            :custom-upload="true"
+                            :file-limit="1"
+                            :show-cancel-button="false"
+                            :show-upload-button="false"
+                            @remove="fileCleared('targetGeneTargetSequenceSequenceFile', targetIdx)"
+                            @select="fileSelected('targetGeneTargetSequenceSequenceFile', $event, targetIdx)"
+                          >
+                            <template #empty>
+                              <div v-if="createdTargetGenes[targetIdx].targetGene.targetSequence.sequence != null">
+                                <Textarea
+                                  v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.sequence"
+                                  disabled
+                                  rows="5"
+                                  style="width: 100%; max-width: 60em; word-wrap: break-word; font-family: monospace"
+                                />
+                                <small
+                                  >This sequence was set by the autofilled target. To use a different sequence, upload a
+                                  new FASTA file.</small
+                                >
+                              </div>
+                              <div v-else>
+                                <p>
+                                  Drop a
+                                  <a href="https://blast.ncbi.nlm.nih.gov/doc/blast-topics/#fasta" target="_blank"
+                                    >FASTA</a
+                                  >
+                                  file here
+                                </p>
+                              </div>
+                            </template>
+                          </FileUpload>
+                        </span>
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.sequence`]"
+                          class="mave-field-error"
+                          >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.sequence`] }}</span
+                        >
+                      </div>
                     </div>
                   </div>
-                  <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
-                      <InputText
-                        :id="scopedId('input-targetGeneName')"
-                        v-model="createdTargetGenes[targetIdx].targetGene.name"
-                        style="width: 100%"
-                      />
-                      <label :for="scopedId('input-targetGeneName')">Target name</label>
-                    </span>
-                    <span v-if="validationErrors[`targetGene.${targetIdx}.name`]" class="mave-field-error">{{
-                      validationErrors[`targetGene.${targetIdx}.name`]
-                    }}</span>
-                  </div>
-                </div>
-
-                <div v-if="isTargetSequence">
-                  <div v-if="numTargets > 1" class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      <label>The label of the target</label>
-                      <div class="mavedb-help-small">
-                        This label is what you use in your variants file to indicate which of your targets the variant
-                        is described relative to. Because it is used with MAVE-HGVS strings, it may not contain any
-                        spaces or colons.
+                  <div v-else>
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-targetDescribesChromosomeLabel')"
+                          >Does this target represent a whole chromosome?</label
+                        >
+                        <div class="mavedb-help-small">
+                          Some score sets might describe variants relative to an entire chromosome, while others will
+                          describe variants relative to a RefSeq or Ensembl accession representing a gene.
+                        </div>
                       </div>
-                    </div>
-                    <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
-                        <InputText
-                          :id="scopedId('input-targetGeneLabel')"
-                          v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.label"
-                          style="width: 100%"
+                      <div class="mavedb-wizard-content">
+                        <InputSwitch
+                          v-model="createdTargetGenes[targetIdx].isRelativeToChromosome"
+                          :aria-labelledby="scopedId('input-targetDescribesChromosomeLabel')"
+                          @change="refreshAccessionOptions(targetIdx)"
                         />
-                        <label :for="scopedId('input-targetGeneLabel')">Target label</label>
-                      </span>
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.label`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.label`] }}</span
-                      >
-                    </div>
-                  </div>
-
-                  <div class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-targetGeneCategory')">The functional category of the target</label>
+                        <div class="mavedb-switch-value">
+                          {{
+                            createdTargetGenes[targetIdx].isRelativeToChromosome
+                              ? 'Yes, this target represents an entire chromosome.'
+                              : 'No, this target represents a gene.'
+                          }}
+                        </div>
+                      </div>
                     </div>
-                    <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
+                    <div v-if="createdTargetGenes[targetIdx].isRelativeToChromosome" class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-targetGeneAssemblyLabel')">The assembly for this accession</label>
+                      </div>
+                      <div class="mavedb-wizard-content">
                         <span class="p-float-label">
-                          <SelectButton
-                            :id="scopedId('input-targetGeneCategory')"
-                            v-model="createdTargetGenes[targetIdx].targetGene.category"
-                            :option-label="textForTargetGeneCategory"
-                            :options="targetGeneCategories"
+                          <!-- Assembly is the reference genome property in coordinate cases -->
+                          <Dropdown
+                            v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.assembly"
+                            :aria-labelledby="scopedId('input-targetGeneAssemblyLabel')"
+                            :options="assemblies"
+                            style="width: 100%"
+                            @change="refreshAccessionOptions(targetIdx)"
                           />
+                          <label :for="scopedId('input-targetGeneAssemblyLabel')">Assembly</label>
                         </span>
-                      </span>
-                      <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{
-                        validationErrors[`targetGene.${targetIdx}.category`]
-                      }}</span>
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.assembly`]"
+                          class="mave-field-error"
+                          >{{ validationErrors[`targetGene.${targetIdx}.targetAccession.assembly`] }}</span
+                        >
+                      </div>
                     </div>
-                  </div>
-
-                  <div v-for="dbName of externalGeneDatabases" :key="dbName" class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      <label :id="scopedId(`input-targetGeneExternalDatabase${dbName}Label`)"
-                        >Link this target to a {{ dbName }} accession</label
-                      >
-                      <!-- only display this verbose help on the first of the external gene database selections. -->
-                      <div v-if="dbName === externalGeneDatabases[0]" class="mavedb-help-small">
-                        If the target sequence provided to MaveDB starts partway through the linked sequence (such as an
-                        assay targeting a single functional domain), the target should also have an “offset”. The offset
-                        is the integer value that should be added to the MaveDB coordinates (which are relative to the
-                        target sequence) in order to match the coordinates in the linked sequence.
+                    <div v-else class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-targetGeneGeneNameLabel')">The gene name for this accession</label>
+                      </div>
+                      <div class="mavedb-wizard-content">
+                        <span class="p-float-label">
+                          <Dropdown
+                            :id="scopedId('input-targetGeneGeneNameLabel')"
+                            v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.gene"
+                            filter
+                            option-label="name"
+                            :options="geneNamesAsObject"
+                            style="width: 100%"
+                            :virtual-scroller-options="{itemSize: 50}"
+                            @change="autofillGeneName($event, targetIdx)"
+                          />
+                          <label :for="scopedId('input-targetGeneGeneNameLabel')">HGNC Name</label>
+                        </span>
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.gene`]"
+                          class="mave-field-error"
+                          >{{ validationErrors[`targetGene.${targetIdx}.targetAccession.gene`] }}</span
+                        >
                       </div>
                     </div>
-                    <div class="mavedb-wizard-content">
-                      <InputSwitch
-                        v-model="createdTargetGenes[targetIdx].linkedAccessions[dbName]"
-                        :aria-labelledby="scopedId(`input-targetGeneExternalDatabase${dbName}Label`)"
-                      />
-                      <div class="mavedb-switch-value">
-                        {{
-                          createdTargetGenes[targetIdx].linkedAccessions[dbName]
-                            ? `Yes, link this target to a ${dbName} accession.`
-                            : `No, do not link this target to a ${dbName} accession.`
-                        }}
+
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-targetGeneAccessionLabel')"
+                          >The accession identifier for this target</label
+                        >
+                        <div class="mavedb-help-small">
+                          This will be the sequence that your variants are described against. It may be a RefSeq or
+                          Ensemble identifier. Available accessions matching the
+                          {{ createdTargetGenes[targetIdx].isRelativeToChromosome ? 'assembly' : 'gene name' }} will be
+                          displayed once one is selected.
+                        </div>
                       </div>
-                      <div
-                        v-if="createdTargetGenes[targetIdx].linkedAccessions[dbName]"
-                        class="mavedb-wizard-subcontent field-columns"
-                      >
-                        <div class="p-float-label field-column">
+                      <div class="mavedb-wizard-content">
+                        <span class="p-float-label">
                           <AutoComplete
-                            :id="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
-                            v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].identifier"
-                            field="identifier"
-                            :force-selection="false"
+                            :id="scopedId('input-targetGeneAccessionLabel')"
+                            v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.accession"
+                            :dropdown="true"
+                            :force-selection="true"
                             style="width: 100%"
-                            :suggestions="targetGeneIdentifierSuggestionsList[dbName]"
-                            @change="externalTargetIdentifierChanged(dbName, targetIdx, $event)"
-                            @complete="searchTargetGeneIdentifiers(dbName, $event)"
+                            :suggestions="accessionSuggestions"
+                            @complete="fetchTargetAccessions($event)"
+                          />
+                          <label :for="scopedId('input-targetGeneAccessionLabel')"> Accession Identifier </label>
+                        </span>
+                        <div v-if="showSwitchToProteinAccessionButton(targetIdx)" class="mavedb-wizard-subcontent">
+                          <Button
+                            icon="pi pi-arrows-h"
+                            label="Switch to Protein Accession"
+                            severity="info"
+                            @click="swapNucleotideProteinAccessions(targetIdx)"
                           />
-                          <label :for="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
-                            >{{ dbName }} identifier</label
-                          >
                         </div>
+                        <span
+                          v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.accession`]"
+                          class="mave-field-error"
+                          >{{ validationErrors[`targetGene.${targetIdx}.targetAccession.accession`] }}</span
+                        >
+                      </div>
+                    </div>
+                    <div class="mavedb-wizard-row">
+                      <div class="mavedb-wizard-help">
+                        <label :id="scopedId('input-targetGeneCategoryLabel')">The genetic category of the target</label>
+                      </div>
+                      <div class="mavedb-wizard-content">
                         <span class="p-float-label">
-                          <InputNumber
-                            :id="scopedId(`input-${dbName.toLowerCase()}Offset`)"
-                            v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].offset"
-                            button-layout="stacked"
-                            :min="0"
-                            show-buttons
-                            suffix=" bp"
-                          />
-                          <label :for="scopedId(`input-${dbName.toLowerCase()}Offset`)">Offset</label>
+                          <span class="p-float-label">
+                            <SelectButton
+                              :id="scopedId('input-targetGeneCategoryLabel')"
+                              v-model="createdTargetGenes[targetIdx].targetGene.category"
+                              :option-label="textForTargetGeneCategory"
+                              :options="targetGeneCategories"
+                            />
+                          </span>
                         </span>
+                        <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{
+                          validationErrors[`targetGene.${targetIdx}.category`]
+                        }}</span>
                       </div>
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}`] }}</span
-                      >
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.identifier`]"
-                        class="mave-field-error"
-                        >{{
-                          validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.identifier`]
-                        }}</span
-                      >
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.offset`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.offset`] }}</span
-                      >
                     </div>
                   </div>
+                </div>
+                <div class="mavedb-wizard-step-controls-row">
+                  <div class="flex justify-content-between mavedb-wizard-step-controls pt-4">
+                    <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="activateCallback(activeWizardStep - 1)" />
+                    <Button
+                      :disabled="maxWizardStepValidated < activeWizardStep"
+                      icon="pi pi-arrow-right"
+                      icon-pos="right"
+                      label="Next"
+                      @click="showNextWizardStepIfValid(activateCallback)"
+                    />
+                  </div>
+                </div>
+              <!-- </template> -->
+            </StepPanel>
+
+            <StepPanel v-slot="{ activateCallback }" :value="numTargets + 3">
+              <!-- <template #header="{index, clickCallback}">
+                <button
+                  class="p-stepper-action"
+                  :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
+                  role="tab"
+                  @click="clickCallback"
+                >
+                  <span class="p-stepper-number">{{ index + 1 }}</span>
+                  <span class="p-stepper-title">Score Calibrations</span>
+                </button>
+              </template> -->
+              <!-- <template #content="{prevCallback: showPreviousWizardStep, nextCallback: showNextWizardStep}"> -->
+                <div class="mavedb-wizard-form">
+                  <div class="mavedb-wizard-form-content-background"></div>
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-targetGeneTaxonomyLabel')"
-                        >The taxonomy group to which this target belongs</label
+                      <label :id="scopedId('input-investigatorIsProvidingScoreCalibrations')"
+                        >Will you be providing score calibrations for this score set?</label
                       >
                       <div class="mavedb-help-small">
-                        For more details about taxonomy, see the
-                        <a href="https://www.ncbi.nlm.nih.gov/books/NBK53758/" target="_blank"
-                          >NCBI taxonomy help page.</a
-                        >
+                        Score calibrations provide additional clinical context to the scores you upload. If you provide
+                        score calibrations, you may classify each range as having either normal, abnormal, or an
+                        unspecified function. If you provide a range with normal function, you should also provide a
+                        baseline score that falls within the normal range. This score is the expected score for baseline
+                        variants.
                       </div>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
-                        <AutoComplete
-                          :id="scopedId('input-targetGeneTaxonomyLabel')"
-                          ref="taxonomyInput"
-                          v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.taxonomy"
-                          dropdown
-                          field="organismName"
-                          force-selection
-                          :multiple="false"
-                          :options="taxonomies"
-                          style="width: 100%"
-                          :suggestions="taxonomySuggestionsList"
-                          @complete="searchTaxonomies"
-                          @keyup.escape="clearTaxonomySearch"
-                        >
-                          <template #item="slotProps">
-                            {{ slotProps.item.code }} - {{ slotProps.item.organismName }}
-                            <template v-if="slotProps.item.commonName !== 'NULL' && slotProps.item.commonName !== null"
-                              >/ {{ slotProps.item.commonName }}</template
-                            >
-                          </template>
-                        </AutoComplete>
-                        <label :for="scopedId('input-targetGeneTaxonomyLabel')">Taxonomy</label>
-                      </span>
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.taxonomy`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.taxonomy`] }}</span
-                      >
+                      <InputSwitch
+                        v-model="investigatorIsProvidingScoreCalibrations"
+                        :aria-labelledby="scopedId('input-investigatorIsProvidingScoreCalibrations')"
+                      />
+                      <div class="mavedb-switch-value">
+                        {{
+                          investigatorIsProvidingScoreCalibrations
+                            ? 'Yes, I will be providing score range data.'
+                            : 'No, I will not be providing score range data.'
+                        }}
+                      </div>
                     </div>
                   </div>
+                  <div v-if="investigatorIsProvidingScoreCalibrations">
+                    <CalibrationEditor
+                      :calibration-draft-ref="calibrationCreateDraft"
+                      :validation-errors="calibrationValidationErrors || {}"
+                    />
+                  </div>
+                </div>
+                <div class="mavedb-wizard-step-controls-row">
+                  <div class="flex justify-content-between mavedb-wizard-step-controls pt-5">
+                    <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="activateCallback(activeWizardStep - 1)" />
+                    <Button
+                      :disabled="maxWizardStepValidated < activeWizardStep"
+                      icon="pi pi-arrow-right"
+                      icon-pos="right"
+                      label="Next"
+                      @click="showNextWizardStepIfValid(activateCallback)"
+                    />
+                  </div>
+                </div>
+              <!-- </template> -->
+            </StepPanel>
+
+            <StepPanel v-slot="{ activateCallback }" :value="numTargets + 4">
+              <!-- <template #header="{index, clickCallback}">
+                <button
+                  class="p-stepper-action"
+                  :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
+                  role="tab"
+                  @click="clickCallback"
+                >
+                  <span class="p-stepper-number">{{ index + 1 }}</span>
+                  <span class="p-stepper-title">Variant scores</span>
+                </button>
+              </template> -->
+              <!-- <template #content="{prevCallback: showPreviousWizardStep}"> -->
+                <div class="mavedb-wizard-form">
+                  <div class="mavedb-wizard-form-content-background"></div>
                   <div class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-targetGeneSequenceTypeLabel')">The sequence type of the target</label>
-                    </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
-                        <SelectButton
-                          :id="scopedId('input-targetGeneSequenceType')"
-                          v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.sequenceType"
-                          :options="sequenceTypes"
-                        />
-                      </span>
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.sequenceType`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.sequenceType`] }}</span
-                      >
+                      <Message v-if="createdTargetGenes[0]?.targetAccession?.accession" closable severity="info">
+                        When defining variants against an accession based target, uploaded variant coordinates should be
+                        fully qualified with respect to target names or target accessions (e.g: NC_000001.1:c.1A>C).
+                      </Message>
+                      <Message v-else-if="numTargets > 1" closable severity="info">
+                        When defining variants against multiple targets, uploaded variant coordinates should be fully
+                        qualified with respect to target names or target accessions.
+                      </Message>
                     </div>
                   </div>
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-targetGeneSequenceFileLabel')">The sequence of the target</label>
+                      <div>
+                        <label :id="scopedId('input-scoresFile')">Load a scores file</label>
+                      </div>
                       <div class="mavedb-help-small">
-                        Variants will be validated against this sequence. Note that the first position in the sequence
-                        is numbered as position 1 when validating variants.
+                        This file is required and should be a CSV file, with each row of the table describing a single
+                        variant. For more information about what this file can include and how it should be formatted,
+                        please take a look at
+                        <a :href="`${config.appBaseUrl}/docs/mavedb/data_formats.html#data-table-formats`" target="_blank"
+                          >our documentation</a
+                        >.
                       </div>
                     </div>
                     <div class="mavedb-wizard-content">
                       <span class="p-float-label">
                         <FileUpload
-                          :id="scopedId('input-targetGeneSequenceFileLabel')"
-                          ref="sequenceFileUpload"
+                          :id="scopedId('input-scoresFile')"
+                          ref="scoresFileUpload"
+                          accept="text/csv"
                           :auto="false"
-                          choose-label="Reference sequence"
-                          :class="inputClasses.targetGeneTargetSequenceSequenceFile"
+                          choose-label="Scores file"
+                          :class="inputClasses.scoresFile || ''"
                           :custom-upload="true"
                           :file-limit="1"
                           :show-cancel-button="false"
                           :show-upload-button="false"
-                          @remove="fileCleared('targetGeneTargetSequenceSequenceFile', targetIdx)"
-                          @select="fileSelected('targetGeneTargetSequenceSequenceFile', $event, targetIdx)"
                         >
                           <template #empty>
-                            <div v-if="createdTargetGenes[targetIdx].targetGene.targetSequence.sequence != null">
-                              <Textarea
-                                v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.sequence"
-                                disabled
-                                rows="5"
-                                style="width: 100%; max-width: 60em; word-wrap: break-word; font-family: monospace"
-                              />
-                              <small
-                                >This sequence was set by the autofilled target. To use a different sequence, upload a
-                                new FASTA file.</small
-                              >
-                            </div>
-                            <div v-else>
-                              <p>
-                                Drop a
-                                <a href="https://blast.ncbi.nlm.nih.gov/doc/blast-topics/#fasta" target="_blank"
-                                  >FASTA</a
-                                >
-                                file here
-                              </p>
-                            </div>
+                            <p>Drop a file here.</p>
                           </template>
                         </FileUpload>
                       </span>
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.sequence`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.sequence`] }}</span
-                      >
+                      <span v-if="validationErrors.scoresFile" class="mave-field-error">{{
+                        validationErrors.scoresFile
+                      }}</span>
                     </div>
                   </div>
-                </div>
-                <div v-else>
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-targetDescribesChromosomeLabel')"
-                        >Does this target represent a whole chromosome?</label
-                      >
+                      <label :for="scopedId('input-scoreColumnsMetadataFile')">Load a scores column metadata file</label>
                       <div class="mavedb-help-small">
-                        Some score sets might describe variants relative to an entire chromosome, while others will
-                        describe variants relative to a RefSeq or Ensembl accession representing a gene.
-                      </div>
-                    </div>
-                    <div class="mavedb-wizard-content">
-                      <InputSwitch
-                        v-model="createdTargetGenes[targetIdx].isRelativeToChromosome"
-                        :aria-labelledby="scopedId('input-targetDescribesChromosomeLabel')"
-                        @change="refreshAccessionOptions(targetIdx)"
-                      />
-                      <div class="mavedb-switch-value">
-                        {{
-                          createdTargetGenes[targetIdx].isRelativeToChromosome
-                            ? 'Yes, this target represents an entire chromosome.'
-                            : 'No, this target represents a gene.'
-                        }}
+                        This file is optional, but recommended. If provided, it should be a JSON file containing a single
+                        object. The keys of that object should be limited to columns of the score data, while values
+                        should include a string description and an optional string details.
                       </div>
                     </div>
-                  </div>
-                  <div v-if="createdTargetGenes[targetIdx].isRelativeToChromosome" class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-targetGeneAssemblyLabel')">The assembly for this accession</label>
-                    </div>
-                    <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
-                        <!-- Assembly is the reference genome property in coordinate cases -->
-                        <Dropdown
-                          v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.assembly"
-                          :aria-labelledby="scopedId('input-targetGeneAssemblyLabel')"
-                          :options="assemblies"
-                          style="width: 100%"
-                          @change="refreshAccessionOptions(targetIdx)"
-                        />
-                        <label :for="scopedId('input-targetGeneAssemblyLabel')">Assembly</label>
-                      </span>
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.assembly`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetAccession.assembly`] }}</span
-                      >
-                    </div>
-                  </div>
-                  <div v-else class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-targetGeneGeneNameLabel')">The gene name for this accession</label>
-                    </div>
                     <div class="mavedb-wizard-content">
                       <span class="p-float-label">
-                        <Dropdown
-                          :id="scopedId('input-targetGeneGeneNameLabel')"
-                          v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.gene"
-                          filter
-                          option-label="name"
-                          :options="geneNamesAsObject"
-                          style="width: 100%"
-                          :virtual-scroller-options="{itemSize: 50}"
-                          @change="autofillGeneName($event, targetIdx)"
-                        />
-                        <label :for="scopedId('input-targetGeneGeneNameLabel')">HGNC Name</label>
+                        <FileUpload
+                          :id="scopedId('input-scoreColumnsMetadataFile')"
+                          ref="scoreColumnsMetadataFileUpload"
+                          accept="application/json"
+                          :auto="false"
+                          choose-label="Scores column metadata file"
+                          :class="inputClasses.scoreColumnsMetadataFile || ''"
+                          :custom-upload="true"
+                          :disabled="!($refs.scoresFileUpload?.files?.length == 1)"
+                          :file-limit="1"
+                          :show-cancel-button="false"
+                          :show-upload-button="false"
+                          @remove="fileCleared('scoreColumnsMetadataFile')"
+                          @select="fileSelected('scoreColumnsMetadataFile', $event)"
+                        >
+                          <template #empty>
+                            <p>Drop a file here.</p>
+                          </template>
+                        </FileUpload>
                       </span>
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.gene`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetAccession.gene`] }}</span
-                      >
+                      <span v-if="validationErrors.scoreColumnsMetadataFile" class="mave-field-error">{{
+                        validationErrors.scoreColumnsMetadataFile
+                      }}</span>
                     </div>
                   </div>
-
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-targetGeneAccessionLabel')"
-                        >The accession identifier for this target</label
-                      >
+                      <label :id="scopedId('input-countsFile')">Load a counts file</label>
                       <div class="mavedb-help-small">
-                        This will be the sequence that your variants are described against. It may be a RefSeq or
-                        Ensemble identifier. Available accessions matching the
-                        {{ createdTargetGenes[targetIdx].isRelativeToChromosome ? 'assembly' : 'gene name' }} will be
-                        displayed once one is selected.
-                      </div>
-                    </div>
-                    <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
-                        <AutoComplete
-                          :id="scopedId('input-targetGeneAccessionLabel')"
-                          v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.accession"
-                          :dropdown="true"
-                          :force-selection="true"
-                          style="width: 100%"
-                          :suggestions="accessionSuggestions"
-                          @complete="fetchTargetAccessions($event)"
-                        />
-                        <label :for="scopedId('input-targetGeneAccessionLabel')"> Accession Identifier </label>
-                      </span>
-                      <div v-if="showSwitchToProteinAccessionButton(targetIdx)" class="mavedb-wizard-subcontent">
-                        <Button
-                          icon="pi pi-arrows-h"
-                          label="Switch to Protein Accession"
-                          severity="info"
-                          @click="swapNucleotideProteinAccessions(targetIdx)"
-                        />
+                        This file is optional, but recommended. There are no required columns for your count data, but you
+                        should describe the meaning of any columns by uploading a column metadata file and providing any
+                        additional information in your methods section.
                       </div>
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.accession`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetAccession.accession`] }}</span
-                      >
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-row">
-                    <div class="mavedb-wizard-help">
-                      <label :id="scopedId('input-targetGeneCategoryLabel')">The genetic category of the target</label>
                     </div>
                     <div class="mavedb-wizard-content">
                       <span class="p-float-label">
-                        <span class="p-float-label">
-                          <SelectButton
-                            :id="scopedId('input-targetGeneCategoryLabel')"
-                            v-model="createdTargetGenes[targetIdx].targetGene.category"
-                            :option-label="textForTargetGeneCategory"
-                            :options="targetGeneCategories"
-                          />
-                        </span>
+                        <FileUpload
+                          :id="scopedId('input-countsFile')"
+                          ref="countsFileUpload"
+                          accept="text/csv"
+                          :auto="false"
+                          choose-label="Counts file"
+                          :class="inputClasses.countsFile || ''"
+                          :custom-upload="true"
+                          :file-limit="1"
+                          :show-cancel-button="false"
+                          :show-upload-button="false"
+                        >
+                          <template #empty>
+                            <p>Drop a file here.</p>
+                          </template>
+                        </FileUpload>
                       </span>
-                      <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{
-                        validationErrors[`targetGene.${targetIdx}.category`]
+                      <span v-if="validationErrors.countsFile" class="mave-field-error">{{
+                        validationErrors.countsFile
                       }}</span>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div class="mavedb-wizard-step-controls-row">
-                <div class="flex justify-content-between mavedb-wizard-step-controls pt-4">
-                  <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="showPreviousWizardStep" />
-                  <Button
-                    :disabled="maxWizardStepValidated < activeWizardStep"
-                    icon="pi pi-arrow-right"
-                    icon-pos="right"
-                    label="Next"
-                    @click="showNextWizardStepIfValid(showNextWizardStep)"
-                  />
-                </div>
-              </div>
-            </template>
-          </StepperPanel>
-
-          <StepperPanel header="Score Calibrations">
-            <template #header="{index, clickCallback}">
-              <button
-                class="p-stepper-action"
-                :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
-                role="tab"
-                @click="clickCallback"
-              >
-                <span class="p-stepper-number">{{ index + 1 }}</span>
-                <span class="p-stepper-title">Score Calibrations</span>
-              </button>
-            </template>
-            <template #content="{prevCallback: showPreviousWizardStep, nextCallback: showNextWizardStep}">
-              <div class="mavedb-wizard-form">
-                <div class="mavedb-wizard-form-content-background"></div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label :id="scopedId('input-investigatorIsProvidingScoreCalibrations')"
-                      >Will you be providing score calibrations for this score set?</label
-                    >
-                    <div class="mavedb-help-small">
-                      Score calibrations provide additional clinical context to the scores you upload. If you provide
-                      score calibrations, you may classify each range as having either normal, abnormal, or an
-                      unspecified function. If you provide a range with normal function, you should also provide a
-                      baseline score that falls within the normal range. This score is the expected score for baseline
-                      variants.
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-content">
-                    <InputSwitch
-                      v-model="investigatorIsProvidingScoreCalibrations"
-                      :aria-labelledby="scopedId('input-investigatorIsProvidingScoreCalibrations')"
-                    />
-                    <div class="mavedb-switch-value">
-                      {{
-                        investigatorIsProvidingScoreCalibrations
-                          ? 'Yes, I will be providing score range data.'
-                          : 'No, I will not be providing score range data.'
-                      }}
-                    </div>
-                  </div>
-                </div>
-                <div v-if="investigatorIsProvidingScoreCalibrations">
-                  <CalibrationEditor
-                    :calibration-draft-ref="calibrationCreateDraft"
-                    :validation-errors="calibrationValidationErrors || {}"
-                  />
-                </div>
-              </div>
-              <div class="mavedb-wizard-step-controls-row">
-                <div class="flex justify-content-between mavedb-wizard-step-controls pt-5">
-                  <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="showPreviousWizardStep" />
-                  <Button
-                    :disabled="maxWizardStepValidated < activeWizardStep"
-                    icon="pi pi-arrow-right"
-                    icon-pos="right"
-                    label="Next"
-                    @click="showNextWizardStepIfValid(showNextWizardStep)"
-                  />
-                </div>
-              </div>
-            </template>
-          </StepperPanel>
-
-          <StepperPanel header="Variant scores">
-            <template #header="{index, clickCallback}">
-              <button
-                class="p-stepper-action"
-                :disabled="maxWizardStepEntered < index || maxWizardStepValidated < index - 1"
-                role="tab"
-                @click="clickCallback"
-              >
-                <span class="p-stepper-number">{{ index + 1 }}</span>
-                <span class="p-stepper-title">Variant scores</span>
-              </button>
-            </template>
-            <template #content="{prevCallback: showPreviousWizardStep}">
-              <div class="mavedb-wizard-form">
-                <div class="mavedb-wizard-form-content-background"></div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-content">
-                    <Message v-if="createdTargetGenes[0]?.targetAccession?.accession" severity="info">
-                      When defining variants against an accession based target, uploaded variant coordinates should be
-                      fully qualified with respect to target names or target accessions (e.g: NC_000001.1:c.1A>C).
-                    </Message>
-                    <Message v-else-if="numTargets > 1" severity="info">
-                      When defining variants against multiple targets, uploaded variant coordinates should be fully
-                      qualified with respect to target names or target accessions.
-                    </Message>
-                  </div>
-                </div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <div>
-                      <label :id="scopedId('input-scoresFile')">Load a scores file</label>
-                    </div>
-                    <div class="mavedb-help-small">
-                      This file is required and should be a CSV file, with each row of the table describing a single
-                      variant. For more information about what this file can include and how it should be formatted,
-                      please take a look at
-                      <a :href="`${config.appBaseUrl}/docs/mavedb/data_formats.html#data-table-formats`" target="_blank"
-                        >our documentation</a
-                      >.
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-content">
-                    <span class="p-float-label">
-                      <FileUpload
-                        :id="scopedId('input-scoresFile')"
-                        ref="scoresFileUpload"
-                        accept="text/csv"
-                        :auto="false"
-                        choose-label="Scores file"
-                        :class="inputClasses.scoresFile || ''"
-                        :custom-upload="true"
-                        :file-limit="1"
-                        :show-cancel-button="false"
-                        :show-upload-button="false"
-                      >
-                        <template #empty>
-                          <p>Drop a file here.</p>
-                        </template>
-                      </FileUpload>
-                    </span>
-                    <span v-if="validationErrors.scoresFile" class="mave-field-error">{{
-                      validationErrors.scoresFile
-                    }}</span>
-                  </div>
-                </div>
                 <div class="mavedb-wizard-row">
                   <div class="mavedb-wizard-help">
-                    <label :for="scopedId('input-scoreColumnsMetadataFile')">Load a scores column metadata file</label>
+                    <label :for="scopedId('input-countColumnsMetadataFile')">Load a counts column metadata file</label>
                     <div class="mavedb-help-small">
                       This file is optional, but recommended. If provided, it should be a JSON file containing a single
-                      object. The keys of that object should be limited to columns of the score data, while values
-                      should include a string description and an optional string details.
+                      object. The keys of that object should be limited to columns of the count data, while values should
+                      include a string description and an optional string details.
                     </div>
                   </div>
                   <div class="mavedb-wizard-content">
                     <span class="p-float-label">
                       <FileUpload
-                        :id="scopedId('input-scoreColumnsMetadataFile')"
-                        ref="scoreColumnsMetadataFileUpload"
+                        :id="scopedId('input-countColumnsMetadataFile')"
+                        ref="countColumnsMetadataFileUpload"
                         accept="application/json"
                         :auto="false"
-                        choose-label="Scores column metadata file"
-                        :class="inputClasses.scoreColumnsMetadataFile || ''"
-                        :custom-upload="true"
-                        :disabled="!($refs.scoresFileUpload?.files?.length == 1)"
-                        :file-limit="1"
-                        :show-cancel-button="false"
-                        :show-upload-button="false"
-                        @remove="fileCleared('scoreColumnsMetadataFile')"
-                        @select="fileSelected('scoreColumnsMetadataFile', $event)"
-                      >
-                        <template #empty>
-                          <p>Drop a file here.</p>
-                        </template>
-                      </FileUpload>
-                    </span>
-                    <span v-if="validationErrors.scoreColumnsMetadataFile" class="mave-field-error">{{
-                      validationErrors.scoreColumnsMetadataFile
-                    }}</span>
-                  </div>
-                </div>
-                <div class="mavedb-wizard-row">
-                  <div class="mavedb-wizard-help">
-                    <label :id="scopedId('input-countsFile')">Load a counts file</label>
-                    <div class="mavedb-help-small">
-                      This file is optional, but recommended. There are no required columns for your count data, but you
-                      should describe the meaning of any columns by uploading a column metadata file and providing any
-                      additional information in your methods section.
-                    </div>
-                  </div>
-                  <div class="mavedb-wizard-content">
-                    <span class="p-float-label">
-                      <FileUpload
-                        :id="scopedId('input-countsFile')"
-                        ref="countsFileUpload"
-                        accept="text/csv"
-                        :auto="false"
-                        choose-label="Counts file"
-                        :class="inputClasses.countsFile || ''"
+                        choose-label="Counts column metadata file"
+                        :class="inputClasses.countColumnsMetadataFile || ''"
                         :custom-upload="true"
+                        :disabled="!($refs.countsFileUpload?.files?.length == 1)"
                         :file-limit="1"
                         :show-cancel-button="false"
                         :show-upload-button="false"
+                        @remove="fileCleared('countColumnsMetadataFile')"
+                        @select="fileSelected('countColumnsMetadataFile', $event)"
                       >
                         <template #empty>
                           <p>Drop a file here.</p>
                         </template>
                       </FileUpload>
                     </span>
-                    <span v-if="validationErrors.countsFile" class="mave-field-error">{{
-                      validationErrors.countsFile
+                    <span v-if="validationErrors.countColumnsMetadataFile" class="mave-field-error">{{
+                      validationErrors.countColumnsMetadataFile
                     }}</span>
                   </div>
                 </div>
-              </div>
-              <div class="mavedb-wizard-row">
-                <div class="mavedb-wizard-help">
-                  <label :for="scopedId('input-countColumnsMetadataFile')">Load a counts column metadata file</label>
-                  <div class="mavedb-help-small">
-                    This file is optional, but recommended. If provided, it should be a JSON file containing a single
-                    object. The keys of that object should be limited to columns of the count data, while values should
-                    include a string description and an optional string details.
+                <div class="mavedb-wizard-step-controls-row">
+                  <div class="flex justify-content-between mavedb-wizard-step-controls pt-4">
+                    <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="activateCallback(activeWizardStep - 1)" />
+                    <Button
+                      :disabled="maxWizardStepValidated < activeWizardStep"
+                      icon="pi pi-arrow-right"
+                      icon-pos="right"
+                      label="Save"
+                      @click="validateAndSave()"
+                    />
                   </div>
                 </div>
-                <div class="mavedb-wizard-content">
-                  <span class="p-float-label">
-                    <FileUpload
-                      :id="scopedId('input-countColumnsMetadataFile')"
-                      ref="countColumnsMetadataFileUpload"
-                      accept="application/json"
-                      :auto="false"
-                      choose-label="Counts column metadata file"
-                      :class="inputClasses.countColumnsMetadataFile || ''"
-                      :custom-upload="true"
-                      :disabled="!($refs.countsFileUpload?.files?.length == 1)"
-                      :file-limit="1"
-                      :show-cancel-button="false"
-                      :show-upload-button="false"
-                      @remove="fileCleared('countColumnsMetadataFile')"
-                      @select="fileSelected('countColumnsMetadataFile', $event)"
-                    >
-                      <template #empty>
-                        <p>Drop a file here.</p>
-                      </template>
-                    </FileUpload>
-                  </span>
-                  <span v-if="validationErrors.countColumnsMetadataFile" class="mave-field-error">{{
-                    validationErrors.countColumnsMetadataFile
-                  }}</span>
-                </div>
-              </div>
-              <div class="mavedb-wizard-step-controls-row">
-                <div class="flex justify-content-between mavedb-wizard-step-controls pt-4">
-                  <Button icon="pi pi-arrow-left" label="Back" severity="secondary" @click="showPreviousWizardStep" />
-                  <Button
-                    :disabled="maxWizardStepValidated < activeWizardStep"
-                    icon="pi pi-arrow-right"
-                    icon-pos="right"
-                    label="Save"
-                    @click="validateAndSave()"
-                  />
-                </div>
-              </div>
-            </template>
-          </StepperPanel>
+              <!-- </template> -->
+            </StepPanel>
+          </StepPanels>
         </Stepper>
       </div>
     </div>
@@ -1491,9 +1506,15 @@ import Multiselect from 'primevue/multiselect'
 import ProgressSpinner from 'primevue/progressspinner'
 import SelectButton from 'primevue/selectbutton'
 import Stepper from 'primevue/stepper'
-import StepperPanel from 'primevue/stepperpanel'
+import StepPanel from 'primevue/steppanel'
+import StepPanels from 'primevue/steppanels'
+import StepList from 'primevue/steplist'
+import Step from 'primevue/step'
+import Tabs from 'primevue/tabs'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import TabPanels from 'primevue/tabpanels'
 import TabPanel from 'primevue/tabpanel'
-import TabView from 'primevue/tabview'
 import Textarea from 'primevue/textarea'
 import {ref} from 'vue'
 import {useHead} from '@unhead/vue'
@@ -1563,9 +1584,15 @@ export default {
     ProgressSpinner,
     SelectButton,
     Stepper,
-    StepperPanel,
+    StepPanel,
+    StepPanels,
+    StepList,
+    Step,
     TabPanel,
-    TabView,
+    Tabs,
+    Tab,
+    TabList,
+    TabPanels,
     Textarea
   },
 
@@ -2068,7 +2095,7 @@ export default {
     showNextWizardStepIfValid: function (navigate) {
       if (this.maxWizardStepValidated >= this.activeWizardStep) {
         this.maxWizardStepEntered = Math.max(this.maxWizardStepEntered, this.activeWizardStep + 1)
-        navigate()
+        navigate(this.activeWizardStep + 1)
       }
     },
 
@@ -2837,7 +2864,7 @@ export default {
 }
 </script>
 
-<style scoped src="../../assets/forms.css"></style>
+<style src="../../assets/forms.css"></style>
 
 <style scoped>
 .mavedb-wizard:deep(.p-stepper) {
@@ -2845,7 +2872,7 @@ export default {
 }
 
 /* Remove the stepper panel's background color. */
-.mavedb-wizard:deep(.p-stepper .p-stepper-panels) {
+.mavedb-wizard:deep(.p-stepper .p-steppanels) {
   background-color: transparent;
 }
 
@@ -2853,6 +2880,7 @@ export default {
 .mavedb-wizard-form {
   position: relative;
   z-index: 0;
+  background-color: #f7f7f7;
 }
 
 /* Give the right side of the wizard a white background, without gaps between rows. */
@@ -2927,6 +2955,7 @@ export default {
 .mavedb-wizard-step-controls {
   padding-left: 10px;
   max-width: 100vw;
+  background-color: #f7f7f7;
 }
 
 /* Switches */
@@ -3052,24 +3081,11 @@ export default {
   z-index: 1001;
 }
 
-.mave-taxonomy-dropdown-panel.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
-  padding: 0;
-}
-
-.mave-taxonomy-dropdown-panel.p-dropdown-panel
-  .p-dropdown-items
-  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-  background: #eef;
+.mavedb-wizard:deep(.p-step-title) {
+  font-size: 0.9em !important;
 }
 
-.mave-taxonomy-dropdown-panel.p-dropdown-panel
-  .p-dropdown-items
-  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover
-  .mave-taxonomy-common-name,
-.mave-taxonomy-dropdown-panel.p-dropdown-panel
-  .p-dropdown-items
-  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover
-  .mave-taxonomy-organism-name {
-  background: #eef;
+.p-inputwrapper, .p-textarea, .p-inputtext {
+  width: 100%;
 }
 </style>
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index 67c50469..f04509df 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -78,35 +78,47 @@
                 }}</span>
               </div>
               <div class="field">
-                <TabView>
-                  <TabPanel header="Edit">
-                    <span class="p-float-label">
-                      <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="4" />
-                      <label :for="scopedId('input-abstractText')">Abstract</label>
-                    </span>
-                  </TabPanel>
-                  <TabPanel header="Preview">
-                    <!-- eslint-disable-next-line vue/no-v-html -->
-                    <div v-html="markdownToHtml(abstractText)"></div>
-                  </TabPanel>
-                </TabView>
+                <Tabs value="0">
+                  <TabList>
+                    <Tab value="0">Edit</Tab>
+                    <Tab value="1">Preview</Tab>
+                  </TabList>
+                  <TabPanels>
+                    <TabPanel header="Edit" value="0">
+                      <span class="p-float-label">
+                        <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="4" />
+                        <label :for="scopedId('input-abstractText')">Abstract</label>
+                      </span>
+                    </TabPanel>
+                    <TabPanel header="Preview" value="1">
+                      <!-- eslint-disable-next-line vue/no-v-html -->
+                      <div v-html="markdownToHtml(abstractText)"></div>
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
                 <span v-if="validationErrors.abstractText" class="mave-field-error">{{
                   validationErrors.abstractText
                 }}</span>
               </div>
               <div class="field">
-                <TabView>
-                  <TabPanel header="Edit">
-                    <span class="p-float-label">
-                      <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="4" />
-                      <label :for="scopedId('input-methodText')">Methods</label>
-                    </span>
-                  </TabPanel>
-                  <TabPanel header="Preview">
-                    <!-- eslint-disable-next-line vue/no-v-html -->
-                    <div v-html="markdownToHtml(methodText)"></div>
-                  </TabPanel>
-                </TabView>
+                <Tabs value="0">
+                  <TabList>
+                    <Tab value="0">Edit</Tab>
+                    <Tab value="1">Preview</Tab>
+                  </TabList>
+                  <TabPanels>
+                    <TabPanel header="Edit" value="0">
+                      <span class="p-float-label">
+                        <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="4" />
+                        <label :for="scopedId('input-methodText')">Methods</label>
+                      </span>
+                    </TabPanel>
+                    <TabPanel header="Preview" value="1">
+                      <!-- eslint-disable-next-line vue/no-v-html -->
+                      <div v-html="markdownToHtml(methodText)"></div>
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
                 <span v-if="validationErrors.methodText" class="mave-field-error">{{
                   validationErrors.methodText
                 }}</span>
@@ -254,7 +266,7 @@
                     validationErrors.primaryPublicationIdentifiers
                   }}</span>
                 </div>
-                <Message v-if="experiment" severity="info">
+                <Message v-if="experiment" closable severity="info">
                   Some fields were autopopulated based on the selected experiment and should be inspected to ensure they
                   are still relevant to this score set.
                 </Message>
@@ -320,254 +332,267 @@
               <template #title>Targets</template>
               <template #content>
                 <div>
-                  <TabView class="field">
-                    <TabPanel header="Target Sequence">
-                      <div class="field">
-                        <span class="p-float-label">
-                          <AutoComplete
-                            :id="scopedId('input-existingTargetGene')"
+                  <Tabs value="0" class="field">
+                    <TabList>
+                      <Tab value="0">Target Sequence</Tab>
+                      <Tab value="1">Genomic Coordinates</Tab>
+                    </TabList>
+                    <TabPanels>
+                      <TabPanel value="0">
+                        <div class="field">
+                          <span class="p-float-label">
+                            <AutoComplete
+                              :id="scopedId('input-existingTargetGene')"
                             ref="existingTargetGeneInput"
                             v-model="existingTargetGene"
                             field="name"
                             :force-selection="true"
                             :suggestions="targetGeneSuggestionsList"
                             @complete="searchTargetGenes"
-                          >
-                            <template #item="slotProps">
-                              <div>
-                                <div>Name: {{ slotProps.item.name }}</div>
-                                <div>Category: {{ textForTargetGeneCategory(slotProps.item.category) }}</div>
-                                <div
-                                  v-for="externalIdentifier of slotProps.item.externalIdentifiers"
-                                  :key="externalIdentifier.identifier"
-                                >
-                                  {{ externalIdentifier.identifier.dbName }}:
-                                  {{ externalIdentifier.identifier.identifier }}, Offset:
-                                  {{ externalIdentifier.offset }}
+                            >
+                              <template #item="slotProps">
+                                <div>
+                                  <div>Name: {{ slotProps.item.name }}</div>
+                                  <div>Category: {{ textForTargetGeneCategory(slotProps.item.category) }}</div>
+                                  <div
+                                    v-for="externalIdentifier of slotProps.item.externalIdentifiers"
+                                    :key="externalIdentifier.identifier"
+                                  >
+                                    {{ externalIdentifier.identifier.dbName }}:
+                                    {{ externalIdentifier.identifier.identifier }}, Offset:
+                                    {{ externalIdentifier.offset }}
+                                  </div>
                                 </div>
-                              </div>
-                            </template>
-                          </AutoComplete>
-                          <label :for="scopedId('input-existingTargetGene')">Copy from an existing target gene</label>
-                        </span>
-                      </div>
-                      <div class="field">
-                        <span class="p-float-label">
-                          <InputText :id="scopedId('input-targetGeneName')" v-model="targetGene.name" />
-                          <label :for="scopedId('input-targetGeneName')">Target name</label>
-                        </span>
-                      </div>
-                      <div class="field">
-                        <span class="p-float-label">
-                          <InputText
-                            :id="scopedId('input-targetSequenceLabel')"
-                            v-model="targetGene.targetSequence.label"
-                          />
-                          <label :for="scopedId('input-targetSequenceLabel')"
-                            >Target label (only required when providing multiple targets)</label
-                          >
-                        </span>
-                      </div>
-                      <div class="field">
-                        <span class="p-float-label">
-                          <SelectButton
-                            :id="scopedId('input-targetGeneCategory')"
-                            v-model="targetGene.category"
-                            :option-label="textForTargetGeneCategory"
-                            :options="targetGeneCategories"
-                          />
-                        </span>
-                      </div>
-                      <div v-for="dbName of externalGeneDatabases" :key="dbName" class="field field-columns">
-                        <div class="field-column">
+                              </template>
+                            </AutoComplete>
+                            <label :for="scopedId('input-existingTargetGene')">Copy from an existing target gene</label>
+                          </span>
+                        </div>
+                        <div class="field">
                           <span class="p-float-label">
-                            <AutoComplete
-                              :id="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
-                              :ref="`${dbName.toLowerCase()}IdentifierInput`"
-                              v-model="targetGene.externalIdentifiers[dbName].identifier"
-                              field="identifier"
-                              :suggestions="targetGeneIdentifierSuggestionsList[dbName]"
-                              @blur="acceptNewTargetGeneIdentifier(dbName)"
-                              @complete="searchTargetGeneIdentifiers(dbName, $event)"
-                              @keyup.enter="acceptNewTargetGeneIdentifier(dbName)"
-                              @keyup.escape="clearTargetGeneIdentifierSearch(dbName)"
+                            <InputText :id="scopedId('input-targetGeneName')" v-model="targetGene.name" />
+                            <label :for="scopedId('input-targetGeneName')">Target name</label>
+                          </span>
+                        </div>
+                        <div class="field">
+                          <span class="p-float-label">
+                            <InputText
+                              :id="scopedId('input-targetSequenceLabel')"
+                              v-model="targetGene.targetSequence.label"
                             />
-                            <label :for="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
-                              >{{ dbName }} identifier</label
+                            <label :for="scopedId('input-targetSequenceLabel')"
+                              >Target label (only required when providing multiple targets)</label
                             >
                           </span>
                         </div>
-                        <div class="field-column">
+                        <div class="field">
                           <span class="p-float-label">
-                            <InputNumber
-                              :id="scopedId(`input-${dbName.toLowerCase()}Offset`)"
-                              v-model="targetGene.externalIdentifiers[dbName].offset"
-                              button-layout="stacked"
-                              :min="0"
-                              show-buttons
-                              suffix=" bp"
+                            <SelectButton
+                              :id="scopedId('input-targetGeneCategory')"
+                              v-model="targetGene.category"
+                              :option-label="textForTargetGeneCategory"
+                              :options="targetGeneCategories"
                             />
-                            <label :for="scopedId(`input-${dbName.toLowerCase()}Offset`)">Offset</label>
                           </span>
                         </div>
-                      </div>
-                      <div class="field">
-                        <span class="p-float-label">
-                          <AutoComplete
-                            :id="scopedId('input-targetSequenceTaxonomy')"
-                            ref="taxonomyInput"
-                            v-model="taxonomy"
-                            dropdown
-                            field="organismName"
-                            :multiple="false"
-                            :options="taxonomies"
-                            :suggestions="taxonomySuggestionsList"
-                            @complete="searchTaxonomies"
-                            @keyup.escape="clearTaxonomySearch"
-                          >
-                            <template #item="slotProps">
-                              {{ slotProps.item.code }} - {{ slotProps.item.organismName }}
-                              <template
-                                v-if="slotProps.item.commonName !== 'NULL' && slotProps.item.commonName !== null"
-                                >/ {{ slotProps.item.commonName }}</template
+                        <div v-for="dbName of externalGeneDatabases" :key="dbName" class="field field-columns">
+                          <div class="field-column">
+                            <span class="p-float-label">
+                              <AutoComplete
+                                :id="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
+                                :ref="`${dbName.toLowerCase()}IdentifierInput`"
+                                v-model="targetGene.externalIdentifiers[dbName].identifier"
+                                field="identifier"
+                                :suggestions="targetGeneIdentifierSuggestionsList[dbName]"
+                                @blur="acceptNewTargetGeneIdentifier(dbName)"
+                                @complete="searchTargetGeneIdentifiers(dbName, $event)"
+                                @keyup.enter="acceptNewTargetGeneIdentifier(dbName)"
+                                @keyup.escape="clearTargetGeneIdentifierSearch(dbName)"
+                              />
+                              <label :for="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
+                                >{{ dbName }} identifier</label
                               >
-                            </template>
-                          </AutoComplete>
-                          <label :for="scopedId('input-targetSequenceTaxonomy')">Taxonomy</label>
-                        </span>
-                        <span v-if="validationErrors['targetGene.targetSequence.taxonomy']" class="mave-field-error">{{
-                          validationErrors['targetGene.targetSequence.taxonomy']
-                        }}</span>
-                      </div>
-                      <div class="field">
-                        <span class="p-float-label">
-                          <FileUpload
-                            :id="scopedId('input-targetGeneTargetSequenceSequenceFile')"
-                            ref="sequenceFileUpload"
-                            :auto="false"
-                            choose-label="Reference sequence"
-                            :class="inputClasses.targetGeneTargetSequenceSequenceFile"
-                            :custom-upload="true"
-                            :file-limit="1"
-                            :show-cancel-button="false"
-                            :show-upload-button="false"
-                            @remove="fileCleared('targetGeneTargetSequenceSequenceFile')"
-                            @select="fileSelected('targetGeneTargetSequenceSequenceFile', $event)"
-                          >
-                            <template #empty>
-                              <p>Drop a FASTA file here.</p>
-                            </template>
-                          </FileUpload>
-                        </span>
-                      </div>
-                      <div class="field">
-                        <span class="p-float-label">
-                          <SelectButton
-                            :id="scopedId('input-targetGeneTargetSequenceSequenceType')"
-                            v-model="targetGene.targetSequence.sequenceType"
-                            :options="sequenceTypes"
-                          />
-                        </span>
-                      </div>
-                      <div>
-                        <Button icon="pi pi-check" label="Add Target" @click="addTarget" />
-                        <Button
-                          class="p-button-help"
-                          icon="pi pi-times"
-                          label="Clear Target"
-                          severity="secondary"
-                          style="margin-left: 0.5em"
-                          @click="resetTarget"
-                        />
-                      </div>
-                    </TabPanel>
-                    <TabPanel header="Genomic Coordinates">
-                      <div class="field field-columns">
-                        <div class="field-column">
+                            </span>
+                          </div>
+                          <div class="field-column">
+                            <span class="p-float-label">
+                              <InputNumber
+                                :id="scopedId(`input-${dbName.toLowerCase()}Offset`)"
+                                v-model="targetGene.externalIdentifiers[dbName].offset"
+                                button-layout="stacked"
+                                :min="0"
+                                show-buttons
+                                suffix=" bp"
+                              />
+                              <label :for="scopedId(`input-${dbName.toLowerCase()}Offset`)">Offset</label>
+                            </span>
+                          </div>
+                        </div>
+                        <div class="field">
                           <span class="p-float-label">
-                            <InputText
-                              :id="scopedId('input-targetGeneName')"
-                              v-model="targetGene.name"
-                              style="width: 100%"
+                            <AutoComplete
+                              :id="scopedId('input-targetSequenceTaxonomy')"
+                              ref="taxonomyInput"
+                              v-model="taxonomy"
+                              dropdown
+                              field="organismName"
+                              :multiple="false"
+                              :options="taxonomies"
+                              :suggestions="taxonomySuggestionsList"
+                              @complete="searchTaxonomies"
+                              @keyup.escape="clearTaxonomySearch"
+                            >
+                              <template #item="slotProps">
+                                {{ slotProps.item.code }} - {{ slotProps.item.organismName }}
+                                <template
+                                  v-if="slotProps.item.commonName !== 'NULL' && slotProps.item.commonName !== null"
+                                  >/ {{ slotProps.item.commonName }}</template
+                                >
+                              </template>
+                            </AutoComplete>
+                            <label :for="scopedId('input-targetSequenceTaxonomy')">Taxonomy</label>
+                          </span>
+                          <span v-if="validationErrors['targetGene.targetSequence.taxonomy']" class="mave-field-error">{{
+                            validationErrors['targetGene.targetSequence.taxonomy']
+                          }}</span>
+                        </div>
+                        <div class="field">
+                          <span class="p-float-label">
+                            <FileUpload
+                              :id="scopedId('input-targetGeneTargetSequenceSequenceFile')"
+                              ref="sequenceFileUpload"
+                              :auto="false"
+                              choose-label="Reference sequence"
+                              :class="inputClasses.targetGeneTargetSequenceSequenceFile"
+                              :custom-upload="true"
+                              :file-limit="1"
+                              :show-cancel-button="false"
+                              :show-upload-button="false"
+                              @remove="fileCleared('targetGeneTargetSequenceSequenceFile')"
+                              @select="fileSelected('targetGeneTargetSequenceSequenceFile', $event)"
+                            >
+                              <template #empty>
+                                <p>Drop a FASTA file here.</p>
+                              </template>
+                            </FileUpload>
+                          </span>
+                        </div>
+                        <div class="field">
+                          <span class="p-float-label">
+                            <SelectButton
+                              :id="scopedId('input-targetGeneTargetSequenceSequenceType')"
+                              v-model="targetGene.targetSequence.sequenceType"
+                              :options="sequenceTypes"
                             />
-                            <label :for="scopedId('input-targetGene')">Target gene name</label>
                           </span>
                         </div>
-                        <div class="field-column">
+                        <div>
+                          <Button icon="pi pi-check" label="Add Target" @click="addTarget" />
+                          <Button
+                            class="p-button-help"
+                            icon="pi pi-times"
+                            label="Clear Target"
+                            severity="secondary"
+                            style="margin-left: 0.5em"
+                            @click="resetTarget"
+                          />
+                        </div>
+                      </TabPanel>
+                      <TabPanel header="Genomic Coordinates" value="1">
+                        <div class="field field-columns">
+                          <div class="field-column">
+                            <span class="p-float-label">
+                              <InputText
+                                :id="scopedId('input-targetGeneName')"
+                                v-model="targetGene.name"
+                                style="width: 100%"
+                              />
+                              <label :for="scopedId('input-targetGene')">Target gene name</label>
+                            </span>
+                          </div>
+                          <div class="field-column">
+                            <span class="p-float-label">
+                              <!-- Assembly is the reference genome property in coordinate cases -->
+                              <Dropdown
+                                :id="scopedId('input-targetGeneAssembly')"
+                                v-model="assembly"
+                                :options="assemblies"
+                                style="width: 100%"
+                              />
+                              <label :for="scopedId('input-targetGeneAssembly')">Assembly</label>
+                            </span>
+                          </div>
+                          <div class="field-column">
+                            <span class="p-float-label">
+                              <Dropdown
+                                :id="scopedId('input-targetGeneGeneNames')"
+                                v-model="geneName"
+                                filter
+                                option-label="name"
+                                :options="geneNamesAsObject"
+                                style="width: 100%"
+                                :virtual-scroller-options="{itemSize: 50}"
+                                @change="autofillGeneName"
+                              />
+                              <label :for="scopedId('input-targetGeneAssembly')">HGNC Name</label>
+                            </span>
+                          </div>
+                        </div>
+                        <div class="field">
+                          <span class="p-float-label pb-2">
+                            Autocomplete By:
+                            <SelectButton v-model="targetAutocomplete" aria-labelledby="basic" :options="targetOptions" />
+                          </span>
                           <span class="p-float-label">
-                            <!-- Assembly is the reference genome property in coordinate cases -->
-                            <Dropdown
-                              :id="scopedId('input-targetGeneAssembly')"
-                              v-model="assembly"
-                              :options="assemblies"
-                              style="width: 100%"
+                            <AutoComplete
+                              :id="scopedId('input-targetGene-accession')"
+                              v-model="targetGene.targetAccession.accession"
+                              :dropdown="true"
+                              :force-selection="true"
+                              :suggestions="targetGeneAccessionSuggestionsList"
+                              @complete="fetchTargetAccessions"
                             />
-                            <label :for="scopedId('input-targetGeneAssembly')">Assembly</label>
+                            <label :for="scopedId('input-targetGene-accession')">Accession/Transcript Identifier</label>
                           </span>
                         </div>
-                        <div class="field-column">
+                        <div class="field">
                           <span class="p-float-label">
-                            <Dropdown
-                              :id="scopedId('input-targetGeneGeneNames')"
-                              v-model="geneName"
-                              filter
-                              option-label="name"
-                              :options="geneNamesAsObject"
-                              style="width: 100%"
-                              :virtual-scroller-options="{itemSize: 50}"
-                              @change="autofillGeneName"
+                            <SelectButton
+                              :id="scopedId('input-targetGeneCategory')"
+                              v-model="targetGene.category"
+                              :option-label="textForTargetGeneCategory"
+                              :options="targetGeneCategories"
                             />
-                            <label :for="scopedId('input-targetGeneAssembly')">HGNC Name</label>
                           </span>
                         </div>
-                      </div>
-                      <div class="field">
-                        <span class="p-float-label">
-                          Autocomplete By:
-                          <SelectButton v-model="targetAutocomplete" aria-labelledby="basic" :options="targetOptions" />
-                        </span>
-                        <span class="p-float-label">
-                          <AutoComplete
-                            :id="scopedId('input-targetGene-accession')"
-                            v-model="targetGene.targetAccession.accession"
-                            :dropdown="true"
-                            :force-selection="true"
-                            :suggestions="targetGeneAccessionSuggestionsList"
-                            @complete="fetchTargetAccessions"
+                        <div>
+                          <Button
+                            icon="pi pi-check"
+                            label="Add Target"
+                            size="small"
+                            @click="addTarget"
                           />
-                          <label :for="scopedId('input-targetGene-accession')">Accession/Transcript Identifier</label>
-                        </span>
-                      </div>
-                      <div class="field">
-                        <span class="p-float-label">
-                          <SelectButton
-                            :id="scopedId('input-targetGeneCategory')"
-                            v-model="targetGene.category"
-                            :option-label="textForTargetGeneCategory"
-                            :options="targetGeneCategories"
+                          <Button
+                            icon="pi pi-arrows-h"
+                            label="Switch to Protein Accession"
+                            severity="info"
+                            size="small"
+                            style="margin-left: 0.5em"
+                            @click="swapNucleotideProteinAccessions"
                           />
-                        </span>
-                      </div>
-                      <div>
-                        <Button icon="pi pi-check" label="Add Target" @click="addTarget" />
-                        <Button
-                          icon="pi pi-arrows-h"
-                          label="Switch to Protein Accession"
-                          severity="info"
-                          style="margin-left: 0.5em"
-                          @click="swapNucleotideProteinAccessions"
-                        />
-                        <Button
-                          class="p-button-help"
-                          icon="pi pi-times"
-                          label="Clear Target"
-                          severity="secondary"
-                          style="margin-left: 0.5em"
-                          @click="resetTarget"
-                        />
-                      </div>
-                    </TabPanel>
-                  </TabView>
+                          <Button
+                            class="p-button-help"
+                            icon="pi pi-times"
+                            label="Clear Target"
+                            severity="secondary"
+                            size="small"
+                            style="margin-left: 0.5em"
+                            @click="resetTarget"
+                          />
+                        </div>
+                      </TabPanel>
+                    </TabPanels>
+                  </Tabs>
                 </div>
               </template>
               <template #footer>
@@ -587,6 +612,7 @@
                             icon="pi pi-minus-circle"
                             label="Remove"
                             severity="secondary"
+                            size="small"
                             @click="targetDeleted(slotProps.data)"
                           />
                         </template>
@@ -719,6 +745,7 @@
                             icon="pi pi-times-circle"
                             label="Clear all"
                             severity="secondary"
+                            size="small"
                             @click="targetsCleared"
                           />
                         </div>
@@ -930,8 +957,11 @@ import Message from 'primevue/message'
 import Multiselect from 'primevue/multiselect'
 import ProgressSpinner from 'primevue/progressspinner'
 import SelectButton from 'primevue/selectbutton'
+import Tabs from 'primevue/tabs'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import TabPanels from 'primevue/tabpanels'
 import TabPanel from 'primevue/tabpanel'
-import TabView from 'primevue/tabview'
 import Textarea from 'primevue/textarea'
 import Dialog from 'primevue/dialog'
 import {ref} from 'vue'
@@ -993,8 +1023,11 @@ export default {
     Multiselect,
     ProgressSpinner,
     SelectButton,
+    Tabs,
+    Tab,
+    TabList,
+    TabPanels,
     TabPanel,
-    TabView,
     Textarea,
     Dialog
   },
@@ -2169,6 +2202,10 @@ export default {
   padding: 0;
 }
 
+.p-inputwrapper, .p-textarea, .p-inputtext {
+  width: 100%;
+}
+
 /* Progress indicator */
 
 .mave-progress {
@@ -2177,25 +2214,4 @@ export default {
   right: 5px;
   z-index: 1001;
 }
-
-.mave-taxonomy-dropdown-panel.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
-  padding: 0;
-}
-
-.mave-taxonomy-dropdown-panel.p-dropdown-panel
-  .p-dropdown-items
-  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-  background: #eef;
-}
-
-.mave-taxonomy-dropdown-panel.p-dropdown-panel
-  .p-dropdown-items
-  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover
-  .mave-taxonomy-common-name,
-.mave-taxonomy-dropdown-panel.p-dropdown-panel
-  .p-dropdown-items
-  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover
-  .mave-taxonomy-organism-name {
-  background: #eef;
-}
 </style>
diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index a427e7e4..9f2b6329 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -48,11 +48,11 @@
             <AutoComplete
               :id="scopedId('variant-search')"
               v-model="selectedVariant"
+              class="w-full"
               dropdown
               option-label="mavedb_label"
               scroll-height="175px"
               select-on-focus
-              style="flex: 1"
               :suggestions="variantSearchSuggestions"
               :virtual-scroller-options="{itemSize: 50}"
               @complete="variantSearch"
@@ -245,7 +245,7 @@
         <div class="mavedb-score-set-section-title">Primary References</div>
         <div v-if="item.primaryPublicationIdentifiers.length > 0">
           <div v-for="publication in item.primaryPublicationIdentifiers" :key="publication">
-            <ul style="list-style-type: square">
+            <ul class="ml-10 list-[square]">
               <!-- eslint-disable-next-line vue/no-v-html -->
               <li v-html="markdownToHtml(publication.referenceHtml)"></li>
               <div>
@@ -1323,8 +1323,8 @@ export default {
 }
 
 .mavedb-help-tooltip-button {
-  height: 0.5rem;
-  width: 0.5rem;
+  height: 0.5rem !important;
+  width: 0.5rem !important;
   vertical-align: middle;
   /* Remove extra vertical margin/padding if any. */
   margin-top: 0;
diff --git a/src/components/screens/SearchVariantsScreen.vue b/src/components/screens/SearchVariantsScreen.vue
index 0cec500e..576a98bf 100644
--- a/src/components/screens/SearchVariantsScreen.vue
+++ b/src/components/screens/SearchVariantsScreen.vue
@@ -10,7 +10,7 @@
         searchResultsVisible ? 'mavedb-search-view-with-results' : 'mavedb-search-view-without-results'
       ]"
     >
-      <div class="mavedb-page-title">
+      <div class="flex justify-content-center">
         <img alt="MaveMD" class="mavedb-mavemd-logo" src="@/assets/mavemd-logo.png" />
       </div>
       <div class="mavedb-mavemd-intro">
@@ -21,31 +21,31 @@
       </div>
       <div v-if="defaultSearchVisible" class="mavedb-search-form">
         <div class="mavedb-search-heading">Search MaveDB for human gene variants</div>
-        <div class="flex flex-wrap justify-content-center gap-3">
-          <Dropdown
+        <div class="flex flex-wrap justify-content-center align-items-center gap-3">
+          <Select
             v-model="searchType"
+            class="w-48"
             option-label="name"
             option-value="code"
             :options="searchTypeOptions"
             placeholder="Select search type"
-            :style="{ width: '13rem' }"
+            size="large"
           />
-          <IconField icon-position="left">
+          <IconField>
             <InputIcon class="pi pi-search"></InputIcon>
             <InputText
               ref="searchTextInput"
               v-model="searchText"
-              class="p-inputtext-lg"
+              class="w-124"
               placeholder="Enter a value"
-              style="width: 500px"
+              size="large"
               type="search"
               @keyup.enter="defaultSearch"
             />
           </IconField>
-          <Button class="p-button-plain" @click="defaultSearch">Search</Button>
+          <Button class="p-3!" @click="defaultSearch">Search</Button>
           <div class="mavedb-clear-search-button-container">
             <Button
-              class="p-button-plain"
               :disabled="!searchIsClearable"
               icon="pi pi-times"
               rounded
@@ -87,7 +87,7 @@
             placeholder="Gene symbol (HGNC)"
             type="search"
           />
-          <Dropdown
+          <Select
             v-model="inputVariantType"
             class="mavedb-fuzzy-search-form-component"
             :options="['c.', 'p.']"
@@ -95,13 +95,13 @@
           />
           <!-- TODO consider adding language to specify to include - or * in position if variant is in 5' or 3' UTR, respectively -->
           <InputText v-model="inputVariantPosition" class="mavedb-fuzzy-search-form-component" placeholder="Position" />
-          <Dropdown
+          <Select
             v-model="inputReferenceAllele"
             class="mavedb-fuzzy-search-form-component"
             :options="selectedAlleleOptions"
             placeholder="Reference allele"
           />
-          <Dropdown
+          <Select
             v-model="inputAlternateAllele"
             class="mavedb-fuzzy-search-form-component"
             :options="selectedAlleleOptions"
@@ -363,7 +363,7 @@ import _ from 'lodash'
 import Card from 'primevue/card'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
@@ -393,7 +393,7 @@ export default defineComponent({
     Column,
     DataTable,
     DefaultLayout,
-    Dropdown,
+    Select,
     IconField,
     InputIcon,
     InputText,
@@ -1064,10 +1064,6 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.mavedb-page-title {
-  text-align: center;
-}
-
 .mavedb-mavemd-logo {
   height: 150px;
   margin: 1em 0 0 0;
@@ -1091,10 +1087,6 @@ export default defineComponent({
   display: flex;
 }
 
-.mavedb-search-view-without-results .mavedb-page-title {
-  flex: 0 0 auto;
-}
-
 .mavedb-search-view-without-results .mavedb-mavemd-intro {
   display: block;
   flex-direction: column;
@@ -1179,19 +1171,6 @@ export default defineComponent({
   font-style: normal;
 }
 
-.mavedb-search-clear-button {
-  position: absolute;
-  top: 12px;
-  right: 8px;
-  margin: 0;
-  padding: 0;
-}
-
-.mavedb-variant-search-result-subheading {
-  margin: 1em 0 0.5em 0;
-  font-weight: bold;
-}
-
 .variant-search-result {
   display: flex;
   gap: 20px;
diff --git a/src/components/screens/SearchView.vue b/src/components/screens/SearchView.vue
index 4fb398c2..0f0e6eae 100644
--- a/src/components/screens/SearchView.vue
+++ b/src/components/screens/SearchView.vue
@@ -548,10 +548,12 @@ export default defineComponent({
   width: 24%;
 }
 
+.mavedb-search-filter-option-picker:deep(.p-listbox-option) > div {
+  width: 100%;
+}
 .mavedb-organism-picker:deep(.p-listbox-item) {
   font-style: italic;
 }
-
 .mavedb-organism-picker:deep(.p-listbox-item .p-badge) {
   font-style: normal;
 }
diff --git a/src/components/screens/StatisticsView.vue b/src/components/screens/StatisticsView.vue
index 954c3e8f..a95c8d32 100644
--- a/src/components/screens/StatisticsView.vue
+++ b/src/components/screens/StatisticsView.vue
@@ -498,10 +498,6 @@ h1 {
   grid-row-end: span 2;
 }
 
-.statistics-tile:deep(.p-card-content) {
-  padding: 0;
-}
-
 .chart-header {
   display: flex;
 }
diff --git a/src/components/screens/VariantScreen.vue b/src/components/screens/VariantScreen.vue
index cf2f39f1..e147fc18 100644
--- a/src/components/screens/VariantScreen.vue
+++ b/src/components/screens/VariantScreen.vue
@@ -1,50 +1,55 @@
 <template>
   <DefaultLayout>
-    <h1 v-if="alleleTitle && variants.length > 1" class="mavedb-variant-title">Variant: {{ alleleTitle }}</h1>
+    <div v-if="alleleTitle && variants.length > 1" class="font-bold text-2xl m-3">Variant: {{ alleleTitle }}</div>
     <ErrorView v-if="variantsStatus == 'Error'" />
     <PageLoading v-else-if="variantsStatus == 'Loading'" />
     <Message v-else-if="variants.length == 0">No variants found in MaveDB</Message>
     <div v-else :class="singleOrMultipleVariantsClassName">
-      <TabView class="mavedb-variants-tabview" :lazy="true">
-        <TabPanel
-          v-for="(variant, variantIndex) in variants"
-          :key="variant.content.urn"
-          v-model:active-index="activeVariantIndex"
-          :header="variant.content.url"
-        >
-          <template #header>
-            <div v-if="variants.length > 1">
-              <div class="mavedb-variants-tabview-header-text" style="color: #000; font-weight: bold">
-                Measurement {{ variantIndex + 1 }}
+      <Tabs :lazy="true" :value="0">
+        <TabList>
+          <Tab v-for="(variant, variantIndex) in variants" :key="variant.content.urn" :value="variantIndex">
+              <div v-if="variants.length > 1" class="h-full">
+                <div class="mavedb-variants-tabview-header-text" style="color: #000; font-weight: bold">
+                  Measurement {{ variantIndex + 1 }}
+                </div>
+                <div
+                  v-if="variant.type == 'nucleotide'"
+                  class="mavedb-variants-tabview-header-text"
+                  style="color: #000; font-weight: bold"
+                >
+                  Assayed at nucleotide level
+                </div>
+                <div
+                  v-else-if="variant.type == 'protein'"
+                  class="mavedb-variants-tabview-header-text"
+                  style="color: #000; font-weight: bold"
+                >
+                  Assayed at protein level
+                </div>
+                <div
+                  v-else-if="variant.type == 'associatedNucleotide'"
+                  class="mavedb-variants-tabview-header-text"
+                  style="color: #000; font-weight: bold"
+                >
+                  Other nucleotide-level variant with equivalent protein effect
+                </div>
+                <div class="mavedb-variants-tabview-header-text">{{ variantName(variant.content) }}</div>
+                <div class="mavedb-variants-tabview-header-text">{{ variant.content.scoreSet.title }}</div>
               </div>
-              <div
-                v-if="variant.type == 'nucleotide'"
-                class="mavedb-variants-tabview-header-text"
-                style="color: #000; font-weight: bold"
-              >
-                Assayed at nucleotide level
-              </div>
-              <div
-                v-else-if="variant.type == 'protein'"
-                class="mavedb-variants-tabview-header-text"
-                style="color: #000; font-weight: bold"
-              >
-                Assayed at protein level
-              </div>
-              <div
-                v-else-if="variant.type == 'associatedNucleotide'"
-                class="mavedb-variants-tabview-header-text"
-                style="color: #000; font-weight: bold"
-              >
-                Other nucleotide-level variant with equivalent protein effect
-              </div>
-              <div class="mavedb-variants-tabview-header-text">{{ variantName(variant.content) }}</div>
-              <div class="mavedb-variants-tabview-header-text">{{ variant.content.scoreSet.title }}</div>
-            </div>
-          </template>
-          <VariantMeasurementView :variant-urn="variant.content.urn" />
-        </TabPanel>
-      </TabView>
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel
+            v-for="(variant, variantIndex) in variants"
+            :key="variant.content.urn"
+            v-model:active-index="activeVariantIndex"
+            :header="variant.content.url"
+            :value="variantIndex"
+          >
+            <VariantMeasurementView :variant-urn="variant.content.urn" />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
     </div>
   </DefaultLayout>
 </template>
@@ -53,8 +58,11 @@
 import axios from 'axios'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
+import TabPanels from 'primevue/tabpanels'
 import TabPanel from 'primevue/tabpanel'
-import TabView from 'primevue/tabview'
 import {defineComponent} from 'vue'
 import {useHead} from '@unhead/vue'
 
@@ -66,7 +74,7 @@ import config from '@/config'
 
 export default defineComponent({
   name: 'VariantMeasurementScreen',
-  components: {Button, DefaultLayout, ErrorView, Message, PageLoading, TabPanel, TabView, VariantMeasurementView},
+  components: {Button, DefaultLayout, ErrorView, Message, PageLoading, Tabs, TabList, Tab, TabPanels, TabPanel, VariantMeasurementView},
 
   props: {
     clingenAlleleId: {
@@ -213,10 +221,6 @@ export default defineComponent({
 .mavedb-single-variant:deep(.p-tabview-nav-container) {
   display: none;
 }
-.mavedb-variant-title {
-  font-weight: bold;
-  font-size: 2em;
-}
 .mavedb-variants-tabview:deep(.p-tabview-panels) {
   background: transparent;
 }
diff --git a/src/main.js b/src/main.js
index ed816db0..789895ff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,8 @@ import {initRestClient} from 'rest-client-vue'
 import {createApp} from 'vue'
 import {createHead} from '@unhead/vue/client'
 import {TemplateParamsPlugin} from 'unhead/plugins'
+import Aura from '@primevue/themes/aura'
+import { definePreset } from '@primeuix/themes'
 
 import App from '@/App.vue'
 import config from '@/config'
@@ -15,8 +17,6 @@ import {initializeAuthentication as initializeOrcidAuthentication} from '@/lib/o
 import router from '@/router'
 import store from '@/store'
 
-import 'primevue/resources/themes/mdc-light-indigo/theme.css'
-import 'primevue/resources/primevue.min.css'
 import 'primeicons/primeicons.css'
 
 /* add fontawesome core */
@@ -58,12 +58,39 @@ const head = createHead({
   ]
 })
 
+const MaveDbTheme = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '{blue.50}',
+            100: '{blue.100}',
+            200: '{blue.200}',
+            300: '{blue.300}',
+            400: '{blue.400}',
+            500: '{blue.500}',
+            600: '{blue.600}',
+            700: '{blue.700}',
+            800: '{blue.800}',
+            900: '{blue.900}',
+            950: '{blue.950}'
+        }
+    }
+});
+
 createApp(App)
   .use(router)
   .use(store)
   .use(createPinia())
   .use(head)
-  .use(PrimeVue)
+  .use(PrimeVue, {
+    theme: {
+        preset: MaveDbTheme,
+        options: {
+            prefix: 'p',
+            darkModeSelector: '.dark-mode',
+            cssLayer: false,
+        }
+    }
+  })
   .use(ConfirmationService)
   .use(ToastService)
   .directive('tooltip', Tooltip)
diff --git a/vite.config.js b/vite.config.js
index a8add176..4d1ff946 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,9 +3,10 @@ import {resolve} from 'path'
 import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import basicSsl from '@vitejs/plugin-basic-ssl'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
-  plugins: [vue(), basicSsl()],
+  plugins: [vue(), basicSsl(), tailwindcss()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))