diff --git a/cognee-frontend/.env.template b/cognee-frontend/.env.template
new file mode 100644
index 000000000..7068f8302
--- /dev/null
+++ b/cognee-frontend/.env.template
@@ -0,0 +1 @@
+NEXT_PUBLIC_BACKEND_API_URL=http://localhost:8000/api
diff --git a/cognee-frontend/src/app/(graph)/CrewAITrigger.tsx b/cognee-frontend/src/app/(graph)/CrewAITrigger.tsx
index 942318821..7a164c614 100644
--- a/cognee-frontend/src/app/(graph)/CrewAITrigger.tsx
+++ b/cognee-frontend/src/app/(graph)/CrewAITrigger.tsx
@@ -28,7 +28,10 @@ export default function CrewAITrigger({ onData, onActivity }: CrewAITriggerProps
       username2: formElements.username2.value,
     };
 
-    const websocket = new WebSocket("ws://localhost:8000/api/v1/crewai/subscribe");
+    const backendApiUrl = process.env.NEXT_PUBLIC_BACKEND_API_URL;
+    const wsUrl = backendApiUrl.replace(/^http(s)?/, "ws");
+
+    const websocket = new WebSocket(`${wsUrl}/v1/crewai/subscribe`);
 
     onActivity([{ id: uuid4(), timestamp: Date.now(), activity: "Dispatching hiring crew agents" }]);
 
diff --git a/cognee-frontend/src/utils/fetch.ts b/cognee-frontend/src/utils/fetch.ts
index acecdc7c5..78f7f43b7 100644
--- a/cognee-frontend/src/utils/fetch.ts
+++ b/cognee-frontend/src/utils/fetch.ts
@@ -2,7 +2,9 @@ import handleServerErrors from "./handleServerErrors";
 
 let numberOfRetries = 0;
 
-const isAuth0Enabled = process.env.USE_AUTH0_AUTHORIZATION?.toLowerCase() === "true"
+const isAuth0Enabled = process.env.USE_AUTH0_AUTHORIZATION?.toLowerCase() === "true";
+
+const backendApiUrl = process.env.NEXT_PUBLIC_BACKEND_API_URL;
 
 export default async function fetch(url: string, options: RequestInit = {}): Promise<Response> {
   function retry(lastError: Response) {
@@ -22,7 +24,7 @@ export default async function fetch(url: string, options: RequestInit = {}): Pro
       });
   }
 
-  return global.fetch("http://localhost:8000/api" + url, {
+  return global.fetch(backendApiUrl + url, {
     ...options,
     credentials: "include",
   })