diff --git a/src/components/ARButton.module.css b/src/components/ARButton.module.css
index 8b56424e..0a801644 100644
--- a/src/components/ARButton.module.css
+++ b/src/components/ARButton.module.css
@@ -30,9 +30,9 @@
 }
 
 .AROn {
-  background-image: url('/ui/aron.svg');
+  background-image: url('./ui/aron.svg');
 }
 
 .AROff {
-  background-image: url('/ui/aroff.svg');
-}
\ No newline at end of file
+  background-image: url('./ui/aroff.svg');
+}
diff --git a/src/components/AudioButton.module.css b/src/components/AudioButton.module.css
index f4548e16..3048a3e6 100644
--- a/src/components/AudioButton.module.css
+++ b/src/components/AudioButton.module.css
@@ -30,10 +30,10 @@
 }
 
 .AudioOn {
-  background-image: url('/ui/soundon.svg');
+  background-image: url('./ui/soundon.svg');
 }
 
 .AudioOff {
-  background-image: url('/ui/soundoff.svg');
+  background-image: url('./ui/soundoff.svg');
 
-}
\ No newline at end of file
+}
diff --git a/src/components/BackButton.module.css b/src/components/BackButton.module.css
index 373b37ed..cac3d242 100644
--- a/src/components/BackButton.module.css
+++ b/src/components/BackButton.module.css
@@ -1,5 +1,5 @@
 .StyledBackButton {
-    background: url('/ui/backButton_gray.png') center center no-repeat;
+    background: url('./ui/backButton_gray.png') center center no-repeat;
     background-size: 45% 55%;
     height: 4em;
     width: 4em;
@@ -19,6 +19,6 @@
 .StyledBackButton:hover {
     opacity: 1.0;
     cursor: pointer;
-    background: url('/ui/backButton_white.png') center center no-repeat;
+    background: url('./ui/backButton_white.png') center center no-repeat;
     background-size: 45% 55%;
-}
\ No newline at end of file
+}
diff --git a/src/components/Background.module.css b/src/components/Background.module.css
index 3c4bbea6..59dbea9a 100644
--- a/src/components/Background.module.css
+++ b/src/components/Background.module.css
@@ -1,5 +1,5 @@
 .backgroundImg {
-    background-image: url('/assets/backgrounds/background4.jpg');
+    background-image: url('./assets/backgrounds/background4.jpg');
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-position: center center;
@@ -27,7 +27,7 @@
 }
 
 .Background {
-    background: url('/assets/backgrounds/background4.jpg');
+    background: url('./assets/backgrounds/background4.jpg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
diff --git a/src/components/BottomDisplayMenu.module.css b/src/components/BottomDisplayMenu.module.css
index 6c9a5c06..bba6cd5e 100644
--- a/src/components/BottomDisplayMenu.module.css
+++ b/src/components/BottomDisplayMenu.module.css
@@ -37,14 +37,14 @@
   background-color: #1e2530;
 }
 .left-button{
-  background: url('/ui/backButton_small.png');
+  background: url('./ui/backButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
 .right-button{
-  background: url('/ui/nextButton_small.png');
+  background: url('./ui/nextButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
diff --git a/src/components/JsonAttributes.module.css b/src/components/JsonAttributes.module.css
index b50296f1..6388ce5e 100644
--- a/src/components/JsonAttributes.module.css
+++ b/src/components/JsonAttributes.module.css
@@ -84,14 +84,14 @@
   background-color: #1e2530;
 }
 .left-button{
-  background: url('/ui/backButton_small.png');
+  background: url('./ui/backButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
 .right-button{
-  background: url('/ui/nextButton_small.png');
+  background: url('./ui/nextButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -140,4 +140,4 @@
   justify-content: center;
   align-content: center;
   height: 40px;
-}
\ No newline at end of file
+}
diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx
index 1728cbcf..8bebb4e8 100644
--- a/src/components/Logo.jsx
+++ b/src/components/Logo.jsx
@@ -1,5 +1,5 @@
 import React from "react"
 import "./Logo.css"
 export default function Logo () {
-    return <div className="logo"><img src="/ui/weba.png" /></div>
+    return <div className="logo"><img src="./ui/weba.png" /></div>
 }
diff --git a/src/components/MergeOptions.module.css b/src/components/MergeOptions.module.css
index 33f0d290..95d8f63b 100644
--- a/src/components/MergeOptions.module.css
+++ b/src/components/MergeOptions.module.css
@@ -52,14 +52,14 @@
   background-color: #1e2530;
 }
 .left-button{
-  background: url('/ui/backButton_small.png');
+  background: url('./ui/backButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
 .right-button{
-  background: url('/ui/nextButton_small.png');
+  background: url('./ui/nextButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -113,4 +113,4 @@
     align-items: center;
     justify-content: left;
     height: 40px;
-  }
\ No newline at end of file
+  }
diff --git a/src/components/ModelInformation.module.css b/src/components/ModelInformation.module.css
index 1288a135..1ca82f5b 100644
--- a/src/components/ModelInformation.module.css
+++ b/src/components/ModelInformation.module.css
@@ -88,14 +88,14 @@
   background-color: #1e2530;
 }
 .left-button{
-  background: url('/ui/backButton_small.png');
+  background: url('./ui/backButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
 .right-button{
-  background: url('/ui/nextButton_small.png');
+  background: url('./ui/nextButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -144,4 +144,4 @@
   justify-content: center;
   align-content: center;
   height: 40px;
-}
\ No newline at end of file
+}
diff --git a/src/components/TraitInformation.module.css b/src/components/TraitInformation.module.css
index 638a9112..37525479 100644
--- a/src/components/TraitInformation.module.css
+++ b/src/components/TraitInformation.module.css
@@ -83,14 +83,14 @@
   background-color: #1e2530;
 }
 .left-button{
-  background: url('/ui/backButton_small.png');
+  background: url('./ui/backButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
 .right-button{
-  background: url('/ui/nextButton_small.png');
+  background: url('./ui/nextButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -159,4 +159,4 @@
   align-items : center;
   user-select: none;
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/components/custom-button/IconCollection.jsx b/src/components/custom-button/IconCollection.jsx
index 68363aef..95b007b7 100644
--- a/src/components/custom-button/IconCollection.jsx
+++ b/src/components/custom-button/IconCollection.jsx
@@ -1,134 +1,134 @@
 export const IconCollection = [
   {
     name: 'backpack',
-    file: '/assets/icons/backpack.svg',
+    file: './assets/icons/backpack.svg',
   },
   {
     name: 'microphone',
-    file: '/assets/icons/microphone.svg',
+    file: './assets/icons/microphone.svg',
   },
   {
     name: 'speechToText',
-    file: '/assets/icons/speechToText.svg',
+    file: './assets/icons/speechToText.svg',
   },
   {
     name: 'arrowRight',
-    file: '/assets/icons/arrowRight.svg',
+    file: './assets/icons/arrowRight.svg',
   },
   {
     name: 'arrowLeft',
-    file: '/assets/icons/arrowLeft.svg',
+    file: './assets/icons/arrowLeft.svg',
   },
   {
     name: 'rooms',
-    file: '/assets/icons/rooms.svg',
+    file: './assets/icons/rooms.svg',
   },
   {
     name: 'scenes',
-    file: '/assets/icons/scenes.svg',
+    file: './assets/icons/scenes.svg',
   },
   {
     name: 'settings',
-    file: '/assets/icons/settings.svg',
+    file: './assets/icons/settings.svg',
   },
   {
     name: 'tokens',
-    file: '/assets/icons/tokens.svg',
+    file: './assets/icons/tokens.svg',
   },
   {
     name: 'voice',
-    file: '/assets/icons/voice.svg',
+    file: './assets/icons/voice.svg',
   },
   {
     name: 'vr',
-    file: '/assets/icons/vr.svg',
+    file: './assets/icons/vr.svg',
   },
   {
     name: 'discord',
-    file: '/assets/icons/discord.svg',
+    file: './assets/icons/discord.svg',
   },
   {
     name: 'metamask',
-    file: '/assets/icons/metamask.svg',
+    file: './assets/icons/metamask.svg',
   },
   {
     name: 'close',
-    file: '/assets/icons/close.svg',
+    file: './assets/icons/close.svg',
   },
   {
     name: 'hide',
-    file: '/assets/icons/hide.svg',
+    file: './assets/icons/hide.svg',
   },
   {
     name: 'map',
-    file: '/assets/icons/map.svg',
+    file: './assets/icons/map.svg',
   },
   {
     name: 'login',
-    file: '/assets/icons/login.svg',
+    file: './assets/icons/login.svg',
   },
   {
     name: 'logout',
-    file: '/assets/icons/logout.svg',
+    file: './assets/icons/logout.svg',
   },
   {
     name: 'plus',
-    file: '/assets/icons/plus.svg',
+    file: './assets/icons/plus.svg',
   },
   {
     name: 'minus',
-    file: '/assets/icons/minus.svg',
+    file: './assets/icons/minus.svg',
   },
   {
     name: 'mint',
-    file: '/assets/icons/mint.svg',
+    file: './assets/icons/mint.svg',
   },
   {
     name: 'download',
-    file: '/assets/icons/download.svg',
+    file: './assets/icons/download.svg',
   },
   {
     name: 'classDropHunter',
-    file: '/assets/icons/class-drop-hunter.svg',
+    file: './assets/icons/class-drop-hunter.svg',
   },
   {
     name: 'classEndineer',
-    file: '/assets/icons/class-engineer.svg',
+    file: './assets/icons/class-engineer.svg',
   },
   {
     name: 'classCustom',
-    file: '/assets/icons/class-custom.svg',
+    file: './assets/icons/class-custom.svg',
   },
   {
     name: 'classNeuralHacker',
-    file: '/assets/icons/class-neural-hacker.svg',
+    file: './assets/icons/class-neural-hacker.svg',
   },
   {
     name: 'classLiskWitch',
-    file: '/assets/icons/class-lisk-witch.svg',
+    file: './assets/icons/class-lisk-witch.svg',
   },
   {
     name: 'classBruiser',
-    file: '/assets/icons/class-bruiser.svg',
+    file: './assets/icons/class-bruiser.svg',
   },
   {
     name: 'classBeastPainter',
-    file: '/assets/icons/class-beast-painter.svg',
+    file: './assets/icons/class-beast-painter.svg',
   },
   {
     name: 'soundon',
-    file: '/assets/icons/soundon.svg',
+    file: './assets/icons/soundon.svg',
   },
   {
     name: 'soundoff',
-    file: '/assets/icons/soundoff.svg',
+    file: './assets/icons/soundoff.svg',
   },
   {
     name: 'soundoff',
-    file: '/assets/icons/soundoff.svg',
+    file: './assets/icons/soundoff.svg',
   },
   {
     name: 'polygon',
-    file: '/assets/icons/polygon.svg',
+    file: './assets/icons/polygon.svg',
   },
-];
\ No newline at end of file
+];
diff --git a/src/components/token-box/TokenBox.module.css b/src/components/token-box/TokenBox.module.css
index afd1ae32..ce0e74ce 100644
--- a/src/components/token-box/TokenBox.module.css
+++ b/src/components/token-box/TokenBox.module.css
@@ -8,8 +8,8 @@
     width: 91%;
     height: 80%;
     overflow: hidden;
-    -webkit-mask-image: url("/assets/backgrounds/token-frame-empty.svg");
-    mask-image: url("/assets/backgrounds/token-frame-empty.svg");
+    -webkit-mask-image: url("./assets/backgrounds/token-frame-empty.svg");
+    mask-image: url("./assets/backgrounds/token-frame-empty.svg");
     -webkit-mask-size: 100%;
     mask-size: 100%;
     -webkit-mask-repeat: no-repeat;
@@ -105,7 +105,7 @@
     transform: translateX(-50%) translateY(-50%);
     position: absolute;
     display: block;
-    background-image: url('/assets/backgrounds/token-box-none.svg');
+    background-image: url('./assets/backgrounds/token-box-none.svg');
 }
 
 .tokenBoxWrap .emptyIcon {
@@ -129,33 +129,33 @@
 }
 
 .tokenBoxWrap .frameActive {
-    background-image: url('/assets/backgrounds/token-box-uncommon.svg');
+    background-image: url('./assets/backgrounds/token-box-uncommon.svg');
     height: 116%;
     width: 116%;
     top: 50% !important;
 }
 
 .tokenBoxWrap .frame.mythic {
-    background-image: url('/assets/backgrounds/token-box-uncommon.svg');
+    background-image: url('./assets/backgrounds/token-box-uncommon.svg');
 }
 
 .tokenBoxWrap .frame.epic {
-    background-image: url('/assets/backgrounds/token-box-epic.svg');
+    background-image: url('./assets/backgrounds/token-box-epic.svg');
     z-index: 1;
 }
 
 .tokenBoxWrap .frame.rare {
-    background-image: url('/assets/backgrounds/token-box-rare.svg');
+    background-image: url('./assets/backgrounds/token-box-rare.svg');
 }
 
 .tokenBoxWrap .frame.uncommon {
-    background-image: url('/assets/backgrounds/token-box-uncommon.svg');
+    background-image: url('./assets/backgrounds/token-box-uncommon.svg');
 }
 
 .tokenBoxWrap .frame.common {
-    background-image: url('/assets/backgrounds/token-box-common.svg');
+    background-image: url('./assets/backgrounds/token-box-common.svg');
 }
 
 .tokenBoxWrap .frame.default {
-    background-image: url('/assets/backgrounds/token-box-none.svg');
+    background-image: url('./assets/backgrounds/token-box-none.svg');
 }
diff --git a/src/library/effectManager.js b/src/library/effectManager.js
index a5155697..159fec33 100644
--- a/src/library/effectManager.js
+++ b/src/library/effectManager.js
@@ -24,10 +24,10 @@ import { MToonMaterial } from "@pixiv/three-vrm";
 
 
 const textureLoader = new THREE.TextureLoader()
-const pixelTexture = textureLoader.load(`/textures/pixel9.png`);
+const pixelTexture = textureLoader.load(`./textures/pixel9.png`);
 pixelTexture.wrapS = pixelTexture.wrapT = THREE.RepeatWrapping;
 
-const noiseTexture = textureLoader.load(`/textures/noise3.jpg`);
+const noiseTexture = textureLoader.load(`./textures/noise3.jpg`);
 noiseTexture.wrapS = noiseTexture.wrapT = THREE.RepeatWrapping;
 
 
@@ -382,4 +382,4 @@ export class EffectManager extends EventTarget{
     
     }, this.frameRate);
   }
-}
\ No newline at end of file
+}
diff --git a/src/library/particle/particle.js b/src/library/particle/particle.js
index 835c1080..c3471dd0 100644
--- a/src/library/particle/particle.js
+++ b/src/library/particle/particle.js
@@ -11,7 +11,7 @@ import {transitionEffectTypeNumber} from '../constants.js';
 
 const textureLoader = new THREE.TextureLoader()
 
-const auraTexture = textureLoader.load(`/textures/beam2.png`);
+const auraTexture = textureLoader.load(`./textures/beam2.png`);
 auraTexture.wrapS = THREE.RepeatWrapping;
 
 
@@ -334,4 +334,4 @@ class ParticleEffect {
 
 
 
-export default ParticleEffect;
\ No newline at end of file
+export default ParticleEffect;
diff --git a/src/library/sceneInitializer.js b/src/library/sceneInitializer.js
index f2899e25..1036729e 100644
--- a/src/library/sceneInitializer.js
+++ b/src/library/sceneInitializer.js
@@ -81,7 +81,7 @@ export function sceneInitializer(canvasId) {
 
     async function fetchScene() {
         // load environment
-        const modelPath = "/3d/Platform.glb"
+        const modelPath = "./3d/Platform.glb"
       
         const loader = new GLTFLoader()
         // load the modelPath
diff --git a/src/pages/Claim.jsx b/src/pages/Claim.jsx
index 789f4991..21654c50 100644
--- a/src/pages/Claim.jsx
+++ b/src/pages/Claim.jsx
@@ -98,7 +98,7 @@ function Claim() {
               >
                 <div className={styles.frameContainer}>
                   <img
-                    src={"/assets/backgrounds/class-frame.svg"}
+                    src={"./assets/backgrounds/class-frame.svg"}
                     className={styles.frame}
                   />
                 </div>
@@ -106,7 +106,7 @@ function Claim() {
                 <div className={styles.lockedContainer}>
                   {characterClass["disabled"] && (
                     <img
-                      src={"/assets/icons/locked.svg"}
+                      src={"./assets/icons/locked.svg"}
                       className={styles.locked}
                     />
                   )}
@@ -138,7 +138,7 @@ function Claim() {
               >
                 <div className={styles.frameContainer}>
                   <img
-                    src={"/assets/backgrounds/class-frame.svg"}
+                    src={"./assets/backgrounds/class-frame.svg"}
                     className={styles.frame}
                   />
                 </div>
diff --git a/src/pages/Create.module.css b/src/pages/Create.module.css
index ac90c818..7b8b8d23 100644
--- a/src/pages/Create.module.css
+++ b/src/pages/Create.module.css
@@ -100,8 +100,8 @@
   -webkit-mask-size: 100%;
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
-  mask-image: url("/assets/backgrounds/class-mask.svg");
-  -webkit-mask-image: url("/assets/backgrounds/class-mask.svg");
+  mask-image: url("./assets/backgrounds/class-mask.svg");
+  -webkit-mask-image: url("./assets/backgrounds/class-mask.svg");
 }
 
 .classContainer .classFrame .frameContainer {
diff --git a/src/pages/Landing.jsx b/src/pages/Landing.jsx
index 2b6c63be..6f2b72c0 100644
--- a/src/pages/Landing.jsx
+++ b/src/pages/Landing.jsx
@@ -46,16 +46,16 @@ function Landing() {
     <div className={styles.container}>
       <div className={styles.buttonContainer}>
         <button className={styles.button} onClick={createCharacter}>
-          <img src="/assets/media/btn_create_character.png" />
+          <img src="./assets/media/btn_create_character.png" />
         </button>
         <button className={styles.button} onClick={createVRMCharacter}>
-          <img src="/assets/media/btn_batch_download_character.png" />
+          <img src="./assets/media/btn_batch_download_character.png" />
         </button>
         <button className={styles.button} onClick={optimizeCharacter}>
-          <img src="/assets/media/btn_optimize_character.png" />
+          <img src="./assets/media/btn_optimize_character.png" />
         </button>
         {opensea_Key && opensea_Key != "" && <button className={styles.button} onClick={getWallet}>
-          <img src="/assets/media/btn_optimize_character.png" />
+          <img src="./assets/media/btn_optimize_character.png" />
         </button>
         }
         {/*
diff --git a/src/pages/Optimizer.module.css b/src/pages/Optimizer.module.css
index c08fbb74..d5647b1c 100644
--- a/src/pages/Optimizer.module.css
+++ b/src/pages/Optimizer.module.css
@@ -49,14 +49,14 @@
   background-color: #1e2530;
 }
 .left-button{
-  background: url('/ui/backButton_small.png');
+  background: url('./ui/backButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
 .right-button{
-  background: url('/ui/nextButton_small.png');
+  background: url('./ui/nextButton_small.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -140,4 +140,4 @@
 
 .buttonContainer button {
     min-width: 120px;
-}
\ No newline at end of file
+}
diff --git a/src/pages/Wallet.jsx b/src/pages/Wallet.jsx
index c36cd676..b7cec550 100644
--- a/src/pages/Wallet.jsx
+++ b/src/pages/Wallet.jsx
@@ -99,7 +99,7 @@ function Wallet() {
               >
                 <div className={styles.frameContainer}>
                   <img
-                    src={"/assets/backgrounds/class-frame.svg"}
+                    src={"./assets/backgrounds/class-frame.svg"}
                     className={styles.frame}
                   />
                 </div>