diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 00f5349..6d7bedc 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -103,6 +103,7 @@
   "labelManual": "Manual",
   "labelMissingExe": "Not Found",
   "labelMatch": "Match",
+  "labelMatching": "Matching",
   "labelMultiPatternMatching": "Multi-Pattern Matching",
   "labelMultiRuleMatching": "Multi-Rule Matching",
   "labelNA": "N/A",
diff --git a/frontend/src/i18n/zh_Hant_HK.json b/frontend/src/i18n/zh_Hant_HK.json
index d693454..fc27ec1 100644
--- a/frontend/src/i18n/zh_Hant_HK.json
+++ b/frontend/src/i18n/zh_Hant_HK.json
@@ -103,6 +103,7 @@
   "labelManual": "手動輸入",
   "labelMissingExe": "路徑無效",
   "labelMatch": "配對",
+  "labelMatching": "配對中",
   "labelMultiPatternMatching": "多匹配值配對",
   "labelMultiRuleMatching": "多規則配對",
   "labelNA": "N/A",
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 831f3d8..18e5ad9 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -42,6 +42,7 @@ let timer: ReturnType<typeof setTimeout> | null = null
 const selectedNetwork = ref<number>(0)
 const selectedDisplay = ref<number>(0)
 const selectedMiscellaneous = ref<number[]>([])
+const matching = ref(false)
 
 function loadSystemInfo() {
   Promise.all([utils.getHardware(), utils.getOSInfo()]).then(([hw, os]) => {
@@ -92,6 +93,7 @@ onBeforeMount(() => {
 })
 
 function selectMatchedOptions() {
+  matching.value = true
   matcher
     .MatchedGroupIds()
     .then(matchedIds => {
@@ -110,6 +112,9 @@ function selectMatchedOptions() {
       })
     })
     .catch(err => toast.add({ title: decodeError(err, t), color: 'error' }))
+    .finally(() => {
+      matching.value = false
+    })
 }
 
 function resetSelection() {
@@ -258,7 +263,17 @@ onBeforeUnmount(() => {
       </template>
     </div>
 
-    <form ref="form" class="mt-3 flex h-28 gap-x-3">
+    <form ref="form" class="relative mt-3 flex h-28 gap-x-3">
+      <div
+        v-if="matching"
+        class="absolute -inset-2 z-10 flex flex-col items-center justify-center gap-y-1 rounded-lg bg-white/70 backdrop-blur-xs"
+        role="status"
+      >
+        <UIcon name="i-lucide-loader-circle" class="animate-spin text-xl text-apple-green-600" />
+
+        <span class="text-xs text-gray-500">{{ $t('labelMatching') }}</span>
+      </div>
+
       <div class="flex flex-1 flex-col justify-between">
         <div class="relative w-full">
           <label
@@ -403,11 +418,23 @@ onBeforeUnmount(() => {
         </div>
 
         <div class="mt-2 flex h-8 flex-row items-center justify-end gap-x-3">
-          <UButton type="button" color="neutral" variant="outline" @click="selectMatchedOptions">
+          <UButton
+            type="button"
+            color="neutral"
+            variant="outline"
+            :disabled="matching || systemInfo.hw === null"
+            @click="selectMatchedOptions"
+          >
             {{ $t('labelMatch') }}
           </UButton>
 
-          <UButton type="button" color="secondary" variant="outline" @click="resetSelection">
+          <UButton
+            type="button"
+            color="secondary"
+            variant="outline"
+            :disabled="matching"
+            @click="resetSelection"
+          >
             {{ $t('actionReset') }}
           </UButton>