diff --git a/frontend/app/components/Client/Webhooks/ListItem.js b/frontend/app/components/Client/Webhooks/ListItem.js
index 3e177d47e..3ea0e691b 100644
--- a/frontend/app/components/Client/Webhooks/ListItem.js
+++ b/frontend/app/components/Client/Webhooks/ListItem.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from 'UI';
 
-const ListItem = ({ webhook, onEdit, onDelete }) => {
+const ListItem = ({ webhook, onEdit }) => {
     return (
         <div className="border-t group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer" onClick={onEdit}>
             <div>
diff --git a/frontend/app/components/Client/Webhooks/Webhooks.js b/frontend/app/components/Client/Webhooks/Webhooks.tsx
similarity index 82%
rename from frontend/app/components/Client/Webhooks/Webhooks.js
rename to frontend/app/components/Client/Webhooks/Webhooks.tsx
index 0e1a0214c..ef85e9a47 100644
--- a/frontend/app/components/Client/Webhooks/Webhooks.js
+++ b/frontend/app/components/Client/Webhooks/Webhooks.tsx
@@ -11,23 +11,24 @@ import { toast } from 'react-toastify';
 import { useModal } from 'App/components/Modal';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite'
+import { IWebhook } from 'Types/webhook';
 
 function Webhooks() {
     const { settingsStore } = useStore()
     const { webhooks, hooksLoading: loading } = settingsStore;
     const { showModal, hideModal } = useModal();
 
-    const noSlackWebhooks = webhooks.filter((hook) => hook.type === 'webhook');
+    const customWebhooks = webhooks.filter((hook) => hook.type === 'webhook');
     useEffect(() => {
         void settingsStore.fetchWebhooks();
     }, []);
 
-    const init = (v) => {
-        settingsStore.initWebhook(v);
-        showModal(<WebhookForm onClose={hideModal} onDelete={removeWebhook} />);
+    const init = (webhookInst?: Partial<IWebhook>) => {
+        settingsStore.initWebhook(webhookInst);
+        showModal(<WebhookForm onClose={hideModal} onDelete={removeWebhook} />, { right: true });
     };
 
-    const removeWebhook = async (id) => {
+    const removeWebhook = async (id: string) => {
         if (
             await confirm({
                 header: 'Confirm',
@@ -63,11 +64,11 @@ function Webhooks() {
                         </div>
                     }
                     size="small"
-                    show={noSlackWebhooks.length === 0}
+                    show={customWebhooks.length === 0}
                 >
                     <div className="cursor-pointer">
-                        {noSlackWebhooks.map((webhook) => (
-                            <ListItem key={webhook.key} webhook={webhook} onEdit={() => init(webhook)} />
+                        {customWebhooks.map((webhook) => (
+                            <ListItem key={webhook.webhookId} webhook={webhook} onEdit={() => init(webhook)} />
                         ))}
                     </div>
                 </NoContent>
diff --git a/frontend/app/mstore/settingsStore.ts b/frontend/app/mstore/settingsStore.ts
index 2f1dcba4e..d9dfb0dd3 100644
--- a/frontend/app/mstore/settingsStore.ts
+++ b/frontend/app/mstore/settingsStore.ts
@@ -62,7 +62,7 @@ export default class SettingsStore {
       })
   }
 
-  initWebhook = (inst: Partial<IWebhook> | Webhook) => {
+  initWebhook = (inst?: Partial<IWebhook> | Webhook) => {
     this.webhookInst = inst instanceof Webhook ? inst : new Webhook(inst)
   }
 
@@ -71,6 +71,7 @@ export default class SettingsStore {
     return webhookService.saveWebhook(inst)
      .then(data => {
         this.webhookInst = new Webhook(data)
+        this.webhooks =  [...this.webhooks, this.webhookInst]
        this.hooksLoading = false
      })
   }