From be13bdf18e10237330e1bfce09810ce7c86a2296 Mon Sep 17 00:00:00 2001
From: Ram Shukla <codewithrex@gmail.com>
Date: Thu, 22 Jan 2026 15:57:20 +0530
Subject: [PATCH] fix: Matched styling of Webhooks just like api keys page.
 (#27116)

* fixed text issue

* fixed text issue

* matched style of api keys page
---
 apps/web/modules/webhooks/views/webhooks-skeleton.tsx |  4 ++--
 apps/web/modules/webhooks/views/webhooks-view.tsx     | 11 +++++------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/web/modules/webhooks/views/webhooks-skeleton.tsx b/apps/web/modules/webhooks/views/webhooks-skeleton.tsx
index 6b6fb5643b..1e9a71c9ac 100644
--- a/apps/web/modules/webhooks/views/webhooks-skeleton.tsx
+++ b/apps/web/modules/webhooks/views/webhooks-skeleton.tsx
@@ -11,10 +11,10 @@ export const SkeletonLoader = () => {
     <SettingsHeader
       title={t("webhooks")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      borderInShellHeader={false}
+      borderInShellHeader={true}
       CTA={null}>
       <SkeletonContainer>
-        <div className="divide-subtle border-subtle mt-6 stack-y-6 rounded-lg border px-6 py-4">
+        <div className="divide-subtle border-subtle stack-y-6 rounded-b-lg border border-t-0 px-6 py-4">
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
         </div>
diff --git a/apps/web/modules/webhooks/views/webhooks-view.tsx b/apps/web/modules/webhooks/views/webhooks-view.tsx
index f1457c8fbb..5d8f3cc1cf 100644
--- a/apps/web/modules/webhooks/views/webhooks-view.tsx
+++ b/apps/web/modules/webhooks/views/webhooks-view.tsx
@@ -39,10 +39,10 @@ const WebhooksList = ({ webhooksByViewer }: { webhooksByViewer: WebhooksByViewer
     <SettingsHeader
       title={t("webhooks")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      CTA={webhooksByViewer.webhookGroups.length > 0 ? <CreateNewWebhookButton /> : null}
-      borderInShellHeader={false}>
+      CTA={<CreateNewWebhookButton />}
+      borderInShellHeader={true}>
       {webhookGroups.length ? (
-        <div className={classNames("mt-6")}>
+        <div>
           {webhookGroups.map((group) => (
             <div key={group.teamId}>
               {hasTeams && (
@@ -59,7 +59,7 @@ const WebhooksList = ({ webhooksByViewer }: { webhooksByViewer: WebhooksByViewer
                 </div>
               )}
               <div className="flex flex-col" key={group.profile.slug}>
-                <div className={classNames("border-subtle mb-8 mt-3 rounded-lg border border-t")}>
+                <div className={classNames("border-subtle mb-8 rounded-b-lg border border-t-0", hasTeams && "mt-3")}>
                   {group.webhooks.map((webhook, index) => (
                     <WebhookListItem
                       key={webhook.id}
@@ -84,9 +84,8 @@ const WebhooksList = ({ webhooksByViewer }: { webhooksByViewer: WebhooksByViewer
           Icon="link"
           headline={t("create_your_first_webhook")}
           description={t("create_your_first_webhook_description", { appName: APP_NAME })}
-          className="mt-6 rounded-b-lg"
+          className="rounded-b-lg rounded-t-none border-t-0"
           buttonRaw={<CreateNewWebhookButton />}
-          border={true}
         />
       )}
     </SettingsHeader>