diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 9de5cb7..9e08820 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -48,5 +48,5 @@ jobs:
       - run: pnpm install
       - name: Build the application
         env:
-          BACKEND_API: "http://localhost:8080"
+          BACKEND_URL: "http://localhost:8080"
         run: pnpm build
diff --git a/README.md b/README.md
index fb58947..74fdb5e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 # FlowInquiry Client
 
 [![Build status](https://github.com/flowinquiry/flowinquiry-frontend/actions/workflows/node.js.yml/badge.svg)](https://github.com/flowinquiry/flowinquiry-frontend/actions/workflows/node.js.yml)
+![License](https://img.shields.io/badge/License-AGPLv3-blue)
 
 ## What is FlowInquiry
 
@@ -11,16 +12,16 @@ FlowInquiry is a service designed to streamline the management of cases, tickets
 FlowInquiry addresses several challenges faced by organizations in managing cases, tickets, and team communication. Here are some specific use cases:
 
 **On-Call System Management**
-In an on-call system, teams often face challenges in managing incoming requests or incidents, particularly when multiple shifts or team members are involved. FlowInquiry ensures that each request follows a well-defined workflow, with SLAs for escalation and resolution. This helps reduce response times, avoids missed escalations, and provides clear accountability for handling incidents.
+Managing incoming requests or incidents in an on-call system can be challenging with multiple shifts and team members. FlowInquiry streamlines the process by enforcing well-defined workflows with SLAs for escalation and resolution, reducing response times, avoiding missed escalations, and ensuring accountability.
 
 **Case Management in CRM Applications**
-CRM applications often struggle to manage customer cases effectively, especially when handling inquiries, complaints, or service requests. FlowInquiry enables teams to define custom workflows tailored to specific case types, such as refunds, escalations, or product inquiries. SLAs for each workflow stage ensure customers receive timely updates and resolutions, enhancing customer satisfaction and loyalty.
+FlowInquiry helps CRM teams manage customer cases like inquiries, complaints, and service requests by enabling custom workflows tailored to case types such as refunds or escalations. SLAs at each workflow stage ensure timely updates and resolutions, boosting customer satisfaction and loyalty.
 
 **Team Communication and Collaboration**
-Effective communication within and across teams can be difficult in large organizations, especially when requests involve multiple departments or external stakeholders. FlowInquiry acts as a centralized platform where requests are logged, tracked, and routed through clearly defined workflows. This reduces miscommunication, prevents delays, and ensures all parties are aligned on priorities.
+FlowInquiry enhances communication across teams by providing a centralized platform to log, track, and route requests through clear workflows. This minimizes miscommunication, prevents delays, and aligns all stakeholders on priorities, even in large organizations.
 
 **Service Request Tracking for IT Teams**
-IT teams managing internal service requests often encounter bottlenecks due to unclear processes or manual tracking. FlowInquiry allows IT departments to automate workflows for common requests such as software installation, access management, or issue resolution. The system ensures each request is assigned, processed, and resolved within agreed SLAs.
+FlowInquiry automates IT service request workflows, such as software installation and access management, reducing bottlenecks caused by manual tracking. It ensures requests are assigned, processed, and resolved efficiently within SLA timelines.
 
 By tailoring workflows to these and other scenarios, FlowInquiry empowers teams to streamline operations, meet deadlines, and deliver exceptional service to both internal and external stakeholders.
 
@@ -109,10 +110,10 @@ Set up the application environment variables by running the following script:
 scripts/init_environments.sh
 ```
 
-This script generates environment variables, including NEXT_PUBLIC_BACKEND_API, to establish the communication between the client and server. Example
+This script generates environment variables, including BACKEND_URL, to establish the communication between the client and server. Example
 
 ```
-NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
+BACKEND_URL=http://localhost:8080
 ```
 
 We recommend running the `scripts/all.sh` script, as it streamlines the process by checking your environment settings and performing all necessary configurations, removing the need to execute multiple scripts manually.
diff --git a/next.config.mjs b/next.config.mjs
index efc8e2a..a87e580 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -6,7 +6,7 @@ const nextConfig = {
       fallback: [
         {
           source: "/api/:path*",
-          destination: `${process.env.BACKEND_API}/api/:path*`,
+          destination: `${process.env.BACKEND_URL}/api/:path*`,
         },
       ],
     };
diff --git a/scripts/docker_deployment.sh b/scripts/docker_deployment.sh
index 2854f2e..1a596ff 100755
--- a/scripts/docker_deployment.sh
+++ b/scripts/docker_deployment.sh
@@ -24,14 +24,14 @@ docker tag ${IMAGE_NAME} ${REMOTE_REPO}:${TAG}
 docker tag ${IMAGE_NAME} ${REMOTE_REPO}:latest
 
 # Step 3: Log in to the Docker repository (Docker Hub by default)
-#echo "Logging into Docker repository..."
-#docker login || { echo "Login failed"; exit 1; }
-#
-## Step 4: Push both tags to the remote repository
-#echo "Pushing Docker image to remote repository with tag '${TAG}'..."
-#docker push ${REMOTE_REPO}:${TAG}
-#
-#echo "Pushing Docker image to remote repository with tag 'latest'..."
-#docker push ${REMOTE_REPO}:latest
-#
-#echo "Docker image has been pushed successfully with tags '${TAG}' and 'latest'."
+echo "Logging into Docker repository..."
+docker login || { echo "Login failed"; exit 1; }
+
+# Step 4: Push both tags to the remote repository
+echo "Pushing Docker image to remote repository with tag '${TAG}'..."
+docker push ${REMOTE_REPO}:${TAG}
+
+echo "Pushing Docker image to remote repository with tag 'latest'..."
+docker push ${REMOTE_REPO}:latest
+
+echo "Docker image has been pushed successfully with tags '${TAG}' and 'latest'."
diff --git a/scripts/init_environments.sh b/scripts/init_environments.sh
index 8d7953b..710c00d 100755
--- a/scripts/init_environments.sh
+++ b/scripts/init_environments.sh
@@ -33,7 +33,7 @@ while true; do
 done
 
 # Append to the .env.local file
-echo "BACKEND_API=\"$backend_server\"" >> "$output_file"
+echo "BACKEND_URL=\"$backend_server\"" >> "$output_file"
 
 
 # Run npx auth and append its output to .env
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1639f32..c36de8a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,8 +7,7 @@ import { Inter } from "next/font/google";
 import AutoInitBackendApi from "@/components/init-api-backend";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { setBackendApi } from "@/lib/runtime-variables";
-import { BackendApiProvider } from "@/providers/backend-api-provider";
+import { setBackendUrl, setBaseUrl } from "@/lib/runtime-variables";
 import { ErrorProvider } from "@/providers/error-provider";
 import ReactQueryProvider from "@/providers/react-query-provider";
 import { ThemeProvider } from "@/providers/theme-provider";
@@ -20,23 +19,20 @@ export const metadata: Metadata = {
   description: "FlowInquiry dashboard",
 };
 
-// Server-side function to fetch the BACKEND_API dynamically
-async function getBackendApi(): Promise<string> {
-  const backendApi = process.env.BACKEND_API;
-  if (!backendApi) {
-    throw new Error("BACKEND_API is not defined in the environment");
-  }
-  return backendApi;
-}
-
 const RootLayout = async ({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) => {
-  const backendApi = await getBackendApi();
+  const backendUrl = process.env.BACKEND_URL;
+  if (!backendUrl) {
+    throw new Error("BACKEND_URL is not defined in the environment");
+  }
+  setBackendUrl(backendUrl);
 
-  setBackendApi(backendApi);
+  // Base url is the mandatory field in environments except local
+  const baseUrl = process.env.BASE_URL;
+  setBaseUrl(baseUrl);
 
   return (
     <html suppressHydrationWarning={true} lang="en">
@@ -52,23 +48,19 @@ const RootLayout = async ({
         <script
           id="runtime-config"
           dangerouslySetInnerHTML={{
-            __html: `window.BACKEND_API="${backendApi}";`,
+            __html: `window.BASE_URL="${baseUrl}";`,
           }}
         />
-        <BackendApiProvider backendApi={backendApi}>
-          <ErrorProvider>
-            <ThemeProvider attribute="class" defaultTheme="system">
-              <ReactQueryProvider>
-                <TooltipProvider>
-                  <AutoInitBackendApi />{" "}
-                  {/* Initialize BACKEND_API on client */}
-                  {children}
-                </TooltipProvider>
-                <Toaster />
-              </ReactQueryProvider>
-            </ThemeProvider>
-          </ErrorProvider>
-        </BackendApiProvider>
+        <ErrorProvider>
+          <ThemeProvider attribute="class" defaultTheme="system">
+            <ReactQueryProvider>
+              <TooltipProvider>
+                <AutoInitBackendApi /> {children}
+              </TooltipProvider>
+              <Toaster />
+            </ReactQueryProvider>
+          </ThemeProvider>
+        </ErrorProvider>
       </body>
     </html>
   );
diff --git a/src/components/admin-panel/user-nav.tsx b/src/components/admin-panel/user-nav.tsx
index a99dd37..3b0be71 100644
--- a/src/components/admin-panel/user-nav.tsx
+++ b/src/components/admin-panel/user-nav.tsx
@@ -30,7 +30,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { getBackendApi } from "@/lib/runtime-variables";
+import { getApiUrl, getBaseUrl } from "@/lib/runtime-variables";
 
 export function UserNav() {
   const { data: session } = useSession();
@@ -50,7 +50,7 @@ export function UserNav() {
                     <AvatarImage
                       src={
                         session?.user?.imageUrl
-                          ? `${getBackendApi()}/api/files/${session?.user?.imageUrl}`
+                          ? `${getApiUrl()}/api/files/${session?.user?.imageUrl}`
                           : undefined
                       }
                       alt="Avatar"
@@ -102,7 +102,7 @@ export function UserNav() {
           <DropdownMenuSeparator />
           <DropdownMenuItem
             className="hover:cursor-pointer"
-            onClick={() => signOut()}
+            onClick={() => signOut({ redirectTo: getBaseUrl() })}
           >
             <LogOut className="w-4 h-4 mr-3 text-muted-foreground" />
             Sign out
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index 8937614..d181b33 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -26,7 +26,6 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { useBackendApi } from "@/providers/backend-api-provider";
 
 const formSchema = z.object({
   email: z
@@ -38,7 +37,6 @@ const formSchema = z.object({
 });
 
 const LoginForm = () => {
-  const backendApi = useBackendApi();
   const router = useRouter();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const form = useForm<z.infer<typeof formSchema>>({
diff --git a/src/components/forms/profile-form.tsx b/src/components/forms/profile-form.tsx
index 1259b4f..24ed536 100644
--- a/src/components/forms/profile-form.tsx
+++ b/src/components/forms/profile-form.tsx
@@ -35,9 +35,12 @@ import { Separator } from "@/components/ui/separator";
 import DefaultUserLogo from "@/components/users/user-logo";
 import { useImageCropper } from "@/hooks/use-image-cropper";
 import { useToast } from "@/hooks/use-toast";
-import { put } from "@/lib/actions/commons.action";
-import { changePassword, findUserById } from "@/lib/actions/users.action";
-import { getBackendApi } from "@/lib/runtime-variables";
+import {
+  changePassword,
+  findUserById,
+  updateUser,
+} from "@/lib/actions/users.action";
+import { getApiUrl } from "@/lib/runtime-variables";
 import { useError } from "@/providers/error-provider";
 import { UserDTOSchema } from "@/types/users";
 
@@ -89,7 +92,7 @@ export const ProfileForm = () => {
       formData.append("file", selectedFile);
     }
 
-    await put(`${getBackendApi()}/api/users`, formData, setError);
+    await updateUser(formData, setError);
     toast({ description: "Save profile successfully" });
   };
 
@@ -156,7 +159,7 @@ export const ProfileForm = () => {
                 <AvatarImage
                   src={
                     session?.user?.imageUrl
-                      ? `${getBackendApi()}/api/files/${session?.user?.imageUrl}`
+                      ? `${getApiUrl()}/api/files/${session?.user?.imageUrl}`
                       : ""
                   }
                   alt="@flowinquiry"
diff --git a/src/components/init-api-backend.tsx b/src/components/init-api-backend.tsx
index 2a19d09..8ff9a66 100644
--- a/src/components/init-api-backend.tsx
+++ b/src/components/init-api-backend.tsx
@@ -2,11 +2,11 @@
 
 import { useEffect } from "react";
 
-import { initializeBackendApiOnClient } from "@/lib/runtime-variables";
+import { initializeBaseUrlOnClient } from "@/lib/runtime-variables";
 
 const AutoInitBackendApi = () => {
   useEffect(() => {
-    initializeBackendApiOnClient();
+    initializeBaseUrlOnClient();
   }, []);
 
   return null; // This component is only for initialization
diff --git a/src/components/shared/avatar-display.tsx b/src/components/shared/avatar-display.tsx
index cc4960a..5a1082d 100644
--- a/src/components/shared/avatar-display.tsx
+++ b/src/components/shared/avatar-display.tsx
@@ -5,7 +5,7 @@ import React from "react";
 import DefaultTeamLogo from "@/components/teams/team-logo";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import DefaultUserLogo from "@/components/users/user-logo";
-import { getBackendApi } from "@/lib/runtime-variables";
+import { getApiUrl } from "@/lib/runtime-variables";
 
 interface AvatarDisplayProps {
   imageUrl?: string | null;
@@ -25,7 +25,7 @@ export const AvatarDisplay: React.FC<AvatarDisplayProps> = ({
   return (
     <Avatar className={`${size} cursor-pointer ${className}`} onClick={onClick}>
       <AvatarImage
-        src={imageUrl ? `${getBackendApi()}/api/files/${imageUrl}` : undefined}
+        src={imageUrl ? `${getApiUrl()}/api/files/${imageUrl}` : undefined}
       />
       <AvatarFallback>{fallbackContent}</AvatarFallback>
     </Avatar>
diff --git a/src/components/teams/team-form.tsx b/src/components/teams/team-form.tsx
index 1f6e652..3cedf64 100644
--- a/src/components/teams/team-form.tsx
+++ b/src/components/teams/team-form.tsx
@@ -26,10 +26,13 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useImageCropper } from "@/hooks/use-image-cropper";
-import { post, put } from "@/lib/actions/commons.action";
-import { findTeamById } from "@/lib/actions/teams.action";
+import {
+  createTeam,
+  findTeamById,
+  updateTeam,
+} from "@/lib/actions/teams.action";
 import { obfuscate } from "@/lib/endecode";
-import { getBackendApi } from "@/lib/runtime-variables";
+import { getApiUrl } from "@/lib/runtime-variables";
 import { validateForm } from "@/lib/validator";
 import { useError } from "@/providers/error-provider";
 import { TeamDTO, TeamDTOSchema } from "@/types/teams";
@@ -104,13 +107,12 @@ export const TeamForm = ({ teamId }: { teamId: number | undefined }) => {
       if (formValues.id) {
         // Edit mode
         redirectTeamId = formValues.id;
-        await put(`${getBackendApi()}/api/teams`, formData);
+        await updateTeam(formData, setError);
       } else {
         // Create mode
-        await post<FormData, TeamDTO>(
-          `${getBackendApi()}/api/teams`,
-          formData,
-        ).then((data) => (redirectTeamId = data.id));
+        await createTeam(formData, setError).then(
+          (data) => (redirectTeamId = data.id),
+        );
       }
 
       router.push(`/portal/teams/${obfuscate(redirectTeamId)}/dashboard`);
@@ -173,7 +175,7 @@ export const TeamForm = ({ teamId }: { teamId: number | undefined }) => {
                     <AvatarImage
                       src={
                         team?.logoUrl
-                          ? `${getBackendApi()}/api/files/${team.logoUrl}`
+                          ? `${getApiUrl()}/api/files/${team.logoUrl}`
                           : undefined
                       }
                       alt="@flowinquiry"
diff --git a/src/components/teams/team-list.tsx b/src/components/teams/team-list.tsx
index dc1240b..80ad839 100644
--- a/src/components/teams/team-list.tsx
+++ b/src/components/teams/team-list.tsx
@@ -39,7 +39,7 @@ import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { usePagePermission } from "@/hooks/use-page-permission";
 import { deleteTeams, searchTeams } from "@/lib/actions/teams.action";
 import { obfuscate } from "@/lib/endecode";
-import { getBackendApi } from "@/lib/runtime-variables";
+import { getApiUrl } from "@/lib/runtime-variables";
 import { cn } from "@/lib/utils";
 import { useError } from "@/providers/error-provider";
 import { Filter, QueryDTO } from "@/types/query";
@@ -206,7 +206,7 @@ export const TeamList = () => {
                           <AvatarImage
                             src={
                               team.logoUrl
-                                ? `${getBackendApi()}/api/files/${team.logoUrl}`
+                                ? `${getApiUrl()}/api/files/${team.logoUrl}`
                                 : undefined
                             }
                             alt="@flowinquiry"
diff --git a/src/components/teams/team-users.tsx b/src/components/teams/team-users.tsx
index fd962f3..4c219db 100644
--- a/src/components/teams/team-users.tsx
+++ b/src/components/teams/team-users.tsx
@@ -39,7 +39,7 @@ import {
   findMembersByTeamId,
 } from "@/lib/actions/teams.action";
 import { obfuscate } from "@/lib/endecode";
-import { getBackendApi } from "@/lib/runtime-variables";
+import { getApiUrl } from "@/lib/runtime-variables";
 import { BreadcrumbProvider } from "@/providers/breadcrumb-provider";
 import { useError } from "@/providers/error-provider";
 import { useTeam } from "@/providers/team-provider";
@@ -170,7 +170,7 @@ const TeamUsersView = () => {
                               <AvatarImage
                                 src={
                                   user?.imageUrl
-                                    ? `${getBackendApi()}/api/files/${user.imageUrl}`
+                                    ? `${getApiUrl()}/api/files/${user.imageUrl}`
                                     : undefined
                                 }
                                 alt={`${user.firstName} ${user.lastName}`}
diff --git a/src/global.d.ts b/src/global.d.ts
index 973fd95..077aecb 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,6 +1,6 @@
 declare global {
   interface Window {
-    BACKEND_API?: string; // Add BACKEND_API as an optional property
+    BASE_URL?: string; // Add BACKEND_URL as an optional property
   }
 }
 
diff --git a/src/lib/actions/commons.action.ts b/src/lib/actions/commons.action.ts
index 041ce42..39f43cc 100644
--- a/src/lib/actions/commons.action.ts
+++ b/src/lib/actions/commons.action.ts
@@ -1,7 +1,7 @@
 import { auth } from "@/auth";
 import { getAccessToken } from "@/lib/access-token-manager";
 import { handleError, HttpError } from "@/lib/errors";
-import { getBackendApi } from "@/lib/runtime-variables";
+import { getApiUrl } from "@/lib/runtime-variables";
 import { PageableResult } from "@/types/commons";
 import {
   createQueryParams,
@@ -42,9 +42,10 @@ export const fetchData = async <TData, TResponse>(
     options.body = JSON.stringify(data);
   }
 
-  const BACKEND_API = getBackendApi();
+  const apiUrl = getApiUrl();
+
   try {
-    const response = await fetch(`${BACKEND_API}${url}`, options);
+    const response = await fetch(`${apiUrl}${url}`, options);
 
     if (response.ok) {
       const contentType = response.headers.get("content-type");
diff --git a/src/lib/actions/teams.action.ts b/src/lib/actions/teams.action.ts
index 523d2be..c96d8ef 100644
--- a/src/lib/actions/teams.action.ts
+++ b/src/lib/actions/teams.action.ts
@@ -3,11 +3,26 @@ import {
   doAdvanceSearch,
   get,
   post,
+  put,
 } from "@/lib/actions/commons.action";
 import { Pagination, QueryDTO } from "@/types/query";
 import { TeamDTO, TransitionItemCollectionDTO } from "@/types/teams";
 import { UserDTO, UserWithTeamRoleDTO } from "@/types/users";
 
+export const createTeam = async (
+  teamForm: FormData,
+  setError?: (error: string | null) => void,
+) => {
+  return post<FormData, TeamDTO>(`/api/teams`, teamForm, setError);
+};
+
+export const updateTeam = async (
+  teamForm: FormData,
+  setError?: (error: string | null) => void,
+) => {
+  return put<FormData, TeamDTO>(`/api/teams`, teamForm, setError);
+};
+
 export const findTeamById = async (
   teamId: number,
   setError?: (error: string | null) => void,
diff --git a/src/lib/actions/users.action.ts b/src/lib/actions/users.action.ts
index 09a4752..7390f32 100644
--- a/src/lib/actions/users.action.ts
+++ b/src/lib/actions/users.action.ts
@@ -51,16 +51,14 @@ export const createUser = async (
   user: UserDTO,
   setError?: (error: string | null) => void,
 ) => {
-  if (user.id) {
-    const formData = new FormData();
-    const userJsonBlob = new Blob([JSON.stringify(user)], {
-      type: "application/json",
-    });
-    formData.append("userDTO", userJsonBlob);
-    return put<FormData, UserDTO>(`/api/users`, formData, setError);
-  } else {
-    return post<UserDTO, UserDTO>(`/api/users`, user, setError);
-  }
+  return post<UserDTO, UserDTO>(`/api/users`, user, setError);
+};
+
+export const updateUser = async (
+  userForm: FormData,
+  setError?: (error: string | null) => void,
+) => {
+  return put<FormData, UserDTO>(`/api/users`, userForm, setError);
 };
 
 export const deleteUser = async (
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 0be511f..166b8de 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -2,7 +2,7 @@ export default async function apiAuthSignIn(
   credentials: Partial<Record<"email" | "password", unknown>> | undefined,
 ) {
   try {
-    const response = await fetch(`${process.env.BACKEND_API}/api/login`, {
+    const response = await fetch(`${process.env.BACKEND_URL}/api/login`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
diff --git a/src/lib/runtime-variables.ts b/src/lib/runtime-variables.ts
index a9904b3..de02d8b 100644
--- a/src/lib/runtime-variables.ts
+++ b/src/lib/runtime-variables.ts
@@ -1,20 +1,43 @@
-let backendApi: string | null = null;
+/**
+ * The backend url that nextjs server side initiates the request to FlowInquiry backend service
+ */
+let backendUrl: string | null = null;
+
+/**
+ * The base URL is the address that the Next.js client-side uses to initiate requests to the FlowInquiry service. Note that the
+ * base URL and the back-end URL are significantly different. The base URL is accessible from the client side, enabling API communication,
+ * while the back-end URL might only be accessible within the FlowInquiry cluster and not directly exposed to the client.
+ */
+let baseUrl: string | undefined = undefined;
 
 // Function to set the `BACKEND_API`
-export const setBackendApi = (api: string) => {
-  backendApi = api;
+export const setBackendUrl = (url: string) => {
+  backendUrl = url;
+};
+
+export const setBaseUrl = (url?: string) => {
+  baseUrl = url;
 };
 
-// Function to initialize `BACKEND_API` on the client
-export const initializeBackendApiOnClient = () => {
-  if (typeof window !== "undefined" && window.BACKEND_API) {
-    setBackendApi(window.BACKEND_API);
+// Function to initialize `BASE_URL` on the client
+export const initializeBaseUrlOnClient = () => {
+  if (typeof window !== "undefined" && window.BASE_URL) {
+    setBaseUrl(window.BASE_URL);
   } else {
-    console.error("Backend API is not defined on the client.");
+    console.warn("Base url API is not defined on the client.");
   }
 };
 
-// Function to get the `BACKEND_API`
-export const getBackendApi = (): string => {
-  return backendApi!;
+// Function to get the `BACKEND_URL`
+export const getBackendUrl = (): string => {
+  return backendUrl!;
+};
+
+export const getBaseUrl = (): string | undefined => {
+  return baseUrl;
+};
+
+export const getApiUrl = () => {
+  const baseUrl = getBaseUrl();
+  return baseUrl ? baseUrl : getBackendUrl();
 };
diff --git a/src/providers/backend-api-provider.tsx b/src/providers/backend-api-provider.tsx
deleted file mode 100644
index c8c1627..0000000
--- a/src/providers/backend-api-provider.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import React, { createContext, ReactNode, useContext } from "react";
-
-// Create a context for BACKEND_API
-const BackendApiContext = createContext<string | null>(null);
-
-// Custom hook to access the BACKEND_API context
-export const useBackendApi = () => {
-  const context = useContext(BackendApiContext);
-  if (!context) {
-    throw new Error("useBackendApi must be used within a BackendApiProvider");
-  }
-  return context;
-};
-
-// Context provider component
-export const BackendApiProvider = ({
-  children,
-  backendApi,
-}: {
-  children: ReactNode;
-  backendApi: string;
-}) => {
-  return (
-    <BackendApiContext.Provider value={backendApi}>
-      {children}
-    </BackendApiContext.Provider>
-  );
-};