diff --git a/src/components/integration/IntegrationSettings.tsx b/src/components/integration/IntegrationSettings.tsx
index 09cabbd8..607ff6e5 100644
--- a/src/components/integration/IntegrationSettings.tsx
+++ b/src/components/integration/IntegrationSettings.tsx
@@ -35,6 +35,8 @@ import Cookies from "js-cookie";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
+import { addWebhook, updateWebhook, removeWebhook, getWebhooks, testWebhook,WebhookConfig } from "../../api/webhook";
+
 interface IntegrationProps {
   isOpen: boolean;
   handleStart: (data: IntegrationSettings) => void;
@@ -42,14 +44,6 @@ interface IntegrationProps {
   preSelectedIntegrationType?: "googleSheets" | "airtable" | "webhook" | null;
 }
 
-export interface WebhookConfig {
-  id: string;
-  url: string;
-  events: string[];
-  active: boolean;
-  lastCalledAt?: string | null;
-}
-
 export interface IntegrationSettings {
   spreadsheetId?: string;
   spreadsheetName?: string;
@@ -156,7 +150,30 @@ export const IntegrationSettingsModal = ({
     return true;
   };
 
-  const addWebhook = async () => {
+  const fetchWebhooks = async () => {
+    try {
+      setLoading(true);
+      if (!recordingId) return;
+
+      const response = await getWebhooks(recordingId);
+
+      if (response.ok && response.webhooks) {
+        setSettings(prev => ({
+          ...prev,
+          webhooks: response.webhooks
+        }));
+      } else {
+        notify("error", response.error || "Failed to fetch webhooks");
+      }
+      setLoading(false);
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error fetching webhooks:", error);
+      notify("error", "Failed to fetch webhooks");
+    }
+  };
+
+  const addWebhookSetting = async () => {
     if (!validateWebhookData(newWebhook.url, newWebhook.events)) {
       if (!newWebhook.url) {
         notify("error", "Please provide webhook URL");
@@ -166,6 +183,8 @@ export const IntegrationSettingsModal = ({
       return;
     }
 
+    if (!recordingId) return;
+
     try {
       setLoading(true);
       const webhookWithId = {
@@ -173,31 +192,28 @@ export const IntegrationSettingsModal = ({
         id: Date.now().toString(),
       };
 
-      const response = await axios.post(
-        `${apiUrl}/webhook/add`,
-        {
-          webhook: webhookWithId,
-          robotId: recordingId,
-        },
-        { withCredentials: true }
-      );
+      const response = await addWebhook(webhookWithId, recordingId);
 
-      const updatedWebhooks = [...(settings.webhooks || []), webhookWithId];
-      setSettings({ ...settings, webhooks: updatedWebhooks });
-
-      resetWebhookForm();
-      await refreshRecordingData();
-      notify("success", "Webhook added successfully");
+      if (response.ok) {
+        const updatedWebhooks = [...(settings.webhooks || []), webhookWithId];
+        setSettings({ ...settings, webhooks: updatedWebhooks });
+        
+        resetWebhookForm();
+        await refreshRecordingData();
+        notify("success", "Webhook added successfully");
+      } else {
+        notify("error", response.error || "Failed to add webhook");
+      }
       setLoading(false);
     } catch (error: any) {
       setLoading(false);
       console.log("Error adding webhook:", error);
-      notify("error", `Error adding webhook: ${error.response?.data?.message || error.message}`);
+      notify("error", "Failed to add webhook");
     }
   };
 
-  const updateWebhook = async () => {
-    if (!editingWebhook) return;
+  const updateWebhookSetting = async () => {
+    if (!editingWebhook || !recordingId) return;
 
     if (!validateWebhookData(newWebhook.url, newWebhook.events, editingWebhook)) {
       if (!newWebhook.url) {
@@ -210,112 +226,106 @@ export const IntegrationSettingsModal = ({
 
     try {
       setLoading(true);
-      await axios.post(
-        `${apiUrl}/webhook/update`,
-        {
-          webhook: newWebhook,
-          robotId: recordingId,
-        },
-        { withCredentials: true }
-      );
+      const response = await updateWebhook(newWebhook, recordingId);
 
-      const updatedWebhooks = (settings.webhooks || []).map(w => 
-        w.id === editingWebhook ? newWebhook : w
-      );
-      setSettings({ ...settings, webhooks: updatedWebhooks });
+      if (response.ok) {
+        const updatedWebhooks = (settings.webhooks || []).map(w => 
+          w.id === editingWebhook ? newWebhook : w
+        );
+        setSettings({ ...settings, webhooks: updatedWebhooks });
 
-      resetWebhookForm();
-      await refreshRecordingData();
-      notify("success", "Webhook updated successfully");
+        resetWebhookForm();
+        await refreshRecordingData();
+        notify("success", "Webhook updated successfully");
+      } else {
+        notify("error", response.error || "Failed to update webhook");
+      }
       setLoading(false);
     } catch (error: any) {
       setLoading(false);
       console.error("Error updating webhook:", error);
-      notify("error", `Error updating webhook: ${error.response?.data?.message || error.message}`);
+      notify("error", "Failed to update webhook");
     }
   };
 
-  const removeWebhook = async (webhookId: string) => {
+  const removeWebhookSetting = async (webhookId: string) => {
+    if (!recordingId) return;
+
     try {
       setLoading(true);
-      await axios.post(
-        `${apiUrl}/webhook/remove`,
-        {
-          webhookId,
-          robotId: recordingId,
-        },
-        { withCredentials: true }
-      );
+      const response = await removeWebhook(webhookId, recordingId);
 
-      const updatedWebhooks = (settings.webhooks || []).filter(w => w.id !== webhookId);
-      setSettings({ ...settings, webhooks: updatedWebhooks });
+      if (response.ok) {
+        const updatedWebhooks = (settings.webhooks || []).filter(w => w.id !== webhookId);
+        setSettings({ ...settings, webhooks: updatedWebhooks });
 
-      await refreshRecordingData();
-      notify("success", "Webhook removed successfully");
+        await refreshRecordingData();
+        notify("success", "Webhook removed successfully");
+      } else {
+        notify("error", response.error || "Failed to remove webhook");
+      }
       setLoading(false);
     } catch (error: any) {
       setLoading(false);
       console.error("Error removing webhook:", error);
-      notify("error", `Error removing webhook: ${error.response?.data?.message || error.message}`);
+      notify("error", "Failed to remove webhook");
     }
   };
 
-  const toggleWebhookStatus = async (webhookId: string) => {
+  const toggleWebhookStatusSetting = async (webhookId: string) => {
+    if (!recordingId) return;
+
     try {
       const webhook = settings.webhooks?.find(w => w.id === webhookId);
       if (!webhook) return;
 
       const updatedWebhook = { ...webhook, active: !webhook.active };
       
-      await axios.post(
-        `${apiUrl}/webhook/update`,
-        {
-          webhook: updatedWebhook,
-          robotId: recordingId,
-        },
-        { withCredentials: true }
-      );
+      const response = await updateWebhook(updatedWebhook, recordingId);
 
-      const updatedWebhooks = (settings.webhooks || []).map(w => 
-        w.id === webhookId ? updatedWebhook : w
-      );
-      setSettings({ ...settings, webhooks: updatedWebhooks });
+      if (response.ok) {
+        const updatedWebhooks = (settings.webhooks || []).map(w => 
+          w.id === webhookId ? updatedWebhook : w
+        );
+        setSettings({ ...settings, webhooks: updatedWebhooks });
 
-      await refreshRecordingData();
-      notify("success", `Webhook ${updatedWebhook.active ? "enabled" : "disabled"}`);
+        await refreshRecordingData();
+        notify("success", `Webhook ${updatedWebhook.active ? "enabled" : "disabled"}`);
+      } else {
+        notify("error", response.error || "Failed to update webhook");
+      }
     } catch (error: any) {
       console.error("Error toggling webhook status:", error);
-      notify("error", `Error updating webhook: ${error.response?.data?.message || error.message}`);
+      notify("error", "Failed to update webhook");
     }
   };
 
-  const testWebhook = async (webhook: WebhookConfig) => {
+  const testWebhookSetting = async (webhook: WebhookConfig) => {
+    if (!recordingId) return;
+
     try {
       setLoading(true);
-      await axios.post(
-        `${apiUrl}/webhook/test`,
-        {
-          webhook,
-          robotId: recordingId,
-        },
-        { withCredentials: true }
-      );
+      const response = await testWebhook(webhook, recordingId);
 
-      const updatedWebhooks = (settings.webhooks || []).map(w => 
-        w.id === webhook.id ? { ...w, lastCalledAt: new Date().toISOString() } : w
-      );
-      setSettings({ ...settings, webhooks: updatedWebhooks });
+      if (response.ok) {
+        const updatedWebhooks = (settings.webhooks || []).map(w => 
+          w.id === webhook.id ? { ...w, lastCalledAt: new Date().toISOString() } : w
+        );
+        setSettings({ ...settings, webhooks: updatedWebhooks });
 
-      notify("success", "Test webhook sent successfully");
+        notify("success", "Test webhook sent successfully");
+      } else {
+        notify("error", response.error || "Failed to test webhook");
+      }
       setLoading(false);
     } catch (error: any) {
       setLoading(false);
       console.error("Error testing webhook:", error);
-      notify("error", `Error testing webhook: ${error.response?.data?.message || error.message}`);
+      notify("error", "Failed to test webhook");
     }
   };
 
-  const editWebhook = (webhook: WebhookConfig) => {
+  const editWebhookSetting = (webhook: WebhookConfig) => {
     setNewWebhook(webhook);
     setEditingWebhook(webhook.id);
     setShowWebhookForm(true);
@@ -430,6 +440,9 @@ export const IntegrationSettingsModal = ({
     if (!recordingId) return null;
     const updatedRecording = await getStoredRecording(recordingId);
     setRecording(updatedRecording);
+    
+    await fetchWebhooks();
+    
     setRerenderRobots(true);
     return updatedRecording;
   };
@@ -568,8 +581,7 @@ export const IntegrationSettingsModal = ({
 
         if (preSelectedIntegrationType) {
           setSettings(prev => ({ ...prev, integrationType: preSelectedIntegrationType }));
-        }
-        else if (recording.google_sheet_id) {
+        } else if (recording.google_sheet_id) {
           setSettings(prev => ({ ...prev, integrationType: "googleSheets" }));
         } else if (recording.airtable_base_id) {
           setSettings(prev => ({
@@ -578,15 +590,18 @@ export const IntegrationSettingsModal = ({
             airtableBaseName: recording.airtable_base_name || "",
             airtableTableName: recording.airtable_table_name || "",
             airtableTableId: recording.airtable_table_id || "",
-            integrationType: recording.airtable_base_id ? "airtable" : "googleSheets"
-          }));
-        } else if (recording.webhooks && recording.webhooks.length > 0) {
-          setSettings(prev => ({
-            ...prev,
-            webhooks: recording.webhooks,
-            integrationType: "webhook"
+            integrationType: "airtable"
           }));
         }
+
+        await fetchWebhooks();
+        
+        if (!preSelectedIntegrationType && !recording.google_sheet_id && !recording.airtable_base_id) {
+          const webhookResponse = await getWebhooks(recordingId);
+          if (webhookResponse.ok && webhookResponse.webhooks && webhookResponse.webhooks.length > 0) {
+            setSettings(prev => ({ ...prev, integrationType: "webhook" }));
+          }
+        }
       }
 
       setLoading(false);
@@ -617,8 +632,6 @@ export const IntegrationSettingsModal = ({
     switch (event) {
       case "run_completed":
         return "Run finished";
-      case "run_completed_success":
-        return "Run finished successfully";
       case "run_failed":
         return "Run failed";
       default:
@@ -680,7 +693,7 @@ export const IntegrationSettingsModal = ({
               }}
               style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}
             >
-              <img src="/public/svg/gsheet.svg" alt="Google Sheets" style={{ margin: "6px" }} />
+              <img src="/svg/gsheet.svg" alt="Google Sheets" style={{ margin: "6px" }} />
               Google Sheets
             </Button>
 
@@ -693,7 +706,7 @@ export const IntegrationSettingsModal = ({
               }}
               style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}
             >
-              <img src="/public/svg/airtable.svg" alt="Airtable" style={{ margin: "6px" }} />
+              <img src="/svg/airtable.svg" alt="Airtable" style={{ margin: "6px" }} />
               Airtable
             </Button>
 
@@ -706,7 +719,7 @@ export const IntegrationSettingsModal = ({
               }}
               style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}
             >
-              <img src="/public/svg/webhook.svg" alt="Webhook" style={{ margin: "6px" }} />
+              <img src="/svg/webhook.svg" alt="Webhook" style={{ margin: "6px" }} />
               Webhooks
             </Button>
           </div>
@@ -968,7 +981,7 @@ export const IntegrationSettingsModal = ({
                         <TableCell>
                           <Switch
                             checked={webhook.active}
-                            onChange={() => toggleWebhookStatus(webhook.id)}
+                            onChange={() => toggleWebhookStatusSetting(webhook.id)}
                             size="small"
                           />
                         </TableCell>
@@ -976,7 +989,7 @@ export const IntegrationSettingsModal = ({
                           <Box sx={{ display: "flex", gap: "8px" }}>
                             <IconButton
                               size="small"
-                              onClick={() => testWebhook(webhook)}
+                              onClick={() => testWebhookSetting(webhook)}
                               disabled={loading || !webhook.active}
                               title="Test"
                             >
@@ -984,7 +997,7 @@ export const IntegrationSettingsModal = ({
                             </IconButton>
                             <IconButton
                               size="small"
-                              onClick={() => editWebhook(webhook)}
+                              onClick={() => editWebhookSetting(webhook)}
                               disabled={loading}
                               title="Edit"
                             >
@@ -992,7 +1005,7 @@ export const IntegrationSettingsModal = ({
                             </IconButton>
                             <IconButton
                               size="small"
-                              onClick={() => removeWebhook(webhook.id)}
+                              onClick={() => removeWebhookSetting(webhook.id)}
                               disabled={loading}
                               title="Delete"
                             >
@@ -1033,7 +1046,6 @@ export const IntegrationSettingsModal = ({
                     sx={{ minWidth: "200px" }}
                   >
                     <MenuItem value="run_completed">Run finished</MenuItem>
-                    <MenuItem value="run_completed_success">Run finished successfully</MenuItem>
                     <MenuItem value="run_failed">Run failed</MenuItem>
                   </TextField>
                 </Box>
@@ -1057,7 +1069,7 @@ export const IntegrationSettingsModal = ({
                       if (!validateWebhookData(newWebhook.url, newWebhook.events)) {
                         return;
                       }
-                      addWebhook();
+                      addWebhookSetting();
                     }}
                     disabled={!newWebhook.url || !newWebhook.events || newWebhook.events.length === 0 || loading || !!urlError}
                   >
@@ -1112,7 +1124,6 @@ export const IntegrationSettingsModal = ({
                     required
                   >
                     <MenuItem value="run_completed">Run finished</MenuItem>
-                    <MenuItem value="run_completed_success">Run finished successfully</MenuItem>
                     <MenuItem value="run_failed">Run failed</MenuItem>
                   </TextField>
                   
@@ -1132,7 +1143,7 @@ export const IntegrationSettingsModal = ({
                   <Button
                     variant="contained"
                     color="primary"
-                    onClick={editingWebhook ? updateWebhook : addWebhook}
+                    onClick={editingWebhook ? updateWebhookSetting : addWebhookSetting}
                     disabled={!newWebhook.url || !newWebhook.events || newWebhook.events.length === 0 || loading || !!urlError}
                   >
                     {loading ? (