diff --git a/packages/nc-gui/components/webhook/CallLog.vue b/packages/nc-gui/components/webhook/CallLog.vue
index 2f455b3629..b4779f2812 100644
--- a/packages/nc-gui/components/webhook/CallLog.vue
+++ b/packages/nc-gui/components/webhook/CallLog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HookLogType, HookType } from 'nocodb-sdk'
-import { extractSdkResponseErrorMsg, onBeforeMount, parseProp, timeAgo, useApi } from '#imports'
+import { extractSdkResponseErrorMsg, onBeforeMount, parseProp, timeAgo, useApi, useGlobal } from '#imports'
 
 interface Props {
   hook: HookType
@@ -14,11 +14,13 @@ const hookLogs = ref<HookLogType[]>([])
 
 const activeKey = ref()
 
+const { appInfo } = useGlobal()
+
 let totalRows = $ref(0)
 
 const currentPage = $ref(1)
 
-const currentLimit = $ref(25)
+const currentLimit = $ref(10)
 
 async function loadHookLogs(page = currentPage, limit = currentLimit) {
   try {
@@ -42,79 +44,96 @@ onBeforeMount(async () => {
 
 <template>
   <a-skeleton v-if="isLoading" />
-  <a-empty v-else-if="!hookLogs.length" />
-  <a-layout v-else>
-    <a-layout-content>
-      <a-collapse v-model:activeKey="activeKey" class="nc-hook-log-collapse">
-        <a-collapse-panel v-for="(hookLog, idx) of hookLogs" :key="idx">
-          <template #header>
-            <div class="w-full cursor-pointer">
-              <div class="font-weight-medium flex">
-                <div class="flex-1">
-                  {{ hookLog.type }}: records.{{ hookLog.event }}.{{ hookLog.operation }} ({{ timeAgo(hookLog.created_at) }})
-                </div>
-                <div
-                  v-if="hookLog.type === 'URL'"
-                  class="mx-1 px-2 py-1 text-white rounded bg-red-500 text-xs"
-                  :class="{ '!bg-green-500': parseProp(hookLog.response).status === 200 }"
-                >
-                  {{ parseProp(hookLog.response).status }}
-                  {{ parseProp(hookLog.response).statusText }}
+  <div v-else>
+    <a-card class="!mb-[20px]" :body-style="{ padding: '10px' }">
+      <span v-if="appInfo.automationLogLevel === 'OFF'">
+        The NC_AUTOMATION_LOG_LEVEL is set to “OFF”, no logs will be displayed.
+      </span>
+      <span v-if="appInfo.automationLogLevel === 'ERROR'">
+        The NC_AUTOMATION_LOG_LEVEL is set to “ERROR”, only error logs will be displayed.
+      </span>
+      <span v-if="appInfo.automationLogLevel === 'ALL'">
+        The NC_AUTOMATION_LOG_LEVEL is set to “ALL”, both error and success logs will be displayed.
+      </span>
+      <span>
+        <!-- TODO: update the link -->
+        For additional configuration options, please refer the documentation <a href="#" target="_blank">here</a>.
+      </span>
+    </a-card>
+
+    <a-empty v-if="!hookLogs.length" />
+    <a-layout v-else>
+      <a-layout-content>
+        <a-collapse v-model:activeKey="activeKey" class="nc-hook-log-collapse">
+          <a-collapse-panel v-for="(hookLog, idx) of hookLogs" :key="idx">
+            <template #header>
+              <div class="w-full cursor-pointer">
+                <div class="font-weight-medium flex">
+                  <div class="flex-1">
+                    {{ hookLog.type }}: records.{{ hookLog.event }}.{{ hookLog.operation }} ({{ timeAgo(hookLog.created_at) }})
+                  </div>
+                  <div
+                    v-if="hookLog.type === 'URL'"
+                    class="mx-1 px-2 py-1 text-white rounded bg-red-500 text-xs"
+                    :class="{ '!bg-green-500': parseProp(hookLog.response).status === 200 }"
+                  >
+                    {{ parseProp(hookLog.response).status }}
+                    {{ parseProp(hookLog.response).statusText }}
+                  </div>
+                  <div v-if="hookLog.type === 'Email'">
+                    <div v-if="hookLog.error_message" class="mx-1 px-2 py-1 text-white rounded text-xs bg-red-500">ERROR</div>
+                    <div v-else class="mx-1 px-2 py-1 text-white rounded text-xs bg-green-500">OK</div>
+                  </div>
                 </div>
-                <div v-if="hookLog.type === 'Email'">
-                  <div v-if="hookLog.error_message" class="mx-1 px-2 py-1 text-white rounded text-xs bg-red-500">ERROR</div>
-                  <div v-else class="mx-1 px-2 py-1 text-white rounded text-xs bg-green-500">OK</div>
+                <div v-if="hookLog.type === 'URL'">
+                  <span class="font-weight-medium text-primary">
+                    {{ parseProp(hookLog.payload).method }}
+                  </span>
+                  {{ parseProp(hookLog.payload).path }}
                 </div>
               </div>
-              <div v-if="hookLog.type === 'URL'">
-                <span class="font-weight-medium text-primary">
-                  {{ parseProp(hookLog.payload).method }}
-                </span>
-                {{ parseProp(hookLog.payload).path }}
-              </div>
-            </div>
-          </template>
+            </template>
 
-          <div v-if="hookLog.type === 'URL'">
-            <div class="nc-hook-log-request">
-              <div class="nc-hook-pre-title">Request</div>
-              <pre class="nc-hook-pre">{{ parseProp(hookLog.response).config.headers }}</pre>
-            </div>
+            <div v-if="hookLog.type === 'URL'">
+              <div class="nc-hook-log-request">
+                <div class="nc-hook-pre-title">Request</div>
+                <pre class="nc-hook-pre">{{ parseProp(hookLog.response).config.headers }}</pre>
+              </div>
 
-            <div class="nc-hook-log-response">
-              <div class="nc-hook-pre-title">Response</div>
-              <pre class="nc-hook-pre">{{ parseProp(hookLog.response).headers }}</pre>
-            </div>
+              <div class="nc-hook-log-response">
+                <div class="nc-hook-pre-title">Response</div>
+                <pre class="nc-hook-pre">{{ parseProp(hookLog.response).headers }}</pre>
+              </div>
 
-            <div class="nc-hook-log-payload">
-              <div class="nc-hook-pre-title">Payload</div>
-              <pre class="nc-hook-pre">{{ parseProp(parseProp(hookLog.response).config.data) }}</pre>
+              <div class="nc-hook-log-payload">
+                <div class="nc-hook-pre-title">Payload</div>
+                <pre class="nc-hook-pre">{{ parseProp(parseProp(hookLog.response).config.data) }}</pre>
+              </div>
             </div>
-          </div>
 
-          <div v-else-if="hookLog.type === 'Email'">
-            <div v-if="hookLog.error_message" class="mb-4">
-              {{ hookLog.error_message }}
-            </div>
-            <div class="nc-hook-log-payload">
-              <div class="nc-hook-pre-title">Payload</div>
-              <pre class="nc-hook-pre">{{ parseProp(hookLog.payload) }}</pre>
+            <div v-else-if="hookLog.type === 'Email'">
+              <div v-if="hookLog.error_message" class="mb-4">
+                {{ hookLog.error_message }}
+              </div>
+              <div class="nc-hook-log-payload">
+                <div class="nc-hook-pre-title">Payload</div>
+                <pre class="nc-hook-pre">{{ parseProp(hookLog.payload) }}</pre>
+              </div>
             </div>
-          </div>
-        </a-collapse-panel>
-      </a-collapse>
-    </a-layout-content>
-    <a-layout-footer class="!bg-white text-center">
-      <a-pagination
-        v-model:current="currentPage"
-        style="width: calc(100% - 50px)"
-        :page-size="currentLimit"
-        :total="totalRows"
-        show-less-items
-        @change="loadHookLogs"
-      />
-    </a-layout-footer>
-  </a-layout>
+          </a-collapse-panel>
+        </a-collapse>
+      </a-layout-content>
+      <a-layout-footer class="!bg-white text-center">
+        <a-pagination
+          v-model:current="currentPage"
+          :page-size="currentLimit"
+          :total="totalRows"
+          show-less-items
+          @change="loadHookLogs"
+        />
+      </a-layout-footer>
+    </a-layout>
+  </div>
 </template>
 
 <style scoped lang="scss">