diff --git a/web/package.json b/web/package.json
index 455ffc57b..71fe9a393 100644
--- a/web/package.json
+++ b/web/package.json
@@ -33,7 +33,7 @@
     "semver": "^7.6.3",
     "simple-icons": "^13.5.0",
     "vue": "^3.4.38",
-    "vue-i18n": "^9.13.1",
+    "vue-i18n": "^10.0.3",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 253c584f1..837049835 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -13,7 +13,7 @@ importers:
     dependencies:
       '@intlify/unplugin-vue-i18n':
         specifier: ^5.0.0
-        version: 5.2.0(@vue/compiler-dom@3.5.11)(eslint@9.12.0(jiti@1.21.6))(rollup@4.24.0)(typescript@5.6.2)(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
+        version: 5.2.0(@vue/compiler-dom@3.5.11)(eslint@9.12.0(jiti@1.21.6))(rollup@4.24.0)(typescript@5.6.2)(vue-i18n@10.0.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
       '@kyvg/vue3-notification':
         specifier: ^3.2.1
         version: 3.3.0(vue@3.5.11(typescript@5.6.2))
@@ -57,8 +57,8 @@ importers:
         specifier: ^3.4.38
         version: 3.5.11(typescript@5.6.2)
       vue-i18n:
-        specifier: ^9.13.1
-        version: 9.14.1(vue@3.5.11(typescript@5.6.2))
+        specifier: ^10.0.3
+        version: 10.0.4(vue@3.5.11(typescript@5.6.2))
       vue-router:
         specifier: ^4.4.3
         version: 4.4.5(vue@3.5.11(typescript@5.6.2))
@@ -521,6 +521,10 @@ packages:
       vue-i18n:
         optional: true
 
+  '@intlify/core-base@10.0.4':
+    resolution: {integrity: sha512-GG428DkrrWCMhxRMRQZjuS7zmSUzarYcaHJqG9VB8dXAxw4iQDoKVQ7ChJRB6ZtsCsX3Jse1PEUlHrJiyQrOTg==}
+    engines: {node: '>= 16'}
+
   '@intlify/core-base@9.14.1':
     resolution: {integrity: sha512-rG5/hlNW6Qfve41go37szEf0mVLcfhYuOu83JcY0jZKasnwsrcZYYWDzebCcuO5I/6Sy1JFWo9p+nvkQS1Dy+w==}
     engines: {node: '>= 16'}
@@ -535,6 +539,10 @@ packages:
     resolution: {integrity: sha512-OcaWc63NC/9p1cMdgoNKBj4d61BH8sUW1Hfs6YijTd9656ZR4rNqXAlRnBrfS5ABq0vjQjpa8VnyvH9hK49yBw==}
     engines: {node: '>= 16'}
 
+  '@intlify/message-compiler@10.0.4':
+    resolution: {integrity: sha512-AFbhEo10DP095/45EauinQJ5hJ3rJUmuuqltGguvc3WsvezZN+g8qNHLGWKu60FHQVizMrQY7VJ+zVlBXlQQkQ==}
+    engines: {node: '>= 16'}
+
   '@intlify/message-compiler@9.14.1':
     resolution: {integrity: sha512-MY8hwukJBnXvGAncVKlHsqKDQ5ZcQx4peqEmI8wBUTXn4pezrtTGYXNoz81cLyEEHB+L/zlKWVBSh5TiX4gYoQ==}
     engines: {node: '>= 16'}
@@ -543,6 +551,10 @@ packages:
     resolution: {integrity: sha512-6ngLfI7DOTew2dcF9WMJx+NnMWghMBhIiHbGg+wRvngpzD5KZJZiJVuzMsUQE1a5YebEmtpTEfUrDp/NqVGdiw==}
     engines: {node: '>= 16'}
 
+  '@intlify/shared@10.0.4':
+    resolution: {integrity: sha512-ukFn0I01HsSgr3VYhYcvkTCLS7rGa0gw4A4AMpcy/A9xx/zRJy7PS2BElMXLwUazVFMAr5zuiTk3MQeoeGXaJg==}
+    engines: {node: '>= 16'}
+
   '@intlify/shared@9.14.1':
     resolution: {integrity: sha512-XjHu6PEQup9MnP1x0W9y0nXXfq9jFftAYSfV11hryjtH4XqXP8HrzMvXI+ZVifF+jZLszaTzIhvukllplxTQTg==}
     engines: {node: '>= 16'}
@@ -2693,8 +2705,8 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-i18n@9.14.1:
-    resolution: {integrity: sha512-xjxV0LYc1xQ8TbAVfIyZiOSS8qoU1R0YwV7V5I8I6Fd64+zvsTsdPgtylPsie3Vdt9wekeYhr+smKDeaK6RBuA==}
+  vue-i18n@10.0.4:
+    resolution: {integrity: sha512-1xkzVxqBLk2ZFOmeI+B5r1J7aD/WtNJ4j9k2mcFcQo5BnOmHBmD7z4/oZohh96AAaRZ4Q7mNQvxc9h+aT+Md3w==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
@@ -3170,7 +3182,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@intlify/bundle-utils@9.0.0-beta.0(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))':
+  '@intlify/bundle-utils@9.0.0-beta.0(vue-i18n@10.0.4(vue@3.5.11(typescript@5.6.2)))':
     dependencies:
       '@intlify/message-compiler': 10.0.0
       '@intlify/shared': 10.0.0
@@ -3182,7 +3194,12 @@ snapshots:
       source-map-js: 1.2.1
       yaml-eslint-parser: 1.2.3
     optionalDependencies:
-      vue-i18n: 9.14.1(vue@3.5.11(typescript@5.6.2))
+      vue-i18n: 10.0.4(vue@3.5.11(typescript@5.6.2))
+
+  '@intlify/core-base@10.0.4':
+    dependencies:
+      '@intlify/message-compiler': 10.0.4
+      '@intlify/shared': 10.0.4
 
   '@intlify/core-base@9.14.1':
     dependencies:
@@ -3219,6 +3236,11 @@ snapshots:
       '@intlify/shared': 10.0.0
       source-map-js: 1.2.1
 
+  '@intlify/message-compiler@10.0.4':
+    dependencies:
+      '@intlify/shared': 10.0.4
+      source-map-js: 1.2.1
+
   '@intlify/message-compiler@9.14.1':
     dependencies:
       '@intlify/shared': 9.14.1
@@ -3226,14 +3248,16 @@ snapshots:
 
   '@intlify/shared@10.0.0': {}
 
+  '@intlify/shared@10.0.4': {}
+
   '@intlify/shared@9.14.1': {}
 
-  '@intlify/unplugin-vue-i18n@5.2.0(@vue/compiler-dom@3.5.11)(eslint@9.12.0(jiti@1.21.6))(rollup@4.24.0)(typescript@5.6.2)(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
+  '@intlify/unplugin-vue-i18n@5.2.0(@vue/compiler-dom@3.5.11)(eslint@9.12.0(jiti@1.21.6))(rollup@4.24.0)(typescript@5.6.2)(vue-i18n@10.0.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@1.21.6))
-      '@intlify/bundle-utils': 9.0.0-beta.0(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))
+      '@intlify/bundle-utils': 9.0.0-beta.0(vue-i18n@10.0.4(vue@3.5.11(typescript@5.6.2)))
       '@intlify/shared': 10.0.0
-      '@intlify/vue-i18n-extensions': 7.0.0(@intlify/shared@10.0.0)(@vue/compiler-dom@3.5.11)(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
+      '@intlify/vue-i18n-extensions': 7.0.0(@intlify/shared@10.0.0)(@vue/compiler-dom@3.5.11)(vue-i18n@10.0.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
       '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.6.2)
@@ -3247,7 +3271,7 @@ snapshots:
       unplugin: 1.14.1
       vue: 3.5.11(typescript@5.6.2)
     optionalDependencies:
-      vue-i18n: 9.14.1(vue@3.5.11(typescript@5.6.2))
+      vue-i18n: 10.0.4(vue@3.5.11(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/compiler-dom'
       - eslint
@@ -3256,14 +3280,14 @@ snapshots:
       - typescript
       - webpack-sources
 
-  '@intlify/vue-i18n-extensions@7.0.0(@intlify/shared@10.0.0)(@vue/compiler-dom@3.5.11)(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
+  '@intlify/vue-i18n-extensions@7.0.0(@intlify/shared@10.0.0)(@vue/compiler-dom@3.5.11)(vue-i18n@10.0.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
     dependencies:
       '@babel/parser': 7.25.7
     optionalDependencies:
       '@intlify/shared': 10.0.0
       '@vue/compiler-dom': 3.5.11
       vue: 3.5.11(typescript@5.6.2)
-      vue-i18n: 9.14.1(vue@3.5.11(typescript@5.6.2))
+      vue-i18n: 10.0.4(vue@3.5.11(typescript@5.6.2))
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -5639,10 +5663,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)):
+  vue-i18n@10.0.4(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      '@intlify/core-base': 9.14.1
-      '@intlify/shared': 9.14.1
+      '@intlify/core-base': 10.0.4
+      '@intlify/shared': 10.0.4
       '@vue/devtools-api': 6.6.4
       vue: 3.5.11(typescript@5.6.2)
 
diff --git a/web/src/components/form/KeyValueEditor.vue b/web/src/components/form/KeyValueEditor.vue
new file mode 100644
index 000000000..fee45ee22
--- /dev/null
+++ b/web/src/components/form/KeyValueEditor.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div v-for="(item, index) in displayItems" :key="index" class="flex gap-4">
+      <TextField
+        :id="`${id}-key-${index}`"
+        :model-value="item.key"
+        :placeholder="keyPlaceholder"
+        :class="{
+          'bg-red-100 dark:bg-red-900':
+            isDuplicateKey(item.key, index) || (item.key === '' && index !== displayItems.length - 1),
+        }"
+        @update:model-value="updateItem(index, 'key', $event)"
+      />
+      <TextField
+        :id="`${id}-value-${index}`"
+        :model-value="item.value"
+        :placeholder="valuePlaceholder"
+        @update:model-value="updateItem(index, 'value', $event)"
+      />
+      <div class="w-10 flex-shrink-0">
+        <Button
+          v-if="index !== displayItems.length - 1"
+          type="button"
+          color="red"
+          class="ml-auto"
+          :title="deleteTitle"
+          @click="deleteItem(index)"
+        >
+          <Icon name="remove" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import Button from '~/components/atomic/Button.vue';
+import Icon from '~/components/atomic/Icon.vue';
+import TextField from '~/components/form/TextField.vue';
+
+const props = defineProps<{
+  modelValue: Record<string, string>;
+  id?: string;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  deleteTitle?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Record<string, string>): void;
+  (e: 'update:isValid', value: boolean): void;
+}>();
+
+const items = ref(Object.entries(props.modelValue).map(([key, value]) => ({ key, value })));
+
+const displayItems = computed(() => {
+  if (items.value.length === 0 || items.value[items.value.length - 1].key !== '') {
+    return [...items.value, { key: '', value: '' }];
+  }
+  return items.value;
+});
+
+function isDuplicateKey(key: string, index: number): boolean {
+  return items.value.some((item, i) => item.key === key && i !== index && key !== '');
+}
+
+function checkValidity() {
+  const isValid = items.value.every(
+    (item, idx) => !isDuplicateKey(item.key, idx) && (item.key !== '' || idx === items.value.length - 1),
+  );
+  emit('update:isValid', isValid);
+}
+
+function updateItem(index: number, field: 'key' | 'value', value: string) {
+  const newItems = [...items.value];
+  if (index === newItems.length) {
+    newItems.push({ key: '', value: '' });
+  }
+  newItems[index][field] = value;
+
+  items.value = newItems;
+
+  const newValue = Object.fromEntries(
+    newItems
+      .filter((item) => item.key !== '' && !isDuplicateKey(item.key, newItems.indexOf(item)))
+      .map((item) => [item.key, item.value]),
+  );
+
+  emit('update:modelValue', newValue);
+  checkValidity();
+}
+
+function deleteItem(index: number) {
+  items.value = items.value.filter((_, i) => i !== index);
+
+  const newValue = Object.fromEntries(
+    items.value
+      .filter((item) => item.key !== '' && !isDuplicateKey(item.key, items.value.indexOf(item)))
+      .map((item) => [item.key, item.value]),
+  );
+
+  emit('update:modelValue', newValue);
+  checkValidity();
+}
+</script>
diff --git a/web/src/views/repo/RepoManualPipeline.vue b/web/src/views/repo/RepoManualPipeline.vue
index df569448f..b61ef435d 100644
--- a/web/src/views/repo/RepoManualPipeline.vue
+++ b/web/src/views/repo/RepoManualPipeline.vue
@@ -7,33 +7,16 @@
       </InputField>
       <InputField v-slot="{ id }" :label="$t('repo.manual_pipeline.variables.title')">
         <span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
-        <div class="flex flex-col gap-2">
-          <div v-for="(_, i) in payload.variables" :key="i" class="flex gap-4">
-            <TextField
-              :id="id"
-              v-model="payload.variables[i].name"
-              :placeholder="$t('repo.manual_pipeline.variables.name')"
-            />
-            <TextField
-              :id="id"
-              v-model="payload.variables[i].value"
-              :placeholder="$t('repo.manual_pipeline.variables.value')"
-            />
-            <div class="w-10 flex-shrink-0">
-              <Button
-                v-if="i !== payload.variables.length - 1"
-                color="red"
-                class="ml-auto"
-                :title="$t('repo.manual_pipeline.variables.delete')"
-                @click="deleteVar(i)"
-              >
-                <Icon name="remove" />
-              </Button>
-            </div>
-          </div>
-        </div>
+        <KeyValueEditor
+          :id="id"
+          v-model="payload.variables"
+          :key-placeholder="$t('repo.manual_pipeline.variables.name')"
+          :value-placeholder="$t('repo.manual_pipeline.variables.value')"
+          :delete-title="$t('repo.manual_pipeline.variables.delete')"
+          @update:is-valid="isVariablesValid = $event"
+        />
       </InputField>
-      <Button type="submit" :text="$t('repo.manual_pipeline.trigger')" />
+      <Button type="submit" :text="$t('repo.manual_pipeline.trigger')" :disabled="!isFormValid" />
     </form>
   </Panel>
   <div v-else class="flex justify-center text-wp-text-100">
@@ -44,15 +27,15 @@
 <script lang="ts" setup>
 import { useNotification } from '@kyvg/vue3-notification';
 import type { Ref } from 'vue';
-import { computed, onMounted, ref, inject as vueInject, watch } from 'vue';
+import { computed, onMounted, ref, inject as vueInject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import InputField from '~/components/form/InputField.vue';
+import KeyValueEditor from '~/components/form/KeyValueEditor.vue';
 import SelectField from '~/components/form/SelectField.vue';
-import TextField from '~/components/form/TextField.vue';
 import Panel from '~/components/layout/Panel.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { inject } from '~/compositions/useInjectProvide';
@@ -79,26 +62,22 @@ if (!repoPermissions) {
 
 const router = useRouter();
 const branches = ref<{ text: string; value: string }[]>([]);
-const payload = ref<{ branch: string; variables: { name: string; value: string }[] }>({
+const payload = ref<{ branch: string; variables: Record<string, string> }>({
   branch: 'main',
-  variables: [
-    {
-      name: '',
-      value: '',
-    },
-  ],
+  variables: {},
 });
 
-const pipelineOptions = computed(() => {
-  const variables = Object.fromEntries(
-    payload.value.variables.filter((e) => e.name !== '').map((item) => [item.name, item.value]),
-  );
-  return {
-    ...payload.value,
-    variables,
-  };
+const isVariablesValid = ref(true);
+
+const isFormValid = computed(() => {
+  return payload.value.branch !== '' && isVariablesValid.value;
 });
 
+const pipelineOptions = computed(() => ({
+  ...payload.value,
+  variables: payload.value.variables,
+}));
+
 const loading = ref(true);
 onMounted(async () => {
   if (!repoPermissions.value.push) {
@@ -114,23 +93,6 @@ onMounted(async () => {
   loading.value = false;
 });
 
-watch(
-  payload,
-  () => {
-    if (payload.value.variables[payload.value.variables.length - 1].name !== '') {
-      payload.value.variables.push({
-        name: '',
-        value: '',
-      });
-    }
-  },
-  { deep: true },
-);
-
-function deleteVar(index: number) {
-  payload.value.variables.splice(index, 1);
-}
-
 async function triggerManualPipeline() {
   loading.value = true;
   const pipeline = await apiClient.createPipeline(repo.value.id, pipelineOptions.value);