diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 5f010404..7b2254e2 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -41,4 +41,5 @@ jobs:
         env:
           AWS_ACCOUNT_ID: ${{ secrets.AWS_ACCOUNT_ID }}
           LOG_LEVEL: ${{ vars.SERVER_LOG_LEVEL }}
-          REACT_APP_API_SERVER: ${{ vars.REACT_APP_API_SERVER }}
\ No newline at end of file
+          REACT_APP_API_SERVER: ${{ vars.REACT_APP_API_SERVER }}
+          API_BASE_URL: ${{ vars.API_BASE_URL }}
\ No newline at end of file
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index a58afcd9..d81ac140 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -47,6 +47,7 @@ jobs:
           LOG_LEVEL: ${{ vars.SERVER_LOG_LEVEL }}
           REACT_APP_API_SERVER: ${{ vars.REACT_APP_API_SERVER }}
           PUBLIC_URL: ${{ vars.PUBLIC_URL }}
+          API_BASE_URL: ${{ vars.API_BASE_URL }}
           
 
   deploy:
@@ -83,3 +84,4 @@ jobs:
           ARGO_CD_SERVER: ${{ secrets.ARGO_CD_SERVER }}
           ARGO_CD_USERNAME: ${{ secrets.ARGO_CD_USERNAME }}
           ARGO_CD_PASSWORD: ${{ secrets.ARGO_CD_PASSWORD }}
+          API_BASE_URL: ${{ vars.API_BASE_URL }}
diff --git a/app/client/src/components/Mapbox.js b/app/client/src/components/Mapbox.js
index 5a32bbc0..ee26ebe1 100644
--- a/app/client/src/components/Mapbox.js
+++ b/app/client/src/components/Mapbox.js
@@ -5,7 +5,7 @@ import ReactMapGL, { Marker, NavigationControl } from 'react-map-gl'
 import '../assets/stylesheets/map.css'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import mapImg from '../assets/img/UntitledMural_LocatedAtVeggielutionFarm_SanJose_photoby_YanYinChoy.jpg'
-
+import { API_URL } from '../utils/API_URL';
 // TODO: from process.env ?
 const MAPBOX_TOKEN = 'pk.eyJ1IjoidW1hcHJlZXRoaSIsImEiOiJja3diNm5wN3RnZWhsMnZwZzlyeTl5eDhhIn0.01MGUHXlsnSkJbv1u-mbmw'
 
@@ -19,7 +19,7 @@ function Mapbox() {
   // Calling MapData API to get data
   const [apiData, setApiData] = React.useState([])
   React.useEffect(() => {
-    fetch(`${process.env.REACT_APP_API_SERVER}/features`)
+    fetch(`${API_URL}/features`)
       .then((res) => res.json())
       .then((data) => setApiData(data))
   }, [])
diff --git a/app/client/src/utils/API_URL.js b/app/client/src/utils/API_URL.js
new file mode 100644
index 00000000..615ab57f
--- /dev/null
+++ b/app/client/src/utils/API_URL.js
@@ -0,0 +1,12 @@
+function getApiUrl() {
+    const host = process.env.REACT_APP_API_SERVER;
+    const subDir = process.env.API_BASE_URL;
+    const url = new URL(subDir, host).toString();
+    if (url.endsWith('/')) {
+        return url.substring(0, url.length - 1);
+    }
+    return url;
+}
+module.exports = {
+    API_URL: getApiUrl(),
+};
\ No newline at end of file
diff --git a/docker-bake.hcl b/docker-bake.hcl
index 75dd167d..9e64a5c9 100644
--- a/docker-bake.hcl
+++ b/docker-bake.hcl
@@ -75,6 +75,7 @@ target "_common" {
  * different dependent targets.
  */
 // This builds the frontend bundle and serves using nginx
+variable "API_BASE_URL" { default = "/v1/heartofvalley" }
 variable "PUBLIC_URL" { default = "http://localhost" }
 variable "REACT_APP_API_SERVER" { default = "http://localhost" }
 
@@ -86,6 +87,7 @@ target "build" {
         NODE_VERSION = "${NODE_VERSION}"
         PUBLIC_URL = "${PUBLIC_URL}"
         REACT_APP_API_SERVER = "${REACT_APP_API_SERVER}"
+        API_BASE_URL = "${API_BASE_URL}"
     }
     inherits = ["_common"]
     tags = dockerTag("${PROJECT_NAME}", "${DOCKER_TAG}", "frontend")
@@ -99,6 +101,8 @@ target "frontend" {
     target = "dev"
     args = {
         NODE_VERSION = "${NODE_VERSION}"
+        REACT_APP_API_SERVER = "${REACT_APP_API_SERVER}"
+        API_BASE_URL = "${API_BASE_URL}"
     }
     inherits = ["_common"]
     tags = dockerTag("${PROJECT_NAME}", "${DOCKER_TAG}", "frontend")
@@ -111,6 +115,7 @@ target "backend" {
     context = "./"
     args = {
         NODE_VERSION = "${NODE_VERSION}"
+        API_BASE_URL = "${API_BASE_URL}"
     }
     inherits = ["_common"]
     tags = dockerTag("${PROJECT_NAME}", "${DOCKER_TAG}", "backend")
@@ -124,5 +129,5 @@ target "backend" {
  * "docker buildx bake" == "docker buildx bake default"
  */
 group "default" {
-    targets = ["frontend", "backend"]
+    targets = ["build", "backend"]
 }
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 6fcd1fc6..49d64d5d 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -18,7 +18,8 @@ services:
     ports:
       - "3000:3000"
     environment:
-      REACT_APP_API_SERVER: "http://localhost:3001/v1/heartofvalley"
+      REACT_APP_API_SERVER: "http://localhost:3001"
+      API_BASE_URL: '/v1/heartofvalley'
 
   backend:
     build:
@@ -26,6 +27,8 @@ services:
       dockerfile: docker/backend/Dockerfile
       args:
         NODE_VERSION: ${NODE_VERSION}
+    environment:
+      API_BASE_URL: '/v1/heartofvalley'
     volumes:
       - ./app/server:/usr/src/app
       - /usr/src/app/node_modules
diff --git a/docker/frontend/Dockerfile b/docker/frontend/Dockerfile
index b89a2d23..67b73e5c 100644
--- a/docker/frontend/Dockerfile
+++ b/docker/frontend/Dockerfile
@@ -31,6 +31,7 @@ FROM local as build
 LABEL org.opensourcesanjose.app="heartofthevalley"
 ARG PUBLIC_URL
 ARG REACT_APP_API_SERVER
+ARG API_BASE_URL
 RUN npm run build
 
 FROM nginx as nginx-build