diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index 9625ec9b68..4d61f0da5a 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -38,6 +38,8 @@ const { appInfo } = $(useGlobal())
 
 const meta = inject(MetaInj, ref())
 
+const hookTabKey = ref('hook-edit')
+
 const useForm = Form.useForm
 
 const hook = reactive<
@@ -461,243 +463,263 @@ onMounted(async () => {
 
   <a-divider />
 
-  <a-form :model="hook" name="create-or-edit-webhook">
-    <a-form-item>
-      <a-row type="flex">
-        <a-col :span="24">
-          <a-card>
-            <a-checkbox
-              :checked="Boolean(hook.active)"
-              class="nc-check-box-enable-webhook"
-              @update:checked="hook.active = $event"
-            >
-              {{ $t('activity.enableWebhook') }}
-            </a-checkbox>
-          </a-card>
-        </a-col>
-      </a-row>
-    </a-form-item>
-    <a-form-item>
-      <a-row type="flex">
-        <a-col :span="24">
-          <a-form-item v-bind="validateInfos.title">
-            <a-input
-              v-model:value="hook.title"
-              size="large"
-              :placeholder="$t('general.title')"
-              class="nc-text-field-hook-title"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-row type="flex" :gutter="[16, 16]">
-        <a-col :span="12">
-          <a-form-item v-bind="validateInfos.eventOperation">
-            <a-select
-              v-model:value="hook.eventOperation"
-              size="large"
-              :placeholder="$t('general.event')"
-              class="nc-text-field-hook-event"
-              dropdown-class-name="nc-dropdown-webhook-event"
-            >
-              <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')">
-                {{ event.text.join(' ') }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-
-        <a-col :span="12">
-          <a-form-item v-bind="validateInfos['notification.type']">
-            <a-select
-              v-model:value="hook.notification.type"
-              size="large"
-              class="nc-select-hook-notification-type"
-              :placeholder="$t('general.notification')"
-              dropdown-class-name="nc-dropdown-webhook-notification"
-              @change="onNotTypeChange(true)"
-            >
-              <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
-                <div class="flex items-center">
-                  <MdiLink v-if="notificationOption.type === 'URL'" class="mr-2" />
-
-                  <MdiEmail v-if="notificationOption.type === 'Email'" class="mr-2" />
-
-                  <MdiSlack v-if="notificationOption.type === 'Slack'" class="mr-2" />
-
-                  <MdiMicrosoftTeams v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" />
-
-                  <MdiDiscord v-if="notificationOption.type === 'Discord'" class="mr-2" />
-
-                  <MdiChat v-if="notificationOption.type === 'Mattermost'" class="mr-2" />
-
-                  <MdiWhatsapp v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" />
-
-                  <MdiCellphoneMessage v-if="notificationOption.type === 'Twilio'" class="mr-2" />
-
-                  {{ notificationOption.type }}
-                </div>
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
-        <a-col :span="6">
-          <a-select
-            v-model:value="hook.notification.payload.method"
-            size="large"
-            class="nc-select-hook-url-method"
-            dropdown-class-name="nc-dropdown-hook-notification-url-method"
-          >
-            <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">
-              {{ method.title }}
-            </a-select-option>
-          </a-select>
-        </a-col>
-
-        <a-col :span="18">
-          <a-form-item v-bind="validateInfos['notification.payload.path']">
-            <a-input
-              v-model:value="hook.notification.payload.path"
-              size="large"
-              placeholder="http://example.com"
-              class="nc-text-field-hook-url-path"
-            />
-          </a-form-item>
-        </a-col>
-
-        <a-col :span="24">
-          <a-tabs v-model:activeKey="urlTabKey" type="card" closeable="false" class="shadow-sm">
-            <a-tab-pane key="params" tab="Params" force-render>
-              <LazyApiClientParams v-model="hook.notification.payload.parameters" />
-            </a-tab-pane>
-
-            <a-tab-pane key="headers" tab="Headers" class="nc-tab-headers">
-              <LazyApiClientHeaders v-model="hook.notification.payload.headers" />
-            </a-tab-pane>
-
-            <!-- No in use at this moment -->
-            <!--            <a-tab-pane key="auth" tab="Auth"> -->
-            <!--              <LazyMonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" /> -->
-
-            <!--              <span class="text-gray-500 prose-sm p-2"> -->
-            <!--                For more about auth option refer -->
-            <!--                <a class="prose-sm" href  ="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>. -->
-            <!--              </span> -->
-            <!--            </a-tab-pane> -->
-          </a-tabs>
-        </a-col>
-      </a-row>
-
-      <a-row v-if="hook.notification.type === 'Slack'" type="flex">
-        <a-col :span="24">
-          <a-form-item v-bind="validateInfos['notification.channels']">
-            <LazyWebhookChannelMultiSelect
-              v-if="slackChannels.length > 0"
-              v-model="hook.notification.payload.channels"
-              :selected-channel-list="hook.notification.payload.channels"
-              :available-channel-list="slackChannels"
-              placeholder="Select Slack channels"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
-        <a-col :span="24">
-          <a-form-item v-bind="validateInfos['notification.channels']">
-            <LazyWebhookChannelMultiSelect
-              v-if="teamsChannels.length > 0"
-              v-model="hook.notification.payload.channels"
-              :selected-channel-list="hook.notification.payload.channels"
-              :available-channel-list="teamsChannels"
-              placeholder="Select Microsoft Teams channels"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-row v-if="hook.notification.type === 'Discord'" type="flex">
-        <a-col :span="24">
-          <a-form-item v-bind="validateInfos['notification.channels']">
-            <LazyWebhookChannelMultiSelect
-              v-if="discordChannels.length > 0"
-              v-model="hook.notification.payload.channels"
-              :selected-channel-list="hook.notification.payload.channels"
-              :available-channel-list="discordChannels"
-              placeholder="Select Discord channels"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
-        <a-col :span="24">
-          <a-form-item v-bind="validateInfos['notification.channels']">
-            <LazyWebhookChannelMultiSelect
-              v-if="mattermostChannels.length > 0"
-              v-model="hook.notification.payload.channels"
-              :selected-channel-list="hook.notification.payload.channels"
-              :available-channel-list="mattermostChannels"
-              placeholder="Select Mattermost channels"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-row v-if="formInput[hook.notification.type] && hook.notification.payload" type="flex">
-        <a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24">
-          <a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]">
-            <a-textarea v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
-          </a-form-item>
-
-          <a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]">
-            <a-input v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <a-row class="mb-5" type="flex">
-        <a-col :span="24">
-          <a-card>
-            <a-checkbox
-              :checked="Boolean(hook.condition)"
-              class="nc-check-box-hook-condition"
-              @update:checked="hook.condition = $event"
-            >
-              On Condition
-            </a-checkbox>
-
-            <LazySmartsheetToolbarColumnFilter
-              v-if="hook.condition"
-              ref="filterRef"
-              class="mt-4"
-              :auto-save="false"
-              :show-loading="false"
-              :hook-id="hook.id"
-              web-hook
-            />
-          </a-card>
-        </a-col>
-      </a-row>
-
-      <a-row>
-        <a-col :span="24">
-          <LazyWebhookTest
-            ref="webhookTestRef"
-            :hook="{
-              ...hook,
-              notification: {
-                ...hook.notification,
-                payload: hook.notification.payload,
-              },
-            }"
-          />
-        </a-col>
-      </a-row>
-    </a-form-item>
-  </a-form>
+  <a-tabs v-model:activeKey="hookTabKey" type="card" closeable="false" class="shadow-sm">
+    <a-tab-pane key="hook-edit" class="nc-hook-edit" force-render>
+      <template #tab>
+        <span>
+          <MdiEditOutline />
+          Edit
+        </span>
+      </template>
+      <a-form :model="hook" name="create-or-edit-webhook">
+        <a-form-item>
+          <a-row type="flex">
+            <a-col :span="24">
+              <a-card>
+                <a-checkbox
+                  :checked="Boolean(hook.active)"
+                  class="nc-check-box-enable-webhook"
+                  @update:checked="hook.active = $event"
+                >
+                  {{ $t('activity.enableWebhook') }}
+                </a-checkbox>
+              </a-card>
+            </a-col>
+          </a-row>
+        </a-form-item>
+        <a-form-item>
+          <a-row type="flex">
+            <a-col :span="24">
+              <a-form-item v-bind="validateInfos.title">
+                <a-input
+                  v-model:value="hook.title"
+                  size="large"
+                  :placeholder="$t('general.title')"
+                  class="nc-text-field-hook-title"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row type="flex" :gutter="[16, 16]">
+            <a-col :span="12">
+              <a-form-item v-bind="validateInfos.eventOperation">
+                <a-select
+                  v-model:value="hook.eventOperation"
+                  size="large"
+                  :placeholder="$t('general.event')"
+                  class="nc-text-field-hook-event"
+                  dropdown-class-name="nc-dropdown-webhook-event"
+                >
+                  <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')">
+                    {{ event.text.join(' ') }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item v-bind="validateInfos['notification.type']">
+                <a-select
+                  v-model:value="hook.notification.type"
+                  size="large"
+                  class="nc-select-hook-notification-type"
+                  :placeholder="$t('general.notification')"
+                  dropdown-class-name="nc-dropdown-webhook-notification"
+                  @change="onNotTypeChange(true)"
+                >
+                  <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
+                    <div class="flex items-center">
+                      <MdiLink v-if="notificationOption.type === 'URL'" class="mr-2" />
+
+                      <MdiEmail v-if="notificationOption.type === 'Email'" class="mr-2" />
+
+                      <MdiSlack v-if="notificationOption.type === 'Slack'" class="mr-2" />
+
+                      <MdiMicrosoftTeams v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" />
+
+                      <MdiDiscord v-if="notificationOption.type === 'Discord'" class="mr-2" />
+
+                      <MdiChat v-if="notificationOption.type === 'Mattermost'" class="mr-2" />
+
+                      <MdiWhatsapp v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" />
+
+                      <MdiCellphoneMessage v-if="notificationOption.type === 'Twilio'" class="mr-2" />
+
+                      {{ notificationOption.type }}
+                    </div>
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
+            <a-col :span="6">
+              <a-select
+                v-model:value="hook.notification.payload.method"
+                size="large"
+                class="nc-select-hook-url-method"
+                dropdown-class-name="nc-dropdown-hook-notification-url-method"
+              >
+                <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">
+                  {{ method.title }}
+                </a-select-option>
+              </a-select>
+            </a-col>
+
+            <a-col :span="18">
+              <a-form-item v-bind="validateInfos['notification.payload.path']">
+                <a-input
+                  v-model:value="hook.notification.payload.path"
+                  size="large"
+                  placeholder="http://example.com"
+                  class="nc-text-field-hook-url-path"
+                />
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="24">
+              <a-tabs v-model:activeKey="urlTabKey" type="card" closeable="false" class="shadow-sm">
+                <a-tab-pane key="params" tab="Params" force-render>
+                  <LazyApiClientParams v-model="hook.notification.payload.parameters" />
+                </a-tab-pane>
+
+                <a-tab-pane key="headers" tab="Headers" class="nc-tab-headers">
+                  <LazyApiClientHeaders v-model="hook.notification.payload.headers" />
+                </a-tab-pane>
+
+                <!-- No in use at this moment -->
+                <!--            <a-tab-pane key="auth" tab="Auth"> -->
+                <!--              <LazyMonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" /> -->
+
+                <!--              <span class="text-gray-500 prose-sm p-2"> -->
+                <!--                For more about auth option refer -->
+                <!--                <a class="prose-sm" href  ="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>. -->
+                <!--              </span> -->
+                <!--            </a-tab-pane> -->
+              </a-tabs>
+            </a-col>
+          </a-row>
+
+          <a-row v-if="hook.notification.type === 'Slack'" type="flex">
+            <a-col :span="24">
+              <a-form-item v-bind="validateInfos['notification.channels']">
+                <LazyWebhookChannelMultiSelect
+                  v-if="slackChannels.length > 0"
+                  v-model="hook.notification.payload.channels"
+                  :selected-channel-list="hook.notification.payload.channels"
+                  :available-channel-list="slackChannels"
+                  placeholder="Select Slack channels"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
+            <a-col :span="24">
+              <a-form-item v-bind="validateInfos['notification.channels']">
+                <LazyWebhookChannelMultiSelect
+                  v-if="teamsChannels.length > 0"
+                  v-model="hook.notification.payload.channels"
+                  :selected-channel-list="hook.notification.payload.channels"
+                  :available-channel-list="teamsChannels"
+                  placeholder="Select Microsoft Teams channels"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row v-if="hook.notification.type === 'Discord'" type="flex">
+            <a-col :span="24">
+              <a-form-item v-bind="validateInfos['notification.channels']">
+                <LazyWebhookChannelMultiSelect
+                  v-if="discordChannels.length > 0"
+                  v-model="hook.notification.payload.channels"
+                  :selected-channel-list="hook.notification.payload.channels"
+                  :available-channel-list="discordChannels"
+                  placeholder="Select Discord channels"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
+            <a-col :span="24">
+              <a-form-item v-bind="validateInfos['notification.channels']">
+                <LazyWebhookChannelMultiSelect
+                  v-if="mattermostChannels.length > 0"
+                  v-model="hook.notification.payload.channels"
+                  :selected-channel-list="hook.notification.payload.channels"
+                  :available-channel-list="mattermostChannels"
+                  placeholder="Select Mattermost channels"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row v-if="formInput[hook.notification.type] && hook.notification.payload" type="flex">
+            <a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24">
+              <a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]">
+                <a-textarea v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
+              </a-form-item>
+
+              <a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]">
+                <a-input v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row class="mb-5" type="flex">
+            <a-col :span="24">
+              <a-card>
+                <a-checkbox
+                  :checked="Boolean(hook.condition)"
+                  class="nc-check-box-hook-condition"
+                  @update:checked="hook.condition = $event"
+                >
+                  On Condition
+                </a-checkbox>
+
+                <LazySmartsheetToolbarColumnFilter
+                  v-if="hook.condition"
+                  ref="filterRef"
+                  class="mt-4"
+                  :auto-save="false"
+                  :show-loading="false"
+                  :hook-id="hook.id"
+                  web-hook
+                />
+              </a-card>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="24">
+              <LazyWebhookTest
+                ref="webhookTestRef"
+                :hook="{
+                  ...hook,
+                  notification: {
+                    ...hook.notification,
+                    payload: hook.notification.payload,
+                  },
+                }"
+              />
+            </a-col>
+          </a-row>
+        </a-form-item>
+      </a-form>
+    </a-tab-pane>
+
+    <a-tab-pane key="hook-log" class="nc-hook-log">
+      <template #tab>
+        <span>
+          <MdiHistory />
+          Call Log
+        </span>
+      </template>
+      <LazyWebhookCallLog />
+    </a-tab-pane>
+  </a-tabs>
 </template>