diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index 258d89c5c..0f6bf834d 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -168,7 +168,7 @@
             </DropList>
         {/if}
     </div>
-    
+
     <slot {isButtonDisabled}>
         {#if buttonText}
             <ContainerButton
@@ -179,5 +179,4 @@
                 {buttonMethod} />
         {/if}
     </slot>
-
 </header>
diff --git a/src/routes/console/project-[project]/settings/webhooks/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
index a5ebd2c92..dbf8b2971 100644
--- a/src/routes/console/project-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
@@ -7,10 +7,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { 
-      Empty,
-      Id, 
-    } from '$lib/components';
+    import { Empty, Id } from '$lib/components';
     import {
         TableBody,
         TableRowLink,
@@ -18,7 +15,7 @@
         TableCell,
         TableCellText,
         TableHeader,
-        TableScroll,
+        TableScroll
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container, GridHeader } from '$lib/layout';
@@ -30,12 +27,12 @@
     import Create from './createWebhook.svelte';
     import FailedModal from './failedModal.svelte';
     import MessageStatusPill from './messageStatusPill.svelte';
-  
+
     export let data: PageData;
 
     let showFailed = false;
     let selectedWebhook = {};
-    
+
     function openWizard() {
         wizard.start(Create);
     }
@@ -52,76 +49,69 @@
 </svelte:head>
 
 <Container>
-  <GridHeader
-  title="Webhooks"
-  {columns}
-  view={data.view}
-  hideColumns={false}
-  hideView={true}>
-  <Button on:click={openWizard} event="create_webhook">
-      <span class="icon-plus" aria-hidden="true" />
-      <span class="text">Create Webhook</span>
-  </Button>
-</GridHeader>
-
+    <GridHeader title="Webhooks" {columns} view={data.view} hideColumns={false} hideView={true}>
+        <Button on:click={openWizard} event="create_webhook">
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create Webhook</span>
+        </Button>
+    </GridHeader>
 
     {#if data.webhooks.total}
         <TableScroll>
             <TableHeader>
-              {#each $columns as column}
-                {#if column.show}
-                  <TableCellHead width={column.width}>{column.title}</TableCellHead>
-                {/if}
-              {/each}
+                {#each $columns as column}
+                    {#if column.show}
+                        <TableCellHead width={column.width}>{column.title}</TableCellHead>
+                    {/if}
+                {/each}
             </TableHeader>
             <TableBody service="webhooks" total={data.webhooks.total}>
                 {#each data.webhooks.webhooks as webhook}
                     <TableRowLink
                         href={`${base}/console/project-${projectId}/settings/webhooks/${webhook.$id}`}>
                         {#each $columns as column (column.id)}
-                          {#if column.show}
-                            {#if column.id === '$id'}
-                              {#key $columns}
-                                  <TableCell title={column.title} width={column.width}>
-                                      <Id value={webhook.$id}>{webhook.$id}</Id>
-                                  </TableCell>
-                              {/key}
-                            {:else if column.id === 'events'}
-                              <TableCellText title={column.title} width={column.width}>
-                                {webhook.events.length}
-                              </TableCellText>
-                              {:else if column.type === 'datetime'}
-                              <TableCellText title={column.title} width={column.width}>
-                                  {#if !webhook[column.id]}
-                                      -
-                                  {:else}
-                                      {toLocaleDateTime(webhook[column.id])}
-                                  {/if}
-                              </TableCellText>
+                            {#if column.show}
+                                {#if column.id === '$id'}
+                                    {#key $columns}
+                                        <TableCell title={column.title} width={column.width}>
+                                            <Id value={webhook.$id}>{webhook.$id}</Id>
+                                        </TableCell>
+                                    {/key}
+                                {:else if column.id === 'events'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {webhook.events.length}
+                                    </TableCellText>
+                                {:else if column.type === 'datetime'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {#if !webhook[column.id]}
+                                            -
+                                        {:else}
+                                            {toLocaleDateTime(webhook[column.id])}
+                                        {/if}
+                                    </TableCellText>
+                                {:else if column.id === 'enabled'}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        <MessageStatusPill enabled={webhook.enabled} />
 
-                            {:else if column.id === 'enabled'}
-                                <TableCellText title={column.title} width={column.width}>
-                                  <MessageStatusPill enabled={webhook.enabled} />
+                                        &nbsp;
 
-                                  &nbsp; 
-                                  
-                                  {#if webhook.enabled === false && webhook.attempts > 0}
-                                      <Button link
-                                        on:click={(e) => {
-                                          e.preventDefault();
-                                          console.log(webhook);
-                                          selectedWebhook = webhook;
-                                          showFailed = true;
-                                      }}>Details</Button>
-
-                                    {/if}
-                                </TableCellText>
-                            {:else}
-                                <TableCellText title={column.title} width={column.width}>
-                                    {webhook[column.id]}
-                                </TableCellText>
+                                        {#if webhook.enabled === false && webhook.attempts > 0}
+                                            <Button
+                                                link
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    console.log(webhook);
+                                                    selectedWebhook = webhook;
+                                                    showFailed = true;
+                                                }}>Details</Button>
+                                        {/if}
+                                    </TableCellText>
+                                {:else}
+                                    <TableCellText title={column.title} width={column.width}>
+                                        {webhook[column.id]}
+                                    </TableCellText>
+                                {/if}
                             {/if}
-                          {/if}
                         {/each}
                     </TableRowLink>
                 {/each}
@@ -136,6 +126,4 @@
     {/if}
 </Container>
 
-<FailedModal 
-  bind:show={showFailed} 
-  bind:webhook={selectedWebhook}/>
+<FailedModal bind:show={showFailed} bind:webhook={selectedWebhook} />
diff --git a/src/routes/console/project-[project]/settings/webhooks/+page.ts b/src/routes/console/project-[project]/settings/webhooks/+page.ts
index ce78bcbfe..10e665b00 100644
--- a/src/routes/console/project-[project]/settings/webhooks/+page.ts
+++ b/src/routes/console/project-[project]/settings/webhooks/+page.ts
@@ -1,9 +1,5 @@
 import { Dependencies } from '$lib/constants';
-import {
-    View,
-    getPage,
-    getView,
-} from '$lib/helpers/load';
+import { View, getPage, getView } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
@@ -14,8 +10,8 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
     const view = getView(url, route, View.Grid);
 
     return {
-      page,
-      view,
-      webhooks: await sdk.forConsole.projects.listWebhooks(params.project)
+        page,
+        view,
+        webhooks: await sdk.forConsole.projects.listWebhooks(params.project)
     };
 };
diff --git a/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte b/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte
index 4f1332a2b..9b282e914 100644
--- a/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/failedModal.svelte
@@ -7,7 +7,7 @@
     import Button from '$lib/elements/forms/button.svelte';
 
     export let show: boolean;
-    export let webhook: {[key: string]: any};
+    export let webhook: { [key: string]: any };
 
     const projectId = $page.params.project;
     const webhookPath = `${base}/console/project-${projectId}/settings/webhooks/${webhook.$id}`;
@@ -16,24 +16,21 @@
 <Modal title="Webhook error" headerDivider={false} bind:show size="big">
     <div class="box u-flex-vertical u-gap-24">
         <div class="u-inline-flex u-cross-center u-gap-8">
-          <p class="u-stretch">
-            <span
-                class="icon-exclamation-circle u-font-size-20"
-                aria-hidden="true"
-                style="color:hsl(var(--color-danger-100));" />
-            <span>Webhook {webhook.enabled ? "enabled" : "disabled"}</span>
-          </p>
+            <p class="u-stretch">
+                <span
+                    class="icon-exclamation-circle u-font-size-20"
+                    aria-hidden="true"
+                    style="color:hsl(var(--color-danger-100));" />
+                <span>Webhook {webhook.enabled ? 'enabled' : 'disabled'}</span>
+            </p>
 
-            <Button
-                secondary
-                href={webhookPath}
-                event="update_webhook">
-                Update Webhook  
-            </Button>
-          </div>
+            <Button secondary href={webhookPath} event="update_webhook">Update Webhook</Button>
+        </div>
 
         <p>
-          The connection to {webhook.url} stopped after {webhook.attempts} consecutive failures. Please refer to the logs below for more information or try to update the webhook to resolve this issue.
+            The connection to {webhook.url} stopped after {webhook.attempts} consecutive failures. Please
+            refer to the logs below for more information or try to update the webhook to resolve this
+            issue.
         </p>
         <div style="max-inline-size: 524px">
             <Code language="html" code={webhook.logs} noMargin noBoxPadding allowScroll />
diff --git a/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte b/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte
index be4d09a6e..3b4fafae6 100644
--- a/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/messageStatusPill.svelte
@@ -1,22 +1,16 @@
 <script lang="ts">
     import { Pill } from '$lib/elements';
 
-    export let enabled:boolean;
+    export let enabled: boolean;
 
-    const style = `color: ${enabled ? "hsl(var(--color-success-100))" : "hsl(var(--color-danger-100))"}`;
-    const iconClass = enabled ? "icon-check-circle" : "icon-exclamation-circle";
+    const style = `color: ${enabled ? 'hsl(var(--color-success-100))' : 'hsl(var(--color-danger-100))'}`;
+    const iconClass = enabled ? 'icon-check-circle' : 'icon-exclamation-circle';
 </script>
 
-<Pill
-    success={enabled}
-    danger={!enabled}
-    on:click>
+<Pill success={enabled} danger={!enabled} on:click>
     <span class="text u-font-size-12 u-trim">
-      <span
-      class={`${iconClass} u-font-size-12`}
-      aria-hidden="true"
-      style={style} />
-  
-      <span>{enabled ? "enabled" : "stopped"}</span>
-</span>
+        <span class={`${iconClass} u-font-size-12`} aria-hidden="true" {style} />
+
+        <span>{enabled ? 'enabled' : 'stopped'}</span>
+    </span>
 </Pill>