diff --git a/package-lock.json b/package-lock.json
index 0512bb8..2a4d423 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19899,6 +19899,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^4.8.0",
         "react-router-dom": "^6.13.0",
+        "uuid": "^9.0.0",
         "zod": "^3.21.4"
       },
       "devDependencies": {
diff --git a/packages/web/package.json b/packages/web/package.json
index c563cbf..fffb0bc 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -72,6 +72,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^4.8.0",
         "react-router-dom": "^6.13.0",
+        "uuid": "^9.0.0",
         "zod": "^3.21.4"
     },
     "devDependencies": {
diff --git a/packages/web/src/contexts/providers/CallableFunctionFormProvider.tsx b/packages/web/src/contexts/providers/CallableFunctionFormProvider.tsx
index 8854e87..7666439 100644
--- a/packages/web/src/contexts/providers/CallableFunctionFormProvider.tsx
+++ b/packages/web/src/contexts/providers/CallableFunctionFormProvider.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from "@mantine/form";
+import { v4 as uuid } from "uuid";
 import {
     CallableFunctionFormContext,
     CallableFunctionFormValues,
@@ -6,7 +7,6 @@ import {
 import { persistenceCallableFunctionSchema } from "../../entities/persistenceCallableFunction";
 import React from "react";
 import useCallableFunctions from "../../hooks/useCallableFunctions";
-import { randomId } from "@mantine/hooks";
 
 export interface CallableFunctionFormProviderProps {
     children: React.ReactNode;
@@ -26,7 +26,7 @@ const CallableFunctionFormProvider = ({
     } = useCallableFunctions();
     const form = CallableFunctionFormContext.useForm({
         initialValues: {
-            id: randomId(),
+            id: uuid(),
             displayName: "",
             name: "",
         },