diff --git a/client/.env.default b/client/.env.default
index 5a5bc2c..743f939 100644
--- a/client/.env.default
+++ b/client/.env.default
@@ -21,4 +21,7 @@ NEXT_PUBLIC_GA_TRACKING_ID=UA-000000-2
 
 # Recoil: Remove warnings about duplicate atoms due to hot-reloading
 # Development
-RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
\ No newline at end of file
+RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
+
+# URL to setup a directory
+NEXT_PUBLIC_BASE_PATH=''
diff --git a/client/next.config.mjs b/client/next.config.mjs
index 0e3eb6e..e7410e7 100644
--- a/client/next.config.mjs
+++ b/client/next.config.mjs
@@ -2,10 +2,10 @@ import('./src/env.mjs');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  basePath: '/impact-sphere',
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
   transpilePackages: ['@esa/types'],
   images: {
-    domains: ['api.mapbox.com', 'localhost', 'esa-gda-comms-staging-mfafc.ondigitalocean.app'],
+    domains: ['api.mapbox.com', 'localhost', process.env.NEXT_PUBLIC_API_URL],
   },
   env: {
     RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED: 'false',
diff --git a/client/src/components/ui/story-summary.tsx b/client/src/components/ui/story-summary.tsx
index c028a72..b88768b 100644
--- a/client/src/components/ui/story-summary.tsx
+++ b/client/src/components/ui/story-summary.tsx
@@ -12,7 +12,7 @@ const StorySummary = ({ story }: StorySummaryProps) => {
       <div className="shrink-0">
         <Image
           alt={story.attributes?.title || 'Story image'}
-          src="/images/story-card-image.png"
+          src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/story-card-image.png`}
           width={72}
           height={72}
         />
diff --git a/client/src/constants/mapbox-style.json b/client/src/constants/mapbox-style.json
index 3b2725f..8b7ef04 100644
--- a/client/src/constants/mapbox-style.json
+++ b/client/src/constants/mapbox-style.json
@@ -407,7 +407,7 @@
   "bearing": 0,
   "pitch": 0,
   "fog": {
-    "color": "rgba(225, 244, 237, 0.07)",
+    "color": "rgba(0, 50, 71, 0.8)",
     "range": [
       "interpolate",
       [
diff --git a/client/src/containers/home/header/index.tsx b/client/src/containers/home/header/index.tsx
index 8af4be0..e2fb669 100644
--- a/client/src/containers/home/header/index.tsx
+++ b/client/src/containers/home/header/index.tsx
@@ -37,10 +37,20 @@ const Header = () => {
           </div>
           <div className="flex items-center space-x-3">
             <a href="https://gda.esa.int/" target="_blank" rel="noreferrer">
-              <Image src="/images/logos/GDA-logo.png" alt="Impact Sphere" width={50} height={50} />
+              <Image
+                src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/logos/GDA-logo.png`}
+                alt="Impact Sphere"
+                width={50}
+                height={50}
+              />
             </a>
             <a href="https://www.esa.int/" target="_blank" rel="noreferrer">
-              <Image src="/images/logos/esa-logo.png" alt="Impact Sphere" width={69} height={32} />
+              <Image
+                src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/logos/esa-logo.png`}
+                alt="Impact Sphere"
+                width={69}
+                height={32}
+              />
             </a>
           </div>
         </div>
diff --git a/client/src/containers/home/top-stories/item.tsx b/client/src/containers/home/top-stories/item.tsx
index 8f06bbc..505a52e 100644
--- a/client/src/containers/home/top-stories/item.tsx
+++ b/client/src/containers/home/top-stories/item.tsx
@@ -14,7 +14,12 @@ const TopStoriesItem = ({ story }: TopStoriesItemProps) => {
   return (
     <div className="flex gap-2">
       <div className="shrink-0">
-        <Image alt={story.title} src="/images/story-card-image.png" width={72} height={72} />
+        <Image
+          alt={story.title}
+          src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/story-card-image.png`}
+          width={72}
+          height={72}
+        />
       </div>
       <div className="space-y-1 text-gray-300">
         <h3 className="text-sm font-bold leading-4 text-gray-300">{story.title}</h3>
diff --git a/client/src/containers/map/markers/home-markers/index.tsx b/client/src/containers/map/markers/home-markers/index.tsx
index a655cd4..a539d06 100644
--- a/client/src/containers/map/markers/home-markers/index.tsx
+++ b/client/src/containers/map/markers/home-markers/index.tsx
@@ -52,7 +52,7 @@ const StoryMarkers = () => {
 
   useMapImage({
     name: 'story-marker',
-    url: '/images/map/story-marker.png',
+    url: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/map/story-marker.png`,
   });
 
   return (
diff --git a/client/src/containers/map/markers/story-markers/marker.tsx b/client/src/containers/map/markers/story-markers/marker.tsx
index 00c3c11..851e6a9 100644
--- a/client/src/containers/map/markers/story-markers/marker.tsx
+++ b/client/src/containers/map/markers/story-markers/marker.tsx
@@ -19,17 +19,17 @@ type StoryMarkerProps = {
 const MOCK_IMAGES = [
   {
     id: 0,
-    img: '/images/mock/carousel.png',
+    img: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/mock/carousel.png`,
     legend: 'Summary of GDA Urban EO Information and Use Cases 1',
   },
   {
     id: 1,
-    img: '/images/mock/carousel.png',
+    img: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/mock/carousel.png`,
     legend: 'Summary of GDA Urban EO Information and Use Cases 2',
   },
   {
     id: 2,
-    img: '/images/mock/carousel.png',
+    img: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/mock/carousel.png`,
     legend: 'Summary of GDA Urban EO Information and Use Cases 3',
   },
 ];
diff --git a/client/src/containers/map/markers/story-markers/media.tsx b/client/src/containers/map/markers/story-markers/media.tsx
index c014761..199c28f 100644
--- a/client/src/containers/map/markers/story-markers/media.tsx
+++ b/client/src/containers/map/markers/story-markers/media.tsx
@@ -31,7 +31,7 @@ const StoryMarker = ({ media, name, isFullScreen, onClickExpand }: StoryMarkerMe
 
   // MOCKUP IMAGE FOR STORY 1 STEP 1 !! REMOVE WHEN REAL IMAGE IS AVAILABLE
   const mediaSrc = mediaMime.includes('image')
-    ? '/images/story-1-image-mockup.png'
+    ? `${process.env.NEXT_PUBLIC_BASE_PATH}/images/story-1-image-mockup.png`
     : `${apiBaseUrl}${media?.url}`;
 
   const handlePlayVideo = useCallback(
diff --git a/client/src/env.mjs b/client/src/env.mjs
index 2597246..8d5e40d 100644
--- a/client/src/env.mjs
+++ b/client/src/env.mjs
@@ -29,6 +29,7 @@ export const env = createEnv({
     NEXT_PUBLIC_API_URL: z.string().url(),
     NEXT_PUBLIC_MAPBOX_API_TOKEN: z.string(),
     NEXT_PUBLIC_GA_TRACKING_ID: z.string().optional(),
+    NEXT_PUBLIC_BASE_PATH: z.string().optional(),
   },
   /*
    * Due to how Next.js bundles environment variables on Edge and Client,
@@ -44,6 +45,7 @@ export const env = createEnv({
     NEXT_PUBLIC_GA_TRACKING_ID: process.env.NEXT_PUBLIC_GA_TRACKING_ID,
     RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED:
       process.env.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED,
+    NEXT_PUBLIC_BASE_PATH: process.env.NEXT_PUBLIC_BASE_PATH,
   },
 });