diff --git a/.env b/.env
index 8028ae06..5a45e872 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,5 @@
 MERMAID_DOMAIN=''
+MERMAID_BASE_PATH=''
 MERMAID_DOCS_URL='https://mermaid.js.org'
 MERMAID_ANALYTICS_URL=''
 MERMAID_RENDERER_URL='https://mermaid.ink'
diff --git a/Dockerfile b/Dockerfile
index b22325f1..04a0e959 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -21,6 +21,7 @@ ARG MERMAID_DOMAIN
 ARG MERMAID_IS_ENABLED_MERMAID_CHART_LINKS
 ARG MERMAID_PRIVACY_POLICY_URL
 ARG MERMAID_HIDE_PRIVACY_POLICY
+ARG MERMAID_BASE_PATH
 
 COPY . ./
 
diff --git a/README.md b/README.md
index 0e424f2d..e3217359 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,8 @@ If you want to speed up the progress for mermaid-live-editor, join the Discord c
 docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor
 ```
 
+The published docker image is built using our default environment variables. You cannot override them when running the image. If you need to customize them, you will need to build the image yourself.
+
 ### To configure renderer URL
 
 When building set the MERMAID_RENDERER_URL build argument to the rendering
diff --git a/package.json b/package.json
index f8ec0bb5..dbd26f99 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "chai": "^4.5.0",
     "clsx": "^2.1.1",
     "cssnano": "^6.1.2",
+    "dotenv": "^17.3.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-es": "^4.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf42d8a9..d0136e75 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -165,6 +165,9 @@ importers:
       cssnano:
         specifier: ^6.1.2
         version: 6.1.2(postcss@8.5.3)
+      dotenv:
+        specifier: ^17.3.1
+        version: 17.3.1
       eslint:
         specifier: ^9.39.2
         version: 9.39.2(jiti@2.6.1)
@@ -1996,6 +1999,10 @@ packages:
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
+  dotenv@17.3.1:
+    resolution: {integrity: sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==}
+    engines: {node: '>=12'}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -6021,6 +6028,8 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  dotenv@17.3.1: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
diff --git a/src/lib/components/MermaidChartIcon.svelte b/src/lib/components/MermaidChartIcon.svelte
index 98c54110..007128c3 100644
--- a/src/lib/components/MermaidChartIcon.svelte
+++ b/src/lib/components/MermaidChartIcon.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+  import { asset } from '$app/paths';
   import type { ClassValue } from 'svelte/elements';
 
   let { class: className }: { class?: ClassValue } = $props();
 </script>
 
-<img class={['size-4', className]} src="/mermaidchart-logo.svg" alt="Mermaid Chart" />
+<img class={['size-4', className]} src={asset('/mermaidchart-logo.svg')} alt="Mermaid Chart" />
diff --git a/src/lib/components/Share.svelte b/src/lib/components/Share.svelte
index 2595900c..17b56844 100644
--- a/src/lib/components/Share.svelte
+++ b/src/lib/components/Share.svelte
@@ -4,6 +4,7 @@
   import { Separator } from '$/components/ui/separator';
   import { env } from '$/util/env';
   import { urlsStore } from '$/util/state';
+  import { asset } from '$app/paths';
   import ShareIcon from '~icons/material-symbols/share';
   import CopyInput from './CopyInput.svelte';
   import MermaidChartIcon from './MermaidChartIcon.svelte';
@@ -22,7 +23,7 @@
     <div class="flex flex-col gap-4">
       <div class="flex flex-col gap-2">
         <h2 class="flex items-center gap-2">
-          <img class="size-5" src="/favicon.svg" alt="Mermaid Live Editor" />
+          <img class="size-5" src={asset('/favicon.svg')} alt="Mermaid Live Editor" />
           Mermaid Live Editor
         </h2>
         <CopyInput value={window.location.href} />
diff --git a/src/lib/util/redirect.ts b/src/lib/util/redirect.ts
index 26a1d923..b54fd001 100644
--- a/src/lib/util/redirect.ts
+++ b/src/lib/util/redirect.ts
@@ -1,3 +1,5 @@
+import { resolve } from '$app/paths';
+
 /**
  * Build the redirect URL for legacy root-path links.
  * Extracts the route and fragment from the old hash-based URL format,
@@ -11,5 +13,5 @@ export const buildRedirectUrl = (location: Location): string => {
     path = parts[1];
     fragment = `#${parts[2]}`;
   }
-  return `/${path}${location.search}${fragment}`;
+  return `${resolve(`/${path}`, {})}${location.search}${fragment}`;
 };
diff --git a/svelte.config.js b/svelte.config.js
index 506b4b72..35715b63 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,4 +1,5 @@
 import adapter from '@sveltejs/adapter-static';
+import 'dotenv/config';
 import { sveltePreprocess } from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -10,6 +11,9 @@ const config = {
     alias: {
       '$/*': './src/lib/*'
     },
+    paths: {
+      base: process.env.MERMAID_BASE_PATH ?? ''
+    },
     adapter: adapter({
       pages: 'docs',
       fallback: '404.html'