diff --git a/frontend/components/bc/input/BcInputCheckbox.vue b/frontend/components/bc/input/BcInputCheckbox.vue
index f73c92c22..665daf9a1 100644
--- a/frontend/components/bc/input/BcInputCheckbox.vue
+++ b/frontend/components/bc/input/BcInputCheckbox.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import type { BcInputError } from '~/components/bc/input/BcInputError.vue'
 
 const props = defineProps<{
-  error?: BcInputError,
+  error?: string,
   infoText?: string,
   label?: string,
 }>()
diff --git a/frontend/components/bc/input/BcInputError.vue b/frontend/components/bc/input/BcInputError.vue
index 5ed85853e..40d1a58e6 100644
--- a/frontend/components/bc/input/BcInputError.vue
+++ b/frontend/components/bc/input/BcInputError.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 const idError = useId()
-/**
- * Spacing of error message will be removed by explicitly passing `false`.
- * This should encourage to always think about the error message.
- */
-export type BcInputError = false | string
-defineProps<{
-  error?: BcInputError,
-}>()
+
+withDefaults(defineProps<{
+  error?: string,
+}>(), {
+  error: '',
+})
 </script>
 
 <template>
@@ -17,7 +15,6 @@ defineProps<{
     :aria-describedby="idError"
   />
   <div
-    v-if="error !== false"
     :id="idError"
     class="bc-input-error"
   >
diff --git a/frontend/components/bc/input/BcInputText.vue b/frontend/components/bc/input/BcInputText.vue
index bc0fd03e6..a027c8056 100644
--- a/frontend/components/bc/input/BcInputText.vue
+++ b/frontend/components/bc/input/BcInputText.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import type { BcInputError } from '~/components/bc/input/BcInputError.vue'
-
 const idInput = useId()
 const input = defineModel<string>()
 
 const props = withDefaults(defineProps<{
-  error?: BcInputError,
+  error?: string,
   inputWidth?: `${number}px`,
   label: string,
   labelPosition?: 'left' | 'right',
diff --git a/frontend/components/notifications/management/NotificationsManagementNetwork.vue b/frontend/components/notifications/management/NotificationsManagementNetwork.vue
index f07e94187..9d4cdbe5b 100644
--- a/frontend/components/notifications/management/NotificationsManagementNetwork.vue
+++ b/frontend/components/notifications/management/NotificationsManagementNetwork.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { NotificationSettingsNetwork } from '~/types/api/notifications'
+
 const { t: $t } = useTranslation()
 
 const notificationsManagementStore = useNotificationsManagementStore()
@@ -13,12 +15,28 @@ const currentNetworkSettings = computed(() => currentNetwork.value?.settings)
 
 const thresholdGasAbove = ref(formatWeiTo(currentNetworkSettings.value?.gas_above_threshold ?? '0', { unit: 'gwei' }))
 const thresholdGasBelow = ref(formatWeiTo(currentNetworkSettings.value?.gas_below_threshold ?? '0', { unit: 'gwei' }))
-const thresholdParticipationRate = ref(formatFraction(currentNetworkSettings.value?.participation_rate_threshold ?? 0))
+// const thresholdParticipationRate = ref(formatFraction(currentNetworkSettings.value?.participation_rate_threshold ?? 0))
 const hasGasAbove = ref(currentNetworkSettings.value?.is_gas_above_subscribed ?? false)
 const hasGasBelow = ref(currentNetworkSettings.value?.is_gas_below_subscribed ?? false)
 const hasParticipationRate = ref(currentNetworkSettings.value?.is_participation_rate_subscribed ?? false)
 const hasNewRewardRound = ref(currentNetworkSettings.value?.is_new_reward_round_subscribed ?? false)
 
+// const validationSchema = createSchemaObject({
+//   is_webhook_discord_enabled: validation.boolean(),
+//   webhook_url: validation.url($t('validation.url.invalid')),
+// })
+
+const {
+  errorMessage,
+  value: thresholdParticipationRate,
+} = useField<NotificationSettingsNetwork['participation_rate_threshold']>(
+  'thresholdParticipationRate',
+  validation.numberRange({
+    max: 100,
+    min: 0,
+  }),
+)
+
 watchDebounced([
   hasGasAbove,
   hasGasBelow,
@@ -49,6 +67,9 @@ watchDebounced([
 
 <template>
   <div>
+    <pre>
+      {{ errorMessage }}
+    </pre>
     <div v-if="!networks.length" class="error-container">
       Upps something went wrong. Please try again.
     </div>
@@ -75,12 +96,10 @@ watchDebounced([
           <span>
             {{ $t('notifications.network.settings.alert_if_gas_below') }}
           </span>
-          <span class="">
-            <BcInputUnit
-              v-model="thresholdGasBelow"
-              :unit="$t('common.units.GWEI')"
-            />
-          </span>
+          <BcInputUnit
+            v-model="thresholdGasBelow"
+            :unit="$t('common.units.GWEI')"
+          />
           <BcToggle
             v-model="hasGasBelow"
             class="toggle"
@@ -88,16 +107,17 @@ watchDebounced([
           <span>
             {{ $t('notifications.network.settings.alert_if_gas_above') }}
           </span>
-          <span class="">
-            <BcInputUnit
-              v-model="thresholdGasAbove"
-              :unit="$t('common.units.GWEI')"
-            />
-          </span>
+          <BcInputUnit
+            v-model="thresholdGasAbove"
+            :unit="$t('common.units.GWEI')"
+          />
           <BcToggle
             v-model="hasGasAbove"
             class="toggle"
           />
+          <BcInputError
+            error="Invalid input"
+          />
         </BcListSection>
         <BcListSection
           class="grid-overwrite"
@@ -116,6 +136,9 @@ watchDebounced([
             v-model="hasParticipationRate"
             class="toggle"
           />
+          <BcInputError
+            :error="``"
+          />
         </BcListSection>
       </div>
     </BcTabPanel>
diff --git a/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue b/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
index c99e2526c..dc37113da 100644
--- a/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
+++ b/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons'
-import { useForm } from 'vee-validate'
 import { warn } from 'vue'
 import { API_PATH } from '~/types/customFetch'
 import type { NotificationSettingsValidatorDashboard } from '~/types/api/notifications'
diff --git a/frontend/components/user/settings/UserSettingsEmail.vue b/frontend/components/user/settings/UserSettingsEmail.vue
index 898fcdb08..9ca3f5996 100644
--- a/frontend/components/user/settings/UserSettingsEmail.vue
+++ b/frontend/components/user/settings/UserSettingsEmail.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { object as yupObject } from 'yup'
-import { useForm } from 'vee-validate'
 import { API_PATH } from '~/types/customFetch'
 
 const { t: $t } = useTranslation()
diff --git a/frontend/components/user/settings/UserSettingsPassword.vue b/frontend/components/user/settings/UserSettingsPassword.vue
index 646917b38..fbe90a439 100644
--- a/frontend/components/user/settings/UserSettingsPassword.vue
+++ b/frontend/components/user/settings/UserSettingsPassword.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { object as yupObject } from 'yup'
-import { useForm } from 'vee-validate'
 import { API_PATH } from '~/types/customFetch'
 
 const { t: $t } = useTranslation()
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 2569ea263..461643dc1 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -56,14 +56,17 @@ export default defineNuxtConfig({
   eslint: { config: { stylistic: true } },
   i18n: { vueI18n: './i18n.config.ts' },
   modules: [
-    '@nuxtjs/i18n',
+    '@nuxt/eslint',
     '@nuxtjs/color-mode',
+    '@nuxtjs/i18n',
     [
       '@pinia/nuxt',
-      { storesDirs: [ './stores/**' ] },
+      {
+        storesDirs: [ './stores/**' ],
+      },
     ],
     '@primevue/nuxt-module',
-    '@nuxt/eslint',
+    '@vee-validate/nuxt',
     '@vueuse/nuxt',
   ],
   nitro: {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a76f167ea..c9baeb0ed 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,8 @@
         "@fortawesome/vue-fontawesome": "^3.0.6",
         "@pinia/nuxt": "^0.5.1",
         "@stripe/stripe-js": "^3.5.0",
+        "@vee-validate/nuxt": "^4.14.3",
+        "@vee-validate/valibot": "^4.14.6",
         "@vueuse/core": "^11.1.0",
         "@vueuse/nuxt": "^11.1.0",
         "echarts": "^5.5.1",
@@ -26,7 +28,6 @@
         "pinia": "^2.1.7",
         "primevue": "4.0.4",
         "qrcode.vue": "^3.4.1",
-        "vee-validate": "^4.13.2",
         "vue-echarts": "^6.7.3"
       },
       "devDependencies": {
@@ -4267,6 +4268,126 @@
         "vue": ">=2.7 || >=3"
       }
     },
+    "node_modules/@vee-validate/nuxt": {
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@vee-validate/nuxt/-/nuxt-4.14.3.tgz",
+      "integrity": "sha512-Nnu5zovDVMB2MZvx03Z6gpwK5S3UCkNRooKtWdeLoXCA88lIJdbi31MAwI8YYLCWilM9Vyq2raMh/gIkpShbyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.8.2",
+        "local-pkg": "^0.5.0",
+        "vee-validate": "4.14.3"
+      }
+    },
+    "node_modules/@vee-validate/nuxt/node_modules/@vue/devtools-api": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.5.3.tgz",
+      "integrity": "sha512-nwz45qBxHOUdZzaYP9V3E1aFOgPpoMmNlBcGn0dsUxizlws4wJ4V6P6849yt28p5NSQ/2E3V87JXFAuk3N9Inw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.5.3"
+      }
+    },
+    "node_modules/@vee-validate/nuxt/node_modules/@vue/devtools-kit": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.5.3.tgz",
+      "integrity": "sha512-XSTXCAHshYniK3gLQfhMRDuDLLj6vHFWKVl1tvtSgZ0iJy5AXoI4U/GKGlyS2uS1hwZCSoNSGdkKtbW/pn/Iuw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.5.3",
+        "birpc": "^0.2.19",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.1"
+      }
+    },
+    "node_modules/@vee-validate/nuxt/node_modules/type-fest": {
+      "version": "4.26.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
+      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@vee-validate/nuxt/node_modules/vee-validate": {
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.14.3.tgz",
+      "integrity": "sha512-o4yABwgmCxyNz63hAFiDuLtK4qSrJ3+Ri5kbbJ9RQecXpaMp6NzJUEGE3LOcScakkSmtLDzvliQ2yBdFyPWDIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.5.2",
+        "type-fest": "^4.8.3"
+      },
+      "peerDependencies": {
+        "vue": "^3.4.26"
+      }
+    },
+    "node_modules/@vee-validate/valibot": {
+      "version": "4.14.6",
+      "resolved": "https://registry.npmjs.org/@vee-validate/valibot/-/valibot-4.14.6.tgz",
+      "integrity": "sha512-DtYif53VPE1SsnLB2sXgdja0GbE8QW7cuiD6llTJm03J6vRObToHPS8OakJWAkl9oCzKSKOD6nZPKtPQXixVFw==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^4.8.3",
+        "valibot": "1.0.0-beta.0",
+        "vee-validate": "4.14.6"
+      }
+    },
+    "node_modules/@vee-validate/valibot/node_modules/@vue/devtools-api": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.5.4.tgz",
+      "integrity": "sha512-j9UC/KeYUNZ6AyCJxBROBCbogB5YHW6PZv9VnCNp2ntE4rq426Lfc8WP5B9V+rXBwqWmrgZTGYBa31CBSxdAUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.5.4"
+      }
+    },
+    "node_modules/@vee-validate/valibot/node_modules/@vue/devtools-kit": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.5.4.tgz",
+      "integrity": "sha512-0i7WFgc1B2TL52tstn82zlb9opSA0aIiHfkUYFXtZb8CIpmlFMTkHtgwVl6PMWNBj3LNhYou1YJCLpCYvJYYoA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.5.4",
+        "birpc": "^0.2.19",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.1"
+      }
+    },
+    "node_modules/@vee-validate/valibot/node_modules/type-fest": {
+      "version": "4.26.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
+      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@vee-validate/valibot/node_modules/vee-validate": {
+      "version": "4.14.6",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.14.6.tgz",
+      "integrity": "sha512-5w6e+YqJFLfzRR6gmRZgE6ZIVZ5nW1UAQdAlu78Oy3CFVrhTraqMMsfDC/Kmz7CNtCpIYaXxC8oKfr2hAiTnew==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.5.2",
+        "type-fest": "^4.8.3"
+      },
+      "peerDependencies": {
+        "vue": "^3.4.26"
+      }
+    },
     "node_modules/@vee-validate/yup": {
       "version": "4.13.2",
       "resolved": "https://registry.npmjs.org/@vee-validate/yup/-/yup-4.13.2.tgz",
@@ -4618,9 +4739,9 @@
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "7.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.6.tgz",
-      "integrity": "sha512-R/FOmdJV+hhuwcNoxp6e87RRkEeDMVhWH+nOsnHUrwjjsyeXJ2W1475Ozmw+cbZhejWQzftkHVKO28Fuo1yqCw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.5.4.tgz",
+      "integrity": "sha512-dwuq4YmwTyLc7eBOqX63s3JB8il7qnKsNgENglSMkUPwiItHkVAYYfPESN1rxSdYkl1RCux1l5TBidYqfUDNAA==",
       "license": "MIT",
       "dependencies": {
         "rfdc": "^1.4.1"
@@ -5258,9 +5379,9 @@
       }
     },
     "node_modules/birpc": {
-      "version": "0.2.17",
-      "resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.17.tgz",
-      "integrity": "sha512-+hkTxhot+dWsLpp3gia5AkVHIsKlZybNT5gIYiDlNzJrmYPcTM9k5/w2uaj3IPpd7LlEYpmCj4Jj1nC41VhDFg==",
+      "version": "0.2.19",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.19.tgz",
+      "integrity": "sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -14031,6 +14152,20 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/valibot": {
+      "version": "1.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/valibot/-/valibot-1.0.0-beta.0.tgz",
+      "integrity": "sha512-Q/oine+NPMXdIy3vwluw0vidHLk0mTPUQBRHc+EHZXnEWF3KzLx1YLsVHPVrgHaMGRfV58P9eGOgxJvi0a059w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -14057,6 +14192,7 @@
       "version": "4.13.2",
       "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.13.2.tgz",
       "integrity": "sha512-HlpR/6MJ92TW9f135umMZKUqdd/tFQTxLNSf2ImbU4Y/MlLVAUpF1l64VdjTOhbClAqPjCb5p/SqHDxLpUHXrw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/devtools-api": "^6.6.1",
@@ -14070,6 +14206,7 @@
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.21.0.tgz",
       "integrity": "sha512-ADn2w7hVPcK6w1I0uWnM//y1rLXZhzB9mr0a3OirzclKF1Wp6VzevUmzz/NRAWunOT6E8HrnpGY7xOfc6K57fA==",
+      "dev": true,
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=16"
diff --git a/frontend/package.json b/frontend/package.json
index 63298c3a6..8d85c57d3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,8 @@
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@pinia/nuxt": "^0.5.1",
     "@stripe/stripe-js": "^3.5.0",
+    "@vee-validate/nuxt": "^4.14.3",
+    "@vee-validate/valibot": "^4.14.6",
     "@vueuse/core": "^11.1.0",
     "@vueuse/nuxt": "^11.1.0",
     "echarts": "^5.5.1",
@@ -19,7 +21,6 @@
     "pinia": "^2.1.7",
     "primevue": "4.0.4",
     "qrcode.vue": "^3.4.1",
-    "vee-validate": "^4.13.2",
     "vue-echarts": "^6.7.3"
   },
   "devDependencies": {
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index b29d9a0f0..73007ee12 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { object as yupObject } from 'yup'
-import { useForm } from 'vee-validate'
 import { useUserStore } from '~/stores/useUserStore'
 import { Target } from '~/types/links'
 import {
diff --git a/frontend/pages/register.vue b/frontend/pages/register.vue
index 99fcc487c..a3bf002e6 100644
--- a/frontend/pages/register.vue
+++ b/frontend/pages/register.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { object as yupObject } from 'yup'
-import { useForm } from 'vee-validate'
 import { Target } from '~/types/links'
 import { tOf } from '~/utils/translation'
 import { API_PATH } from '~/types/customFetch'
diff --git a/frontend/utils/validation.ts b/frontend/utils/validation.ts
index 32c85c59f..c099841f2 100644
--- a/frontend/utils/validation.ts
+++ b/frontend/utils/validation.ts
@@ -1,6 +1,13 @@
 import {
-  type AnySchema, boolean, object, string,
+  type AnySchema,
+  boolean,
+  // mixed,
+  number,
+  object,
+  string,
 } from 'yup'
+import * as valibot from 'valibot'
+import { toTypedSchema } from '@vee-validate/valibot'
 
 export const createSchemaObject = (schema: Record<string, AnySchema>) => {
   return object({ ...schema })
@@ -9,5 +16,20 @@ export const createSchemaObject = (schema: Record<string, AnySchema>) => {
 export const validation = {
   // expose thirdparty validation here, when needed
   boolean,
+  number,
+  // mixed,
+  numberRange: (options: { max: number, min: number }) => {
+    return toTypedSchema(
+      valibot.pipe(
+        valibot.string(),
+        valibot.transform(input => Number(input)),
+        valibot.number(),
+        valibot.toMinValue(options.min),
+        valibot.toMaxValue(options.max),
+        valibot.transform(input => input.toString()),
+      ),
+    )
+  },
+  participationRate: number().integer().max(100).positive().default(10),
   url: (message: string) => string().url(message),
 }