diff --git a/packages/nc-gui-v2/components/api-client/Headers.vue b/packages/nc-gui-v2/components/api-client/Headers.vue
index 314c455187..4047eb8652 100644
--- a/packages/nc-gui-v2/components/api-client/Headers.vue
+++ b/packages/nc-gui-v2/components/api-client/Headers.vue
@@ -80,7 +80,7 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
       </thead>
       <tbody>
         <tr v-for="(headerRow, idx) in vModel" :key="idx">
-          <td class="px-2">
+          <td class="px-2 nc-hook-header-tab-checkbox">
             <a-form-item>
               <a-checkbox v-model:checked="headerRow.enabled" />
             </a-form-item>
diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index f69863c632..53d497e73e 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -386,19 +386,19 @@ onMounted(async () => {
   <div class="flex">
     <div class="flex-1">
       <div class="flex items-center mt-2">
-        <MdiArrowLeftBold class="mr-3 text-xl cursor-pointer" @click="emit('backToList')" />
+        <MdiArrowLeftBold class="mr-3 text-xl cursor-pointer nc-icon-hook-navigate-left" @click="emit('backToList')" />
         <span class="inline text-xl font-bold">{{ meta.title }} : {{ hook.title || 'Webhooks' }} </span>
       </div>
     </div>
     <div>
-      <a-button class="mr-3" size="large" @click="testWebhook">
+      <a-button class="mr-3 nc-btn-webhook-test" size="large" @click="testWebhook">
         <div class="flex items-center">
           <MdiGestureDoubleTap class="mr-2" />
           <!-- TODO: i18n -->
           Test Webhook
         </div>
       </a-button>
-      <a-button type="primary" size="large" @click.prevent="saveHooks">
+      <a-button class="nc-btn-webhook-save" type="primary" size="large" @click.prevent="saveHooks">
         <div class="flex items-center">
           <MdiContentSave class="mr-2" />
           <!-- Save -->
diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index 3a829798dc..fd5d1612a6 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -60,7 +60,7 @@ onMounted(() => {
     <div v-if="hooks.length" class="">
       <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer scrollbar-thin-primary">
         <template #renderItem="{ item, index }">
-          <a-list-item class="p-2" @click="emit('edit', item)">
+          <a-list-item class="p-2 nc-hook" @click="emit('edit', item)">
             <a-list-item-meta>
               <template #description>
                 <span class="uppercase"> {{ item.event }} {{ item.operation }}</span>
@@ -81,7 +81,7 @@ onMounted(() => {
                 <!-- Notify Via -->
                 <div class="mr-2">{{ $t('labels.notifyVia') }} : {{ item?.notification?.type }}</div>
                 <div class="float-right pt-2 pr-1">
-                  <MdiDeleteOutline class="text-xl" @click.stop="deleteHook(item, index)" />
+                  <MdiDeleteOutline class="text-xl nc-hook-delete-icon" @click.stop="deleteHook(item, index)" />
                 </div>
               </div>
             </template>