diff --git a/.env b/.env
new file mode 100644
index 0000000..31e0b5c
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+M2M_BASE_URL='./'
diff --git a/src/create.html b/src/create.html
index 703ec40..f9840a5 100644
--- a/src/create.html
+++ b/src/create.html
@@ -2,23 +2,23 @@
 <html lang="en">
 <head>
     <title style="display: none">Mesh2Motion - Create</title>
-    <link rel="icon" type="image/png" href="./images/favicon.png"/>
-    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="<%= base_url_no_trailing_slash %>/images/favicon.png"/>
+    <link rel="shortcut icon" type="image/x-icon" href="<%= base_url_no_trailing_slash %>/favicon.ico" />
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body style="margin: 0">
-    <script type="module" src="./CustomModelUploadBootstrap.ts"></script>
-    <link href="./styles.css" rel="stylesheet" crossorigin="anonymous" />
-    <link rel="stylesheet" href="./radio-button-group.css" crossorigin="anonymous" />
-    <link rel="stylesheet" href="./animation-player.css" crossorigin="anonymous" />
-    <link rel="stylesheet" href="./dialog.css" crossorigin="anonymous" />
+    <script type="module" src="<%= base_url_no_trailing_slash %>/CustomModelUploadBootstrap.ts"></script>
+    <link href="<%= base_url_no_trailing_slash %>/styles.css" rel="stylesheet" crossorigin="anonymous" />
+    <link rel="stylesheet" href="<%= base_url_no_trailing_slash %>/radio-button-group.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="<%= base_url_no_trailing_slash %>/animation-player.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="<%= base_url_no_trailing_slash %>/dialog.css" crossorigin="anonymous" />
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
 
     <nav>
         <div style="display: inline-flex; align-items: center;">
-            <a href="https://mesh2motion.org"><img src="./images/mesh2motion.svg" width="200" /></a>
+            <a href="https://mesh2motion.org"><img src="<%= base_url_no_trailing_slash %>/images/mesh2motion.svg" width="200" /></a>
             <a href="/">Explore</a>
             <span class="active-nav-item">Create</span>
         </div>
@@ -42,14 +42,14 @@
     <!-- Top toolbar with mouse controls -->
     <div id="header-ui">
         <div>
-            <img src="images/mouse-left.svg" height="30" width="30" style="vertical-align: middle;"/> Rotate
+            <img src="<%= base_url_no_trailing_slash %>/images/mouse-left.svg" height="30" width="30" style="vertical-align: middle;"/> Rotate
         </div>
 
         <div>
-            <img src="images/mouse-right.svg" height="30" width="30" style="vertical-align: middle;"/> Pan
+            <img src="<%= base_url_no_trailing_slash %>/images/mouse-right.svg" height="30" width="30" style="vertical-align: middle;"/> Pan
         </div>
         <div>
-            <img src="images/mouse-middle.svg" height="30" width="30" style="vertical-align: middle;"/> Zoom
+            <img src="<%= base_url_no_trailing_slash %>/images/mouse-middle.svg" height="30" width="30" style="vertical-align: middle;"/> Zoom
         </div>
     </div>
 
@@ -192,10 +192,10 @@
                 <fieldset style="position: fixed; right: 272px; top: 52px;">
                     <div style="display: flex; gap: 2px;">
                         <button id="undo-button" class="secondary-button" title="Undo (Ctrl+Z)" disabled>
-                            <img src="images/icons/undo.png" alt="Undo" width="16" height="16" />
+                            <img src="<%= base_url_no_trailing_slash %>/images/icons/undo.png" alt="Undo" width="16" height="16" />
                         </button>
                         <button id="redo-button" class="secondary-button" title="Redo (Ctrl+Y)" disabled>
-                            <img src="images/icons/redo.png" alt="Redo" width="16" height="16" />
+                            <img src="<%= base_url_no_trailing_slash %>/images/icons/redo.png" alt="Redo" width="16" height="16" />
                         </button>
                     </div>
                 </fieldset>
@@ -215,11 +215,11 @@
                         <div id="mesh-preview-group" class="toggle">
                         <input id="preview-painted" type="radio" name="mesh-preview-type" value="weight-painted" checked="checked" />
                             <label for="preview-painted">
-                                <img src="images/icons/display-weight-painted.svg" alt="Weights" width="20" height="20" title="Weight painted mesh" />
+                                <img src="<%= base_url_no_trailing_slash %>/images/icons/display-weight-painted.svg" alt="Weights" width="20" height="20" title="Weight painted mesh" />
                             </label>
                             <input id="preview-textured" type="radio" name="mesh-preview-type" value="textured"  />
                             <label for="preview-textured">
-                            <img src="images/icons/display-textured.svg" alt="Textured" width="20" height="20" title="Textured Mesh" />
+                            <img src="<%= base_url_no_trailing_slash %>/images/icons/display-textured.svg" alt="Textured" width="20" height="20" title="Textured Mesh" />
                             </label>
     
                         </div>
@@ -230,11 +230,11 @@
                         <div id="transform-control-type-group" class="toggle">
                             <input type="radio" name="transform-control-type" value="translate" id="transform-translate" checked="checked" />
                             <label for="transform-translate">
-                                <img src="images/icons/tool-move.svg" alt="Translate" width="20" height="20" title="Translation" />
+                                <img src="<%= base_url_no_trailing_slash %>/images/icons/tool-move.svg" alt="Translate" width="20" height="20" title="Translation" />
                             </label>
                             <input type="radio" name="transform-control-type" value="rotation" id="transform-rotate" />
                             <label for="transform-rotate">
-                                <img src="images/icons/tool-rotate.svg" alt="Rotate" width="20" height="20" title="Rotation" />
+                                <img src="<%= base_url_no_trailing_slash %>/images/icons/tool-rotate.svg" alt="Rotate" width="20" height="20" title="Rotation" />
                             </label>
                         </div>
                     </fieldset>
@@ -244,11 +244,11 @@
                         <div id="transform-space-group" class="toggle">
                             <input type="radio" name="transform-space" value="global" id="transform-global" checked="checked" />
                             <label for="transform-global">
-                                <img src="images/icons/tool-global.svg" alt="Global" width="20" height="20" title="Global" />
+                                <img src="<%= base_url_no_trailing_slash %>/images/icons/tool-global.svg" alt="Global" width="20" height="20" title="Global" />
                             </label>
                             <input type="radio" name="transform-space" value="local" id="transform-local" />
                             <label for="transform-local">
-                                <img src="images/icons/tool-local.svg" alt="Local" width="20" height="20" title="Local" />
+                                <img src="<%= base_url_no_trailing_slash %>/images/icons/tool-local.svg" alt="Local" width="20" height="20" title="Local" />
                             </label>
                         </div>
                     </fieldset>
@@ -340,7 +340,7 @@
                         <div class="styled-checkbox icon-toggle">
                             <input type="checkbox" id="show-skeleton-checkbox" name="show-skeleton" value="show" style="display:none;">
                             <label for="show-skeleton-checkbox" data-tippy-content="Show skeleton"  tabindex="0">
-                                <img src="images/icons/bone-display.svg" width="30" height="30" alt="Show skeleton" />
+                                <img src="<%= base_url_no_trailing_slash %>/images/icons/bone-display.svg" width="30" height="30" alt="Show skeleton" />
                             </label>
                         </div>
 
@@ -382,4 +382,4 @@
 
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/index.html b/src/index.html
index 1b5dfd2..0abfef3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,30 +2,30 @@
 <html lang="en">
 <head>
     <title style="display: none">Mesh2Motion - Explore</title>
-    <link rel="icon" type="image/png" href="./images/favicon.png"/>
-    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+    <link rel="icon" type="image/png" href="<%= base_url_no_trailing_slash %>/images/favicon.png"/>
+    <link rel="shortcut icon" type="image/x-icon" href="<%= base_url_no_trailing_slash %>/favicon.ico" />
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body style="margin: 0">
     <!-- Script files-->
-    <script type="module" src="./marketing/MarketingBootstrap.ts"></script>
+    <script type="module" src="<%= base_url_no_trailing_slash %>/marketing/MarketingBootstrap.ts"></script>
 
     <!-- Stylesheets-->
-    <link href="./styles.css" rel="stylesheet" crossorigin="anonymous" />
-    <link rel="stylesheet" href="./radio-button-group.css" crossorigin="anonymous" />
-    <link rel="stylesheet" href="./animation-player.css" crossorigin="anonymous" />
-    <link rel="stylesheet" href="./dialog.css" crossorigin="anonymous" />
-    <link rel="stylesheet" href="./marketing/marketing.css" crossorigin="anonymous" />
+    <link href="<%= base_url_no_trailing_slash %>/styles.css" rel="stylesheet" crossorigin="anonymous" />
+    <link rel="stylesheet" href="<%= base_url_no_trailing_slash %>/radio-button-group.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="<%= base_url_no_trailing_slash %>/animation-player.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="<%= base_url_no_trailing_slash %>/dialog.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="<%= base_url_no_trailing_slash %>/marketing/marketing.css" crossorigin="anonymous" />
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
 
 
     <nav>
         <div style="display: inline-flex; align-items: center;">
-            <a href="https://mesh2motion.org"><img src="./images/mesh2motion.svg" width="200" /></a>
+            <a href="https://mesh2motion.org"><img src="<%= base_url_no_trailing_slash %>/images/mesh2motion.svg" width="200" /></a>
             <span class="active-nav-item">Explore</span>
-            <a href="/create.html">Create</a>
+            <a href="<%= base_url_no_trailing_slash %>/create.html">Create</a>
         </div>
 
         <div style="display: inline-flex; align-items: center;">
@@ -44,14 +44,14 @@
     <!-- Top toolbar with mouse controls -->
     <div id="header-ui">
         <div>
-            <img src="./images/mouse-left.svg" height="30" width="30" style="vertical-align: middle;"/> Rotate
+            <img src="<%= base_url_no_trailing_slash %>/images/mouse-left.svg" height="30" width="30" style="vertical-align: middle;"/> Rotate
         </div>
 
         <div>
-            <img src="./images/mouse-right.svg" height="30" width="30" style="vertical-align: middle;"/> Pan
+            <img src="<%= base_url_no_trailing_slash %>/images/mouse-right.svg" height="30" width="30" style="vertical-align: middle;"/> Pan
         </div>
         <div>
-            <img src="./images/mouse-middle.svg" height="30" width="30" style="vertical-align: middle;"/> Zoom
+            <img src="<%= base_url_no_trailing_slash %>/images/mouse-middle.svg" height="30" width="30" style="vertical-align: middle;"/> Zoom
         </div>
     </div>
 
@@ -140,7 +140,7 @@
                         <div class="styled-checkbox icon-toggle">
                             <input type="checkbox" id="show-skeleton-checkbox" name="show-skeleton" value="show" style="display:none;">
                             <label for="show-skeleton-checkbox" data-tippy-content="Show skeleton"  tabindex="0">
-                                <img src="./images/icons/bone-display.svg" width="30" height="30" alt="Show skeleton" />
+                                <img src="<%= base_url_no_trailing_slash %>/images/icons/bone-display.svg" width="30" height="30" alt="Show skeleton" />
                             </label>
                         </div>
                         
@@ -187,4 +187,4 @@
     <div id="view-control-hitbox"></div>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/lib/BaseUrl.ts b/src/lib/BaseUrl.ts
new file mode 100644
index 0000000..2adf48e
--- /dev/null
+++ b/src/lib/BaseUrl.ts
@@ -0,0 +1,42 @@
+const viteBase = import.meta.env.BASE_URL || '';
+
+const trimTrailingSlash = (str: string): string => str.replace(/\/+$/g, '');
+
+const noTrailingSlash = trimTrailingSlash(viteBase);
+
+// Plugin to replace custom variable in static HTML files
+const customBaseUrlToHtml = (baseUrl: string = viteBase): Plugin => ({
+    name: 'custom-baseurl-to-html',
+    customBaseUrlToHtml: {
+        order: 'pre',
+        handler(html: string) {
+            return html.replace(
+                /%BASE_URL_NO_TRAILING_SLASH%/g,
+                baseUrl
+            );
+        }
+    }
+});
+
+export const UrlUtils = {
+	trimTrailingSlash,
+	customBaseUrlToHtml,
+}
+
+export const BaseUrl = {
+	viteBase,
+	noTrailingSlash,
+}
+
+//~ const transformHtmlPlugin = (data: Record<string, string>): Plugin => ({
+    //~ name: 'transform-html',
+    //~ transformIndexHtml: {
+        //~ order: 'pre',
+        //~ handler(html: string) {
+            //~ return html.replace(
+                //~ /<%=\s*(\w+)\s*%>/gi,
+                //~ (match, p1) => data[p1] || ''
+            //~ );
+        //~ }
+    //~ }
+//~ });
diff --git a/src/lib/processes/animations-listing/AnimationSearch.ts b/src/lib/processes/animations-listing/AnimationSearch.ts
index 3c52b61..75d7ab6 100644
--- a/src/lib/processes/animations-listing/AnimationSearch.ts
+++ b/src/lib/processes/animations-listing/AnimationSearch.ts
@@ -1,4 +1,5 @@
 import { type AnimationClip } from 'three'
+import { BaseUrl } from '../../BaseUrl'
 import { type ThemeManager } from '../../ThemeManager'
 import { SkeletonType } from '../../enums/SkeletonType'
 import { type AnimationWithState } from './interfaces/AnimationWithState'
@@ -165,7 +166,7 @@ export class AnimationSearch extends EventTarget {
       this.animation_list_container.innerHTML +=
         `<div class="anim-item">
             <button class="secondary-button play" data-index="${original_index}" style="display: flex; flex-direction:column">
-              <div class="anim-preview-placeholder" data-src="../animpreviews/${preview_folder}/${theme_name}_${anim_name}.webm" style="pointer-events: none;"></div>
+              <div class="anim-preview-placeholder" data-src="${BaseUrl.noTrailingSlash}/animpreviews/${preview_folder}/${theme_name}_${anim_name}.webm" style="pointer-events: none;"></div>
             </button>
             <label class="styled-checkbox">
                 <input type="checkbox" name="${animation_clip.name}" value="${original_index}" ${checked_attribute}>
diff --git a/src/marketing/MarketingBootstrap.ts b/src/marketing/MarketingBootstrap.ts
index ebf8753..9edc1d3 100644
--- a/src/marketing/MarketingBootstrap.ts
+++ b/src/marketing/MarketingBootstrap.ts
@@ -1,3 +1,4 @@
+import { BaseUrl } from '../lib/BaseUrl'
 import { ProcessStep } from '../lib/enums/ProcessStep'
 import { SkeletonType } from '../lib/enums/SkeletonType'
 import { Mesh2MotionEngine } from '../Mesh2MotionEngine'
@@ -29,25 +30,25 @@ export class MarketingBootstrap {
     const dragon_button: HTMLElement | null = document.getElementById('load-dragon-model-button')
 
     human_button?.addEventListener('click', () => {
-      this.mesh2motion_engine.load_model_step.load_model_file('../models/model-human.glb', 'glb')
+      this.mesh2motion_engine.load_model_step.load_model_file(BaseUrl.noTrailingSlash + '/models/model-human.glb', 'glb')
       this.skeleton_type = SkeletonType.Human
       this.change_active_skeleton(human_button)
     })
 
     fox_button?.addEventListener('click', () => {
-      this.mesh2motion_engine.load_model_step.load_model_file('../models/model-fox.glb', 'glb')
+      this.mesh2motion_engine.load_model_step.load_model_file(BaseUrl.noTrailingSlash + '/models/model-fox.glb', 'glb')
       this.skeleton_type = SkeletonType.Quadraped
       this.change_active_skeleton(fox_button)
     })
 
     bird_button?.addEventListener('click', () => {
-      this.mesh2motion_engine.load_model_step.load_model_file('../models/model-bird.glb', 'glb')
+      this.mesh2motion_engine.load_model_step.load_model_file(BaseUrl.noTrailingSlash + '/models/model-bird.glb', 'glb')
       this.skeleton_type = SkeletonType.Bird
       this.change_active_skeleton(bird_button)
     })
 
     dragon_button?.addEventListener('click', () => {
-      this.mesh2motion_engine.load_model_step.load_model_file('../models/model-dragon.glb', 'glb')
+      this.mesh2motion_engine.load_model_step.load_model_file(BaseUrl.noTrailingSlash + '/models/model-dragon.glb', 'glb')
       this.skeleton_type = SkeletonType.Dragon
       this.change_active_skeleton(dragon_button)
     })
@@ -65,13 +66,13 @@ export class MarketingBootstrap {
     this.mesh2motion_engine.load_model_step.addEventListener('modelLoaded', () => {
       // this (this.skeleton_type) value contains the filename for the skeleton rig
       this.mesh2motion_engine.process_step_changed(ProcessStep.LoadSkeleton)
-      this.mesh2motion_engine.load_skeleton_step.load_skeleton_file('../' + this.skeleton_type)
+      this.mesh2motion_engine.load_skeleton_step.load_skeleton_file(BaseUrl.noTrailingSlash + '/' + this.skeleton_type)
       this.mesh2motion_engine.load_skeleton_step.set_skeleton_type(this.skeleton_type)
     })
 
     // need to automatically finish the edit skeleton step and move onto the next step
     this.mesh2motion_engine.load_skeleton_step.addEventListener('skeletonLoaded', () => {
-      this.mesh2motion_engine.animations_listing_step.set_animations_file_path('../animations/')
+      this.mesh2motion_engine.animations_listing_step.set_animations_file_path(BaseUrl.noTrailingSlash + '/animations/')
       this.mesh2motion_engine.process_step_changed(ProcessStep.BindPose)
     })
   }
diff --git a/vite.config.js b/vite.config.js
index 0259f48..eb83ecf 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,14 +1,57 @@
 const isCodeSandbox = 'SANDBOX_URL' in process.env || 'CODESANDBOX_HOST' in process.env
 
 import { resolve } from 'path'
+import { UrlUtils } from './src/lib/BaseUrl'
 
 // allows us to use external shaders files to be imported into our materials
 import glsl from 'vite-plugin-glsl'
 
+//~ import { loadEnv } from 'vite' //for BASE_URL to be loaded in customBaseUrltoHtml
+// Plugin to replace custom variable in static HTML files
+//~ const customBaseUrlToHtml = (base) => ({
+    //~ name: 'custom-base-url-to-html',
+    //~ transformIndexHtml: {
+        //~ order: 'pre',
+        //~ handler(html) {
+            //~ return html.replace(
+                //~ /%BASE_URL_NO_TRAILING_SLASH%/g,
+                //~ base.replace(/\/+$/g, '')
+            //~ );
+        //~ }
+    //~ }
+//~ });
+// Plugin to replace custom variable in static HTML files
+//~ const customBaseUrlToHtml = () => ({
+    //~ name: 'custom-base-url-to-html',
+    //~ transformIndexHtml: {
+        //~ //order: 'pre',
+        //~ handler(html) {
+            //~ return html.replace(
+                //~ /%BASE_URL_NO_TRAILING_SLASH%/g,
+                //~ 'helloworld'
+            //~ );
+        //~ }
+    //~ }
+//~ });
+const BASE_URL = './'; //you can change base URL here
+
+//~ const customBaseUrlToHtml = () => ({
+    //~ name: 'transform-html',
+    //~ transformIndexHtml: {
+        //~ order: 'pre',
+        //~ handler(html) {
+            //~ return html.replace(
+                //~ /<%=\s*(\w+)\s*%>/gi,
+                //~ (match, p1) => data[p1] || ''
+            //~ );
+        //~ }
+    //~ }
+//~ });
+
 export default {
   root: 'src/',
   publicDir: '../static/',
-  base: './',
+  base: BASE_URL,
   server:
     {
       host: true,
@@ -28,6 +71,8 @@ export default {
     },
   plugins:
     [
-      glsl()
+      UrlUtils.customBaseUrlToHtml(UrlUtils.trimTrailingSlash(BASE_URL)),
+      //~ baseUrl.customBaseUrlToHtml({ base_url_no_trailing_slash: baseUrl.trimTrailingSlash(BASE_URL) }),
+      glsl(),
     ]
 }
