From e84664e26d041a85f5ba9830b960c1ea9346f535 Mon Sep 17 00:00:00 2001
From: Shahar Glazner <shaharglazner@gmail.com>
Date: Tue, 22 Oct 2024 16:57:45 +0300
Subject: [PATCH] refactor: use nginx instead of rewrite rules (#2253)

---
 keep-ui/app/ai/ai.tsx                         |   4 +-
 keep-ui/app/alerts/ViewAlertModal.tsx         |  96 ++++++----
 keep-ui/app/alerts/alert-actions.tsx          |  24 +--
 .../app/alerts/alert-assign-ticket-modal.tsx  |  13 +-
 .../alerts/alert-associate-incident-modal.tsx |   4 +-
 .../app/alerts/alert-change-status-modal.tsx  |  38 ++--
 keep-ui/app/alerts/alert-dismiss-modal.tsx    |  38 +++-
 keep-ui/app/alerts/alert-menu.tsx             |  23 +--
 keep-ui/app/alerts/alert-method-modal.tsx     |   4 +-
 keep-ui/app/alerts/alert-note-modal.tsx       |   5 +-
 keep-ui/app/alerts/alert-presets.tsx          |  12 +-
 .../alert-push-alert-to-server-modal.tsx      |   5 +-
 .../app/alerts/alert-run-workflow-modal.tsx   |  88 +++++++++
 keep-ui/app/alerts/alert-tab-modal.tsx        |  53 +++---
 keep-ui/app/alerts/alert-tabs.tsx             |  96 ++++++----
 keep-ui/app/dashboard/[id]/dashboard.tsx      | 113 ++++++-----
 .../deduplication/DeduplicationSidebar.tsx    |   4 +-
 .../app/deduplication/DeduplicationTable.tsx  |   5 +-
 .../create-or-update-extraction-rule.tsx      |   5 +-
 keep-ui/app/extraction/extractions-table.tsx  |   4 +-
 .../incidents/[id]/incident-alert-menu.tsx    |   4 +-
 keep-ui/app/incidents/[id]/incident-chat.tsx  |   3 +
 keep-ui/app/incidents/[id]/incident-info.tsx  |   4 +
 .../incidents/create-or-update-incident.tsx   |  42 +++--
 .../incidents/incident-candidate-actions.tsx  |  59 +++---
 .../incident-change-same-in-the-past.tsx      |   3 +
 .../incident-change-status-modal.tsx          |  27 +--
 keep-ui/app/incidents/incidents-table.tsx     |  16 +-
 .../incidents/predicted-incidents-table.tsx   |  59 ++++--
 .../create-or-update-maintenance-rule.tsx     |   6 +-
 .../maintenance/maintenance-rules-table.tsx   |  10 +-
 .../app/mapping/create-or-edit-mapping.tsx    |   5 +-
 keep-ui/app/mapping/rules-table.tsx           |   4 +-
 .../providers/oauth2/[providerType]/page.tsx  |   3 +-
 keep-ui/app/providers/page.client.tsx         |   5 +-
 keep-ui/app/providers/provider-form.tsx       |  16 +-
 .../app/providers/provider-semi-automated.tsx |  46 ++---
 .../CorrelationSidebarBody.tsx                |   4 +-
 .../rules/CorrelationSidebar/DeleteRule.tsx   |   4 +-
 .../app/settings/auth/api-key-settings.tsx    |  27 ++-
 keep-ui/app/settings/auth/groups-sidebar.tsx  |  67 +++++--
 keep-ui/app/settings/auth/groups-tab.tsx      |  53 ++++--
 keep-ui/app/settings/auth/permissions-tab.tsx | 176 ++++++++++++------
 keep-ui/app/settings/auth/roles-sidebar.tsx   | 137 +++++++++++---
 keep-ui/app/settings/auth/roles-tab.tsx       | 137 ++++++++------
 keep-ui/app/settings/auth/sso-settings.tsx    |  56 ++++--
 keep-ui/app/settings/auth/users-menu.tsx      |   5 +-
 keep-ui/app/settings/auth/users-settings.tsx  |  54 +++---
 keep-ui/app/settings/auth/users-sidebar.tsx   | 154 +++++++++------
 keep-ui/app/settings/smtp-settings.tsx        |   4 +-
 keep-ui/app/settings/webhook-settings.tsx     |  16 +-
 keep-ui/app/topology/api/index.ts             |  33 ++--
 keep-ui/app/topology/model/useTopology.ts     |   7 +-
 .../topology/model/useTopologyApplications.ts |  13 +-
 keep-ui/app/topology/page.tsx                 |   6 +-
 .../workflows/builder/[workflowId]/page.tsx   |   1 +
 .../app/workflows/builder/builder-card.tsx    |  10 +-
 keep-ui/app/workflows/builder/builder.tsx     |   6 +-
 .../builder/workflow-execution-results.tsx    |   4 +-
 keep-ui/app/workflows/dragndrop.tsx           |  36 ++--
 .../workflows/manual-run-workflow-modal.tsx   |  17 +-
 keep-ui/app/workflows/mockworkflows.tsx       |  19 +-
 keep-ui/app/workflows/workflow-tile.tsx       |   6 +-
 keep-ui/app/workflows/workflows.client.tsx    |   4 +-
 .../navbar/CustomPresetAlertLinks.tsx         |  51 ++---
 keep-ui/components/navbar/DashboardLinks.tsx  |   4 +-
 keep-ui/middleware.tsx                        |   2 +
 keep-ui/pages/api/config.tsx                  |  14 +-
 keep-ui/types/internal-config.ts              |   6 +
 keep-ui/utils/apiUrl.ts                       |  19 +-
 keep-ui/utils/helpers.ts                      |  11 +-
 keep-ui/utils/hooks/useAI.ts                  |   7 +-
 keep-ui/utils/hooks/useAlerts.ts              |   4 +-
 keep-ui/utils/hooks/useConfig.ts              |  12 ++
 keep-ui/utils/hooks/useDashboards.ts          |   4 +-
 keep-ui/utils/hooks/useDeduplicationRules.ts  |   6 +-
 keep-ui/utils/hooks/useExtractionRules.ts     |   4 +-
 keep-ui/utils/hooks/useGroups.ts              |   4 +-
 keep-ui/utils/hooks/useIncidents.ts           |  14 +-
 keep-ui/utils/hooks/useMaintenanceRules.ts    |   4 +-
 keep-ui/utils/hooks/useMappingRules.ts        |   4 +-
 keep-ui/utils/hooks/usePermissions.ts         |   4 +-
 keep-ui/utils/hooks/usePresets.ts             |  49 ++++-
 keep-ui/utils/hooks/useProviders.ts           |   4 +-
 keep-ui/utils/hooks/usePusher.ts              | 102 ++++++++--
 keep-ui/utils/hooks/useRoles.ts               |   4 +-
 keep-ui/utils/hooks/useRules.ts               |   4 +-
 keep-ui/utils/hooks/useScopes.ts              |   4 +-
 keep-ui/utils/hooks/useSearchAlerts.ts        |   6 +-
 keep-ui/utils/hooks/useTags.ts                |   5 +-
 keep-ui/utils/hooks/useUsers.ts               |   4 +-
 keep-ui/utils/hooks/useWorkflowExecutions.ts  |   8 +-
 keep-ui/utils/hooks/useWorkflowRun.ts         |   5 +-
 keep-ui/utils/hooks/useWorkflows.ts           |   4 +-
 pyproject.toml                                |   2 +-
 95 files changed, 1536 insertions(+), 841 deletions(-)
 create mode 100644 keep-ui/app/alerts/alert-run-workflow-modal.tsx

diff --git a/keep-ui/app/ai/ai.tsx b/keep-ui/app/ai/ai.tsx
index 69f331629..7e9d23aa7 100644
--- a/keep-ui/app/ai/ai.tsx
+++ b/keep-ui/app/ai/ai.tsx
@@ -2,7 +2,7 @@
 import { Card, List, ListItem, Title, Subtitle } from "@tremor/react";
 import { useAIStats, usePollAILogs } from "utils/hooks/useAI";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
 import { useEffect, useState, useRef, FormEvent } from "react";
 import { AILogs } from "./model";
@@ -15,6 +15,7 @@ export default function Ai() {
   const [newText, setNewText] = useState("Mine incidents");
   const [animate, setAnimate] = useState(false);
   const onlyOnce = useRef(false);
+  const apiUrl = useApiUrl();
 
   const mutateAILogs = (logs: AILogs) => {
     setBasicAlgorithmLog(logs.log);
@@ -42,7 +43,6 @@ export default function Ai() {
     e.preventDefault();
     setAnimate(true);
     setNewText("Mining 🚀🚀🚀 ...");
-    const apiUrl = getApiURL();
     const response = await fetch(`${apiUrl}/incidents/mine`, {
       method: "POST",
       headers: {
diff --git a/keep-ui/app/alerts/ViewAlertModal.tsx b/keep-ui/app/alerts/ViewAlertModal.tsx
index 9284d9474..6bbeca28f 100644
--- a/keep-ui/app/alerts/ViewAlertModal.tsx
+++ b/keep-ui/app/alerts/ViewAlertModal.tsx
@@ -1,12 +1,12 @@
 import { AlertDto } from "./models"; // Adjust the import path as needed
 import Modal from "@/components/ui/Modal"; // Ensure this path matches your project structure
-import {Button, Icon, Switch, Text} from "@tremor/react";
+import { Button, Icon, Switch, Text } from "@tremor/react";
 import { toast } from "react-toastify";
-import { getApiURL } from "../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import "./ViewAlertModal.css";
-import React, {useState} from "react";
+import React, { useState } from "react";
 
 interface ViewAlertModalProps {
   alert: AlertDto | null | undefined;
@@ -14,14 +14,19 @@ interface ViewAlertModalProps {
   mutate: () => void;
 }
 
-const objectToJSONLine = (obj: any) =>  {
+const objectToJSONLine = (obj: any) => {
   return JSON.stringify(obj, null, 2).slice(2, -2);
-}
+};
 
-export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({ alert, handleClose, mutate}) => {
+export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({
+  alert,
+  handleClose,
+  mutate,
+}) => {
   const isOpen = !!alert;
   const [showHighlightedOnly, setShowHighlightedOnly] = useState(false);
-  const {data: session} = useSession();
+  const { data: session } = useSession();
+  const apiUrl = useApiUrl();
 
   const unEnrichAlert = async (key: string) => {
     if (confirm(`Are you sure you want to un-enrich ${key}?`)) {
@@ -30,7 +35,7 @@ export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({ alert, handleClo
           enrichments: [key],
           fingerprint: alert!.fingerprint,
         };
-        const response = await fetch(`${getApiURL()}/alerts/unenrich`, {
+        const response = await fetch(`${apiUrl}/alerts/unenrich`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -52,35 +57,46 @@ export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({ alert, handleClo
         toast.error("An unexpected error occurred");
       }
     }
-  }
+  };
 
   const highlightKeys = (json: any, keys: string[]) => {
-
     const lines = Object.keys(json).length;
-    const isLast = (index: number) => index == lines - 1
+    const isLast = (index: number) => index == lines - 1;
 
     return Object.keys(json).map((key: string, index: number) => {
       if (keys.includes(key)) {
-        return <p key={key} className="text-green-600 cursor-pointer line-container" onClick={() => unEnrichAlert(key)}>
-          <span className="un-enrich-icon">
-            <Icon
-              icon={XMarkIcon}
-              tooltip={`Click to un-enrich ${key}`}
-              size="xs"
-              color="red"
-              className="cursor-pointer px-0 py-0"
-              variant="outlined"
-            />
-          </span>
-          {objectToJSONLine({[key]: json[key]})}{isLast(index) ? null : ","}
-        </p>
+        return (
+          <p
+            key={key}
+            className="text-green-600 cursor-pointer line-container"
+            onClick={() => unEnrichAlert(key)}
+          >
+            <span className="un-enrich-icon">
+              <Icon
+                icon={XMarkIcon}
+                tooltip={`Click to un-enrich ${key}`}
+                size="xs"
+                color="red"
+                className="cursor-pointer px-0 py-0"
+                variant="outlined"
+              />
+            </span>
+            {objectToJSONLine({ [key]: json[key] })}
+            {isLast(index) ? null : ","}
+          </p>
+        );
       } else {
         if (!showHighlightedOnly || keys.length == 0) {
-          return <p key={key}>{objectToJSONLine({[key]: json[key]})}{isLast(index) ? null : ","}</p>
+          return (
+            <p key={key}>
+              {objectToJSONLine({ [key]: json[key] })}
+              {isLast(index) ? null : ","}
+            </p>
+          );
         }
       }
-    })
-  }
+    });
+  };
 
   const handleCopy = async () => {
     if (alert) {
@@ -94,23 +110,31 @@ export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({ alert, handleClo
   };
 
   return (
-    <Modal onClose={handleClose} isOpen={isOpen} className="overflow-visible max-w-fit">
+    <Modal
+      onClose={handleClose}
+      isOpen={isOpen}
+      className="overflow-visible max-w-fit"
+    >
       <div className="flex justify-between items-center mb-4 min-w-full">
         <h2 className="text-lg font-semibold">Alert Details</h2>
-        <div className="flex gap-x-2"> {/* Adjust gap as needed */}
+        <div className="flex gap-x-2">
+          {" "}
+          {/* Adjust gap as needed */}
           <div className="placeholder-resizing min-w-48"></div>
           <div className="flex items-center space-x-2">
             <Switch
-            color="orange"
-            id="showHighlightedOnly"
-            checked={showHighlightedOnly}
-            onChange={() => setShowHighlightedOnly(!showHighlightedOnly)}
-          />
-            <label htmlFor="showHighlightedOnly" className="text-sm text-gray-500">
+              color="orange"
+              id="showHighlightedOnly"
+              checked={showHighlightedOnly}
+              onChange={() => setShowHighlightedOnly(!showHighlightedOnly)}
+            />
+            <label
+              htmlFor="showHighlightedOnly"
+              className="text-sm text-gray-500"
+            >
               <Text>Enriched Fields Only</Text>
             </label>
           </div>
-
           <Button onClick={handleCopy} color="orange">
             Copy to Clipboard
           </Button>
diff --git a/keep-ui/app/alerts/alert-actions.tsx b/keep-ui/app/alerts/alert-actions.tsx
index 87a7be34c..5a4366944 100644
--- a/keep-ui/app/alerts/alert-actions.tsx
+++ b/keep-ui/app/alerts/alert-actions.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button } from "@tremor/react";
 import { getSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { AlertDto } from "./models";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { toast } from "react-toastify";
@@ -23,14 +23,16 @@ export default function AlertActions({
   alerts,
   clearRowSelection,
   setDismissModalAlert,
-  mutateAlerts
+  mutateAlerts,
 }: Props) {
   const router = useRouter();
   const { useAllPresets } = usePresets();
+  const apiUrl = useApiUrl();
   const { mutate: presetsMutator } = useAllPresets({
     revalidateOnFocus: false,
   });
-  const [isIncidentSelectorOpen, setIsIncidentSelectorOpen] = useState<boolean>(false);
+  const [isIncidentSelectorOpen, setIsIncidentSelectorOpen] =
+    useState<boolean>(false);
 
   const selectedAlerts = alerts.filter((_alert, index) =>
     selectedRowIds.includes(index.toString())
@@ -54,7 +56,6 @@ export default function AlertActions({
       );
       const options = [{ value: formattedCel, label: "CEL" }];
       const session = await getSession();
-      const apiUrl = getApiURL();
       const response = await fetch(`${apiUrl}/preset`, {
         method: "POST",
         headers: {
@@ -82,10 +83,10 @@ export default function AlertActions({
 
   const showIncidentSelector = () => {
     setIsIncidentSelectorOpen(true);
-  }
+  };
   const hideIncidentSelector = () => {
     setIsIncidentSelectorOpen(false);
-  }
+  };
 
   const handleSuccessfulAlertsAssociation = () => {
     hideIncidentSelector();
@@ -93,7 +94,7 @@ export default function AlertActions({
     if (mutateAlerts) {
       mutateAlerts();
     }
-  }
+  };
 
   return (
     <div className="w-full flex justify-end items-center">
@@ -130,10 +131,11 @@ export default function AlertActions({
         Associate with incident
       </Button>
       <AlertAssociateIncidentModal
-          isOpen={isIncidentSelectorOpen}
-          alerts={selectedAlerts}
-          handleSuccess={handleSuccessfulAlertsAssociation}
-          handleClose={hideIncidentSelector}/>
+        isOpen={isIncidentSelectorOpen}
+        alerts={selectedAlerts}
+        handleSuccess={handleSuccessfulAlertsAssociation}
+        handleClose={hideIncidentSelector}
+      />
     </div>
   );
 }
diff --git a/keep-ui/app/alerts/alert-assign-ticket-modal.tsx b/keep-ui/app/alerts/alert-assign-ticket-modal.tsx
index 4b6c99cfc..f3920c764 100644
--- a/keep-ui/app/alerts/alert-assign-ticket-modal.tsx
+++ b/keep-ui/app/alerts/alert-assign-ticket-modal.tsx
@@ -5,7 +5,7 @@ import { PlusIcon } from "@heroicons/react/20/solid";
 import { useForm, Controller, SubmitHandler } from "react-hook-form";
 import { Providers } from "./../providers/providers";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";
 
@@ -45,6 +45,7 @@ const AlertAssignTicketModal = ({
   } = useForm<FormData>();
   // get the token
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
 
   // if this modal should not be open, do nothing
   if (!alert) return null;
@@ -61,7 +62,7 @@ const AlertAssignTicketModal = ({
         fingerprint: alert.fingerprint,
       };
 
-      const response = await fetch(`${getApiURL()}/alerts/enrich`, {
+      const response = await fetch(`${apiUrl}/alerts/enrich`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -225,18 +226,14 @@ const AlertAssignTicketModal = ({
             </div>
             <div className="mt-6 flex gap-2">
               <Button color="orange" type="submit">
-                <Text>
-                  Assign Ticket
-                </Text>
+                <Text>Assign Ticket</Text>
               </Button>
               <Button
                 onClick={handleClose}
                 variant="secondary"
                 className="border border-orange-500 text-orange-500"
               >
-                <Text>
-                  Cancel
-                </Text>
+                <Text>Cancel</Text>
               </Button>
             </div>
           </form>
diff --git a/keep-ui/app/alerts/alert-associate-incident-modal.tsx b/keep-ui/app/alerts/alert-associate-incident-modal.tsx
index d0124e824..622e8c893 100644
--- a/keep-ui/app/alerts/alert-associate-incident-modal.tsx
+++ b/keep-ui/app/alerts/alert-associate-incident-modal.tsx
@@ -6,7 +6,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import { toast } from "react-toastify";
-import { getApiURL } from "../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useIncidents, usePollIncidents } from "../../utils/hooks/useIncidents";
 import Loading from "../loading";
 import { AlertDto } from "./models";
@@ -34,10 +34,10 @@ const AlertAssociateIncidentModal = ({
   >();
   // get the token
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
   const router = useRouter();
 
   const associateAlertsHandler = async (incidentId: string) => {
-    const apiUrl = getApiURL();
     const response = await fetch(`${apiUrl}/incidents/${incidentId}/alerts`, {
       method: "POST",
       headers: {
diff --git a/keep-ui/app/alerts/alert-change-status-modal.tsx b/keep-ui/app/alerts/alert-change-status-modal.tsx
index 6dcb5bcf6..d090599dc 100644
--- a/keep-ui/app/alerts/alert-change-status-modal.tsx
+++ b/keep-ui/app/alerts/alert-change-status-modal.tsx
@@ -8,7 +8,7 @@ import Select, {
 } from "react-select";
 import { useState } from "react";
 import { AlertDto, Status } from "./models";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { toast } from "react-toastify";
 import {
@@ -79,6 +79,7 @@ export default function AlertChangeStatusModal({
   const { useAllPresets } = usePresets();
   const { mutate: presetsMutator } = useAllPresets();
   const { useAllAlerts } = useAlerts();
+  const apiUrl = useApiUrl();
   const { mutate: alertsMutator } = useAllAlerts(presetName, {
     revalidateOnMount: false,
   });
@@ -109,23 +110,26 @@ export default function AlertChangeStatusModal({
     }
 
     try {
-      const response = await fetch(`${getApiURL()}/alerts/enrich?dispose_on_new_alert=true`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${session?.accessToken}`,
-        },
-        body: JSON.stringify({
-          enrichments: {
-            status: selectedStatus,
-            ...(selectedStatus !== Status.Suppressed && {
-              dismissed: false,
-              dismissUntil: "",
-            }),
+      const response = await fetch(
+        `${apiUrl}/alerts/enrich?dispose_on_new_alert=true`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${session?.accessToken}`,
           },
-          fingerprint: alert.fingerprint,
-        }),
-      });
+          body: JSON.stringify({
+            enrichments: {
+              status: selectedStatus,
+              ...(selectedStatus !== Status.Suppressed && {
+                dismissed: false,
+                dismissUntil: "",
+              }),
+            },
+            fingerprint: alert.fingerprint,
+          }),
+        }
+      );
 
       if (response.ok) {
         toast.success("Alert status changed successfully!");
diff --git a/keep-ui/app/alerts/alert-dismiss-modal.tsx b/keep-ui/app/alerts/alert-dismiss-modal.tsx
index 33b4b9968..11bf3d63f 100644
--- a/keep-ui/app/alerts/alert-dismiss-modal.tsx
+++ b/keep-ui/app/alerts/alert-dismiss-modal.tsx
@@ -1,12 +1,22 @@
 import { useState, useEffect } from "react";
-import { Button, Title, Subtitle, Card, Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
+import {
+  Button,
+  Title,
+  Subtitle,
+  Card,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from "@tremor/react";
 import Modal from "@/components/ui/Modal";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "react-quill/dist/quill.snow.css";
 import { AlertDto } from "./models";
 import { format, set, isSameDay, isAfter, addMinutes } from "date-fns";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { usePresets } from "utils/hooks/usePresets";
 import { useAlerts } from "utils/hooks/useAlerts";
@@ -34,15 +44,21 @@ export default function AlertDismissModal({
   const { useAllPresets } = usePresets();
   const { mutate: presetsMutator } = useAllPresets();
   const { usePresetAlerts } = useAlerts();
-  const { mutate: alertsMutator } = usePresetAlerts(presetName, { revalidateOnMount: false });
+  const { mutate: alertsMutator } = usePresetAlerts(presetName, {
+    revalidateOnMount: false,
+  });
 
   const { data: session } = useSession();
-
+  const apiUrl = useApiUrl();
   // Ensuring that the useEffect hook is called consistently
   useEffect(() => {
     const now = new Date();
     const roundedMinutes = Math.ceil(now.getMinutes() / 15) * 15;
-    const defaultTime = set(now, { minutes: roundedMinutes, seconds: 0, milliseconds: 0 });
+    const defaultTime = set(now, {
+      minutes: roundedMinutes,
+      seconds: 0,
+      milliseconds: 0,
+    });
     setSelectedDateTime(defaultTime);
   }, []);
 
@@ -69,7 +85,8 @@ export default function AlertDismissModal({
       return;
     }
 
-    const dismissUntil = selectedTab === 0 ? null : selectedDateTime?.toISOString();
+    const dismissUntil =
+      selectedTab === 0 ? null : selectedDateTime?.toISOString();
     const requests = alerts.map((alert: AlertDto) => {
       const requestData = {
         enrichments: {
@@ -80,7 +97,7 @@ export default function AlertDismissModal({
         },
         fingerprint: alert.fingerprint,
       };
-      return fetch(`${getApiURL()}/alerts/enrich`, {
+      return fetch(`${apiUrl}/alerts/enrich`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -181,9 +198,12 @@ export default function AlertDismissModal({
                       filterTime={filterPassedTime}
                       inline
                       calendarClassName="custom-datepicker"
-
                     />
-                    {showError && <div className="text-red-500 mt-2">Must choose a date</div>}
+                    {showError && (
+                      <div className="text-red-500 mt-2">
+                        Must choose a date
+                      </div>
+                    )}
                   </div>
                 </Card>
                 <Title className="mt-2">Dismiss Comment</Title>
diff --git a/keep-ui/app/alerts/alert-menu.tsx b/keep-ui/app/alerts/alert-menu.tsx
index 0c106ebe6..997be6959 100644
--- a/keep-ui/app/alerts/alert-menu.tsx
+++ b/keep-ui/app/alerts/alert-menu.tsx
@@ -13,7 +13,7 @@ import {
 import { IoNotificationsOffOutline } from "react-icons/io5";
 
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import Link from "next/link";
 import { ProviderMethod } from "app/providers/providers";
 import { AlertDto } from "./models";
@@ -44,8 +44,7 @@ export default function AlertMenu({
   isInSidebar,
 }: Props) {
   const router = useRouter();
-
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const {
     data: { installed_providers: installedProviders } = {
       installed_providers: [],
@@ -256,9 +255,7 @@ export default function AlertMenu({
               <Menu.Item key={method.name}>
                 {({ active }) => (
                   <button
-                    className={`${
-                      active ? "bg-slate-200" : "text-gray-900"
-                    } ${
+                    className={`${active ? "bg-slate-200" : "text-gray-900"} ${
                       !methodEnabled ? "text-slate-300 cursor-not-allowed" : ""
                     } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
                     disabled={!methodEnabled}
@@ -287,7 +284,10 @@ export default function AlertMenu({
               active ? "bg-slate-200" : "text-gray-900"
             } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
           >
-            <IoNotificationsOffOutline className="mr-2 h-4 w-4" aria-hidden="true" />
+            <IoNotificationsOffOutline
+              className="mr-2 h-4 w-4"
+              aria-hidden="true"
+            />
             {alert.dismissed ? "Restore" : "Dismiss"}
           </button>
         )}
@@ -303,7 +303,10 @@ export default function AlertMenu({
               active ? "bg-slate-200" : "text-gray-900"
             } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
           >
-            <ChevronDoubleRightIcon className="mr-2 h-4 w-4" aria-hidden="true" />
+            <ChevronDoubleRightIcon
+              className="mr-2 h-4 w-4"
+              aria-hidden="true"
+            />
             Change Status
           </button>
         )}
@@ -354,9 +357,7 @@ export default function AlertMenu({
         </Menu>
       ) : (
         <Menu>
-          <div className="flex space-x-2">
-            {menuItems}
-          </div>
+          <div className="flex space-x-2">{menuItems}</div>
         </Menu>
       )}
     </>
diff --git a/keep-ui/app/alerts/alert-method-modal.tsx b/keep-ui/app/alerts/alert-method-modal.tsx
index 77a963d75..0d70ab54e 100644
--- a/keep-ui/app/alerts/alert-method-modal.tsx
+++ b/keep-ui/app/alerts/alert-method-modal.tsx
@@ -6,7 +6,7 @@ import {
   ProviderMethodParam,
 } from "app/providers/providers";
 import { getSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
 import Loading from "app/loading";
 import {
@@ -32,6 +32,7 @@ interface AlertMethodModalProps {
 export function AlertMethodModal({ presetName }: AlertMethodModalProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
+  const apiUrl = useApiUrl();
 
   const alertFingerprint = searchParams?.get("alertFingerprint");
   const providerId = searchParams?.get("providerId");
@@ -162,7 +163,6 @@ export function AlertMethodModal({ presetName }: AlertMethodModalProps) {
     userParams: { [key: string]: string }
   ) => {
     const session = await getSession();
-    const apiUrl = getApiURL();
 
     try {
       const response = await fetch(
diff --git a/keep-ui/app/alerts/alert-note-modal.tsx b/keep-ui/app/alerts/alert-note-modal.tsx
index bdd3b9c33..a737059a9 100644
--- a/keep-ui/app/alerts/alert-note-modal.tsx
+++ b/keep-ui/app/alerts/alert-note-modal.tsx
@@ -6,7 +6,7 @@ const ReactQuill =
   typeof window === "object" ? require("react-quill") : () => false;
 import "react-quill/dist/quill.snow.css";
 import { Button } from "@tremor/react";
-import { getApiURL } from "../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";
@@ -26,6 +26,7 @@ const AlertNoteModal = ({ handleClose, alert }: AlertNoteModalProps) => {
   }, [alert]);
   // get the session
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
 
   // if this modal should not be open, do nothing
   if (!alert) return null;
@@ -65,7 +66,7 @@ const AlertNoteModal = ({ handleClose, alert }: AlertNoteModalProps) => {
         },
         fingerprint: alert.fingerprint,
       };
-      const response = await fetch(`${getApiURL()}/alerts/enrich`, {
+      const response = await fetch(`${apiUrl}/alerts/enrich`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
diff --git a/keep-ui/app/alerts/alert-presets.tsx b/keep-ui/app/alerts/alert-presets.tsx
index d2b1b572a..0c4e22ca1 100644
--- a/keep-ui/app/alerts/alert-presets.tsx
+++ b/keep-ui/app/alerts/alert-presets.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { AlertDto, Preset } from "./models";
 import Modal from "@/components/ui/Modal";
 import { Button, Subtitle, TextInput, Switch, Text } from "@tremor/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
 import { useSession } from "next-auth/react";
 import { usePresets } from "utils/hooks/usePresets";
@@ -36,7 +36,7 @@ export default function AlertPresets({
   presetPrivate = false,
   presetNoisy = false,
 }: Props) {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { useAllPresets } = usePresets();
   const { mutate: presetsMutator, data: savedPresets = [] } = useAllPresets({
     revalidateOnFocus: false,
@@ -157,7 +157,9 @@ export default function AlertPresets({
     setSelectedTags((prevTags) => [...prevTags, newTag]);
   };
 
-  const handleChange = (newValue: MultiValue<{ value: string; label: string }>) => {
+  const handleChange = (
+    newValue: MultiValue<{ value: string; label: string }>
+  ) => {
     setSelectedTags(
       newValue.map((tag) => ({
         id: tags.find((t) => t.name === tag.value)?.id,
@@ -175,9 +177,7 @@ export default function AlertPresets({
       >
         <div className="space-y-2">
           <div className="text-lg font-semibold">
-            <p>
-              {presetName ? "Update preset" : "Enter new preset name"}
-            </p>
+            <p>{presetName ? "Update preset" : "Enter new preset name"}</p>
           </div>
 
           <div className="space-y-2">
diff --git a/keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx b/keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx
index 6362abc54..a842a0641 100644
--- a/keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx
+++ b/keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx
@@ -9,7 +9,7 @@ import {
 } from "@tremor/react";
 import Modal from "@/components/ui/Modal";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useProviders } from "utils/hooks/useProviders";
 import ImageWithFallback from "@/components/ImageWithFallback";
 import { useAlerts } from "utils/hooks/useAlerts";
@@ -45,6 +45,7 @@ const PushAlertToServerModal = ({
 
   const { data: session } = useSession();
   const { data: providersData } = useProviders();
+  const apiUrl = useApiUrl();
   const providers = providersData?.providers || [];
 
   useEffect(() => {
@@ -82,7 +83,7 @@ const PushAlertToServerModal = ({
 
     try {
       const response = await fetch(
-        `${getApiURL()}/alerts/event/${selectedSource.type}`,
+        `${apiUrl}/alerts/event/${selectedSource.type}`,
         {
           method: "POST",
           headers: {
diff --git a/keep-ui/app/alerts/alert-run-workflow-modal.tsx b/keep-ui/app/alerts/alert-run-workflow-modal.tsx
new file mode 100644
index 000000000..3ade1e15a
--- /dev/null
+++ b/keep-ui/app/alerts/alert-run-workflow-modal.tsx
@@ -0,0 +1,88 @@
+import { Button, Select, SelectItem } from "@tremor/react";
+import { AlertDto } from "./models";
+import Modal from "@/components/ui/Modal";
+import { useWorkflows } from "utils/hooks/useWorkflows";
+import { useState } from "react";
+import { useSession } from "next-auth/react";
+import { useApiUrl } from "utils/hooks/useConfig";
+import { toast } from "react-toastify";
+import { useRouter } from "next/navigation";
+
+interface Props {
+  alert: AlertDto | null | undefined;
+  handleClose: () => void;
+}
+
+export default function AlertRunWorkflowModal({ alert, handleClose }: Props) {
+  /**
+   *
+   */
+  const [selectedWorkflowId, setSelectedWorkflowId] = useState<
+    string | undefined
+  >(undefined);
+  const { data: workflows } = useWorkflows({});
+  const { data: session } = useSession();
+  const router = useRouter();
+  const apiUrl = useApiUrl();
+
+  const isOpen = !!alert;
+
+  const clearAndClose = () => {
+    setSelectedWorkflowId(undefined);
+    handleClose();
+  };
+
+  const handleRun = async () => {
+    const response = await fetch(
+      `${apiUrl}/workflows/${selectedWorkflowId}/run`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${session?.accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(alert),
+      }
+    );
+
+    if (response.ok) {
+      // Workflow started successfully
+      toast.success("Workflow started successfully", { position: "top-left" });
+      const responseData = await response.json();
+      const { workflow_execution_id } = responseData;
+      router.push(
+        `/workflows/${selectedWorkflowId}/runs/${workflow_execution_id}`
+      );
+    } else {
+      toast.error("Failed to start workflow", { position: "top-left" });
+    }
+    clearAndClose();
+  };
+
+  return (
+    <Modal onClose={clearAndClose} isOpen={isOpen} className="overflow-visible">
+      {workflows && (
+        <Select
+          value={selectedWorkflowId}
+          onValueChange={setSelectedWorkflowId}
+        >
+          {workflows.map((workflow) => {
+            return (
+              <SelectItem key={workflow.id} value={workflow.id}>
+                {workflow.description}
+              </SelectItem>
+            );
+          })}
+        </Select>
+      )}
+      <Button
+        onClick={handleRun}
+        color="orange"
+        className="mt-2.5"
+        disabled={!selectedWorkflowId}
+      >
+        Run
+      </Button>
+    </Modal>
+  );
+}
diff --git a/keep-ui/app/alerts/alert-tab-modal.tsx b/keep-ui/app/alerts/alert-tab-modal.tsx
index dd72657c4..d5a99e7d6 100644
--- a/keep-ui/app/alerts/alert-tab-modal.tsx
+++ b/keep-ui/app/alerts/alert-tab-modal.tsx
@@ -3,23 +3,27 @@ import Modal from "@/components/ui/Modal";
 import { Button, TextInput } from "@tremor/react";
 import { AlertsRulesBuilder } from "app/alerts/alerts-rules-builder";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 
 interface AlertTabModalProps {
   presetId: string;
   isOpen: boolean;
   onClose: () => void;
   onAddTab: (name: string, filter: string) => void;
-
 }
 
-const AlertTabModal = ({ presetId, isOpen, onClose, onAddTab }: AlertTabModalProps) => {
+const AlertTabModal = ({
+  presetId,
+  isOpen,
+  onClose,
+  onAddTab,
+}: AlertTabModalProps) => {
   const [newTabName, setNewTabName] = useState("");
   const [newTabFilter, setNewTabFilter] = useState<string>("");
   const [errors, setErrors] = useState({ name: false, filter: false });
   const [backendError, setBackendError] = useState<string | null>(null);
   const { data: session } = useSession();
-
+  const apiUrl = useApiUrl();
   const handleAddTab = async () => {
     if (!newTabName || !newTabFilter) {
       setErrors({
@@ -31,18 +35,22 @@ const AlertTabModal = ({ presetId, isOpen, onClose, onAddTab }: AlertTabModalPro
 
     try {
       // Send the new tab data to the backend
-      const apiUrl = getApiURL();
       const response = await fetch(`${apiUrl}/preset/${presetId}/tab`, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
           Authorization: `Bearer ${session?.accessToken}`,
         },
         body: JSON.stringify({ name: newTabName, filter: newTabFilter }),
       });
 
       if (!response.ok) {
-        throw new Error('Failed to add the new tab: ' + response.status + ' ' + response.statusText);
+        throw new Error(
+          "Failed to add the new tab: " +
+            response.status +
+            " " +
+            response.statusText
+        );
       }
 
       onAddTab(newTabName, newTabFilter);
@@ -51,10 +59,9 @@ const AlertTabModal = ({ presetId, isOpen, onClose, onAddTab }: AlertTabModalPro
       setBackendError(null); // Clear any previous backend errors
       onClose();
     } catch (error) {
-      if(error instanceof Error) {
+      if (error instanceof Error) {
         setBackendError(error.message);
-      }
-      else{
+      } else {
         setBackendError("An error occurred while adding the tab");
       }
     }
@@ -97,17 +104,21 @@ const AlertTabModal = ({ presetId, isOpen, onClose, onAddTab }: AlertTabModalPro
         {errors.filter && (
           <p className="text-red-500 text-sm">Filter is required</p>
         )}
-        {backendError && (
-          <p className="text-red-500 text-sm">{backendError}</p>
-        )}
+        {backendError && <p className="text-red-500 text-sm">{backendError}</p>}
         <Button
-            disabled={!newTabName || !newTabFilter}
-            color="orange"
-            onClick={handleAddTab}
-            className="mt-16"
-            tooltip={!newTabName ? "Tab name is required" : !newTabFilter ? "Tab filter is required (notice you need to click 'enter' to apply the filter)" : ""}
-            >
-            Add Tab
+          disabled={!newTabName || !newTabFilter}
+          color="orange"
+          onClick={handleAddTab}
+          className="mt-16"
+          tooltip={
+            !newTabName
+              ? "Tab name is required"
+              : !newTabFilter
+              ? "Tab filter is required (notice you need to click 'enter' to apply the filter)"
+              : ""
+          }
+        >
+          Add Tab
         </Button>
       </div>
     </Modal>
diff --git a/keep-ui/app/alerts/alert-tabs.tsx b/keep-ui/app/alerts/alert-tabs.tsx
index 6c60fe9a2..37e93a0c7 100644
--- a/keep-ui/app/alerts/alert-tabs.tsx
+++ b/keep-ui/app/alerts/alert-tabs.tsx
@@ -1,10 +1,18 @@
 import { FormEventHandler, useState } from "react";
-import { Button, TextInput, Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
+import {
+  Button,
+  TextInput,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from "@tremor/react";
 import { AlertDto } from "./models";
 import AlertTabModal from "./alert-tab-modal";
 import { evalWithContext } from "./alerts-rules-builder";
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 interface Tab {
   id?: string;
@@ -20,16 +28,26 @@ interface Props {
   setSelectedTab: (index: number) => void;
 }
 
-const AlertTabs = ({ presetId, tabs, setTabs, selectedTab, setSelectedTab }: Props) => {
+const AlertTabs = ({
+  presetId,
+  tabs,
+  setTabs,
+  selectedTab,
+  setSelectedTab,
+}: Props) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
 
   const handleTabChange = (index: any) => {
     setSelectedTab(index);
   };
 
   const addNewTab = (name: string, filter: string) => {
-    const newTab = { name: name, filter: (alert: AlertDto) => evalWithContext(alert, filter) };
+    const newTab = {
+      name: name,
+      filter: (alert: AlertDto) => evalWithContext(alert, filter),
+    };
     const updatedTabs = [...tabs];
     updatedTabs.splice(tabs.length - 1, 0, newTab); // Insert the new tab before the last tab
 
@@ -38,20 +56,21 @@ const AlertTabs = ({ presetId, tabs, setTabs, selectedTab, setSelectedTab }: Pro
     setSelectedTab(0); // Set the selected tab to first tab
   };
 
-
   const deleteTab = async (index: number) => {
     const tabToDelete = tabs[index];
 
     // if the tab has id, means it already in the database
     try {
-      const apiUrl = getApiURL();
-      const response = await fetch(`${apiUrl}/preset/${presetId}/tab/${tabToDelete.id}`, {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${session?.accessToken}`,
-        },
-      });
+      const response = await fetch(
+        `${apiUrl}/preset/${presetId}/tab/${tabToDelete.id}`,
+        {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${session?.accessToken}`,
+          },
+        }
+      );
 
       if (!response.ok) {
         throw new Error("Failed to delete the tab");
@@ -72,38 +91,39 @@ const AlertTabs = ({ presetId, tabs, setTabs, selectedTab, setSelectedTab }: Pro
     <div className="tabs-container">
       <TabGroup index={selectedTab} onChange={handleTabChange}>
         <TabList color="orange">
-            <>
+          <>
             {tabs.slice(0, -1).map((tab, index) => (
-                <div key={index} className="relative group">
-                    <Tab className="pr-8">{tab.name.toLowerCase()}</Tab>
-                    {index !== 0 && (
-                    <button
-                        className="absolute right-2 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600"
-                        onClick={() => deleteTab(index)}
-                    >
-                        <XMarkIcon className="h-4 w-4 text-red-500" />
-                    </button>
-                    )}
-                </div>
+              <div key={index} className="relative group">
+                <Tab className="pr-8">{tab.name.toLowerCase()}</Tab>
+                {index !== 0 && (
+                  <button
+                    className="absolute right-2 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600"
+                    onClick={() => deleteTab(index)}
+                  >
+                    <XMarkIcon className="h-4 w-4 text-red-500" />
+                  </button>
+                )}
+              </div>
             ))}
-            <Tab onClick={() => setIsModalOpen(true)}>{tabs[tabs.length - 1].name}</Tab>
-            </>
+            <Tab onClick={() => setIsModalOpen(true)}>
+              {tabs[tabs.length - 1].name}
+            </Tab>
+          </>
         </TabList>
         <TabPanels>
-            {tabs.slice(0, -1).map((tab, index) => (
+          {tabs.slice(0, -1).map((tab, index) => (
             <TabPanel key={index}></TabPanel>
-            ))}
-            <TabPanel></TabPanel>
+          ))}
+          <TabPanel></TabPanel>
         </TabPanels>
-        </TabGroup>
-
-        <AlertTabModal
-          isOpen={isModalOpen}
-          onClose={() => setIsModalOpen(false)}
-          onAddTab={addNewTab}
-          presetId={presetId}
+      </TabGroup>
 
-        />
+      <AlertTabModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onAddTab={addNewTab}
+        presetId={presetId}
+      />
     </div>
   );
 };
diff --git a/keep-ui/app/dashboard/[id]/dashboard.tsx b/keep-ui/app/dashboard/[id]/dashboard.tsx
index 627b9773e..fef94ac8c 100644
--- a/keep-ui/app/dashboard/[id]/dashboard.tsx
+++ b/keep-ui/app/dashboard/[id]/dashboard.tsx
@@ -1,20 +1,20 @@
-'use client';
-import { useParams } from 'next/navigation';
-import { useState, useEffect, ChangeEvent } from 'react';
-import GridLayout from '../GridLayout';
+"use client";
+import { useParams } from "next/navigation";
+import { useState, useEffect, ChangeEvent } from "react";
+import GridLayout from "../GridLayout";
 import { usePresets } from "utils/hooks/usePresets";
-import WidgetModal from '../WidgetModal';
-import { Button, Card, TextInput, Subtitle, Icon } from '@tremor/react';
-import { LayoutItem, WidgetData, Threshold, GenericsMertics } from '../types';
-import { Preset } from 'app/alerts/models';
-import { FiSave, FiEdit2 } from 'react-icons/fi';
-import { useSession } from 'next-auth/react';
-import { useDashboards } from 'utils/hooks/useDashboards';
-import { getApiURL } from 'utils/apiUrl';
-import './../styles.css';
-import { toast } from 'react-toastify';
-import { GenericFilters } from '@/components/filters/GenericFilters';
-import { useDashboardPreset } from 'utils/hooks/useDashboardPresets';
+import WidgetModal from "../WidgetModal";
+import { Button, Card, TextInput, Subtitle, Icon } from "@tremor/react";
+import { LayoutItem, WidgetData, Threshold, GenericsMertics } from "../types";
+import { Preset } from "app/alerts/models";
+import { FiSave, FiEdit2 } from "react-icons/fi";
+import { useSession } from "next-auth/react";
+import { useDashboards } from "utils/hooks/useDashboards";
+import { useApiUrl } from "utils/hooks/useConfig";
+import "./../styles.css";
+import { toast } from "react-toastify";
+import { GenericFilters } from "@/components/filters/GenericFilters";
+import { useDashboardPreset } from "utils/hooks/useDashboardPresets";
 
 const DASHBOARD_FILTERS = [
   {
@@ -22,8 +22,8 @@ const DASHBOARD_FILTERS = [
     key: "time_stamp",
     value: "",
     name: "Last received",
-  }
-]
+  },
+];
 
 const DashboardPage = () => {
   const allPresets = useDashboardPreset();
@@ -36,10 +36,13 @@ const DashboardPage = () => {
   const [editingItem, setEditingItem] = useState<WidgetData | null>(null);
   const [dashboardName, setDashboardName] = useState(decodeURIComponent(id));
   const [isEditingName, setIsEditingName] = useState(false);
+  const apiUrl = useApiUrl();
 
   useEffect(() => {
     if (!isLoading) {
-      const dashboard = dashboards?.find(d => d.dashboard_name === decodeURIComponent(id));
+      const dashboard = dashboards?.find(
+        (d) => d.dashboard_name === decodeURIComponent(id)
+      );
       if (dashboard) {
         setLayout(dashboard.dashboard_config.layout);
         setWidgetData(dashboard.dashboard_config.widget_data);
@@ -54,7 +57,13 @@ const DashboardPage = () => {
   };
   const closeModal = () => setIsModalOpen(false);
 
-  const handleAddWidget = (preset: Preset|null, thresholds: Threshold[], name: string, widgetType?: string, genericMetrics?: GenericsMertics|null) => {
+  const handleAddWidget = (
+    preset: Preset | null,
+    thresholds: Threshold[],
+    name: string,
+    widgetType?: string,
+    genericMetrics?: GenericsMertics | null
+  ) => {
     const uniqueId = `w-${Date.now()}`;
     const newItem: LayoutItem = {
       i: uniqueId,
@@ -64,14 +73,14 @@ const DashboardPage = () => {
       h: genericMetrics ? 20 : 3,
       minW: genericMetrics ? 10 : 2,
       minH: genericMetrics ? 15 : 2,
-      static: false
+      static: false,
     };
     const newWidget: WidgetData = {
       ...newItem,
       thresholds,
       preset,
       name,
-      widgetType: widgetType || 'preset',
+      widgetType: widgetType || "preset",
       genericMetrics: genericMetrics || null,
     };
     setLayout((prevLayout) => [...prevLayout, newItem]);
@@ -79,14 +88,13 @@ const DashboardPage = () => {
   };
 
   const handleEditWidget = (id: string, update?: WidgetData) => {
-    let itemToEdit = widgetData.find(d => d.i === id) || null;
-    if(itemToEdit && update){
-      setEditingItem({...itemToEdit, ...update});
-    }else {
+    let itemToEdit = widgetData.find((d) => d.i === id) || null;
+    if (itemToEdit && update) {
+      setEditingItem({ ...itemToEdit, ...update });
+    } else {
       setEditingItem(itemToEdit);
     }
     setIsModalOpen(true);
-  
   };
 
   const handleSaveEdit = (updatedItem: WidgetData) => {
@@ -97,8 +105,8 @@ const DashboardPage = () => {
   };
 
   const handleDeleteWidget = (id: string) => {
-    setLayout(layout.filter(item => item.i !== id));
-    setWidgetData(widgetData.filter(item => item.i !== id));
+    setLayout(layout.filter((item) => item.i !== id));
+    setWidgetData(widgetData.filter((item) => item.i !== id));
   };
 
   const handleLayoutChange = (newLayout: LayoutItem[]) => {
@@ -113,24 +121,27 @@ const DashboardPage = () => {
 
   const handleSaveDashboard = async () => {
     try {
-      const apiUrl = getApiURL();
-      let dashboard = dashboards?.find(d => d.dashboard_name === decodeURIComponent(id));
-      const method = dashboard ? 'PUT' : 'POST';
-      const endpoint = `${apiUrl}/dashboard${dashboard ? `/${encodeURIComponent(dashboard.id)}` : ''}`;
+      let dashboard = dashboards?.find(
+        (d) => d.dashboard_name === decodeURIComponent(id)
+      );
+      const method = dashboard ? "PUT" : "POST";
+      const endpoint = `${apiUrl}/dashboard${
+        dashboard ? `/${encodeURIComponent(dashboard.id)}` : ""
+      }`;
 
       const response = await fetch(endpoint, {
         method,
         headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${session!.accessToken}`
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${session!.accessToken}`,
         },
         body: JSON.stringify({
           dashboard_name: dashboardName,
           dashboard_config: {
             layout,
             widget_data: widgetData,
-          }
-        })
+          },
+        }),
       });
 
       if (!response.ok) {
@@ -167,7 +178,9 @@ const DashboardPage = () => {
               className="border-orange-500 focus:border-orange-600 focus:ring-orange-600"
             />
           ) : (
-            <Subtitle color="orange" className="mr-2">{dashboardName}</Subtitle>
+            <Subtitle color="orange" className="mr-2">
+              {dashboardName}
+            </Subtitle>
           )}
           <Icon
             size="xs"
@@ -178,17 +191,19 @@ const DashboardPage = () => {
           />
         </div>
         <div className="flex gap-1 items-end">
-        <GenericFilters filters={DASHBOARD_FILTERS} />
-        <div className="flex">
-          <Button
-            icon={FiSave}
-            color="orange"
-            size="sm"
-            onClick={handleSaveDashboard}
-            tooltip="Save current dashboard"
-          />
-          <Button color="orange" onClick={openModal} className="ml-2">Add Widget</Button>
-        </div>
+          <GenericFilters filters={DASHBOARD_FILTERS} />
+          <div className="flex">
+            <Button
+              icon={FiSave}
+              color="orange"
+              size="sm"
+              onClick={handleSaveDashboard}
+              tooltip="Save current dashboard"
+            />
+            <Button color="orange" onClick={openModal} className="ml-2">
+              Add Widget
+            </Button>
+          </div>
         </div>
       </div>
       {layout.length === 0 ? (
diff --git a/keep-ui/app/deduplication/DeduplicationSidebar.tsx b/keep-ui/app/deduplication/DeduplicationSidebar.tsx
index ddc2e6a8f..c09d86e00 100644
--- a/keep-ui/app/deduplication/DeduplicationSidebar.tsx
+++ b/keep-ui/app/deduplication/DeduplicationSidebar.tsx
@@ -23,7 +23,7 @@ import {
   ExclamationTriangleIcon,
   InformationCircleIcon,
 } from "@heroicons/react/24/outline";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { KeyedMutator } from "swr";
 
@@ -75,6 +75,7 @@ const DeduplicationSidebar: React.FC<DeduplicationSidebarProps> = ({
   } = useProviders();
   const { data: deduplicationFields = {} } = useDeduplicationFields();
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
 
   const alertProviders = useMemo(
     () =>
@@ -150,7 +151,6 @@ const DeduplicationSidebar: React.FC<DeduplicationSidebarProps> = ({
     setIsSubmitting(true);
     clearErrors();
     try {
-      const apiUrl = getApiURL();
       let url = `${apiUrl}/deduplications`;
 
       if (selectedDeduplicationRule && selectedDeduplicationRule.id) {
diff --git a/keep-ui/app/deduplication/DeduplicationTable.tsx b/keep-ui/app/deduplication/DeduplicationTable.tsx
index 5bef79f40..05d634451 100644
--- a/keep-ui/app/deduplication/DeduplicationTable.tsx
+++ b/keep-ui/app/deduplication/DeduplicationTable.tsx
@@ -24,7 +24,7 @@ import { DeduplicationRule } from "app/deduplication/models";
 import DeduplicationSidebar from "app/deduplication/DeduplicationSidebar";
 import { TrashIcon, PauseIcon, PlusIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 
 const columnHelper = createColumnHelper<DeduplicationRule>();
@@ -43,6 +43,7 @@ export const DeduplicationTable: React.FC<DeduplicationTableProps> = ({
   const router = useRouter();
   const { data: session } = useSession();
   const searchParams = useSearchParams();
+  const apiUrl = useApiUrl();
 
   let selectedId = searchParams ? searchParams.get("id") : null;
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@@ -72,7 +73,7 @@ export const DeduplicationTable: React.FC<DeduplicationTableProps> = ({
       window.confirm("Are you sure you want to delete this deduplication rule?")
     ) {
       try {
-        const url = `${getApiURL()}/deduplications/${rule.id}`;
+        const url = `${apiUrl}/deduplications/${rule.id}`;
         const response = await fetch(url, {
           method: "DELETE",
           headers: {
diff --git a/keep-ui/app/extraction/create-or-update-extraction-rule.tsx b/keep-ui/app/extraction/create-or-update-extraction-rule.tsx
index 43b959322..a770f68c9 100644
--- a/keep-ui/app/extraction/create-or-update-extraction-rule.tsx
+++ b/keep-ui/app/extraction/create-or-update-extraction-rule.tsx
@@ -16,7 +16,7 @@ import {
 import { useSession } from "next-auth/react";
 import { FormEvent, useEffect, useState } from "react";
 import { toast } from "react-toastify";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { ExtractionRule } from "./model";
 import { extractNamedGroups } from "./extractions-table";
 import { useExtractions } from "utils/hooks/useExtractionRules";
@@ -41,6 +41,7 @@ export default function CreateOrUpdateExtractionRule({
   const [regex, setRegex] = useState<string>("");
   const [extractedAttributes, setExtractedAttributes] = useState<string[]>([]);
   const [priority, setPriority] = useState<number>(0);
+  const apiUrl = useApiUrl();
   const editMode = extractionToEdit !== null;
 
   useEffect(() => {
@@ -75,7 +76,6 @@ export default function CreateOrUpdateExtractionRule({
 
   const addExtraction = async (e: FormEvent) => {
     e.preventDefault();
-    const apiUrl = getApiURL();
     const response = await fetch(`${apiUrl}/extraction`, {
       method: "POST",
       headers: {
@@ -106,7 +106,6 @@ export default function CreateOrUpdateExtractionRule({
   // This is the function that will be called on submitting the form in the editMode, it sends a PUT request to the backennd.
   const updateExtraction = async (e: FormEvent) => {
     e.preventDefault();
-    const apiUrl = getApiURL();
     const response = await fetch(
       `${apiUrl}/extraction/${extractionToEdit?.id}`,
       {
diff --git a/keep-ui/app/extraction/extractions-table.tsx b/keep-ui/app/extraction/extractions-table.tsx
index a7183bcde..48fcb7f51 100644
--- a/keep-ui/app/extraction/extractions-table.tsx
+++ b/keep-ui/app/extraction/extractions-table.tsx
@@ -19,7 +19,7 @@ import {
 } from "@tanstack/react-table";
 import { MdRemoveCircle, MdModeEdit } from "react-icons/md";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useMappings } from "utils/hooks/useMappingRules";
 import { toast } from "react-toastify";
 import { ExtractionRule } from "./model";
@@ -53,6 +53,7 @@ export default function RulesTable({
 }: Props) {
   const { data: session } = useSession();
   const { mutate } = useMappings();
+  const apiUrl = useApiUrl();
   const [expanded, setExpanded] = useState<ExpandedState>({});
 
   const columns = [
@@ -181,7 +182,6 @@ export default function RulesTable({
   });
 
   const deleteExtraction = (extractionId: number) => {
-    const apiUrl = getApiURL();
     if (confirm("Are you sure you want to delete this rule?")) {
       fetch(`${apiUrl}/extraction/${extractionId}`, {
         method: "DELETE",
diff --git a/keep-ui/app/incidents/[id]/incident-alert-menu.tsx b/keep-ui/app/incidents/[id]/incident-alert-menu.tsx
index aaa43ab28..c5e32bed1 100644
--- a/keep-ui/app/incidents/[id]/incident-alert-menu.tsx
+++ b/keep-ui/app/incidents/[id]/incident-alert-menu.tsx
@@ -3,7 +3,7 @@ import { Icon } from "@tremor/react";
 import { AlertDto } from "app/alerts/models";
 import { useSession } from "next-auth/react";
 import { toast } from "react-toastify";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useIncidentAlerts } from "utils/hooks/useIncidents";
 
 interface Props {
@@ -11,7 +11,7 @@ interface Props {
   alert: AlertDto;
 }
 export default function IncidentAlertMenu({ incidentId, alert }: Props) {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
   const { mutate } = useIncidentAlerts(incidentId);
 
diff --git a/keep-ui/app/incidents/[id]/incident-chat.tsx b/keep-ui/app/incidents/[id]/incident-chat.tsx
index 338a0a9d6..31634f2f8 100644
--- a/keep-ui/app/incidents/[id]/incident-chat.tsx
+++ b/keep-ui/app/incidents/[id]/incident-chat.tsx
@@ -14,6 +14,7 @@ import { useRouter } from "next/navigation";
 import Loading from "app/loading";
 import { useCopilotAction, useCopilotReadable } from "@copilotkit/react-core";
 import { updateIncidentRequest } from "../create-or-update-incident";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { toast } from "react-toastify";
 import "@copilotkit/react-ui/styles.css";
@@ -21,6 +22,7 @@ import "./incident-chat.css";
 
 export default function IncidentChat({ incident }: { incident: IncidentDto }) {
   const router = useRouter();
+  const apiUrl = useApiUrl();
   const { mutate } = useIncidents(true, 20);
   const { mutate: mutateIncident } = useIncident(incident.id);
   const { data: alerts, isLoading: alertsLoading } = useIncidentAlerts(
@@ -84,6 +86,7 @@ export default function IncidentChat({ incident }: { incident: IncidentDto }) {
         incidentAssignee: incident.assignee,
         incidentSameIncidentInThePastId: incident.same_incident_in_the_past_id,
         generatedByAi: true,
+        apiUrl: apiUrl!,
       });
 
       if (response.ok) {
diff --git a/keep-ui/app/incidents/[id]/incident-info.tsx b/keep-ui/app/incidents/[id]/incident-info.tsx
index 87c9c35fe..cc484e06a 100644
--- a/keep-ui/app/incidents/[id]/incident-info.tsx
+++ b/keep-ui/app/incidents/[id]/incident-info.tsx
@@ -15,6 +15,7 @@ import {
 } from "../incident-candidate-actions";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { format } from "date-fns";
 import { ArrowUturnLeftIcon } from "@heroicons/react/24/outline";
 import { Disclosure } from "@headlessui/react";
@@ -95,6 +96,7 @@ export default function IncidentInformation({ incident }: Props) {
   const { data: session } = useSession();
   const { mutate } = useIncident(incident.id);
   const [isFormOpen, setIsFormOpen] = useState<boolean>(false);
+  const apiUrl = useApiUrl();
 
   const [runWorkflowModalIncident, setRunWorkflowModalIncident] =
     useState<IncidentDto | null>();
@@ -198,6 +200,7 @@ export default function IncidentInformation({ incident }: Props) {
                   e.preventDefault();
                   e.stopPropagation();
                   handleConfirmPredictedIncident({
+                    apiUrl: apiUrl!,
                     incidentId: incident.id!,
                     mutate,
                     session,
@@ -216,6 +219,7 @@ export default function IncidentInformation({ incident }: Props) {
                   e.preventDefault();
                   e.stopPropagation();
                   const success = await deleteIncident({
+                    apiUrl: apiUrl!,
                     incidentId: incident.id!,
                     mutate,
                     session,
diff --git a/keep-ui/app/incidents/create-or-update-incident.tsx b/keep-ui/app/incidents/create-or-update-incident.tsx
index 2ae75422b..dfaf52940 100644
--- a/keep-ui/app/incidents/create-or-update-incident.tsx
+++ b/keep-ui/app/incidents/create-or-update-incident.tsx
@@ -13,7 +13,7 @@ import {
 import { useSession } from "next-auth/react";
 import { FormEvent, useEffect, useState } from "react";
 import { toast } from "react-toastify";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { IncidentDto } from "./models";
 import { useIncidents } from "utils/hooks/useIncidents";
 import { Session } from "next-auth";
@@ -36,6 +36,7 @@ export const updateIncidentRequest = async ({
   incidentAssignee,
   incidentSameIncidentInThePastId,
   generatedByAi,
+  apiUrl,
 }: {
   session: Session | null;
   incidentId: string;
@@ -44,21 +45,24 @@ export const updateIncidentRequest = async ({
   incidentAssignee: string;
   incidentSameIncidentInThePastId: string | null;
   generatedByAi: boolean;
+  apiUrl: string;
 }) => {
-  const apiUrl = getApiURL();
-  const response = await fetch(`${apiUrl}/incidents/${incidentId}?generatedByAi=${generatedByAi}`, {
-    method: "PUT",
-    headers: {
-      Authorization: `Bearer ${session?.accessToken}`,
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      user_generated_name: incidentName,
-      user_summary: incidentUserSummary,
-      assignee: incidentAssignee,
-      same_incident_in_the_past_id: incidentSameIncidentInThePastId,
-    }),
-  });
+  const response = await fetch(
+    `${apiUrl}/incidents/${incidentId}?generatedByAi=${generatedByAi}`,
+    {
+      method: "PUT",
+      headers: {
+        Authorization: `Bearer ${session?.accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        user_generated_name: incidentName,
+        user_summary: incidentUserSummary,
+        assignee: incidentAssignee,
+        same_incident_in_the_past_id: incidentSameIncidentInThePastId,
+      }),
+    }
+  );
   return response;
 };
 
@@ -73,6 +77,7 @@ export default function CreateOrUpdateIncident({
   const [incidentUserSummary, setIncidentUserSummary] = useState<string>("");
   const [incidentAssignee, setIncidentAssignee] = useState<string>("");
   const { data: users = [] } = useUsers();
+  const apiUrl = useApiUrl();
   const editMode = incidentToEdit !== null;
 
   // Display cancel btn if editing or we need to cancel for another reason (eg. going one step back in the modal etc.)
@@ -100,7 +105,6 @@ export default function CreateOrUpdateIncident({
 
   const addIncident = async (e: FormEvent) => {
     e.preventDefault();
-    const apiUrl = getApiURL();
     const response = await fetch(`${apiUrl}/incidents`, {
       method: "POST",
       headers: {
@@ -136,9 +140,11 @@ export default function CreateOrUpdateIncident({
       incidentName: incidentName,
       incidentUserSummary: incidentUserSummary,
       incidentAssignee: incidentAssignee,
-      incidentSameIncidentInThePastId: incidentToEdit?.same_incident_in_the_past_id!,
+      incidentSameIncidentInThePastId:
+        incidentToEdit?.same_incident_in_the_past_id!,
       generatedByAi: false,
-    })
+      apiUrl: apiUrl!,
+    });
     if (response.ok) {
       exitEditMode();
       await mutate();
diff --git a/keep-ui/app/incidents/incident-candidate-actions.tsx b/keep-ui/app/incidents/incident-candidate-actions.tsx
index 1a8a33e8f..89dbb53a1 100644
--- a/keep-ui/app/incidents/incident-candidate-actions.tsx
+++ b/keep-ui/app/incidents/incident-candidate-actions.tsx
@@ -1,26 +1,27 @@
-import {getApiURL} from "../../utils/apiUrl";
-import {toast} from "react-toastify";
-import {IncidentDto, PaginatedIncidentsDto} from "./models";
-import {Session} from "next-auth";
+import { toast } from "react-toastify";
+import { IncidentDto, PaginatedIncidentsDto } from "./models";
+import { Session } from "next-auth";
 
 interface Props {
   incidentId: string;
   mutate: () => void;
   session: Session | null;
+  apiUrl: string;
 }
 
-export const handleConfirmPredictedIncident = async ({incidentId, mutate, session}: Props) => {
-  const apiUrl = getApiURL();
-  const response = await fetch(
-    `${apiUrl}/incidents/${incidentId}/confirm`,
-    {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${session?.accessToken}`,
-        "Content-Type": "application/json",
-      },
-    }
-  );
+export const handleConfirmPredictedIncident = async ({
+  incidentId,
+  mutate,
+  session,
+  apiUrl,
+}: Props) => {
+  const response = await fetch(`${apiUrl}/incidents/${incidentId}/confirm`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${session?.accessToken}`,
+      "Content-Type": "application/json",
+    },
+  });
   if (response.ok) {
     await mutate();
     toast.success("Predicted incident confirmed successfully");
@@ -29,25 +30,29 @@ export const handleConfirmPredictedIncident = async ({incidentId, mutate, sessio
       "Failed to confirm predicted incident, please contact us if this issue persists."
     );
   }
-}
+};
 
-export const deleteIncident = async ({incidentId, mutate, session}: Props) => {
-  const apiUrl = getApiURL();
+export const deleteIncident = async ({
+  incidentId,
+  mutate,
+  session,
+  apiUrl,
+}: Props) => {
   if (confirm("Are you sure you want to delete this incident?")) {
     const response = await fetch(`${apiUrl}/incidents/${incidentId}`, {
       method: "DELETE",
       headers: {
         Authorization: `Bearer ${session?.accessToken}`,
       },
-    })
+    });
 
     if (response.ok) {
-        await mutate();
-        toast.success("Incident deleted successfully");
-        return true
-      } else {
-        toast.error("Failed to delete incident, contact us if this persists");
-        return false
-      }
+      await mutate();
+      toast.success("Incident deleted successfully");
+      return true;
+    } else {
+      toast.error("Failed to delete incident, contact us if this persists");
+      return false;
+    }
   }
 };
diff --git a/keep-ui/app/incidents/incident-change-same-in-the-past.tsx b/keep-ui/app/incidents/incident-change-same-in-the-past.tsx
index bddd4fee1..eb44026bf 100644
--- a/keep-ui/app/incidents/incident-change-same-in-the-past.tsx
+++ b/keep-ui/app/incidents/incident-change-same-in-the-past.tsx
@@ -8,6 +8,7 @@ import { useIncidents, usePollIncidents } from "../../utils/hooks/useIncidents";
 import Loading from "../loading";
 import { updateIncidentRequest } from "./create-or-update-incident";
 import { IncidentDto } from "./models";
+import { useApiUrl } from "../../utils/hooks/useConfig";
 
 interface ChangeSameIncidentInThePast {
   incident: IncidentDto;
@@ -28,6 +29,7 @@ const ChangeSameIncidentInThePast = ({
   >();
   const { data: session } = useSession();
   const router = useRouter();
+  const apiUrl = useApiUrl();
 
   const associateIncidentHandler = async (
     selectedIncidentId: string | null
@@ -40,6 +42,7 @@ const ChangeSameIncidentInThePast = ({
       incidentUserSummary: incident.user_summary,
       incidentAssignee: incident.assignee,
       generatedByAi: false,
+      apiUrl: apiUrl!,
     });
     if (response.ok) {
       mutate();
diff --git a/keep-ui/app/incidents/incident-change-status-modal.tsx b/keep-ui/app/incidents/incident-change-status-modal.tsx
index 886d205b8..b8c205c05 100644
--- a/keep-ui/app/incidents/incident-change-status-modal.tsx
+++ b/keep-ui/app/incidents/incident-change-status-modal.tsx
@@ -8,7 +8,7 @@ import Select, {
 } from "react-select";
 import { useState } from "react";
 import { IncidentDto, Status } from "./models";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { toast } from "react-toastify";
 import {
@@ -71,6 +71,7 @@ export default function IncidentChangeStatusModal({
   const { data: session } = useSession();
   const [selectedStatus, setSelectedStatus] = useState<Status | null>(null);
   const [comment, setComment] = useState<string>("");
+  const apiUrl = useApiUrl();
 
   if (!incident) return null;
 
@@ -98,17 +99,20 @@ export default function IncidentChangeStatusModal({
     }
 
     try {
-      const response = await fetch(`${getApiURL()}/incidents/${incident.id}/status`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${session?.accessToken}`,
-        },
-        body: JSON.stringify({
+      const response = await fetch(
+        `${apiUrl}/incidents/${incident.id}/status`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${session?.accessToken}`,
+          },
+          body: JSON.stringify({
             status: selectedStatus,
             comment: comment,
-        }),
-      });
+          }),
+        }
+      );
 
       if (response.ok) {
         toast.success("Incident status changed successfully!");
@@ -126,7 +130,8 @@ export default function IncidentChangeStatusModal({
     <Modal onClose={handleClose} isOpen={!!incident}>
       <Title>Change Incident Status</Title>
       <Subtitle className="flex items-center">
-        Change status from <strong className="mx-2">{incident.status}</strong> to:
+        Change status from <strong className="mx-2">{incident.status}</strong>{" "}
+        to:
         <div className="flex-1">
           <Select
             options={statusOptions}
diff --git a/keep-ui/app/incidents/incidents-table.tsx b/keep-ui/app/incidents/incidents-table.tsx
index a5cc6b532..a76a3bdbd 100644
--- a/keep-ui/app/incidents/incidents-table.tsx
+++ b/keep-ui/app/incidents/incidents-table.tsx
@@ -11,7 +11,8 @@ import {
 import {
   MdRemoveCircle,
   MdModeEdit,
-  MdKeyboardDoubleArrowRight, MdPlayArrow,
+  MdKeyboardDoubleArrowRight,
+  MdPlayArrow,
 } from "react-icons/md";
 import { useSession } from "next-auth/react";
 import { IncidentDto, PaginatedIncidentsDto } from "./models";
@@ -21,12 +22,12 @@ import IncidentPagination from "./incident-pagination";
 import IncidentTableComponent from "./incident-table-component";
 import { deleteIncident } from "./incident-candidate-actions";
 import IncidentChangeStatusModal from "./incident-change-status-modal";
-import {STATUS_ICONS} from "@/app/incidents/statuses";
+import { STATUS_ICONS } from "@/app/incidents/statuses";
 import Markdown from "react-markdown";
 import remarkRehype from "remark-rehype";
 import rehypeRaw from "rehype-raw";
 import ManualRunWorkflowModal from "@/app/workflows/manual-run-workflow-modal";
-import {AlertDto} from "@/app/alerts/models";
+import { useApiUrl } from "@/utils/hooks/useConfig";
 
 const columnHelper = createColumnHelper<IncidentDto>();
 
@@ -47,6 +48,7 @@ export default function IncidentsTable({
   setSorting,
   editCallback,
 }: Props) {
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
   const [expanded, setExpanded] = useState<ExpandedState>({});
   const [pagination, setTablePagination] = useState({
@@ -68,7 +70,7 @@ export default function IncidentsTable({
     e.preventDefault();
     e.stopPropagation();
     setRunWorkflowModalIncident(incident);
-  }
+  };
 
   useEffect(() => {
     if (incidents.limit != pagination.pageSize) {
@@ -110,10 +112,7 @@ export default function IncidentsTable({
       header: "Summary",
       cell: ({ row }) => (
         <div className="text-pretty min-w-96">
-          <Markdown
-            remarkPlugins={[remarkRehype]}
-            rehypePlugins={[rehypeRaw]}
-          >
+          <Markdown remarkPlugins={[remarkRehype]} rehypePlugins={[rehypeRaw]}>
             {row.original.user_summary}
           </Markdown>
         </div>
@@ -229,6 +228,7 @@ export default function IncidentsTable({
                 incidentId: row.original.id!,
                 mutate,
                 session,
+                apiUrl: apiUrl!,
               });
             }}
           />
diff --git a/keep-ui/app/incidents/predicted-incidents-table.tsx b/keep-ui/app/incidents/predicted-incidents-table.tsx
index e674715fa..6edcf8edc 100644
--- a/keep-ui/app/incidents/predicted-incidents-table.tsx
+++ b/keep-ui/app/incidents/predicted-incidents-table.tsx
@@ -1,7 +1,4 @@
-import {
-  Button,
-  Badge
-} from "@tremor/react";
+import { Button, Badge } from "@tremor/react";
 import {
   DisplayColumnDef,
   ExpandedState,
@@ -9,13 +6,17 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { MdDone, MdBlock} from "react-icons/md";
+import { MdDone, MdBlock } from "react-icons/md";
 import { useSession } from "next-auth/react";
-import {IncidentDto, PaginatedIncidentsDto} from "./models";
+import { IncidentDto, PaginatedIncidentsDto } from "./models";
 import React, { useState } from "react";
 import Image from "next/image";
 import { IncidentTableComponent } from "./incident-table-component";
-import {deleteIncident, handleConfirmPredictedIncident} from "./incident-candidate-actions";
+import {
+  deleteIncident,
+  handleConfirmPredictedIncident,
+} from "./incident-candidate-actions";
+import { useApiUrl } from "utils/hooks/useConfig";
 
 const columnHelper = createColumnHelper<IncidentDto>();
 
@@ -31,18 +32,23 @@ export default function PredictedIncidentsTable({
   editCallback,
 }: Props) {
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
   const [expanded, setExpanded] = useState<ExpandedState>({});
 
   const columns = [
     columnHelper.display({
       id: "ai_generated_name",
       header: "Name",
-      cell: ({ row }) => <div className="text-wrap">{row.original.ai_generated_name}</div>,
+      cell: ({ row }) => (
+        <div className="text-wrap">{row.original.ai_generated_name}</div>
+      ),
     }),
     columnHelper.display({
       id: "user_summary",
       header: "Summary",
-      cell: ({ row }) => <div className="text-wrap">{row.original.generated_summary}</div>,
+      cell: ({ row }) => (
+        <div className="text-wrap">{row.original.generated_summary}</div>
+      ),
     }),
     columnHelper.display({
       id: "alerts_count",
@@ -53,7 +59,7 @@ export default function PredictedIncidentsTable({
       id: "alert_sources",
       header: "Alert Sources",
       cell: (context) =>
-        (context.row.original.alert_sources.map((alert_sources, index) => (
+        context.row.original.alert_sources.map((alert_sources, index) => (
           <Image
             className={`inline-block ${index == 0 ? "" : "-ml-2"}`}
             key={alert_sources}
@@ -63,15 +69,20 @@ export default function PredictedIncidentsTable({
             title={alert_sources}
             src={`/icons/${alert_sources}-icon.png`}
           />
-        ))
-    )}),
+        )),
+    }),
     columnHelper.display({
       id: "services",
       header: "Involved Services",
-      cell: ({row}) => <div className="text-wrap">{row.original.services.map((service) =>
-          <Badge key={service} className="mr-1">{service}</Badge>
-        )}
-      </div>,
+      cell: ({ row }) => (
+        <div className="text-wrap">
+          {row.original.services.map((service) => (
+            <Badge key={service} className="mr-1">
+              {service}
+            </Badge>
+          ))}
+        </div>
+      ),
     }),
     columnHelper.display({
       id: "delete",
@@ -88,7 +99,12 @@ export default function PredictedIncidentsTable({
             onClick={async (e: React.MouseEvent) => {
               e.preventDefault();
               e.stopPropagation();
-              await handleConfirmPredictedIncident({incidentId: context.row.original.id!, mutate, session});
+              await handleConfirmPredictedIncident({
+                incidentId: context.row.original.id!,
+                mutate,
+                session,
+                apiUrl: apiUrl!,
+              });
             }}
           />
           <Button
@@ -100,7 +116,12 @@ export default function PredictedIncidentsTable({
             onClick={async (e: React.MouseEvent) => {
               e.preventDefault();
               e.stopPropagation();
-              await deleteIncident({incidentId: context.row.original.id!, mutate, session});
+              await deleteIncident({
+                incidentId: context.row.original.id!,
+                mutate,
+                session,
+                apiUrl: apiUrl!,
+              });
             }}
           />
         </div>
@@ -116,7 +137,5 @@ export default function PredictedIncidentsTable({
     onExpandedChange: setExpanded,
   });
 
-
-
   return <IncidentTableComponent table={table} />;
 }
diff --git a/keep-ui/app/maintenance/create-or-update-maintenance-rule.tsx b/keep-ui/app/maintenance/create-or-update-maintenance-rule.tsx
index 029587a83..fc50ca66d 100644
--- a/keep-ui/app/maintenance/create-or-update-maintenance-rule.tsx
+++ b/keep-ui/app/maintenance/create-or-update-maintenance-rule.tsx
@@ -13,7 +13,7 @@ import {
 import { useSession } from "next-auth/react";
 import { FormEvent, useEffect, useState } from "react";
 import { toast } from "react-toastify";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { MaintenanceRule } from "./model";
 import { useMaintenanceRules } from "utils/hooks/useMaintenanceRules";
 import { AlertsRulesBuilder } from "app/alerts/alerts-rules-builder";
@@ -42,7 +42,7 @@ export default function CreateOrUpdateMaintenanceRule({
   const [suppress, setSuppress] = useState<boolean>(false);
   const editMode = maintenanceToEdit !== null;
   const router = useRouter();
-
+  const apiUrl = useApiUrl();
   useEffect(() => {
     if (maintenanceToEdit) {
       setMaintenanceName(maintenanceToEdit.name);
@@ -89,7 +89,6 @@ export default function CreateOrUpdateMaintenanceRule({
 
   const addMaintenanceRule = async (e: FormEvent) => {
     e.preventDefault();
-    const apiUrl = getApiURL();
     const response = await fetch(`${apiUrl}/maintenance`, {
       method: "POST",
       headers: {
@@ -118,7 +117,6 @@ export default function CreateOrUpdateMaintenanceRule({
 
   const updateMaintenanceRule = async (e: FormEvent) => {
     e.preventDefault();
-    const apiUrl = getApiURL();
     const response = await fetch(
       `${apiUrl}/maintenance/${maintenanceToEdit?.id}`,
       {
diff --git a/keep-ui/app/maintenance/maintenance-rules-table.tsx b/keep-ui/app/maintenance/maintenance-rules-table.tsx
index d26cff73b..819caa4c6 100644
--- a/keep-ui/app/maintenance/maintenance-rules-table.tsx
+++ b/keep-ui/app/maintenance/maintenance-rules-table.tsx
@@ -18,8 +18,8 @@ import {
 } from "@tanstack/react-table";
 import { MdRemoveCircle, MdModeEdit } from "react-icons/md";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
 import { toast } from "react-toastify";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { MaintenanceRule } from "./model";
 import { IoCheckmark } from "react-icons/io5";
 import { HiMiniXMark } from "react-icons/hi2";
@@ -32,8 +32,13 @@ interface Props {
   editCallback: (rule: MaintenanceRule) => void;
 }
 
-export default function MaintenanceRulesTable({ maintenanceRules, editCallback }: Props) {
+export default function MaintenanceRulesTable({
+  maintenanceRules,
+  editCallback,
+}: Props) {
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
+
   const [expanded, setExpanded] = useState<ExpandedState>({});
 
   const columns = [
@@ -118,7 +123,6 @@ export default function MaintenanceRulesTable({ maintenanceRules, editCallback }
   });
 
   const deleteMaintenanceRule = (maintenanceRuleId: number) => {
-    const apiUrl = getApiURL();
     if (confirm("Are you sure you want to delete this maintenance rule?")) {
       fetch(`${apiUrl}/maintenance/${maintenanceRuleId}`, {
         method: "DELETE",
diff --git a/keep-ui/app/mapping/create-or-edit-mapping.tsx b/keep-ui/app/mapping/create-or-edit-mapping.tsx
index d0eed3262..0145999fa 100644
--- a/keep-ui/app/mapping/create-or-edit-mapping.tsx
+++ b/keep-ui/app/mapping/create-or-edit-mapping.tsx
@@ -28,7 +28,7 @@ import {
 } from "react";
 import { usePapaParse } from "react-papaparse";
 import { toast } from "react-toastify";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useMappings } from "utils/hooks/useMappingRules";
 import { MappingRule } from "./models";
 import { CreateableSearchSelect } from "@/components/ui/CreateableSearchSelect";
@@ -54,6 +54,7 @@ export default function CreateOrEditMapping({ editRule, editCallback }: Props) {
   const [priority, setPriority] = useState<number>(0);
   const editMode = editRule !== null;
   const inputFile = useRef<HTMLInputElement>(null);
+  const apiUrl = useApiUrl();
 
   // This useEffect runs whenever an `Edit` button is pressed in the table, and populates the form with the mapping data that needs to be edited.
   useEffect(() => {
@@ -133,7 +134,6 @@ export default function CreateOrEditMapping({ editRule, editCallback }: Props) {
 
   const addRule = async (e: FormEvent) => {
     e.preventDefault();
-    const apiUrl = getApiURL();
     const response = await fetch(`${apiUrl}/mapping`, {
       method: "POST",
       headers: {
@@ -164,7 +164,6 @@ export default function CreateOrEditMapping({ editRule, editCallback }: Props) {
   // This is the function that will be called on submitting the form in the editMode, it sends a PUT request to the backennd.
   const updateRule = async (e: FormEvent) => {
     e.preventDefault();
-    const apiUrl = getApiURL();
     const response = await fetch(`${apiUrl}/mapping/${editRule?.id}`, {
       method: "PUT",
       headers: {
diff --git a/keep-ui/app/mapping/rules-table.tsx b/keep-ui/app/mapping/rules-table.tsx
index 0a126fa74..476ec90f3 100644
--- a/keep-ui/app/mapping/rules-table.tsx
+++ b/keep-ui/app/mapping/rules-table.tsx
@@ -19,7 +19,7 @@ import {
 } from "@tanstack/react-table";
 import { MdRemoveCircle, MdModeEdit } from "react-icons/md";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useMappings } from "utils/hooks/useMappingRules";
 import { toast } from "react-toastify";
 import { useState } from "react";
@@ -34,6 +34,7 @@ interface Props {
 export default function RulesTable({ mappings, editCallback }: Props) {
   const { data: session } = useSession();
   const { mutate } = useMappings();
+  const apiUrl = useApiUrl();
   const [expanded, setExpanded] = useState<ExpandedState>({});
 
   const columns = [
@@ -114,7 +115,6 @@ export default function RulesTable({ mappings, editCallback }: Props) {
   });
 
   const deleteRule = (ruleId: number) => {
-    const apiUrl = getApiURL();
     if (confirm("Are you sure you want to delete this rule?")) {
       fetch(`${apiUrl}/mapping/${ruleId}`, {
         method: "DELETE",
diff --git a/keep-ui/app/providers/oauth2/[providerType]/page.tsx b/keep-ui/app/providers/oauth2/[providerType]/page.tsx
index 5627bba06..adac2176e 100644
--- a/keep-ui/app/providers/oauth2/[providerType]/page.tsx
+++ b/keep-ui/app/providers/oauth2/[providerType]/page.tsx
@@ -1,6 +1,6 @@
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "pages/api/auth/[...nextauth]";
-import { getApiURL } from "utils/apiUrl";
+import { getApiURL } from "@/utils/apiUrl";
 import { redirect } from "next/navigation";
 import { cookies } from "next/headers";
 
@@ -12,6 +12,7 @@ export default async function InstallFromOAuth({
   searchParams: { [key: string]: string };
 }) {
   const accessToken = await getServerSession(authOptions);
+  // this is server so we can use the old getApiURL
   const apiUrl = getApiURL();
   const cookieStore = cookies();
   const verifier = cookieStore.get("verifier");
diff --git a/keep-ui/app/providers/page.client.tsx b/keep-ui/app/providers/page.client.tsx
index 8527a96b2..68ce8aab8 100644
--- a/keep-ui/app/providers/page.client.tsx
+++ b/keep-ui/app/providers/page.client.tsx
@@ -1,8 +1,8 @@
 "use client";
 import { defaultProvider, Provider } from "./providers";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "../../utils/apiUrl";
 import { KeepApiError } from "../error";
+import { useApiUrl } from "utils/hooks/useConfig";
 import ProvidersTiles from "./providers-tiles";
 import React, { useState, useEffect } from "react";
 import Loading from "../loading";
@@ -111,6 +111,7 @@ export default function ProvidersPage({
     isLocalhost,
   } = useFetchProviders();
   const { providersSearchString, providersSelectedTags } = useFilterContext();
+  const apiUrl = useApiUrl();
   const router = useRouter();
   useEffect(() => {
     if (searchParams?.oauth === "failure") {
@@ -127,7 +128,7 @@ export default function ProvidersPage({
   if (error) {
     throw new KeepApiError(
       error.message,
-      `${getApiURL()}/providers`,
+      `${apiUrl}/providers`,
       error.proposedResolution,
       error.statusCode
     );
diff --git a/keep-ui/app/providers/provider-form.tsx b/keep-ui/app/providers/provider-form.tsx
index f907e6c08..a9d1956b3 100644
--- a/keep-ui/app/providers/provider-form.tsx
+++ b/keep-ui/app/providers/provider-form.tsx
@@ -4,7 +4,7 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
 import { useSession } from "next-auth/react";
 import { Provider } from "./providers";
-import { getApiURL } from "../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import Image from "next/image";
 import {
   Title,
@@ -205,13 +205,15 @@ const ProviderForm = ({
   const inputFileRef = useRef(null);
   const [selectedFile, setSelectedFile] = useState(null);
 
+  const apiUrl = useApiUrl();
+
   const { data: session } = useSession();
 
   const accessToken = session?.accessToken;
 
   const callInstallWebhook = async (e: Event) => {
     e.preventDefault();
-    await installWebhook(provider, accessToken!);
+    await installWebhook(provider, accessToken!, apiUrl);
   };
 
   async function handleOauth(e: MouseEvent) {
@@ -253,7 +255,7 @@ const ProviderForm = ({
   useEffect(() => {
     if (triggerRevalidateScope !== 0) {
       setRefreshLoading(true);
-      fetch(`${getApiURL()}/providers/${provider.id}/scopes`, {
+      fetch(`${apiUrl}/providers/${provider.id}/scopes`, {
         method: "POST",
         headers: {
           Authorization: `Bearer ${accessToken}`,
@@ -276,7 +278,7 @@ const ProviderForm = ({
   async function deleteProvider() {
     if (confirm("Are you sure you want to delete this provider?")) {
       const response = await fetch(
-        `${getApiURL()}/providers/${provider.type}/${provider.id}`,
+        `${apiUrl}/providers/${provider.type}/${provider.id}`,
         {
           method: "DELETE",
           headers: {
@@ -439,7 +441,7 @@ const ProviderForm = ({
     e.preventDefault();
     if (validate()) {
       setIsLoading(true);
-      submit(`${getApiURL()}/providers/${provider.id}`, "PUT")
+      submit(`${apiUrl}/providers/${provider.id}`, "PUT")
         .then((data) => {
           setIsLoading(false);
           toast.success("Updated provider successfully", {
@@ -461,7 +463,7 @@ const ProviderForm = ({
     if (validate()) {
       setIsLoading(true);
       onConnectChange(true, false);
-      submit(`${getApiURL()}/providers/install`)
+      submit(`${apiUrl}/providers/install`)
         .then(async (data) => {
           console.log("Connect Result:", data);
           setIsLoading(false);
@@ -472,7 +474,7 @@ const ProviderForm = ({
             !isLocalhost
           ) {
             // mutate after webhook installation
-            await installWebhook(data as Provider, accessToken);
+            await installWebhook(data as Provider, accessToken, apiUrl);
           }
           mutate();
         })
diff --git a/keep-ui/app/providers/provider-semi-automated.tsx b/keep-ui/app/providers/provider-semi-automated.tsx
index f0f3ff72d..a171bbe09 100644
--- a/keep-ui/app/providers/provider-semi-automated.tsx
+++ b/keep-ui/app/providers/provider-semi-automated.tsx
@@ -1,13 +1,13 @@
 import useSWR from "swr";
 import { Provider } from "./providers";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { fetcher } from "utils/fetcher";
 import { Subtitle, Title, Text, Icon } from "@tremor/react";
 import { CopyBlock, a11yLight, railscast } from "react-code-blocks";
 import Image from "next/image";
 import { ArrowLongRightIcon } from "@heroicons/react/24/outline";
 import Markdown from "react-markdown";
-import remarkGfm from 'remark-gfm'
+import remarkGfm from "remark-gfm";
 
 interface WebhookSettings {
   webhookDescription: string;
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export const ProviderSemiAutomated = ({ provider, accessToken }: Props) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data, error, isLoading } = useSWR<WebhookSettings>(
     `${apiUrl}/providers/${provider.type}/webhook`,
     (url: string) => fetcher(url, accessToken)
@@ -43,15 +43,16 @@ export const ProviderSemiAutomated = ({ provider, accessToken }: Props) => {
     codeBlock: true,
   };
 
-  const isMultiline = data!.webhookDescription.includes('\n');
-  const descriptionLines = data!.webhookDescription.split('\n');
+  const isMultiline = data!.webhookDescription.includes("\n");
+  const descriptionLines = data!.webhookDescription.split("\n");
   const settingsNotEmpty = settings.text.trim().length > 0;
   const webhookMarkdown = data!.webhookMarkdown;
   return (
     <div className="my-2.5">
       <Title>
         Push alerts from{" "}
-        {provider.type.charAt(0).toLocaleUpperCase() + provider.display_name.slice(1)}
+        {provider.type.charAt(0).toLocaleUpperCase() +
+          provider.display_name.slice(1)}
       </Title>
       <div className="flex">
         <Image
@@ -71,25 +72,24 @@ export const ProviderSemiAutomated = ({ provider, accessToken }: Props) => {
         />
       </div>
       <Subtitle>
-        Seamlessly push alerts without actively connecting {provider.display_name}
+        Seamlessly push alerts without actively connecting{" "}
+        {provider.display_name}
       </Subtitle>
       {isMultiline ? (
-      descriptionLines.map((line, index) => (
-        <Text key={index} className="my-2.5 whitespace-pre-wrap">
-          {line}
-        </Text>
-      ))
-    ) : (
-      <Text className="my-2.5">{data!.webhookDescription}</Text>
-    )}
-     {settingsNotEmpty && <CopyBlock {...settings} />}
-     {webhookMarkdown && (
-      <div className="prose whitespace-nowrap">
-        <Markdown remarkPlugins={[remarkGfm]}>
-          {webhookMarkdown}
-        </Markdown>
-      </div>
-     )}
+        descriptionLines.map((line, index) => (
+          <Text key={index} className="my-2.5 whitespace-pre-wrap">
+            {line}
+          </Text>
+        ))
+      ) : (
+        <Text className="my-2.5">{data!.webhookDescription}</Text>
+      )}
+      {settingsNotEmpty && <CopyBlock {...settings} />}
+      {webhookMarkdown && (
+        <div className="prose whitespace-nowrap">
+          <Markdown remarkPlugins={[remarkGfm]}>{webhookMarkdown}</Markdown>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/keep-ui/app/rules/CorrelationSidebar/CorrelationSidebarBody.tsx b/keep-ui/app/rules/CorrelationSidebar/CorrelationSidebarBody.tsx
index 147648be0..ffb225c04 100644
--- a/keep-ui/app/rules/CorrelationSidebar/CorrelationSidebarBody.tsx
+++ b/keep-ui/app/rules/CorrelationSidebar/CorrelationSidebarBody.tsx
@@ -1,5 +1,5 @@
 import { Button, Callout, Icon } from "@tremor/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { formatQuery } from "react-querybuilder";
 import { useLocalStorage } from "utils/hooks/useLocalStorage";
 import { IoMdClose } from "react-icons/io";
@@ -30,7 +30,7 @@ export const CorrelationSidebarBody = ({
   toggle,
   defaultValue,
 }: CorrelationSidebarBodyProps) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
 
   const methods = useForm<CorrelationFormType>({
     defaultValues: defaultValue,
diff --git a/keep-ui/app/rules/CorrelationSidebar/DeleteRule.tsx b/keep-ui/app/rules/CorrelationSidebar/DeleteRule.tsx
index 2efbb2779..feabbeb1d 100644
--- a/keep-ui/app/rules/CorrelationSidebar/DeleteRule.tsx
+++ b/keep-ui/app/rules/CorrelationSidebar/DeleteRule.tsx
@@ -2,7 +2,7 @@ import { TrashIcon } from "@radix-ui/react-icons";
 import { Button } from "@tremor/react";
 import { useSession } from "next-auth/react";
 import { MouseEvent } from "react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useRules } from "utils/hooks/useRules";
 
 type DeleteRuleCellProps = {
@@ -10,7 +10,7 @@ type DeleteRuleCellProps = {
 };
 
 export const DeleteRuleCell = ({ ruleId }: DeleteRuleCellProps) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
   const { mutate } = useRules();
 
diff --git a/keep-ui/app/settings/auth/api-key-settings.tsx b/keep-ui/app/settings/auth/api-key-settings.tsx
index 34e04f14b..aa8e5621f 100644
--- a/keep-ui/app/settings/auth/api-key-settings.tsx
+++ b/keep-ui/app/settings/auth/api-key-settings.tsx
@@ -15,7 +15,7 @@ import {
 import Loading from "app/loading";
 import { CopyBlock, a11yLight } from "react-code-blocks";
 import useSWR from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { KeyIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { fetcher } from "utils/fetcher";
 import { useState } from "react";
@@ -49,7 +49,7 @@ interface Config {
 }
 
 export default function ApiKeySettings({ accessToken, selectedTab }: Props) {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data, error, isLoading } = useSWR<ApiKeyResponse>(
     selectedTab === "api-key" ? `${apiUrl}/settings/apikeys` : null,
     async (url) => {
@@ -83,7 +83,10 @@ export default function ApiKeySettings({ accessToken, selectedTab }: Props) {
   const authType = configData?.AUTH_TYPE as AuthenticationType;
   const createApiKeyEnabled = authType !== AuthenticationType.NOAUTH;
 
-  const handleRegenerate = async (apiKeyId: string, event: React.MouseEvent) => {
+  const handleRegenerate = async (
+    apiKeyId: string,
+    event: React.MouseEvent
+  ) => {
     event.stopPropagation();
     const confirmed = confirm(
       "This action cannot be undone. This will revoke the key and generate a new one. Any further requests made with this key will fail. Make sure to update any applications that use this key."
@@ -160,11 +163,19 @@ export default function ApiKeySettings({ accessToken, selectedTab }: Props) {
             <TableHead>
               <TableRow>
                 <TableHeaderCell className="text-left">Name</TableHeaderCell>
-                <TableHeaderCell className="text-left w-1/4">Key</TableHeaderCell>
+                <TableHeaderCell className="text-left w-1/4">
+                  Key
+                </TableHeaderCell>
                 <TableHeaderCell className="text-left">Role</TableHeaderCell>
-                <TableHeaderCell className="text-left">Created By</TableHeaderCell>
-                <TableHeaderCell className="text-left">Created At</TableHeaderCell>
-                <TableHeaderCell className="text-left">Last Used</TableHeaderCell>
+                <TableHeaderCell className="text-left">
+                  Created By
+                </TableHeaderCell>
+                <TableHeaderCell className="text-left">
+                  Created At
+                </TableHeaderCell>
+                <TableHeaderCell className="text-left">
+                  Last Used
+                </TableHeaderCell>
                 <TableHeaderCell className="w-1/12"></TableHeaderCell>
               </TableRow>
             </TableHead>
@@ -221,7 +232,7 @@ export default function ApiKeySettings({ accessToken, selectedTab }: Props) {
         onClose={() => setApiKeyModalOpen(false)}
         accessToken={accessToken}
         setApiKeys={setApiKeys}
-        apiUrl={apiUrl}
+        apiUrl={apiUrl!}
         roles={roles}
       />
     </div>
diff --git a/keep-ui/app/settings/auth/groups-sidebar.tsx b/keep-ui/app/settings/auth/groups-sidebar.tsx
index eabb569c4..a31c0d5bd 100644
--- a/keep-ui/app/settings/auth/groups-sidebar.tsx
+++ b/keep-ui/app/settings/auth/groups-sidebar.tsx
@@ -1,11 +1,24 @@
 import { Fragment, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import { Text, Subtitle, Button, TextInput, MultiSelect, MultiSelectItem, Callout } from "@tremor/react";
+import {
+  Text,
+  Subtitle,
+  Button,
+  TextInput,
+  MultiSelect,
+  MultiSelectItem,
+  Callout,
+} from "@tremor/react";
 import { IoMdClose } from "react-icons/io";
-import { useForm, Controller, SubmitHandler, FieldValues } from "react-hook-form";
+import {
+  useForm,
+  Controller,
+  SubmitHandler,
+  FieldValues,
+} from "react-hook-form";
 import { useRoles } from "utils/hooks/useRoles";
 import { useUsers } from "utils/hooks/useUsers";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import "./multiselect.css";
 
 interface GroupSidebarProps {
@@ -17,8 +30,23 @@ interface GroupSidebarProps {
   accessToken: string;
 }
 
-const GroupsSidebar = ({ isOpen, toggle, group, isNewGroup, mutateGroups, accessToken }: GroupSidebarProps) => {
-  const { control, handleSubmit, setValue, reset, formState: { errors, isDirty }, clearErrors, setError } = useForm({
+const GroupsSidebar = ({
+  isOpen,
+  toggle,
+  group,
+  isNewGroup,
+  mutateGroups,
+  accessToken,
+}: GroupSidebarProps) => {
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors, isDirty },
+    clearErrors,
+    setError,
+  } = useForm({
     defaultValues: {
       name: "",
       members: [],
@@ -29,6 +57,7 @@ const GroupsSidebar = ({ isOpen, toggle, group, isNewGroup, mutateGroups, access
   const { data: roles = [] } = useRoles();
   const { data: users = [], mutate: mutateUsers } = useUsers();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const apiUrl = useApiUrl();
 
   useEffect(() => {
     if (isOpen) {
@@ -52,7 +81,9 @@ const GroupsSidebar = ({ isOpen, toggle, group, isNewGroup, mutateGroups, access
     clearErrors(); // Clear all errors
 
     const method = isNewGroup ? "POST" : "PUT";
-    const url = isNewGroup ? `${getApiURL()}/auth/groups` : `${getApiURL()}/auth/groups/${group.id}`;
+    const url = isNewGroup
+      ? `${apiUrl}/auth/groups`
+      : `${apiUrl}/auth/groups/${group.id}`;
     try {
       const response = await fetch(url, {
         method: method,
@@ -70,7 +101,8 @@ const GroupsSidebar = ({ isOpen, toggle, group, isNewGroup, mutateGroups, access
       } else {
         const errorData = await response.json();
         setError("root.serverError", {
-          message: errorData.detail || errorData.message || "Failed to save group"
+          message:
+            errorData.detail || errorData.message || "Failed to save group",
         });
       }
     } catch (error) {
@@ -127,7 +159,10 @@ const GroupsSidebar = ({ isOpen, toggle, group, isNewGroup, mutateGroups, access
                 <IoMdClose className="h-6 w-6 text-gray-500" />
               </Button>
             </div>
-            <form onSubmit={handleSubmitClick} className="mt-4 flex flex-col h-full">
+            <form
+              onSubmit={handleSubmitClick}
+              className="mt-4 flex flex-col h-full"
+            >
               <div className="flex-grow">
                 <div className="mt-4">
                   <label className="block text-sm font-medium text-gray-700">
@@ -143,9 +178,7 @@ const GroupsSidebar = ({ isOpen, toggle, group, isNewGroup, mutateGroups, access
                         error={!!errors.name}
                         errorMessage={errors.name?.message}
                         disabled={!isNewGroup}
-                        className={`${
-                            isNewGroup ? "" : "bg-gray-200"
-                        }`}
+                        className={`${isNewGroup ? "" : "bg-gray-200"}`}
                       />
                     )}
                   />
@@ -198,7 +231,11 @@ const GroupsSidebar = ({ isOpen, toggle, group, isNewGroup, mutateGroups, access
                 </div>
               </div>
               {errors.root?.serverError && (
-                <Callout className="mt-4" title="Error while saving group" color="rose">
+                <Callout
+                  className="mt-4"
+                  title="Error while saving group"
+                  color="rose"
+                >
                   {errors.root.serverError.message}
                 </Callout>
               )}
@@ -219,7 +256,11 @@ const GroupsSidebar = ({ isOpen, toggle, group, isNewGroup, mutateGroups, access
                   type="submit"
                   disabled={isSubmitting || (isNewGroup ? false : !isDirty)}
                 >
-                  {isSubmitting ? "Saving..." : isNewGroup ? "Create Group" : "Save"}
+                  {isSubmitting
+                    ? "Saving..."
+                    : isNewGroup
+                    ? "Create Group"
+                    : "Save"}
                 </Button>
               </div>
             </form>
diff --git a/keep-ui/app/settings/auth/groups-tab.tsx b/keep-ui/app/settings/auth/groups-tab.tsx
index 538001542..93f051555 100644
--- a/keep-ui/app/settings/auth/groups-tab.tsx
+++ b/keep-ui/app/settings/auth/groups-tab.tsx
@@ -19,7 +19,7 @@ import { useUsers } from "utils/hooks/useUsers";
 import { useRoles } from "utils/hooks/useRoles";
 import { useState, useEffect, useMemo } from "react";
 import GroupsSidebar from "./groups-sidebar";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { MdGroupAdd } from "react-icons/md";
 
@@ -28,33 +28,49 @@ interface Props {
 }
 
 export default function GroupsTab({ accessToken }: Props) {
-  const { data: groups = [], isLoading: groupsLoading, mutate: mutateGroups } = useGroups();
-  const { data: users = [], isLoading: usersLoading, mutate: mutateUsers } = useUsers();
+  const {
+    data: groups = [],
+    isLoading: groupsLoading,
+    mutate: mutateGroups,
+  } = useGroups();
+  const {
+    data: users = [],
+    isLoading: usersLoading,
+    mutate: mutateUsers,
+  } = useUsers();
   const { data: roles = [] } = useRoles();
 
-  const [groupStates, setGroupStates] = useState<{ [key: string]: { members: string[], roles: string[] } }>({});
+  const [groupStates, setGroupStates] = useState<{
+    [key: string]: { members: string[]; roles: string[] };
+  }>({});
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [selectedGroup, setSelectedGroup] = useState<any>(null);
   const [filter, setFilter] = useState("");
   const [isNewGroup, setIsNewGroup] = useState(false);
+  const apiUrl = useApiUrl();
 
   useEffect(() => {
     if (groups) {
-      const initialGroupStates = groups.reduce((acc, group) => {
-        acc[group.id] = {
-          members: group.members || [],
-          roles: group.roles || [],
-        };
-        return acc;
-      }, {} as { [key: string]: { members: string[], roles: string[] } });
+      const initialGroupStates = groups.reduce(
+        (acc, group) => {
+          acc[group.id] = {
+            members: group.members || [],
+            roles: group.roles || [],
+          };
+          return acc;
+        },
+        {} as { [key: string]: { members: string[]; roles: string[] } }
+      );
       setGroupStates(initialGroupStates);
     }
   }, [groups]);
 
   const filteredGroups = useMemo(() => {
-    return groups?.filter(group =>
-      group.name.toLowerCase().includes(filter.toLowerCase())
-    ) || [];
+    return (
+      groups?.filter((group) =>
+        group.name.toLowerCase().includes(filter.toLowerCase())
+      ) || []
+    );
   }, [groups, filter]);
 
   if (groupsLoading || usersLoading || !roles) return <Loading />;
@@ -71,13 +87,16 @@ export default function GroupsTab({ accessToken }: Props) {
     setIsSidebarOpen(true);
   };
 
-  const handleDeleteGroup = async (groupName: string, event: React.MouseEvent) => {
+  const handleDeleteGroup = async (
+    groupName: string,
+    event: React.MouseEvent
+  ) => {
     event.stopPropagation();
     if (window.confirm("Are you sure you want to delete this group?")) {
       try {
-        const url = `${getApiURL()}/auth/groups/${groupName}`;
+        const url = `${apiUrl}/auth/groups/${groupName}`;
         const response = await fetch(url, {
-          method: 'DELETE',
+          method: "DELETE",
           headers: {
             Authorization: `Bearer ${accessToken}`,
           },
diff --git a/keep-ui/app/settings/auth/permissions-tab.tsx b/keep-ui/app/settings/auth/permissions-tab.tsx
index d2529df78..a598d3e43 100644
--- a/keep-ui/app/settings/auth/permissions-tab.tsx
+++ b/keep-ui/app/settings/auth/permissions-tab.tsx
@@ -19,7 +19,7 @@ import { usePresets } from "utils/hooks/usePresets";
 import { useGroups } from "utils/hooks/useGroups";
 import { useUsers } from "utils/hooks/useUsers";
 import { usePermissions } from "utils/hooks/usePermissions";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import PermissionSidebar from "./permissions-sidebar";
 import { Permission } from "app/settings/models";
@@ -31,45 +31,67 @@ interface Props {
 
 export default function PermissionsTab({ accessToken }: Props) {
   const { data: session } = useSession();
-  const apiUrl = getApiURL();
-  const [selectedPermissions, setSelectedPermissions] = useState<{ [key: string]: string[] }>({});
-  const [initialPermissions, setInitialPermissions] = useState<{ [key: string]: string[] }>({});
+  const apiUrl = useApiUrl();
+  const [selectedPermissions, setSelectedPermissions] = useState<{
+    [key: string]: string[];
+  }>({});
+  const [initialPermissions, setInitialPermissions] = useState<{
+    [key: string]: string[];
+  }>({});
   const [filter, setFilter] = useState("");
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [selectedPreset, setSelectedPreset] = useState<any>(null);
 
   const { useAllPresets } = usePresets();
-  const { data: presets = [], error: presetsError, isValidating: presetsLoading } = useAllPresets();
-  const { data: groups = [], error: groupsError, isValidating: groupsLoading } = useGroups();
-  const { data: users = [], error: usersError, isValidating: usersLoading } = useUsers();
-  const { data: permissions = [], error: permissionsError, isValidating: permissionsLoading } = usePermissions();
-
+  const {
+    data: presets = [],
+    error: presetsError,
+    isValidating: presetsLoading,
+  } = useAllPresets();
+  const {
+    data: groups = [],
+    error: groupsError,
+    isValidating: groupsLoading,
+  } = useGroups();
+  const {
+    data: users = [],
+    error: usersError,
+    isValidating: usersLoading,
+  } = useUsers();
+  const {
+    data: permissions = [],
+    error: permissionsError,
+    isValidating: permissionsLoading,
+  } = usePermissions();
 
   // SHAHAR: TODO: fix when needed
   const displayPermissions = useMemo<Permission[]>(() => {
-    const groupPermissions: Permission[] = (groups || []).map(group => ({
+    const groupPermissions: Permission[] = (groups || []).map((group) => ({
       id: group.id,
       resource_id: group.id,
       entity_id: group.id,
-      permissions: [{ id: 'group' }],
+      permissions: [{ id: "group" }],
       name: group.name,
-      type: "group"
+      type: "group",
     }));
-    const userPermissions: Permission[] = (users || []).map(user => ({
+    const userPermissions: Permission[] = (users || []).map((user) => ({
       id: user.email,
       resource_id: user.email,
       entity_id: user.email,
-      permissions: [{ id: 'user' }],
+      permissions: [{ id: "user" }],
       name: user.name,
-      type: "user"
+      type: "user",
     }));
     return [...groupPermissions, ...userPermissions];
   }, [groups, users]);
 
-  const handlePermissionChange = (presetId: string, newPermissions: string[]) => {
-    setSelectedPermissions(prev => ({
+  const handlePermissionChange = (
+    presetId: string,
+    newPermissions: string[]
+  ) => {
+    setSelectedPermissions((prev) => ({
       ...prev,
-      [presetId]: newPermissions
+      [presetId]: newPermissions,
     }));
   };
 
@@ -77,8 +99,10 @@ export default function PermissionsTab({ accessToken }: Props) {
     if (permissions) {
       const initialPerms: { [key: string]: string[] } = {};
 
-      permissions.forEach(permission => {
-        initialPerms[permission.resource_id] = permission.permissions.map(p => p.id);
+      permissions.forEach((permission) => {
+        initialPerms[permission.resource_id] = permission.permissions.map(
+          (p) => p.id
+        );
       });
 
       setInitialPermissions(initialPerms);
@@ -86,36 +110,48 @@ export default function PermissionsTab({ accessToken }: Props) {
     }
   }, [permissions]);
 
-  const hasChanges = JSON.stringify(initialPermissions) !== JSON.stringify(selectedPermissions);
+  const hasChanges =
+    JSON.stringify(initialPermissions) !== JSON.stringify(selectedPermissions);
 
   const savePermissions = async () => {
     try {
-      const changedPermissions = Object.entries(selectedPermissions).reduce((acc, [presetId, permissions]) => {
-        if (JSON.stringify(permissions) !== JSON.stringify(initialPermissions[presetId])) {
-          acc[presetId] = permissions;
-        }
-        return acc;
-      }, {} as { [key: string]: string[] });
-
-      const resourcePermissions = Object.entries(changedPermissions).map(([presetId, permissions]) => ({
-        resource_id: presetId,
-        resource_name: presets?.find(preset => preset.id === presetId)?.name || "",
-        resource_type: "preset",
-        permissions: permissions.map(permissionId => {
-          const permission = displayPermissions.find(p => p.id === permissionId);
-          return {
-            id: permissionId,
-            type: permission?.type
-          };
+      const changedPermissions = Object.entries(selectedPermissions).reduce(
+        (acc, [presetId, permissions]) => {
+          if (
+            JSON.stringify(permissions) !==
+            JSON.stringify(initialPermissions[presetId])
+          ) {
+            acc[presetId] = permissions;
+          }
+          return acc;
+        },
+        {} as { [key: string]: string[] }
+      );
+
+      const resourcePermissions = Object.entries(changedPermissions).map(
+        ([presetId, permissions]) => ({
+          resource_id: presetId,
+          resource_name:
+            presets?.find((preset) => preset.id === presetId)?.name || "",
+          resource_type: "preset",
+          permissions: permissions.map((permissionId) => {
+            const permission = displayPermissions.find(
+              (p) => p.id === permissionId
+            );
+            return {
+              id: permissionId,
+              type: permission?.type,
+            };
+          }),
         })
-      }));
+      );
 
       if (resourcePermissions.length === 0) {
         console.log("No changes to save");
         return;
       }
 
-      const response = await fetch(`${getApiURL()}/auth/permissions`, {
+      const response = await fetch(`${apiUrl}/auth/permissions`, {
         method: "POST",
         headers: {
           Authorization: `Bearer ${session?.accessToken}`,
@@ -129,18 +165,25 @@ export default function PermissionsTab({ accessToken }: Props) {
         // You might want to show a success message here
       } else {
         const errorData = await response.json();
-        console.error("Failed to save permissions:", errorData.detail || errorData.message || "Unknown error");
+        console.error(
+          "Failed to save permissions:",
+          errorData.detail || errorData.message || "Unknown error"
+        );
         // You might want to show an error message to the user here
       }
     } catch (error) {
-      console.error("An unexpected error occurred while saving permissions:", error);
+      console.error(
+        "An unexpected error occurred while saving permissions:",
+        error
+      );
       // You might want to show an error message to the user here
     }
   };
 
-  if (presetsLoading || groupsLoading || usersLoading || permissionsLoading) return <Loading />;
+  if (presetsLoading || groupsLoading || usersLoading || permissionsLoading)
+    return <Loading />;
 
-  const filteredPresets = (presets || []).filter(preset =>
+  const filteredPresets = (presets || []).filter((preset) =>
     preset.name.toLowerCase().includes(filter.toLowerCase())
   );
 
@@ -149,12 +192,15 @@ export default function PermissionsTab({ accessToken }: Props) {
     setIsSidebarOpen(true);
   };
 
-  const handleDeletePermission = async (presetId: string, event: React.MouseEvent) => {
+  const handleDeletePermission = async (
+    presetId: string,
+    event: React.MouseEvent
+  ) => {
     event.stopPropagation();
     if (window.confirm("Are you sure you want to delete this permission?")) {
       try {
         const response = await fetch(`${apiUrl}/auth/permissions/${presetId}`, {
-          method: 'DELETE',
+          method: "DELETE",
           headers: {
             Authorization: `Bearer ${accessToken}`,
           },
@@ -178,11 +224,7 @@ export default function PermissionsTab({ accessToken }: Props) {
           <Title>Permissions Management</Title>
           <Subtitle>Manage permissions for Keep resources</Subtitle>
         </div>
-        <Button
-          color="orange"
-          onClick={savePermissions}
-          disabled={!hasChanges}
-        >
+        <Button color="orange" onClick={savePermissions} disabled={!hasChanges}>
           Save Permissions
         </Button>
       </div>
@@ -196,8 +238,12 @@ export default function PermissionsTab({ accessToken }: Props) {
         <Table className="h-full">
           <TableHead>
             <TableRow>
-              <TableHeaderCell className="w-6/24">Resource Name</TableHeaderCell>
-              <TableHeaderCell className="w-6/24">Resource Type</TableHeaderCell>
+              <TableHeaderCell className="w-6/24">
+                Resource Name
+              </TableHeaderCell>
+              <TableHeaderCell className="w-6/24">
+                Resource Type
+              </TableHeaderCell>
               <TableHeaderCell className="w-11/24">Permissions</TableHeaderCell>
               <TableHeaderCell className="w-1/24"></TableHeaderCell>
             </TableRow>
@@ -210,14 +256,24 @@ export default function PermissionsTab({ accessToken }: Props) {
                 onClick={() => handleRowClick(preset)}
               >
                 <TableCell className="w-6/24">{preset.name}</TableCell>
-                <TableCell className="w-6/24"> <Badge color="orange" className="text-xs">preset</Badge></TableCell>
+                <TableCell className="w-6/24">
+                  {" "}
+                  <Badge color="orange" className="text-xs">
+                    preset
+                  </Badge>
+                </TableCell>
                 <TableCell className="w-11/24">
                   <div className="flex flex-wrap gap-1">
-                    {selectedPermissions[preset.id]?.slice(0, 5).map((permId, index) => (
-                      <Badge key={index} color="orange" className="text-xs">
-                        {displayPermissions.find(p => p.id === permId)?.name}
-                      </Badge>
-                    ))}
+                    {selectedPermissions[preset.id]
+                      ?.slice(0, 5)
+                      .map((permId, index) => (
+                        <Badge key={index} color="orange" className="text-xs">
+                          {
+                            displayPermissions.find((p) => p.id === permId)
+                              ?.name
+                          }
+                        </Badge>
+                      ))}
                     {selectedPermissions[preset.id]?.length > 5 && (
                       <Badge color="orange" className="text-xs">
                         +{selectedPermissions[preset.id].length - 5} more
@@ -226,7 +282,7 @@ export default function PermissionsTab({ accessToken }: Props) {
                   </div>
                 </TableCell>
                 <TableCell className="w-1/24">
-                <div className="flex justify-end">
+                  <div className="flex justify-end">
                     <Button
                       icon={TrashIcon}
                       variant="light"
diff --git a/keep-ui/app/settings/auth/roles-sidebar.tsx b/keep-ui/app/settings/auth/roles-sidebar.tsx
index 64272a346..9594aa0b7 100644
--- a/keep-ui/app/settings/auth/roles-sidebar.tsx
+++ b/keep-ui/app/settings/auth/roles-sidebar.tsx
@@ -1,9 +1,14 @@
 import { Fragment, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import { useForm, Controller, SubmitHandler, FieldValues } from "react-hook-form";
+import {
+  useForm,
+  Controller,
+  SubmitHandler,
+  FieldValues,
+} from "react-hook-form";
 import { Text, Button, TextInput, Callout, Badge } from "@tremor/react";
 import { IoMdClose } from "react-icons/io";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { Role } from "app/settings/models";
 
 interface RoleSidebarProps {
@@ -23,26 +28,40 @@ const RoleSidebar = ({
   resources,
   mutateRoles,
 }: RoleSidebarProps) => {
-  const { control, handleSubmit, setValue, reset, setError, formState: { errors }, clearErrors } = useForm({
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    reset,
+    setError,
+    formState: { errors },
+    clearErrors,
+  } = useForm({
     defaultValues: {
       name: selectedRole?.name || "",
       description: selectedRole?.description || "",
     },
   });
 
-  const [newRoleScopes, setNewRoleScopes] = useState<{ [key: string]: any }>({});
+  const [newRoleScopes, setNewRoleScopes] = useState<{ [key: string]: any }>(
+    {}
+  );
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const apiUrl = useApiUrl();
 
   useEffect(() => {
     if (isOpen && selectedRole) {
       setValue("name", selectedRole.name);
       setValue("description", selectedRole.description);
-      const roleScopes = selectedRole.scopes.reduce((acc: any, scope: string) => {
-        const [action, resource] = scope.split(":");
-        if (!acc[resource]) acc[resource] = {};
-        acc[resource][action] = true;
-        return acc;
-      }, {});
+      const roleScopes = selectedRole.scopes.reduce(
+        (acc: any, scope: string) => {
+          const [action, resource] = scope.split(":");
+          if (!acc[resource]) acc[resource] = {};
+          acc[resource][action] = true;
+          return acc;
+        },
+        {}
+      );
       setNewRoleScopes(roleScopes);
     }
   }, [selectedRole, setValue, isOpen]);
@@ -72,7 +91,9 @@ const RoleSidebar = ({
           <div
             key={action}
             className={`flex items-center justify-center cursor-pointer ${
-              newRoleScopes[resource]?.[action] ? "text-green-500" : "text-gray-300"
+              newRoleScopes[resource]?.[action]
+                ? "text-green-500"
+                : "text-gray-300"
             }`}
             onClick={() => {
               if (!selectedRole || !selectedRole.predefined) {
@@ -87,12 +108,34 @@ const RoleSidebar = ({
             }}
           >
             {newRoleScopes[resource]?.[action] ? (
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
             ) : (
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
             )}
           </div>
@@ -115,9 +158,10 @@ const RoleSidebar = ({
               .map(([action, _]) => `${action}:${resource}`)
           ),
       };
-      const apiUrl = getApiURL();
       // url includes the role id if it is an edit operation
-      const url = selectedRole ? `${apiUrl}/auth/roles/${selectedRole.id}` : `${apiUrl}/auth/roles`;
+      const url = selectedRole
+        ? `${apiUrl}/auth/roles/${selectedRole.id}`
+        : `${apiUrl}/auth/roles`;
       // add id to the body if it is an edit operation
       const response = await fetch(url, {
         method: selectedRole ? "PUT" : "POST",
@@ -135,10 +179,16 @@ const RoleSidebar = ({
         await mutateRoles();
       } else {
         const errorData = await response.json();
-        setError("root.serverError", { type: "manual", message: errorData.message || "Failed to save role" });
+        setError("root.serverError", {
+          type: "manual",
+          message: errorData.message || "Failed to save role",
+        });
       }
     } catch (error) {
-      setError("root.serverError", { type: "manual", message: "An unexpected error occurred" });
+      setError("root.serverError", {
+        type: "manual",
+        message: "An unexpected error occurred",
+      });
     } finally {
       setIsSubmitting(false);
     }
@@ -171,16 +221,23 @@ const RoleSidebar = ({
             <div className="flex justify-between mb-4">
               <Dialog.Title className="text-3xl font-bold" as={Text}>
                 {selectedRole ? "Edit Role" : "Add Role"}
-                <Badge className="ml-4" color="orange">Beta</Badge>
+                <Badge className="ml-4" color="orange">
+                  Beta
+                </Badge>
                 {selectedRole && selectedRole.predefined && (
-                  <Badge className="ml-2" color="orange">Predefined Role</Badge>
+                  <Badge className="ml-2" color="orange">
+                    Predefined Role
+                  </Badge>
                 )}
               </Dialog.Title>
               <Button onClick={toggle} variant="light">
                 <IoMdClose className="h-6 w-6 text-gray-500" />
               </Button>
             </div>
-            <form onSubmit={handleSubmit(onSubmit)} className="mt-4 flex flex-col h-full">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="mt-4 flex flex-col h-full"
+            >
               <div className="flex-grow">
                 <div className="mt-4">
                   <label className="block text-sm font-medium text-gray-700">
@@ -197,7 +254,9 @@ const RoleSidebar = ({
                         errorMessage={errors.name?.message}
                         disabled={!!(selectedRole && selectedRole.predefined)}
                         className={`${
-                          selectedRole && selectedRole.predefined ? "bg-gray-200" : ""
+                          selectedRole && selectedRole.predefined
+                            ? "bg-gray-200"
+                            : ""
                         }`}
                       />
                     )}
@@ -218,7 +277,9 @@ const RoleSidebar = ({
                         errorMessage={errors.description?.message}
                         disabled={!!(selectedRole && selectedRole.predefined)}
                         className={`${
-                          selectedRole && selectedRole.predefined ? "bg-gray-200" : ""
+                          selectedRole && selectedRole.predefined
+                            ? "bg-gray-200"
+                            : ""
                         }`}
                       />
                     )}
@@ -235,11 +296,16 @@ const RoleSidebar = ({
                     {prepopulateScopes()}
                   </div>
                 </div>
-                {errors.root?.serverError && typeof errors.root.serverError.message === "string" && (
-                  <Callout className="mt-4" title="Error while adding role" color="rose">
-                    {errors.root.serverError.message}
-                  </Callout>
-                )}
+                {errors.root?.serverError &&
+                  typeof errors.root.serverError.message === "string" && (
+                    <Callout
+                      className="mt-4"
+                      title="Error while adding role"
+                      color="rose"
+                    >
+                      {errors.root.serverError.message}
+                    </Callout>
+                  )}
               </div>
               <div className="mt-6 flex justify-end gap-2">
                 <Button
@@ -258,8 +324,17 @@ const RoleSidebar = ({
                   <Button
                     color="orange"
                     type="submit"
-                    disabled={isSubmitting || !Object.values(newRoleScopes).some(scope => Object.values(scope).some(Boolean))}
-                    title={!newRoleScopes ? "At least one scope must be selected" : ""}
+                    disabled={
+                      isSubmitting ||
+                      !Object.values(newRoleScopes).some((scope) =>
+                        Object.values(scope).some(Boolean)
+                      )
+                    }
+                    title={
+                      !newRoleScopes
+                        ? "At least one scope must be selected"
+                        : ""
+                    }
                   >
                     {isSubmitting ? "Saving..." : "Save Role"}
                   </Button>
diff --git a/keep-ui/app/settings/auth/roles-tab.tsx b/keep-ui/app/settings/auth/roles-tab.tsx
index 105a63338..3aaaad6b7 100644
--- a/keep-ui/app/settings/auth/roles-tab.tsx
+++ b/keep-ui/app/settings/auth/roles-tab.tsx
@@ -14,7 +14,7 @@ import {
   TextInput,
 } from "@tremor/react";
 import { useState, useEffect, useMemo } from "react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useScopes } from "utils/hooks/useScopes";
 import { useRoles } from "utils/hooks/useRoles";
 import React from "react";
@@ -29,10 +29,17 @@ interface RolesTabProps {
   customRolesAllowed: boolean;
 }
 
-export default function RolesTab({ accessToken, customRolesAllowed }: RolesTabProps) {
-  const apiUrl = getApiURL();
+export default function RolesTab({
+  accessToken,
+  customRolesAllowed,
+}: RolesTabProps) {
+  const apiUrl = useApiUrl();
   const { data: scopes = [], isLoading: scopesLoading } = useScopes();
-  const { data: roles = [], isLoading: rolesLoading, mutate: mutateRoles } = useRoles();
+  const {
+    data: roles = [],
+    isLoading: rolesLoading,
+    mutate: mutateRoles,
+  } = useRoles();
 
   const [resources, setResources] = useState<string[]>([]);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@@ -41,13 +48,19 @@ export default function RolesTab({ accessToken, customRolesAllowed }: RolesTabPr
 
   useEffect(() => {
     if (scopes && scopes.length > 0) {
-      const extractedResources = [...new Set(scopes.map(scope => scope.split(':')[1]).filter(resource => resource !== '*'))];
+      const extractedResources = [
+        ...new Set(
+          scopes
+            .map((scope) => scope.split(":")[1])
+            .filter((resource) => resource !== "*")
+        ),
+      ];
       setResources(extractedResources);
     }
   }, [scopes]);
 
   const filteredRoles = useMemo(() => {
-    return roles.filter(role =>
+    return roles.filter((role) =>
       role.name.toLowerCase().includes(filter.toLowerCase())
     );
   }, [roles, filter]);
@@ -64,7 +77,7 @@ export default function RolesTab({ accessToken, customRolesAllowed }: RolesTabPr
     if (window.confirm("Are you sure you want to delete this role?")) {
       try {
         const response = await fetch(`${apiUrl}/auth/roles/${roleId}`, {
-          method: 'DELETE',
+          method: "DELETE",
           headers: {
             Authorization: `Bearer ${accessToken}`,
           },
@@ -98,7 +111,11 @@ export default function RolesTab({ accessToken, customRolesAllowed }: RolesTabPr
               setIsSidebarOpen(true);
             }}
             disabled={!customRolesAllowed}
-            tooltip={customRolesAllowed ? undefined : "This feature is not available in your authentication mode."}
+            tooltip={
+              customRolesAllowed
+                ? undefined
+                : "This feature is not available in your authentication mode."
+            }
           >
             Create Custom Role
           </Button>
@@ -121,54 +138,68 @@ export default function RolesTab({ accessToken, customRolesAllowed }: RolesTabPr
             </TableRow>
           </TableHead>
           <TableBody>
-            {filteredRoles.sort((a, b) => (a.predefined === b.predefined ? 0 : a.predefined ? -1 : 1)).map((role) => (
-              <TableRow
-                key={role.name}
-                className="hover:bg-gray-50 transition-colors duration-200 cursor-pointer group"
-                onClick={() => handleRowClick(role)}
-              >
-                <TableCell className="w-4/24">
-                  <div className="flex items-center justify-between">
-                    <Text className="truncate">{role.name}</Text>
-                    <div className="flex items-center">
-                      {role.predefined ? (
-                        <Badge color="orange" className="ml-2 w-24 text-center">Predefined</Badge>
-                      ) : (
-                        <Badge color="orange" className="ml-2 w-24 text-center">Custom</Badge>
+            {filteredRoles
+              .sort((a, b) =>
+                a.predefined === b.predefined ? 0 : a.predefined ? -1 : 1
+              )
+              .map((role) => (
+                <TableRow
+                  key={role.name}
+                  className="hover:bg-gray-50 transition-colors duration-200 cursor-pointer group"
+                  onClick={() => handleRowClick(role)}
+                >
+                  <TableCell className="w-4/24">
+                    <div className="flex items-center justify-between">
+                      <Text className="truncate">{role.name}</Text>
+                      <div className="flex items-center">
+                        {role.predefined ? (
+                          <Badge
+                            color="orange"
+                            className="ml-2 w-24 text-center"
+                          >
+                            Predefined
+                          </Badge>
+                        ) : (
+                          <Badge
+                            color="orange"
+                            className="ml-2 w-24 text-center"
+                          >
+                            Custom
+                          </Badge>
+                        )}
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell className="w-4/24">
+                    <Text>{role.description}</Text>
+                  </TableCell>
+                  <TableCell className="w-15/24">
+                    <div className="flex flex-wrap gap-1">
+                      {role.scopes.slice(0, 4).map((scope, index) => (
+                        <Badge key={index} color="orange" className="text-xs">
+                          {scope}
+                        </Badge>
+                      ))}
+                      {role.scopes.length > 4 && (
+                        <Badge color="orange" className="text-xs">
+                          +{role.scopes.length - 4} more
+                        </Badge>
                       )}
                     </div>
-                  </div>
-                </TableCell>
-                <TableCell className="w-4/24">
-                  <Text>{role.description}</Text>
-                </TableCell>
-                <TableCell className="w-15/24">
-                  <div className="flex flex-wrap gap-1">
-                    {role.scopes.slice(0, 4).map((scope, index) => (
-                      <Badge key={index} color="orange" className="text-xs">
-                        {scope}
-                      </Badge>
-                    ))}
-                    {role.scopes.length > 4 && (
-                      <Badge color="orange" className="text-xs">
-                        +{role.scopes.length - 4} more
-                      </Badge>
+                  </TableCell>
+                  <TableCell className="w-1/24">
+                    {!role.predefined && (
+                      <Button
+                        icon={TrashIcon}
+                        variant="light"
+                        color="orange"
+                        className="opacity-0 group-hover:opacity-100 transition-opacity"
+                        onClick={(e) => handleDeleteRole(role.id, e)}
+                      />
                     )}
-                  </div>
-                </TableCell>
-                <TableCell className="w-1/24">
-                  {!role.predefined && (
-                    <Button
-                      icon={TrashIcon}
-                      variant="light"
-                      color="orange"
-                      className="opacity-0 group-hover:opacity-100 transition-opacity"
-                      onClick={(e) => handleDeleteRole(role.id, e)}
-                    />
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
+                  </TableCell>
+                </TableRow>
+              ))}
           </TableBody>
         </Table>
       </Card>
diff --git a/keep-ui/app/settings/auth/sso-settings.tsx b/keep-ui/app/settings/auth/sso-settings.tsx
index 7ed498fb5..f5e7d6394 100644
--- a/keep-ui/app/settings/auth/sso-settings.tsx
+++ b/keep-ui/app/settings/auth/sso-settings.tsx
@@ -1,10 +1,21 @@
-import React from 'react';
-import useSWR from 'swr';
-import { Card, Title, Subtitle, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Button, Icon } from '@tremor/react';
-import { fetcher } from 'utils/fetcher';
-import { getApiURL } from 'utils/apiUrl';
-import Loading from 'app/loading';
-import Image from "next/image";
+import React from "react";
+import useSWR from "swr";
+import {
+  Card,
+  Title,
+  Subtitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  Button,
+  Icon,
+} from "@tremor/react";
+import { fetcher } from "utils/fetcher";
+import { useApiUrl } from "utils/hooks/useConfig";
+import Loading from "app/loading";
 
 interface SSOProvider {
   id: string;
@@ -18,11 +29,12 @@ interface Props {
 }
 
 const SSOSettings: React.FC<Props> = ({ accessToken }) => {
-  const apiUrl = getApiURL();
-  const { data, error } = useSWR<{ sso: boolean, providers: SSOProvider[], wizardUrl: string }>(
-    `${apiUrl}/settings/sso`,
-    (url: string) => fetcher(url, accessToken)
-  );
+  const apiUrl = useApiUrl();
+  const { data, error } = useSWR<{
+    sso: boolean;
+    providers: SSOProvider[];
+    wizardUrl: string;
+  }>(`${apiUrl}/settings/sso`, (url: string) => fetcher(url, accessToken));
 
   if (!data) return <Loading />;
   if (error) return <div>Error loading SSO settings: {error.message}</div>;
@@ -43,15 +55,27 @@ const SSOSettings: React.FC<Props> = ({ accessToken }) => {
               </TableRow>
             </TableHead>
             <TableBody>
-              {providers.map(provider => (
+              {providers.map((provider) => (
                 <TableRow key={provider.id}>
                   <TableCell>{provider.name}</TableCell>
-                  <TableCell>{provider.connected ? "Connected" : "Not connected"}</TableCell>
                   <TableCell>
-                    <Button style={{ marginRight: "10px" }} onClick={() => {/* Connect logic here */}}>
+                    {provider.connected ? "Connected" : "Not connected"}
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      style={{ marginRight: "10px" }}
+                      onClick={() => {
+                        /* Connect logic here */
+                      }}
+                    >
                       Connect
                     </Button>
-                    <Button color="orange" onClick={() => {/* Disconnect logic here */}}>
+                    <Button
+                      color="orange"
+                      onClick={() => {
+                        /* Disconnect logic here */
+                      }}
+                    >
                       Disconnect
                     </Button>
                   </TableCell>
diff --git a/keep-ui/app/settings/auth/users-menu.tsx b/keep-ui/app/settings/auth/users-menu.tsx
index 15bf36e78..e9dbc5f05 100644
--- a/keep-ui/app/settings/auth/users-menu.tsx
+++ b/keep-ui/app/settings/auth/users-menu.tsx
@@ -5,7 +5,7 @@ import { Bars3Icon } from "@heroicons/react/20/solid";
 import { Icon } from "@tremor/react";
 import { TrashIcon } from "@radix-ui/react-icons";
 import { getSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { User } from "../models";
 import { User as AuthUser } from "next-auth";
 import { mutate } from "swr";
@@ -18,6 +18,7 @@ interface Props {
 
 export default function UsersMenu({ user, currentUser }: Props) {
   const { refs, x, y } = useFloating();
+  const apiUrl = useApiUrl();
 
   const onDelete = async () => {
     const confirmed = confirm(
@@ -25,7 +26,7 @@ export default function UsersMenu({ user, currentUser }: Props) {
     );
     if (confirmed) {
       const session = await getSession();
-      const apiUrl = getApiURL();
+
       const res = await fetch(`${apiUrl}/users/${user.email}`, {
         method: "DELETE",
         headers: {
diff --git a/keep-ui/app/settings/auth/users-settings.tsx b/keep-ui/app/settings/auth/users-settings.tsx
index 10809df1e..198280211 100644
--- a/keep-ui/app/settings/auth/users-settings.tsx
+++ b/keep-ui/app/settings/auth/users-settings.tsx
@@ -1,11 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import {
-  Title,
-  Subtitle,
-  Card,
-  Button,
-  TextInput,
-} from "@tremor/react";
+import { Title, Subtitle, Card, Button, TextInput } from "@tremor/react";
 import Loading from "app/loading";
 import { User as AuthUser } from "next-auth";
 import { TiUserAdd } from "react-icons/ti";
@@ -16,7 +10,7 @@ import { useGroups } from "utils/hooks/useGroups";
 import { useConfig } from "utils/hooks/useConfig";
 import UsersSidebar from "./users-sidebar";
 import { User } from "app/settings/models";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { UsersTable } from "./users-table";
 
 interface Props {
@@ -41,33 +35,38 @@ export default function UsersSettings({
   const { data: groups } = useGroups();
   const { data: configData } = useConfig();
 
-  const [userStates, setUserStates] = useState<{ [key: string]: { role: string, groups: string[] } }>({});
+  const [userStates, setUserStates] = useState<{
+    [key: string]: { role: string; groups: string[] };
+  }>({});
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [filter, setFilter] = useState("");
   const [isNewUser, setIsNewUser] = useState(false);
-
+  const apiUrl = useApiUrl();
   // Determine runtime configuration
   const authType = configData?.AUTH_TYPE as AuthenticationType;
-  const apiUrl = getApiURL();
 
   useEffect(() => {
     if (users) {
-      const initialUserStates = users.reduce((acc, user) => {
-        acc[user.email] = {
-          role: user.role,
-          groups: user.groups ? user.groups.map(group => group.name) : [],
-        };
-        return acc;
-      }, {} as { [key: string]: { role: string, groups: string[] } });
+      const initialUserStates = users.reduce(
+        (acc, user) => {
+          acc[user.email] = {
+            role: user.role,
+            groups: user.groups ? user.groups.map((group) => group.name) : [],
+          };
+          return acc;
+        },
+        {} as { [key: string]: { role: string; groups: string[] } }
+      );
       setUserStates(initialUserStates);
     }
   }, [users]);
 
   const filteredUsers = useMemo(() => {
-    const filtered = users?.filter(user =>
-      user.email.toLowerCase().includes(filter.toLowerCase())
-    ) || [];
+    const filtered =
+      users?.filter((user) =>
+        user.email.toLowerCase().includes(filter.toLowerCase())
+      ) || [];
 
     return filtered.sort((a, b) => {
       if (a.last_login && !b.last_login) return -1;
@@ -90,13 +89,16 @@ export default function UsersSettings({
     setIsSidebarOpen(true);
   };
 
-  const handleDeleteUser = async (userEmail: string, event: React.MouseEvent) => {
+  const handleDeleteUser = async (
+    userEmail: string,
+    event: React.MouseEvent
+  ) => {
     event.stopPropagation();
     if (window.confirm("Are you sure you want to delete this user?")) {
       try {
-        const url = `${getApiURL()}/auth/users/${userEmail}`;
+        const url = `${apiUrl}/auth/users/${userEmail}`;
         const response = await fetch(url, {
-          method: 'DELETE',
+          method: "DELETE",
           headers: {
             Authorization: `Bearer ${accessToken}`,
           },
@@ -156,7 +158,9 @@ export default function UsersSettings({
         isNewUser={isNewUser}
         mutateUsers={mutateUsers}
         groupsEnabled={groupsAllowed}
-        identifierType={authType === AuthenticationType.DB ? "username" : "email"}
+        identifierType={
+          authType === AuthenticationType.DB ? "username" : "email"
+        }
       />
     </div>
   );
diff --git a/keep-ui/app/settings/auth/users-sidebar.tsx b/keep-ui/app/settings/auth/users-sidebar.tsx
index 72dd6a2d9..7d8466d48 100644
--- a/keep-ui/app/settings/auth/users-sidebar.tsx
+++ b/keep-ui/app/settings/auth/users-sidebar.tsx
@@ -1,16 +1,31 @@
 import { Fragment, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import { Text, Subtitle, Button, TextInput, SearchSelect, SearchSelectItem, MultiSelect, MultiSelectItem, Callout } from "@tremor/react";
+import {
+  Text,
+  Subtitle,
+  Button,
+  TextInput,
+  SearchSelect,
+  SearchSelectItem,
+  MultiSelect,
+  MultiSelectItem,
+  Callout,
+} from "@tremor/react";
 import { IoMdClose } from "react-icons/io";
-import { useForm, Controller, SubmitHandler, FieldValues } from "react-hook-form";
+import {
+  useForm,
+  Controller,
+  SubmitHandler,
+  FieldValues,
+} from "react-hook-form";
 import { useRoles } from "utils/hooks/useRoles";
 import { useGroups } from "utils/hooks/useGroups";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 import { User, Group } from "app/settings/models";
 import { AuthenticationType } from "utils/authenticationType";
 import { useConfig } from "utils/hooks/useConfig";
-import Select  from "@/components/ui/Select";
+import Select from "@/components/ui/Select";
 
 interface UserSidebarProps {
   isOpen: boolean;
@@ -19,11 +34,27 @@ interface UserSidebarProps {
   isNewUser: boolean;
   mutateUsers: (data?: any, shouldRevalidate?: boolean) => Promise<any>;
   groupsEnabled?: boolean;
-  identifierType: 'email' | 'username';
+  identifierType: "email" | "username";
 }
 
-const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnabled = true, identifierType }: UserSidebarProps) => {
-  const { control, handleSubmit, setValue, reset, formState: { errors, isDirty }, clearErrors, setError } = useForm<{
+const UsersSidebar = ({
+  isOpen,
+  toggle,
+  user,
+  isNewUser,
+  mutateUsers,
+  groupsEnabled = true,
+  identifierType,
+}: UserSidebarProps) => {
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors, isDirty },
+    clearErrors,
+    setError,
+  } = useForm<{
     username: string;
     name: string;
     role: string;
@@ -35,7 +66,7 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
       name: "",
       role: "",
       groups: [],
-      password: ""
+      password: "",
     },
   });
 
@@ -44,13 +75,13 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
   const { data: groups = [], mutate: mutateGroups } = useGroups();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { data: configData } = useConfig();
-
+  const apiUrl = useApiUrl();
   const authType = configData?.AUTH_TYPE as AuthenticationType;
 
   useEffect(() => {
     if (isOpen) {
       if (user) {
-        if (identifierType === 'email') {
+        if (identifierType === "email") {
           // server parse as email
           setValue("username", user.email);
           setValue("name", user.name);
@@ -67,7 +98,7 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
           groups: [],
         });
       }
-      clearErrors();  // Clear errors when the modal is opened
+      clearErrors(); // Clear errors when the modal is opened
     }
   }, [user, setValue, isOpen, reset, clearErrors, identifierType]);
 
@@ -76,7 +107,11 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
     clearErrors("root.serverError");
 
     const method = isNewUser ? "POST" : "PUT";
-    const url = isNewUser ? `${getApiURL()}/auth/users` : `${getApiURL()}/auth/users/${identifierType === 'email' ? user?.email : user?.name}`;
+    const url = isNewUser
+      ? `${apiUrl}/auth/users`
+      : `${apiUrl}/auth/users/${
+          identifierType === "email" ? user?.email : user?.name
+        }`;
     try {
       const response = await fetch(url, {
         method: method,
@@ -93,7 +128,11 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
         handleClose();
       } else {
         const errorData = await response.json();
-        setError("root.serverError", { type: "manual", message: errorData.detail || errorData.message || "Failed to save user" });
+        setError("root.serverError", {
+          type: "manual",
+          message:
+            errorData.detail || errorData.message || "Failed to save user",
+        });
       }
     } catch (error) {
       setError("root.serverError", {
@@ -107,12 +146,12 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
 
   const handleSubmitClick = (e: React.FormEvent) => {
     e.preventDefault();
-    clearErrors();  // Clear errors on each submit click
+    clearErrors(); // Clear errors on each submit click
     handleSubmit(onSubmit)();
   };
 
   const handleClose = () => {
-    setIsSubmitting(false);  // Ensure isSubmitting is reset when closing the modal
+    setIsSubmitting(false); // Ensure isSubmitting is reset when closing the modal
     clearErrors("root.serverError");
     reset();
     toggle();
@@ -150,9 +189,12 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
                 <IoMdClose className="h-6 w-6 text-gray-500" />
               </Button>
             </div>
-            <form onSubmit={handleSubmitClick} className="mt-4 flex flex-col h-full">
+            <form
+              onSubmit={handleSubmitClick}
+              className="mt-4 flex flex-col h-full"
+            >
               <div className="flex-grow">
-                {identifierType === 'email' ? (
+                {identifierType === "email" ? (
                   <>
                     <div className="mt-4">
                       <label className="block text-sm font-medium text-gray-700">
@@ -174,9 +216,7 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
                             error={!!errors.username}
                             errorMessage={errors.username?.message}
                             disabled={!isNewUser}
-                            className={`${
-                                isNewUser ? "" : "bg-gray-200"
-                              }`}
+                            className={`${isNewUser ? "" : "bg-gray-200"}`}
                           />
                         )}
                       />
@@ -195,9 +235,7 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
                             error={!!errors.name}
                             errorMessage={errors.name?.message}
                             disabled={!isNewUser}
-                            className={`${
-                              isNewUser ? "" : "bg-gray-200"
-                            }`}
+                            className={`${isNewUser ? "" : "bg-gray-200"}`}
                           />
                         )}
                       />
@@ -218,38 +256,38 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
                           error={!!errors.username}
                           errorMessage={errors.username?.message}
                           disabled={!isNewUser}
-                          className={`${
-                              isNewUser ? "" : "bg-gray-200"
-                            }`}
+                          className={`${isNewUser ? "" : "bg-gray-200"}`}
                         />
                       )}
                     />
                   </div>
                 )}
                 {/* Password Field */}
-                {(authType === AuthenticationType.DB || authType === AuthenticationType.KEYCLOAK) && isNewUser && (
-                <div className="mt-4">
-                    <Subtitle>Password</Subtitle>
-                    <Controller
-                    name="password"
-                    control={control}
-                    rules={{ required: "Password is required" }}
-                    render={({ field }) => (
-                        <TextInput
-                        type="password"
-                        {...field}
-                        error={!!errors.password}
-                        errorMessage={
-                            errors.password &&
-                            typeof errors.password.message === "string"
-                            ? errors.password.message
-                            : undefined
-                        }
-                        />
-                    )}
-                    />
-                </div>
-                )}
+                {(authType === AuthenticationType.DB ||
+                  authType === AuthenticationType.KEYCLOAK) &&
+                  isNewUser && (
+                    <div className="mt-4">
+                      <Subtitle>Password</Subtitle>
+                      <Controller
+                        name="password"
+                        control={control}
+                        rules={{ required: "Password is required" }}
+                        render={({ field }) => (
+                          <TextInput
+                            type="password"
+                            {...field}
+                            error={!!errors.password}
+                            errorMessage={
+                              errors.password &&
+                              typeof errors.password.message === "string"
+                                ? errors.password.message
+                                : undefined
+                            }
+                          />
+                        )}
+                      />
+                    </div>
+                  )}
                 <div className="mt-4">
                   <label className="block text-sm font-medium text-gray-700">
                     Role
@@ -260,8 +298,10 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
                     render={({ field }) => (
                       <Select
                         {...field}
-                        onChange={(selectedOption) => field.onChange(selectedOption?.name)} // Assuming you want to store the role ID
-                        value={roles.find(role => role.name === field.value)} // Ensure the value is a Role object
+                        onChange={(selectedOption) =>
+                          field.onChange(selectedOption?.name)
+                        } // Assuming you want to store the role ID
+                        value={roles.find((role) => role.name === field.value)} // Ensure the value is a Role object
                         options={roles} // Pass the full Role objects
                         getOptionLabel={(role) => role.name} // Use the name for display
                         getOptionValue={(role) => role.name} // Use the name as the value
@@ -298,7 +338,11 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
               </div>
               {/* Display API Error */}
               {errors.root?.serverError && (
-                <Callout className="mt-4" title="Error while saving user" color="rose">
+                <Callout
+                  className="mt-4"
+                  title="Error while saving user"
+                  color="rose"
+                >
                   {errors.root.serverError.message}
                 </Callout>
               )}
@@ -319,7 +363,11 @@ const UsersSidebar = ({ isOpen, toggle, user, isNewUser, mutateUsers, groupsEnab
                   type="submit"
                   disabled={isSubmitting || (isNewUser ? false : !isDirty)}
                 >
-                  {isSubmitting ? "Saving..." : isNewUser ? "Create User" : "Save"}
+                  {isSubmitting
+                    ? "Saving..."
+                    : isNewUser
+                    ? "Create User"
+                    : "Save"}
                 </Button>
               </div>
             </form>
diff --git a/keep-ui/app/settings/smtp-settings.tsx b/keep-ui/app/settings/smtp-settings.tsx
index 06f17a4e8..b58f9c0e0 100644
--- a/keep-ui/app/settings/smtp-settings.tsx
+++ b/keep-ui/app/settings/smtp-settings.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Card, Button, Title, Subtitle, TextInput } from "@tremor/react";
 import useSWR from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { fetcher } from "utils/fetcher";
 import Loading from "app/loading";
 
@@ -56,6 +56,7 @@ export default function SMTPSettingsForm({ accessToken, selectedTab }: Props) {
   const [shouldFetch, setShouldFetch] = useState(true);
   const [smtpInstalled, setSmtpInstalled] = useState(false);
   const [deleteSuccessful, setDeleteSuccessful] = useState(false);
+  const apiUrl = useApiUrl();
 
   const validateSaveFields = () => {
     const newErrors: SMTPSettingsErrors = {};
@@ -76,7 +77,6 @@ export default function SMTPSettingsForm({ accessToken, selectedTab }: Props) {
     return validSave && settings.to_email;
   };
 
-  const apiUrl = getApiURL();
   const shouldFetchUrl =
     shouldFetch && selectedTab === "smtp" ? `${apiUrl}/settings/smtp` : null;
 
diff --git a/keep-ui/app/settings/webhook-settings.tsx b/keep-ui/app/settings/webhook-settings.tsx
index a8847fa53..8b3c5708c 100644
--- a/keep-ui/app/settings/webhook-settings.tsx
+++ b/keep-ui/app/settings/webhook-settings.tsx
@@ -12,14 +12,13 @@ import {
   Title,
   TabPanels,
   TabPanel,
-  Callout
-
+  Callout,
 } from "@tremor/react";
 import Loading from "app/loading";
 import { useRouter } from "next/navigation";
 import { CodeBlock, a11yLight } from "react-code-blocks";
 import useSWR from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { fetcher } from "utils/fetcher";
 import { toast } from "react-toastify";
 import { v4 as uuidv4 } from "uuid";
@@ -39,7 +38,7 @@ interface Props {
 export default function WebhookSettings({ accessToken, selectedTab }: Props) {
   const [codeTabIndex, setCodeTabIndex] = useState<number>(0);
 
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
 
   const { data, error, isLoading } = useSWR<Webhook>(
     selectedTab === "webhook" ? `${apiUrl}/settings/webhook` : null,
@@ -48,20 +47,23 @@ export default function WebhookSettings({ accessToken, selectedTab }: Props) {
   );
   const router = useRouter();
 
-  if (error) return <Callout
+  if (error)
+    return (
+      <Callout
         className="mt-4"
         title="Error"
         icon={ExclamationCircleIcon}
         color="rose"
       >
         Failed to load webhook settings.
-        <br></br><br></br>
+        <br></br>
+        <br></br>
         {error.message}
       </Callout>
+    );
 
   if (!data || isLoading) return <Loading />;
 
-
   const [example] = data.modelSchema.examples;
 
   const exampleJson = JSON.stringify(
diff --git a/keep-ui/app/topology/api/index.ts b/keep-ui/app/topology/api/index.ts
index 18dc9ec19..2d4e3b7f5 100644
--- a/keep-ui/app/topology/api/index.ts
+++ b/keep-ui/app/topology/api/index.ts
@@ -1,19 +1,19 @@
-import { getApiURL } from "@/utils/apiUrl";
 import { fetcher } from "@/utils/fetcher";
 import { Session } from "next-auth";
 import { TopologyApplication, TopologyService } from "../model/models";
 
-export function buildTopologyUrl({
-  providerIds,
-  services,
-  environment,
-}: {
-  providerIds?: string[];
-  services?: string[];
-  environment?: string;
-}) {
-  const apiUrl = getApiURL();
-
+export function buildTopologyUrl(
+  apiUrl: string,
+  {
+    providerIds,
+    services,
+    environment,
+  }: {
+    providerIds?: string[];
+    services?: string[];
+    environment?: string;
+  }
+) {
   const baseUrl = `${apiUrl}/topology`;
 
   const params = new URLSearchParams();
@@ -31,17 +31,18 @@ export function buildTopologyUrl({
   return `${baseUrl}?${params.toString()}`;
 }
 
-export async function getApplications(session: Session | null) {
+export async function getApplications(apiUrl: string, session: Session | null) {
   if (!session) {
     return null;
   }
-  const apiUrl = `${getApiURL()}/topology/applications`;
-  return (await fetcher(apiUrl, session.accessToken)) as Promise<
+  const url = `${apiUrl}/topology/applications`;
+  return (await fetcher(url, session.accessToken)) as Promise<
     TopologyApplication[]
   >;
 }
 
 export function getTopology(
+  apiUrl: string,
   session: Session | null,
   {
     providerIds,
@@ -56,6 +57,6 @@ export function getTopology(
   if (!session) {
     return null;
   }
-  const url = buildTopologyUrl({ providerIds, services, environment });
+  const url = buildTopologyUrl(apiUrl, { providerIds, services, environment });
   return fetcher(url, session.accessToken) as Promise<TopologyService[]>;
 }
diff --git a/keep-ui/app/topology/model/useTopology.ts b/keep-ui/app/topology/model/useTopology.ts
index ee57a78ae..41f42354f 100644
--- a/keep-ui/app/topology/model/useTopology.ts
+++ b/keep-ui/app/topology/model/useTopology.ts
@@ -1,13 +1,13 @@
 import { TopologyService } from "@/app/topology/model/models";
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "@/utils/apiUrl";
 import { fetcher } from "@/utils/fetcher";
 import { useEffect } from "react";
 import { buildTopologyUrl } from "@/app/topology/api";
 import { useTopologyPollingContext } from "@/app/topology/model/TopologyPollingContext";
+import { useApiUrl } from "utils/hooks/useConfig";
 
-export const topologyBaseKey = `${getApiURL()}/topology`;
+export const useTopologyBaseKey = () => `${useApiUrl()}/topology`;
 
 type UseTopologyOptions = {
   providerIds?: string[];
@@ -32,11 +32,12 @@ export const useTopology = (
   }
 ) => {
   const { data: session } = useSession();
+  const apiUrl = useApiUrl();
   const pollTopology = useTopologyPollingContext();
 
   const url = !session
     ? null
-    : buildTopologyUrl({ providerIds, services, environment });
+    : buildTopologyUrl(apiUrl!, { providerIds, services, environment });
 
   const { data, error, mutate } = useSWR<TopologyService[]>(
     url,
diff --git a/keep-ui/app/topology/model/useTopologyApplications.ts b/keep-ui/app/topology/model/useTopologyApplications.ts
index 93da4e5f8..eb6c34b61 100644
--- a/keep-ui/app/topology/model/useTopologyApplications.ts
+++ b/keep-ui/app/topology/model/useTopologyApplications.ts
@@ -1,10 +1,10 @@
 import { TopologyApplication } from "./models";
-import { getApiURL } from "@/utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import useSWR, { SWRConfiguration } from "swr";
 import { fetcher } from "@/utils/fetcher";
 import { useSession } from "next-auth/react";
 import { useCallback, useMemo } from "react";
-import { topologyBaseKey, useTopology } from "./useTopology";
+import { useTopologyBaseKey, useTopology } from "./useTopology";
 import { useRevalidateMultiple } from "@/utils/state";
 
 type UseTopologyApplicationsOptions = {
@@ -19,8 +19,9 @@ export function useTopologyApplications(
     },
   }
 ) {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
+  const topologyBaseKey = useTopologyBaseKey();
   const revalidateMultiple = useRevalidateMultiple();
   const { topologyData, mutate: mutateTopology } = useTopology();
   const topologyApplicationsKey = `${apiUrl}/topology/applications`;
@@ -37,7 +38,7 @@ export function useTopologyApplications(
 
   const addApplication = useCallback(
     async (application: Omit<TopologyApplication, "id">) => {
-      const response = await fetch(`${getApiURL()}/topology/applications`, {
+      const response = await fetch(`${apiUrl}/topology/applications`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -86,7 +87,7 @@ export function useTopologyApplications(
         );
       }
       const response = await fetch(
-        `${getApiURL()}/topology/applications/${application.id}`,
+        `${apiUrl}/topology/applications/${application.id}`,
         {
           method: "PUT",
           headers: {
@@ -142,7 +143,7 @@ export function useTopologyApplications(
         );
       }
       const response = await fetch(
-        `${getApiURL()}/topology/applications/${applicationId}`,
+        `${apiUrl}/topology/applications/${applicationId}`,
         {
           method: "DELETE",
           headers: {
diff --git a/keep-ui/app/topology/page.tsx b/keep-ui/app/topology/page.tsx
index 6b99e854d..c0599aeba 100644
--- a/keep-ui/app/topology/page.tsx
+++ b/keep-ui/app/topology/page.tsx
@@ -5,6 +5,7 @@ import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import { getApplications, getTopology } from "./api";
 import { TopologyPageClient } from "./topology-client";
 import { Subtitle, Title } from "@tremor/react";
+import { getApiURL } from "@/utils/apiUrl";
 
 export const metadata = {
   title: "Keep - Service Topology",
@@ -21,9 +22,10 @@ type PageProps = {
 
 export default async function Page({ searchParams }: PageProps) {
   const session = await getServerSession(authOptions);
+  const apiUrl = getApiURL();
 
-  const applications = await getApplications(session);
-  const topologyServices = await getTopology(session, {
+  const applications = await getApplications(apiUrl, session);
+  const topologyServices = await getTopology(apiUrl, session, {
     providerIds: searchParams.providerIds,
     services: searchParams.services,
     environment: searchParams.environment,
diff --git a/keep-ui/app/workflows/builder/[workflowId]/page.tsx b/keep-ui/app/workflows/builder/[workflowId]/page.tsx
index 8026f07ae..846c3f60a 100644
--- a/keep-ui/app/workflows/builder/[workflowId]/page.tsx
+++ b/keep-ui/app/workflows/builder/[workflowId]/page.tsx
@@ -9,6 +9,7 @@ export default async function PageWithId({
   params: { workflowId: string };
 }) {
   const accessToken = await getServerSession(authOptions);
+  // server so we can use getApiUrl
   const apiUrl = getApiURL();
   const response = await fetch(`${apiUrl}/workflows/${params.workflowId}/raw`, {
     headers: {
diff --git a/keep-ui/app/workflows/builder/builder-card.tsx b/keep-ui/app/workflows/builder/builder-card.tsx
index 8a1b1ca1b..5f534e312 100644
--- a/keep-ui/app/workflows/builder/builder-card.tsx
+++ b/keep-ui/app/workflows/builder/builder-card.tsx
@@ -2,7 +2,7 @@ import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
 import { Card, Callout } from "@tremor/react";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
-import { getApiURL } from "../../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import Loader from "./loader";
 import { Provider } from "../../providers/providers";
 import { KeepApiError } from "../../error";
@@ -23,7 +23,7 @@ interface Props {
   triggerRun: number;
   workflow?: string;
   workflowId?: string;
-  isPreview?:boolean;
+  isPreview?: boolean;
 }
 
 export function BuilderCard({
@@ -37,13 +37,13 @@ export function BuilderCard({
   triggerSave,
   workflow,
   workflowId,
-  isPreview
+  isPreview,
 }: Props) {
   const [providers, setProviders] = useState<Provider[] | null>(null);
   const [installedProviders, setInstalledProviders] = useState<
     Provider[] | null
   >(null);
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
 
   const { data, error, isLoading } = useProviders();
 
@@ -51,7 +51,7 @@ export function BuilderCard({
     throw new KeepApiError(
       "The builder has failed to load providers",
       `${apiUrl}/providers`,
-        `Failed to query ${apiUrl}/providers, is Keep API up?`
+      `Failed to query ${apiUrl}/providers, is Keep API up?`
     );
   }
 
diff --git a/keep-ui/app/workflows/builder/builder.tsx b/keep-ui/app/workflows/builder/builder.tsx
index a929210a1..e2400c65c 100644
--- a/keep-ui/app/workflows/builder/builder.tsx
+++ b/keep-ui/app/workflows/builder/builder.tsx
@@ -17,7 +17,7 @@ import { globalValidatorV2, stepValidatorV2 } from "./builder-validators";
 import Modal from "react-modal";
 import { Alert } from "./alert";
 import BuilderModalContent from "./builder-modal";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import Loader from "./loader";
 import { stringify } from "yaml";
 import { useSearchParams } from "next/navigation";
@@ -81,6 +81,7 @@ function Builder({
 
   const searchParams = useSearchParams();
   const { errorNode, setErrorNode, canDeploy, synced } = useStore();
+  const apiUrl = useApiUrl();
 
   const setStepValidationErrorV2 = (step: V2Step, error: string | null) => {
     setStepValidationError(error);
@@ -102,7 +103,6 @@ function Builder({
   };
 
   const updateWorkflow = () => {
-    const apiUrl = getApiURL();
     const url = `${apiUrl}/workflows/${workflowId}`;
     const method = "PUT";
     const headers = {
@@ -125,7 +125,6 @@ function Builder({
   };
 
   const testRunWorkflow = () => {
-    const apiUrl = getApiURL();
     const url = `${apiUrl}/workflows/test`;
     const method = "POST";
     const headers = {
@@ -158,7 +157,6 @@ function Builder({
   };
 
   const addWorkflow = () => {
-    const apiUrl = getApiURL();
     const url = `${apiUrl}/workflows/json`;
     const method = "POST";
     const headers = {
diff --git a/keep-ui/app/workflows/builder/workflow-execution-results.tsx b/keep-ui/app/workflows/builder/workflow-execution-results.tsx
index 8c923cc2b..b468682e2 100644
--- a/keep-ui/app/workflows/builder/workflow-execution-results.tsx
+++ b/keep-ui/app/workflows/builder/workflow-execution-results.tsx
@@ -8,7 +8,7 @@ import {
   Title,
 } from "@tremor/react";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "../../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import Loading from "../../loading";
 import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
 import {
@@ -36,7 +36,7 @@ export default function WorkflowExecutionResults({
   workflow_id,
   workflow_execution_id,
 }: WorkflowResultsProps) {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session, status, update } = useSession();
   const [refreshInterval, setRefreshInterval] = useState(1000);
   const [checks, setChecks] = useState(1);
diff --git a/keep-ui/app/workflows/dragndrop.tsx b/keep-ui/app/workflows/dragndrop.tsx
index 1bd3e8aa3..cc7c1d80f 100644
--- a/keep-ui/app/workflows/dragndrop.tsx
+++ b/keep-ui/app/workflows/dragndrop.tsx
@@ -1,9 +1,9 @@
 import React, { useRef, useState } from "react";
-import { getApiURL } from "../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { useSession } from "next-auth/react";
 
 const FileUpload: React.FC = () => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
   const [error, setError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -23,33 +23,42 @@ const FileUpload: React.FC = () => {
 
       if (response.ok) {
         setError(null);
-        if(fileInputRef.current) {
+        if (fileInputRef.current) {
           fileInputRef.current.value = "";
         }
         window.location.reload();
       } else {
         const errorMessage = await response.text();
         setError(errorMessage);
-        if(fileInputRef.current) {
+        if (fileInputRef.current) {
           fileInputRef.current.value = "";
         }
       }
     } catch (error) {
       setError("An error occurred during file upload");
-      if(fileInputRef.current) {
+      if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
     }
   };
 
   return (
-    <div
-      className="absolute top-0 left-0 mt-4 ml-4"
-    >
+    <div className="absolute top-0 left-0 mt-4 ml-4">
       <label className="cursor-pointer flex items-center">
         <span className="text-gray-500 mr-2">Click to upload a workflow</span>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 inline-block">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-6 h-6 inline-block"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+          />
         </svg>
         <input
           ref={fileInputRef}
@@ -60,7 +69,12 @@ const FileUpload: React.FC = () => {
           }}
         />
       </label>
-      {error && <p className="text-red-500 mt-4">Failed to upload the file: {error}<br></br>Please try again with another file.</p>}
+      {error && (
+        <p className="text-red-500 mt-4">
+          Failed to upload the file: {error}
+          <br></br>Please try again with another file.
+        </p>
+      )}
     </div>
   );
 };
diff --git a/keep-ui/app/workflows/manual-run-workflow-modal.tsx b/keep-ui/app/workflows/manual-run-workflow-modal.tsx
index 753dd0baf..bc1494f33 100644
--- a/keep-ui/app/workflows/manual-run-workflow-modal.tsx
+++ b/keep-ui/app/workflows/manual-run-workflow-modal.tsx
@@ -1,10 +1,10 @@
-import {Button, Select, SelectItem, Title} from "@tremor/react";
+import { Button, Select, SelectItem, Title } from "@tremor/react";
 
 import Modal from "@/components/ui/Modal";
 import { useWorkflows } from "utils/hooks/useWorkflows";
 import { useState } from "react";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
 import { useRouter } from "next/navigation";
 import { IncidentDto } from "@/app/incidents/models";
@@ -16,7 +16,11 @@ interface Props {
   handleClose: () => void;
 }
 
-export default function ManualRunWorkflowModal({ alert, incident, handleClose }: Props) {
+export default function ManualRunWorkflowModal({
+  alert,
+  incident,
+  handleClose,
+}: Props) {
   /**
    *
    */
@@ -26,7 +30,7 @@ export default function ManualRunWorkflowModal({ alert, incident, handleClose }:
   const { data: workflows } = useWorkflows({});
   const { data: session } = useSession();
   const router = useRouter();
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
 
   const isOpen = !!alert || !!incident;
 
@@ -44,7 +48,10 @@ export default function ManualRunWorkflowModal({ alert, incident, handleClose }:
           Authorization: `Bearer ${session?.accessToken}`,
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({"type": alert ? "alert" : "incident", "body": alert ? alert : incident}),
+        body: JSON.stringify({
+          type: alert ? "alert" : "incident",
+          body: alert ? alert : incident,
+        }),
       }
     );
 
diff --git a/keep-ui/app/workflows/mockworkflows.tsx b/keep-ui/app/workflows/mockworkflows.tsx
index 0ea737931..9e0f0f653 100644
--- a/keep-ui/app/workflows/mockworkflows.tsx
+++ b/keep-ui/app/workflows/mockworkflows.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { MockAction, MockStep, MockWorkflow, Workflow } from "./models";
-import { getApiURL } from "../../utils/apiUrl";
 import Loading from "../loading";
 import { Button, Card, Tab, TabGroup, TabList } from "@tremor/react";
 import Modal from "@/components/ui/Modal";
@@ -18,13 +17,16 @@ export function WorkflowSteps({ workflow }: { workflow: MockWorkflow }) {
     <div className="container flex gap-2 mb-4 mt-6 items-center overflow-x-auto max-w-full whitespace-nowrap">
       {workflow?.steps?.map((step: any, index: number) => {
         const provider = step?.provider;
-        if (['threshold', 'assert', 'foreach'].includes(provider?.type)) {
+        if (["threshold", "assert", "foreach"].includes(provider?.type)) {
           return null;
         }
         return (
           <>
             {provider && (
-              <div key={`step-${step.id}`} className="flex items-center gap-2 flex-shrink-0">
+              <div
+                key={`step-${step.id}`}
+                className="flex items-center gap-2 flex-shrink-0"
+              >
                 {index > 0 && (
                   <TiArrowRight size={24} className="text-gray-500" />
                 )}
@@ -42,13 +44,16 @@ export function WorkflowSteps({ workflow }: { workflow: MockWorkflow }) {
       })}
       {workflow?.actions?.map((action: any, index: number) => {
         const provider = action?.provider;
-        if (['threshold', 'assert', 'foreach'].includes(provider?.type)) {
+        if (["threshold", "assert", "foreach"].includes(provider?.type)) {
           return null;
         }
         return (
           <>
             {provider && (
-              <div key={`action-${action.id}`} className="flex items-center gap-2 flex-shrink-0">
+              <div
+                key={`action-${action.id}`}
+                className="flex items-center gap-2 flex-shrink-0"
+              >
                 {(index > 0 || isStepPresent) && (
                   <TiArrowRight size={24} className="text-gray-500" />
                 )}
@@ -98,7 +103,7 @@ export default function MockWorkflowCardSection({
   mockLoading: boolean | null;
 }) {
   const router = useRouter();
-  const [loadingId, setLoadingId] = useState<string|null>(null);
+  const [loadingId, setLoadingId] = useState<string | null>(null);
 
   const getNameFromId = (id: string) => {
     if (!id) {
@@ -147,7 +152,7 @@ export default function MockWorkflowCardSection({
       )}
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w-full gap-4 p-4">
-      {mockError && (
+        {mockError && (
           <p className="text-center text-red-100">
             Error: {mockError.message || "Something went wrong!"}
           </p>
diff --git a/keep-ui/app/workflows/workflow-tile.tsx b/keep-ui/app/workflows/workflow-tile.tsx
index 7e3da37ba..ad9a4e636 100644
--- a/keep-ui/app/workflows/workflow-tile.tsx
+++ b/keep-ui/app/workflows/workflow-tile.tsx
@@ -2,7 +2,7 @@
 
 import { useSession } from "next-auth/react";
 import { Workflow, Filter } from "./models";
-import { getApiURL } from "../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import Image from "next/image";
 import React, { useState, useMemo } from "react";
 import { useRouter } from "next/navigation";
@@ -265,7 +265,7 @@ export const ProvidersCarousel = ({
 
 function WorkflowTile({ workflow }: { workflow: Workflow }) {
   // Create a set to keep track of unique providers
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
   const router = useRouter();
   const [openPanel, setOpenPanel] = useState(false);
@@ -720,7 +720,7 @@ function WorkflowTile({ workflow }: { workflow: Workflow }) {
 
 export function WorkflowTileOld({ workflow }: { workflow: Workflow }) {
   // Create a set to keep track of unique providers
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
   const router = useRouter();
   const [openPanel, setOpenPanel] = useState(false);
diff --git a/keep-ui/app/workflows/workflows.client.tsx b/keep-ui/app/workflows/workflows.client.tsx
index 2d90aa818..8a5d9e34b 100644
--- a/keep-ui/app/workflows/workflows.client.tsx
+++ b/keep-ui/app/workflows/workflows.client.tsx
@@ -11,7 +11,7 @@ import {
 import { useSession } from "next-auth/react";
 import { fetcher } from "../../utils/fetcher";
 import { Workflow, MockWorkflow } from "./models";
-import { getApiURL } from "../../utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import Loading from "../loading";
 import React from "react";
 import WorkflowsEmptyState from "./noworfklows";
@@ -23,7 +23,7 @@ import Modal from "@/components/ui/Modal";
 import MockWorkflowCardSection from "./mockworkflows";
 
 export default function WorkflowsPage() {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const router = useRouter();
   const { data: session, status, update } = useSession();
   const [fileError, setFileError] = useState<string | null>(null);
diff --git a/keep-ui/components/navbar/CustomPresetAlertLinks.tsx b/keep-ui/components/navbar/CustomPresetAlertLinks.tsx
index 460d65fe7..f6465a5ef 100644
--- a/keep-ui/components/navbar/CustomPresetAlertLinks.tsx
+++ b/keep-ui/components/navbar/CustomPresetAlertLinks.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, useEffect, useState } from "react";
 import { Session } from "next-auth";
 import { toast } from "react-toastify";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 import { usePresets } from "utils/hooks/usePresets";
 import { AiOutlineSwap } from "react-icons/ai";
 import { usePathname, useRouter } from "next/navigation";
@@ -22,7 +22,7 @@ import { CSS } from "@dnd-kit/utilities";
 import { Preset } from "app/alerts/models";
 import { AiOutlineSound } from "react-icons/ai";
 // Using dynamic import to avoid hydration issues with react-player
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });
 // import css
 import "./CustomPresetAlertLink.css";
@@ -60,12 +60,7 @@ const PresetAlert = ({ preset, pathname, deletePreset }: PresetAlertProps) => {
   };
 
   return (
-    <li
-      key={preset.id}
-      ref={setNodeRef}
-      style={dragStyle}
-      {...listeners}
-    >
+    <li key={preset.id} ref={setNodeRef} style={dragStyle} {...listeners}>
       <LinkWithIcon
         href={href}
         icon={getIcon()}
@@ -102,9 +97,10 @@ export const CustomPresetAlertLinks = ({
   session,
   selectedTags,
 }: CustomPresetAlertLinksProps) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
 
-  const { useAllPresets, presetsOrderFromLS, setPresetsOrderFromLS } = usePresets();
+  const { useAllPresets, presetsOrderFromLS, setPresetsOrderFromLS } =
+    usePresets();
   const { data: presets = [], mutate: presetsMutator } = useAllPresets({
     revalidateIfStale: false,
     revalidateOnFocus: false,
@@ -126,16 +122,26 @@ export const CustomPresetAlertLinks = ({
 
   useEffect(() => {
     const filteredLS = presetsOrderFromLS.filter(
-      (preset) => !["feed", "deleted", "dismissed", "without-incident", "groups"].includes(preset.name)
+      (preset) =>
+        ![
+          "feed",
+          "deleted",
+          "dismissed",
+          "without-incident",
+          "groups",
+        ].includes(preset.name)
     );
 
     // Combine live presets and local storage order
-    const combinedOrder = presets.reduce<Preset[]>((acc, preset: Preset) => {
-      if (!acc.find((p) => p.id === preset.id)) {
-        acc.push(preset);
-      }
-      return acc.filter((preset) => checkValidPreset(preset));
-    }, [...filteredLS]);
+    const combinedOrder = presets.reduce<Preset[]>(
+      (acc, preset: Preset) => {
+        if (!acc.find((p) => p.id === preset.id)) {
+          acc.push(preset);
+        }
+        return acc.filter((preset) => checkValidPreset(preset));
+      },
+      [...filteredLS]
+    );
 
     // Only update state if there's an actual change to prevent infinite loops
     if (JSON.stringify(presetsOrder) !== JSON.stringify(combinedOrder)) {
@@ -143,11 +149,12 @@ export const CustomPresetAlertLinks = ({
     }
   }, [presets, presetsOrderFromLS]);
   // Filter presets based on tags, or return all if no tags are selected
-  const filteredOrderedPresets = selectedTags.length === 0
-    ? presetsOrder
-    : presetsOrder.filter((preset) =>
-        preset.tags.some((tag) => selectedTags.includes(tag.name))
-      );
+  const filteredOrderedPresets =
+    selectedTags.length === 0
+      ? presetsOrder
+      : presetsOrder.filter((preset) =>
+          preset.tags.some((tag) => selectedTags.includes(tag.name))
+        );
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
diff --git a/keep-ui/components/navbar/DashboardLinks.tsx b/keep-ui/components/navbar/DashboardLinks.tsx
index 948be30ad..cf0cab3d4 100644
--- a/keep-ui/components/navbar/DashboardLinks.tsx
+++ b/keep-ui/components/navbar/DashboardLinks.tsx
@@ -15,7 +15,7 @@ import { Disclosure } from "@headlessui/react";
 import { IoChevronUp } from "react-icons/io5";
 import classNames from "classnames";
 import { useDashboards } from "utils/hooks/useDashboards";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "utils/hooks/useConfig";
 
 import { Session } from "next-auth";
 import { PlusIcon } from "@radix-ui/react-icons";
@@ -28,6 +28,7 @@ export const DashboardLinks = ({ session }: DashboardProps) => {
   const { dashboards = [], isLoading, error, mutate } = useDashboards();
   const pathname = usePathname();
   const router = useRouter();
+  const apiUrl = useApiUrl();
 
   const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor));
 
@@ -51,7 +52,6 @@ export const DashboardLinks = ({ session }: DashboardProps) => {
     );
     if (isDeleteConfirmed) {
       try {
-        const apiUrl = getApiURL();
         await fetch(`${apiUrl}/dashboard/${id}`, {
           method: "DELETE",
           headers: {
diff --git a/keep-ui/middleware.tsx b/keep-ui/middleware.tsx
index 9c405978d..4f3390cfd 100644
--- a/keep-ui/middleware.tsx
+++ b/keep-ui/middleware.tsx
@@ -5,6 +5,8 @@ import { getApiURL } from "utils/apiUrl";
 export default withAuth(
   function middleware(req) {
     const { pathname, searchParams } = new URL(req.url);
+    //  Shahar: This is just for backward compatibility
+    //          **should be removed**
     // Redirect /backend/ to the API
     if (pathname.startsWith("/backend/")) {
       let apiUrl = getApiURL();
diff --git a/keep-ui/pages/api/config.tsx b/keep-ui/pages/api/config.tsx
index 07ef9a2a6..e052a7022 100644
--- a/keep-ui/pages/api/config.tsx
+++ b/keep-ui/pages/api/config.tsx
@@ -1,5 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { AuthenticationType, MULTI_TENANT, SINGLE_TENANT, NO_AUTH } from "utils/authenticationType";
+import {
+  AuthenticationType,
+  MULTI_TENANT,
+  SINGLE_TENANT,
+  NO_AUTH,
+} from "utils/authenticationType";
 
 export default async function handler(
   req: NextApiRequest,
@@ -19,13 +24,20 @@ export default async function handler(
   res.status(200).json({
     AUTH_TYPE: authType,
     PUSHER_DISABLED: process.env.PUSHER_DISABLED === "true",
+    // could be relative (for ingress) or absolute (e.g. Pusher)
     PUSHER_HOST: process.env.PUSHER_HOST,
     PUSHER_PORT: process.env.PUSHER_HOST
       ? parseInt(process.env.PUSHER_PORT!)
       : undefined,
     PUSHER_APP_KEY: process.env.PUSHER_APP_KEY,
     PUSHER_CLUSTER: process.env.PUSHER_CLUSTER,
+    // The API URL is used by the server to make requests to the API
+    //   note that we need two different URLs for the client and the server
+    //   because in some environments, e.g. docker-compose, the server can get keep-backend
+    //   whereas the client (browser) can get only localhost
     API_URL: process.env.API_URL,
+    // could be relative (e.g. for ingress) or absolute (e.g. for cloud run)
+    API_URL_CLIENT: process.env.API_URL_CLIENT,
     POSTHOG_KEY: process.env.POSTHOG_KEY,
     POSTHOG_DISABLED: process.env.POSTHOG_DISABLED,
     POSTHOG_HOST: process.env.POSTHOG_HOST,
diff --git a/keep-ui/types/internal-config.ts b/keep-ui/types/internal-config.ts
index 522e3da87..e8a368cd0 100644
--- a/keep-ui/types/internal-config.ts
+++ b/keep-ui/types/internal-config.ts
@@ -5,7 +5,13 @@ export interface InternalConfig {
   PUSHER_PORT?: number;
   PUSHER_APP_KEY: string;
   PUSHER_CLUSTER?: string;
+  PUSHER_INGRESS: boolean; // e.g. for kubernetes/helmchart where the websocket endpoint is through the ingress
   POSTHOG_KEY: string;
   POSTHOG_HOST: string;
   POSTHOG_DISABLED: string;
+  // the API URL is used by the server to make requests to the API
+  API_URL: string;
+  // the API URL for the client (browser)
+  // optional, defaults to /backend (relative)
+  API_URL_CLIENT?: string;
 }
diff --git a/keep-ui/utils/apiUrl.ts b/keep-ui/utils/apiUrl.ts
index 22478957f..10e8c7878 100644
--- a/keep-ui/utils/apiUrl.ts
+++ b/keep-ui/utils/apiUrl.ts
@@ -1,21 +1,6 @@
+// server only!
 export function getApiURL(): string {
-  // https://github.com/vercel/next.js/issues/5354#issuecomment-520305040
-  // https://stackoverflow.com/questions/49411796/how-do-i-detect-whether-i-am-on-server-on-client-in-next-js
-
-  // Some background on this:
-  // On docker-compose, the browser can't access the "http://keep-backend" url
-  // since its the name of the container (and not accesible from the host)
-  // so we need to use the "http://localhost:3000" url instead.
-  const componentType = typeof window === "undefined" ? "server" : "client";
-
-  // if its client, use the same url as the browser but with the "/backend" prefix so that middleware.ts can proxy the request to the backend
-  if (componentType === "client") {
-    return "/backend";
-  }
-
-  // SERVER ONLY FROM HERE ON
-
-  // else, its the server, and we need to check if we are on vercel or not
+  // we need to check if we are on vercel or not
   const gitBranchName = process.env.VERCEL_GIT_COMMIT_REF || "notvercel";
   // main branch or not vercel - use the normal url
   if (gitBranchName === "main" || gitBranchName === "notvercel") {
diff --git a/keep-ui/utils/helpers.ts b/keep-ui/utils/helpers.ts
index a54434487..1fd58bd4d 100644
--- a/keep-ui/utils/helpers.ts
+++ b/keep-ui/utils/helpers.ts
@@ -1,5 +1,4 @@
 import { toast } from "react-toastify";
-import { getApiURL } from "./apiUrl";
 import { Provider } from "../app/providers/providers";
 import moment from "moment";
 import { twMerge } from "tailwind-merge";
@@ -39,12 +38,14 @@ export function toDateObjectWithFallback(date: string | Date) {
   return new Date();
 }
 
-export async function installWebhook(provider: Provider, accessToken: string) {
+export async function installWebhook(
+  provider: Provider,
+  accessToken: string,
+  apiUrl: string
+) {
   return toast.promise(
     fetch(
-      `${getApiURL()}/providers/install/webhook/${provider.type}/${
-        provider.id
-      }`,
+      `${apiUrl}/providers/install/webhook/${provider.type}/${provider.id}`,
       {
         method: "POST",
         headers: {
diff --git a/keep-ui/utils/hooks/useAI.ts b/keep-ui/utils/hooks/useAI.ts
index 57af67d73..329830b32 100644
--- a/keep-ui/utils/hooks/useAI.ts
+++ b/keep-ui/utils/hooks/useAI.ts
@@ -1,19 +1,18 @@
 import { AILogs, AIStats } from "app/ai/model";
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 import { useWebsocket } from "./usePusher";
 import { useCallback, useEffect } from "react";
 
-
 export const useAIStats = (
   options: SWRConfiguration = {
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<AIStats>(
@@ -38,4 +37,4 @@ export const usePollAILogs = (mutateAILogs: (logs: AILogs) => void) => {
       unbind("ai-logs-change", handleIncoming);
     };
   }, [bind, unbind, handleIncoming]);
-};
\ No newline at end of file
+};
diff --git a/keep-ui/utils/hooks/useAlerts.ts b/keep-ui/utils/hooks/useAlerts.ts
index 8b0686b62..27ce9555e 100644
--- a/keep-ui/utils/hooks/useAlerts.ts
+++ b/keep-ui/utils/hooks/useAlerts.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { AlertDto } from "app/alerts/models";
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 import { toDateObjectWithFallback } from "utils/helpers";
 
@@ -16,7 +16,7 @@ export type AuditEvent = {
 };
 
 export const useAlerts = () => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   const useAlertHistory = (
diff --git a/keep-ui/utils/hooks/useConfig.ts b/keep-ui/utils/hooks/useConfig.ts
index 68de69202..7356783e2 100644
--- a/keep-ui/utils/hooks/useConfig.ts
+++ b/keep-ui/utils/hooks/useConfig.ts
@@ -10,3 +10,15 @@ export const useConfig = () => {
     fetcher("/api/config", session?.accessToken)
   );
 };
+
+export const useApiUrl = () => {
+  const { data: config } = useConfig();
+
+  if (config?.API_URL_CLIENT) {
+    return config.API_URL_CLIENT;
+  }
+
+  // backward compatibility or for docker-compose or other deployments where the browser
+  // can't access the API directly
+  return "/backend";
+};
diff --git a/keep-ui/utils/hooks/useDashboards.ts b/keep-ui/utils/hooks/useDashboards.ts
index de61bd967..7f3c81245 100644
--- a/keep-ui/utils/hooks/useDashboards.ts
+++ b/keep-ui/utils/hooks/useDashboards.ts
@@ -1,6 +1,6 @@
 import useSWR from "swr";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export interface Dashboard {
@@ -11,7 +11,7 @@ export interface Dashboard {
 
 export const useDashboards = () => {
   const { data: session } = useSession();
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
 
   const { data, error, mutate } = useSWR<Dashboard[]>(
     session ? `${apiUrl}/dashboard` : null,
diff --git a/keep-ui/utils/hooks/useDeduplicationRules.ts b/keep-ui/utils/hooks/useDeduplicationRules.ts
index 1d6d43c54..54b68015b 100644
--- a/keep-ui/utils/hooks/useDeduplicationRules.ts
+++ b/keep-ui/utils/hooks/useDeduplicationRules.ts
@@ -2,11 +2,11 @@ import { DeduplicationRule } from "app/deduplication/models";
 import { useSession } from "next-auth/react";
 import { SWRConfiguration } from "swr";
 import useSWRImmutable from "swr/immutable";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useDeduplicationRules = (options: SWRConfiguration = {}) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWRImmutable<DeduplicationRule[]>(
@@ -17,7 +17,7 @@ export const useDeduplicationRules = (options: SWRConfiguration = {}) => {
 };
 
 export const useDeduplicationFields = (options: SWRConfiguration = {}) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWRImmutable<Record<string, string[]>>(
diff --git a/keep-ui/utils/hooks/useExtractionRules.ts b/keep-ui/utils/hooks/useExtractionRules.ts
index 779509bdd..0ff32b445 100644
--- a/keep-ui/utils/hooks/useExtractionRules.ts
+++ b/keep-ui/utils/hooks/useExtractionRules.ts
@@ -1,7 +1,7 @@
 import { ExtractionRule } from "app/extraction/model";
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useExtractions = (
@@ -9,7 +9,7 @@ export const useExtractions = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<ExtractionRule[]>(
diff --git a/keep-ui/utils/hooks/useGroups.ts b/keep-ui/utils/hooks/useGroups.ts
index 0c2ed17fe..3e1dde9a2 100644
--- a/keep-ui/utils/hooks/useGroups.ts
+++ b/keep-ui/utils/hooks/useGroups.ts
@@ -2,11 +2,11 @@ import { Group } from "app/settings/models";
 import { useSession } from "next-auth/react";
 import { SWRConfiguration } from "swr";
 import useSWRImmutable from "swr/immutable";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useGroups = (options: SWRConfiguration = {}) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWRImmutable<Group[]>(
diff --git a/keep-ui/utils/hooks/useIncidents.ts b/keep-ui/utils/hooks/useIncidents.ts
index 9e94c6386..b3ba58a26 100644
--- a/keep-ui/utils/hooks/useIncidents.ts
+++ b/keep-ui/utils/hooks/useIncidents.ts
@@ -7,7 +7,7 @@ import {
 import { PaginatedWorkflowExecutionDto } from "app/workflows/builder/types";
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 import { useWebsocket } from "./usePusher";
 import { useCallback, useEffect } from "react";
@@ -35,7 +35,7 @@ export const useIncidents = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   const filtersParams = new URLSearchParams();
@@ -70,7 +70,7 @@ export const useIncidentAlerts = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
   return useSWR<PaginatedIncidentAlertsDto>(
     () =>
@@ -88,7 +88,7 @@ export const useIncidentFutureIncidents = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<PaginatedIncidentsDto>(
@@ -105,7 +105,7 @@ export const useIncident = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<IncidentDto>(
@@ -123,7 +123,7 @@ export const useIncidentWorkflowExecutions = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
   return useSWR<PaginatedWorkflowExecutionDto>(
     () =>
@@ -192,7 +192,7 @@ export const useIncidentsMeta = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<IncidentsMetaDto>(
diff --git a/keep-ui/utils/hooks/useMaintenanceRules.ts b/keep-ui/utils/hooks/useMaintenanceRules.ts
index 0e46f54b9..b771615b1 100644
--- a/keep-ui/utils/hooks/useMaintenanceRules.ts
+++ b/keep-ui/utils/hooks/useMaintenanceRules.ts
@@ -1,7 +1,7 @@
 import { MaintenanceRule } from "app/maintenance/model";
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useMaintenanceRules = (
@@ -9,7 +9,7 @@ export const useMaintenanceRules = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<MaintenanceRule[]>(
diff --git a/keep-ui/utils/hooks/useMappingRules.ts b/keep-ui/utils/hooks/useMappingRules.ts
index 87db305a1..cf116bc9c 100644
--- a/keep-ui/utils/hooks/useMappingRules.ts
+++ b/keep-ui/utils/hooks/useMappingRules.ts
@@ -1,7 +1,7 @@
 import { MappingRule } from "app/mapping/models";
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useMappings = (
@@ -9,7 +9,7 @@ export const useMappings = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<MappingRule[]>(
diff --git a/keep-ui/utils/hooks/usePermissions.ts b/keep-ui/utils/hooks/usePermissions.ts
index 3248cc082..b240ec2f6 100644
--- a/keep-ui/utils/hooks/usePermissions.ts
+++ b/keep-ui/utils/hooks/usePermissions.ts
@@ -2,11 +2,11 @@ import { Permission } from "app/settings/models";
 import { useSession } from "next-auth/react";
 import { SWRConfiguration } from "swr";
 import useSWRImmutable from "swr/immutable";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const usePermissions = (options: SWRConfiguration = {}) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWRImmutable<Permission[]>(
diff --git a/keep-ui/utils/hooks/usePresets.ts b/keep-ui/utils/hooks/usePresets.ts
index b4b9d5509..3559427d9 100644
--- a/keep-ui/utils/hooks/usePresets.ts
+++ b/keep-ui/utils/hooks/usePresets.ts
@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { Preset } from "app/alerts/models";
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 import { useLocalStorage } from "utils/hooks/useLocalStorage";
 import { useConfig } from "./useConfig";
@@ -14,7 +14,7 @@ import moment from "moment";
 export const usePresets = (type?: string, useFilters?: boolean) => {
   const { data: session } = useSession();
   const { data: configData } = useConfig();
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   //ideally, we can use pathname. but hardcoding it for now.
   const isDashBoard = type === "dashboard";
   const [presetsOrderFromLS, setPresetsOrderFromLS] = useLocalStorage<Preset[]>(
@@ -54,8 +54,8 @@ export const usePresets = (type?: string, useFilters?: boolean) => {
             ...currentPreset,
             alerts_count: currentPreset.alerts_count + newPreset.alerts_count,
             created_by: newPreset.created_by,
-            is_private: newPreset.is_private
-          }); 
+            is_private: newPreset.is_private,
+          });
         } else {
           // If the preset is not in the current presets, add it
           updatedPresets.set(newPresetId, {
@@ -71,7 +71,14 @@ export const usePresets = (type?: string, useFilters?: boolean) => {
       updatePresets(
         presetsOrderRef.current,
         newPresets.filter(
-          (p) => !["feed", "deleted", "dismissed", "without-incident", "groups"].includes(p.name)
+          (p) =>
+            ![
+              "feed",
+              "deleted",
+              "dismissed",
+              "without-incident",
+              "groups",
+            ].includes(p.name)
         )
       )
     );
@@ -79,7 +86,13 @@ export const usePresets = (type?: string, useFilters?: boolean) => {
       updatePresets(
         staticPresetsOrderRef.current,
         newPresets.filter((p) =>
-          ["feed", "deleted", "dismissed", "without-incident", "groups"].includes(p.name)
+          [
+            "feed",
+            "deleted",
+            "dismissed",
+            "without-incident",
+            "groups",
+          ].includes(p.name)
         )
       )
     );
@@ -126,10 +139,22 @@ export const usePresets = (type?: string, useFilters?: boolean) => {
           if (data) {
             const dynamicPresets = data.filter(
               (p) =>
-                !["feed", "deleted", "dismissed", "without-incident", "groups"].includes(p.name)
+                ![
+                  "feed",
+                  "deleted",
+                  "dismissed",
+                  "without-incident",
+                  "groups",
+                ].includes(p.name)
             );
             const staticPresets = data.filter((p) =>
-              ["feed", "deleted", "dismissed", "without-incident", "groups"].includes(p.name)
+              [
+                "feed",
+                "deleted",
+                "dismissed",
+                "without-incident",
+                "groups",
+              ].includes(p.name)
             );
 
             //if it is dashboard we don't need to merge with local storage.
@@ -193,7 +218,13 @@ export const usePresets = (type?: string, useFilters?: boolean) => {
     } = useFetchAllPresets(options);
     const filteredPresets = presets?.filter(
       (preset) =>
-        !["feed", "deleted", "dismissed", "groups", "without-incident"].includes(preset.name)
+        ![
+          "feed",
+          "deleted",
+          "dismissed",
+          "groups",
+          "without-incident",
+        ].includes(preset.name)
     );
     return {
       data: filteredPresets,
diff --git a/keep-ui/utils/hooks/useProviders.ts b/keep-ui/utils/hooks/useProviders.ts
index f7d3d854f..668af3a1e 100644
--- a/keep-ui/utils/hooks/useProviders.ts
+++ b/keep-ui/utils/hooks/useProviders.ts
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { getApiURL } from "../apiUrl";
+import { useApiUrl } from "./useConfig";
 import { SWRConfiguration } from "swr";
 import { ProvidersResponse } from "app/providers/providers";
 import { fetcher } from "../fetcher";
@@ -9,7 +9,7 @@ export const useProviders = (
   options: SWRConfiguration = { revalidateOnFocus: false }
 ) => {
   const { data: session } = useSession();
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
 
   return useSWRImmutable<ProvidersResponse>(
     () => (session ? `${apiUrl}/providers` : null),
diff --git a/keep-ui/utils/hooks/usePusher.ts b/keep-ui/utils/hooks/usePusher.ts
index 106c46384..57828a2a3 100644
--- a/keep-ui/utils/hooks/usePusher.ts
+++ b/keep-ui/utils/hooks/usePusher.ts
@@ -1,18 +1,21 @@
 import Pusher from "pusher-js";
 import { useConfig } from "./useConfig";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 let PUSHER: Pusher | null = null;
 const POLLING_INTERVAL = 3000;
 
 export const useWebsocket = () => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: configData } = useConfig();
   const { data: session } = useSession();
   let channelName = `private-${session?.tenantId}`;
 
+  console.log("useWebsocket: Initializing with config:", configData);
+  console.log("useWebsocket: Session:", session);
+
   if (
     PUSHER === null &&
     configData !== undefined &&
@@ -20,34 +23,73 @@ export const useWebsocket = () => {
     configData.PUSHER_DISABLED === false
   ) {
     channelName = `private-${session?.tenantId}`;
-    PUSHER = new Pusher(configData.PUSHER_APP_KEY, {
-      wsHost: configData.PUSHER_HOST,
-      wsPort: configData.PUSHER_PORT,
-      forceTLS: false,
-      disableStats: true,
-      enabledTransports: ["ws", "wss"],
-      cluster: configData.PUSHER_CLUSTER || "local",
-      channelAuthorization: {
-        transport: "ajax",
-        endpoint: `${apiUrl}/pusher/auth`,
-        headers: {
-          Authorization: `Bearer ${session?.accessToken!}`,
+    console.log("useWebsocket: Creating new Pusher instance");
+    try {
+      const isRelativeHost =
+        configData.PUSHER_HOST && !configData.PUSHER_HOST.includes("://");
+      console.log("useWebsocket: isRelativeHost:", isRelativeHost);
+      PUSHER = new Pusher(configData.PUSHER_APP_KEY, {
+        wsHost: isRelativeHost
+          ? window.location.hostname
+          : configData.PUSHER_HOST,
+        wsPath: isRelativeHost ? configData.PUSHER_HOST : "",
+        wsPort: isRelativeHost
+          ? window.location.protocol === "https:"
+            ? 443
+            : 80
+          : configData.PUSHER_PORT,
+        forceTLS: window.location.protocol === "https:",
+        disableStats: true,
+        enabledTransports: ["ws", "wss"],
+        cluster: configData.PUSHER_CLUSTER || "local",
+        channelAuthorization: {
+          transport: "ajax",
+          endpoint: `${apiUrl}/pusher/auth`,
+          headers: {
+            Authorization: `Bearer ${session?.accessToken!}`,
+          },
         },
-      },
-    });
-    PUSHER.subscribe(channelName);
+      });
+      console.log("useWebsocket: Pusher instance created successfully");
+
+      PUSHER.connection.bind("connected", () => {
+        console.log("useWebsocket: Pusher connected successfully");
+      });
+
+      PUSHER.connection.bind("error", (err: any) => {
+        console.error("useWebsocket: Pusher connection error:", err);
+      });
+
+      PUSHER.subscribe(channelName)
+        .bind("pusher:subscription_succeeded", () => {
+          console.log(
+            `useWebsocket: Successfully subscribed to ${channelName}`
+          );
+        })
+        .bind("pusher:subscription_error", (err: any) => {
+          console.error(
+            `useWebsocket: Subscription error for ${channelName}:`,
+            err
+          );
+        });
+    } catch (error) {
+      console.error("useWebsocket: Error creating Pusher instance:", error);
+    }
   }
 
   const subscribe = useCallback(() => {
+    console.log(`useWebsocket: Subscribing to ${channelName}`);
     return PUSHER?.subscribe(channelName);
   }, [channelName]);
 
   const unsubscribe = useCallback(() => {
+    console.log(`useWebsocket: Unsubscribing from ${channelName}`);
     return PUSHER?.unsubscribe(channelName);
   }, [channelName]);
 
   const bind = useCallback(
     (event: any, callback: any) => {
+      console.log(`useWebsocket: Binding to event ${event} on ${channelName}`);
       return PUSHER?.channel(channelName)?.bind(event, callback);
     },
     [channelName]
@@ -55,6 +97,9 @@ export const useWebsocket = () => {
 
   const unbind = useCallback(
     (event: any, callback: any) => {
+      console.log(
+        `useWebsocket: Unbinding from event ${event} on ${channelName}`
+      );
       return PUSHER?.channel(channelName)?.unbind(event, callback);
     },
     [channelName]
@@ -62,12 +107,17 @@ export const useWebsocket = () => {
 
   const trigger = useCallback(
     (event: any, data: any) => {
+      console.log(
+        `useWebsocket: Triggering event ${event} on ${channelName} with data:`,
+        data
+      );
       return PUSHER?.channel(channelName).trigger(event, data);
     },
     [channelName]
   );
 
   const channel = useCallback(() => {
+    console.log(`useWebsocket: Getting channel ${channelName}`);
     return PUSHER?.channel(channelName);
   }, [channelName]);
 
@@ -86,24 +136,40 @@ export const useAlertPolling = () => {
   const [pollAlerts, setPollAlerts] = useState(0);
   const lastPollTimeRef = useRef(0);
 
+  console.log("useAlertPolling: Initializing");
+
   const handleIncoming = useCallback((incoming: any) => {
+    console.log("useAlertPolling: Received incoming data:", incoming);
     const currentTime = Date.now();
     const timeSinceLastPoll = currentTime - lastPollTimeRef.current;
 
+    console.log(
+      `useAlertPolling: Time since last poll: ${timeSinceLastPoll}ms`
+    );
+
     if (timeSinceLastPoll < POLLING_INTERVAL) {
+      console.log("useAlertPolling: Ignoring poll due to short interval");
       setPollAlerts(0);
     } else {
+      console.log("useAlertPolling: Updating poll alerts");
       lastPollTimeRef.current = currentTime;
-      setPollAlerts(Math.floor(Math.random() * 10000));
+      const newPollValue = Math.floor(Math.random() * 10000);
+      console.log(`useAlertPolling: New poll value: ${newPollValue}`);
+      setPollAlerts(newPollValue);
     }
   }, []);
 
   useEffect(() => {
+    console.log("useAlertPolling: Setting up event listener for 'poll-alerts'");
     bind("poll-alerts", handleIncoming);
     return () => {
+      console.log(
+        "useAlertPolling: Cleaning up event listener for 'poll-alerts'"
+      );
       unbind("poll-alerts", handleIncoming);
     };
   }, [bind, unbind, handleIncoming]);
 
+  console.log("useAlertPolling: Current poll alerts value:", pollAlerts);
   return { data: pollAlerts };
 };
diff --git a/keep-ui/utils/hooks/useRoles.ts b/keep-ui/utils/hooks/useRoles.ts
index f71a048a6..dabfc9b58 100644
--- a/keep-ui/utils/hooks/useRoles.ts
+++ b/keep-ui/utils/hooks/useRoles.ts
@@ -2,11 +2,11 @@ import { Role } from "app/settings/models";
 import { useSession } from "next-auth/react";
 import { SWRConfiguration } from "swr";
 import useSWRImmutable from "swr/immutable";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useRoles = (options: SWRConfiguration = {}) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWRImmutable<Role[]>(
diff --git a/keep-ui/utils/hooks/useRules.ts b/keep-ui/utils/hooks/useRules.ts
index 3a710ed88..97976d51e 100644
--- a/keep-ui/utils/hooks/useRules.ts
+++ b/keep-ui/utils/hooks/useRules.ts
@@ -1,6 +1,6 @@
 import { useSession } from "next-auth/react";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export type Rule = {
@@ -25,7 +25,7 @@ export type Rule = {
 };
 
 export const useRules = (options?: SWRConfiguration) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<Rule[]>(
diff --git a/keep-ui/utils/hooks/useScopes.ts b/keep-ui/utils/hooks/useScopes.ts
index 8d437e8c1..775d8717a 100644
--- a/keep-ui/utils/hooks/useScopes.ts
+++ b/keep-ui/utils/hooks/useScopes.ts
@@ -2,11 +2,11 @@ import { Scope } from "app/settings/models";
 import { useSession } from "next-auth/react";
 import { SWRConfiguration } from "swr";
 import useSWRImmutable from "swr/immutable";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useScopes = (options: SWRConfiguration = {}) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWRImmutable<string[]>(
diff --git a/keep-ui/utils/hooks/useSearchAlerts.ts b/keep-ui/utils/hooks/useSearchAlerts.ts
index 1eb580ddf..01de3fe14 100644
--- a/keep-ui/utils/hooks/useSearchAlerts.ts
+++ b/keep-ui/utils/hooks/useSearchAlerts.ts
@@ -1,7 +1,7 @@
 import useSWR, { SWRConfiguration } from "swr";
 import { AlertDto } from "app/alerts/models";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 import { useDebouncedValue } from "./useDebouncedValue";
 import { RuleGroupType, formatQuery } from "react-querybuilder";
@@ -10,7 +10,7 @@ export const useSearchAlerts = (
   args: { query: RuleGroupType; timeframe: number },
   options?: SWRConfiguration
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   const [debouncedArgs] = useDebouncedValue(args, 2000);
@@ -30,7 +30,7 @@ export const useSearchAlerts = (
         body: JSON.stringify({
           query: {
             cel_query: formatQuery(debouncedRules, "cel"),
-            sql_query: formatQuery(debouncedRules, "parameterized_named")
+            sql_query: formatQuery(debouncedRules, "parameterized_named"),
           },
           timeframe: debouncedTimeframe,
         }),
diff --git a/keep-ui/utils/hooks/useTags.ts b/keep-ui/utils/hooks/useTags.ts
index 998b7b4fc..124da6649 100644
--- a/keep-ui/utils/hooks/useTags.ts
+++ b/keep-ui/utils/hooks/useTags.ts
@@ -1,13 +1,12 @@
 import { useSession } from "next-auth/react";
 import { SWRConfiguration } from "swr";
 import useSWRImmutable from "swr/immutable";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 import { Tag } from "app/alerts/models";
 
-
 export const useTags = (options: SWRConfiguration = {}) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWRImmutable<Tag[]>(
diff --git a/keep-ui/utils/hooks/useUsers.ts b/keep-ui/utils/hooks/useUsers.ts
index 5a15256c9..de254e040 100644
--- a/keep-ui/utils/hooks/useUsers.ts
+++ b/keep-ui/utils/hooks/useUsers.ts
@@ -2,11 +2,11 @@ import { User } from "app/settings/models";
 import { useSession } from "next-auth/react";
 import { SWRConfiguration } from "swr";
 import useSWRImmutable from "swr/immutable";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useUsers = (options: SWRConfiguration = {}) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWRImmutable<User[]>(
diff --git a/keep-ui/utils/hooks/useWorkflowExecutions.ts b/keep-ui/utils/hooks/useWorkflowExecutions.ts
index 2414ce3c6..2763ff3aa 100644
--- a/keep-ui/utils/hooks/useWorkflowExecutions.ts
+++ b/keep-ui/utils/hooks/useWorkflowExecutions.ts
@@ -6,7 +6,7 @@ import {
 import { useSession } from "next-auth/react";
 import { useSearchParams } from "next/navigation";
 import useSWR, { SWRConfiguration } from "swr";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useWorkflowExecutions = (
@@ -14,7 +14,7 @@ export const useWorkflowExecutions = (
     revalidateOnFocus: false,
   }
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<AlertToWorkflowExecution[]>(
@@ -30,7 +30,7 @@ export const useWorkflowExecutionsV2 = (
   limit: number = 25,
   offset: number = 0
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
   const searchParams = useSearchParams();
   limit = searchParams?.get("limit")
@@ -61,7 +61,7 @@ export const useWorkflowExecution = (
   workflowId: string,
   workflowExecutionId: string
 ) => {
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
   const { data: session } = useSession();
 
   return useSWR<WorkflowExecution>(
diff --git a/keep-ui/utils/hooks/useWorkflowRun.ts b/keep-ui/utils/hooks/useWorkflowRun.ts
index 74a9f9d45..dbaa98dc8 100644
--- a/keep-ui/utils/hooks/useWorkflowRun.ts
+++ b/keep-ui/utils/hooks/useWorkflowRun.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useSession } from "next-auth/react";
-import { getApiURL } from "utils/apiUrl";
+import { useApiUrl } from "./useConfig";
 import { useRouter } from "next/navigation";
 import { useProviders } from "./useProviders";
 import { Filter, Workflow } from "app/workflows/models";
@@ -19,13 +19,12 @@ export const useWorkflowRun = (workflow: Workflow) => {
   let message = "";
   const [alertFilters, setAlertFilters] = useState<Filter[]>([]);
   const [alertDependencies, setAlertDependencies] = useState<string[]>([]);
+  const apiUrl = useApiUrl();
 
   const { data: providersData = { providers: {} } as ProvidersData } =
     useProviders();
   const providers = providersData.providers;
 
-  const apiUrl = getApiURL();
-
   if (!workflow) {
     return {};
   }
diff --git a/keep-ui/utils/hooks/useWorkflows.ts b/keep-ui/utils/hooks/useWorkflows.ts
index 3739627bd..26859eaf2 100644
--- a/keep-ui/utils/hooks/useWorkflows.ts
+++ b/keep-ui/utils/hooks/useWorkflows.ts
@@ -1,13 +1,13 @@
 import { Workflow } from "app/workflows/models";
 import { useSession } from "next-auth/react";
 import { SWRConfiguration } from "swr";
-import { getApiURL } from "../apiUrl";
+import { useApiUrl } from "./useConfig";
 import { fetcher } from "../fetcher";
 import useSWRImmutable from "swr/immutable";
 
 export const useWorkflows = (options: SWRConfiguration = {}) => {
   const { data: session } = useSession();
-  const apiUrl = getApiURL();
+  const apiUrl = useApiUrl();
 
   return useSWRImmutable<Workflow[]>(
     () => (session ? `${apiUrl}/workflows` : null),
diff --git a/pyproject.toml b/pyproject.toml
index 1dfcc6d45..1f3adec36 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "keep"
-version = "0.26.0"
+version = "0.27.0"
 description = "Alerting. for developers, by developers."
 authors = ["Keep Alerting LTD"]
 readme = "README.md"