diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c68a1baed0..6383c0609d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -69,7 +69,7 @@
         "vue-router": "4.6.4",
         "vue-toastification": "2.0.0-rc.5",
         "vuedraggable": "4.1.0",
-        "vuetify": "3.12.5",
+        "vuetify": "4.0.5",
         "vuex": "4.1.0",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
       },
@@ -13558,9 +13558,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.12.5",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.12.5.tgz",
-      "integrity": "sha512-Gk3eDIiBXpv+QjMTYmXXk/uvpqaSNAgprcV/Og0btBUx4saLN7AUmqUi34hRmBqu2tpype2GVvg2yxJUqP2mdg==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.0.5.tgz",
+      "integrity": "sha512-pFysKOHuY3dROTVh9PdlhVz50ZR0E5/goY5ecTXc8F8tajUA2ee3xZ8Lqs1WtEw/X3w93wx/LogyjgaQCAL/Ig==",
       "license": "MIT",
       "funding": {
         "type": "github",
diff --git a/frontend/package.json b/frontend/package.json
index ef3f6223db..38b0edc951 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -82,7 +82,7 @@
     "vue-router": "4.6.4",
     "vue-toastification": "2.0.0-rc.5",
     "vuedraggable": "4.1.0",
-    "vuetify": "3.12.5",
+    "vuetify": "4.0.5",
     "vuex": "4.1.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
   },
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/EColorField.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/EColorField.spec.js.snap
index 53fb602bae..bef0cff473 100644
--- a/frontend/src/components/form/base/__tests__/__snapshots__/EColorField.spec.js.snap
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/EColorField.spec.js.snap
@@ -5,7 +5,7 @@ exports[`An EColorField > looks like a textfield > empty 1`] = `
      <div class="e-form-container"
           name="test"
           required="false">
-          <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
+          <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
                <div class="v-input__prepend">
                     <div class="v-btn v-btn--elevated v-theme--light v-btn--density-default elevation-0 v-btn--rounded v-btn--size-default v-btn--variant-elevated e-colorswatch e-colorswatch--null mt-n1 mt-n1"
                          style="height: 30px; width: 30px;"
@@ -89,11 +89,11 @@ exports[`An EColorField > looks like a textfield > with text 1`] = `
           name="test"
           required="false"
           value="#FF0000">
-          <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field">
+          <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field">
                <div class="v-input__prepend">
                     <div aria-label="#FF0000"
-                         class="v-btn v-btn--elevated v-theme--light v-btn--density-default elevation-0 v-btn--rounded v-btn--size-default v-btn--variant-elevated e-colorswatch mt-n1 mt-n1"
-                         style="height: 30px; width: 30px; background-color: rgb(255, 0, 0); color: rgb(255, 255, 255); caret-color: #fff;"
+                         class="v-btn v-btn--elevated v-theme--light v-theme-on-dark v-btn--density-default elevation-0 v-btn--rounded v-btn--size-default v-btn--variant-elevated e-colorswatch mt-n1 mt-n1"
+                         style="height: 30px; width: 30px; background-color: rgb(255, 0, 0);"
                          type="button">
                          <span class="v-btn__overlay"></span>
                          <span class="v-btn__underlay"></span>
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/ENumberField.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/ENumberField.spec.js.snap
index 56c68ade06..04f2980974 100644
--- a/frontend/src/components/form/base/__tests__/__snapshots__/ENumberField.spec.js.snap
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/ENumberField.spec.js.snap
@@ -5,7 +5,7 @@ exports[`An ENumberField > looks like a numberfield > empty 1`] = `
      <div class="e-form-container"
           name="test"
           required="false">
-          <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
+          <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
                <!---->
                <div class="v-input__control">
                     <div class="v-field v-field--center-affix v-field--variant-filled v-theme--light v-locale--is-ltr">
@@ -77,7 +77,7 @@ exports[`An ENumberField > looks like a numberfield > with text 1`] = `
           name="test"
           required="false"
           value="3.14">
-          <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field">
+          <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field">
                <!---->
                <div class="v-input__control">
                     <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr">
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/EParseField.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/EParseField.spec.js.snap
index 06a6448c3e..0c2ea06392 100644
--- a/frontend/src/components/form/base/__tests__/__snapshots__/EParseField.spec.js.snap
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/EParseField.spec.js.snap
@@ -4,7 +4,7 @@ exports[`An EParseField > looks like a textfield > empty 1`] = `
 <div data-app>
      <div class="e-form-container"
           name="test">
-          <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
+          <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
                <!---->
                <div class="v-input__control">
                     <div class="v-field v-field--center-affix v-field--variant-filled v-theme--light v-locale--is-ltr">
@@ -75,7 +75,7 @@ exports[`An EParseField > looks like a textfield > with text 1`] = `
      <div class="e-form-container"
           name="test"
           value="true">
-          <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field">
+          <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field">
                <!---->
                <div class="v-input__control">
                     <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr">
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/ETextField.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/ETextField.spec.js.snap
index 3bb06ada54..72023c9a1e 100644
--- a/frontend/src/components/form/base/__tests__/__snapshots__/ETextField.spec.js.snap
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/ETextField.spec.js.snap
@@ -4,7 +4,7 @@ exports[`An ETextField > looks like a textfield > empty 1`] = `
 <div data-app>
      <div class="e-form-container"
           name="test">
-          <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
+          <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
                <!---->
                <div class="v-input__control">
                     <div class="v-field v-field--center-affix v-field--variant-filled v-theme--light v-locale--is-ltr">
@@ -77,7 +77,7 @@ exports[`An ETextField > looks like a textfield > with text 1`] = `
      <div class="e-form-container"
           name="test"
           value="MyText">
-          <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field">
+          <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field">
                <!---->
                <div class="v-input__control">
                     <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr">