diff --git a/packages/nc-gui/components/api-client/Headers.vue b/packages/nc-gui/components/api-client/Headers.vue
index 1839046a51..31bbc91c49 100644
--- a/packages/nc-gui/components/api-client/Headers.vue
+++ b/packages/nc-gui/components/api-client/Headers.vue
@@ -74,11 +74,11 @@ const filterOption = (input: string, option: Option) => {
           </th>
 
           <th>
-            <div class="text-center font-normal mb-2">Header Name</div>
+            <div class="text-left font-normal ml-2">Header Name</div>
           </th>
 
           <th>
-            <div class="text-center font-normal mb-2">Value</div>
+            <div class="text-left font-normal ml-2">Value</div>
           </th>
 
           <th>
diff --git a/packages/nc-gui/components/api-client/Params.vue b/packages/nc-gui/components/api-client/Params.vue
index b1e45e2eba..35da74a0a5 100644
--- a/packages/nc-gui/components/api-client/Params.vue
+++ b/packages/nc-gui/components/api-client/Params.vue
@@ -15,7 +15,7 @@ const deleteParamRow = (i: number) => vModel.value.splice(i, 1)
 </script>
 
 <template>
-  <div class="flex flex-row justify-center">
+  <div class="flex flex-row justify-start">
     <table>
       <thead>
         <tr>
@@ -24,11 +24,11 @@ const deleteParamRow = (i: number) => vModel.value.splice(i, 1)
           </th>
 
           <th>
-            <div class="text-center font-normal mb-2">Param Name</div>
+            <div class="text-left font-normal ml-2">Param Name</div>
           </th>
 
           <th>
-            <div class="text-center font-normal mb-2">Value</div>
+            <div class="text-left font-normal ml-2">Value</div>
           </th>
 
           <th>
diff --git a/packages/nc-gui/components/webhook/Drawer.vue b/packages/nc-gui/components/webhook/Drawer.vue
index 68d12dea74..99682dc2a9 100644
--- a/packages/nc-gui/components/webhook/Drawer.vue
+++ b/packages/nc-gui/components/webhook/Drawer.vue
@@ -44,7 +44,13 @@ async function addHook() {
       </a-layout-content>
 
       <a-layout-footer class="!bg-white border-t flex">
-        <a-button v-e="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
+        <a-button
+          v-e="['e:hiring']"
+          class="mx-auto mb-4 !rounded-md"
+          href="https://angel.co/company/nocodb"
+          target="_blank"
+          size="large"
+        >
           🚀 {{ $t('labels.weAreHiring') }}! 🚀
         </a-button>
       </a-layout-footer>
diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index ebabf7809c..eaaf123e29 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -461,14 +461,14 @@ onMounted(async () => {
     </div>
 
     <div>
-      <a-button class="mr-3 nc-btn-webhook-test" size="large" @click="testWebhook">
+      <a-button class="mr-3 nc-btn-webhook-test !rounded-md" size="middle" @click="testWebhook">
         <div class="flex items-center">
           <MdiGestureDoubleTap class="mr-2" />
           {{ $t('activity.testWebhook') }}
         </div>
       </a-button>
 
-      <a-button class="nc-btn-webhook-save" type="primary" size="large" @click.prevent="saveHooks">
+      <a-button class="nc-btn-webhook-save !rounded-md" type="primary" size="middle" @click.prevent="saveHooks">
         <div class="flex items-center">
           <component :is="iconMap.save" class="mr-2" />
           <!-- Save -->
diff --git a/packages/nc-gui/components/webhook/List.vue b/packages/nc-gui/components/webhook/List.vue
index 59b2f3f63f..2f6b679fa5 100644
--- a/packages/nc-gui/components/webhook/List.vue
+++ b/packages/nc-gui/components/webhook/List.vue
@@ -108,9 +108,9 @@ onMounted(() => {
 
       <a-button
         v-e="['c:webhook:add']"
-        class="float-right nc-btn-create-webhook"
+        class="float-right !rounded-md nc-btn-create-webhook"
         type="primary"
-        size="large"
+        size="middle"
         @click="emit('add')"
       >
         {{ $t('activity.addWebhook') }}