diff --git a/src/App.jsx b/src/App.jsx
index 3b6142ff..73d5eb3d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -93,9 +93,8 @@ async function fetchAnimation(templateInfo) {
   // create an animation manager for all the traits that will be loaded
   const newAnimationManager = new AnimationManager(templateInfo.offset)
   const animationPaths = getAsArray(templateInfo.animationPath);
-  newAnimationManager.storeAnimationPaths(animationPaths);
-  
-  await newAnimationManager.loadAnimation(animationPaths, animationPaths[0].endsWith('.fbx'))
+  newAnimationManager.storeAnimationPaths(animationPaths, templateInfo.assetsLocation || "");
+  await newAnimationManager.loadAnimation(animationPaths, animationPaths[0].endsWith('.fbx'), templateInfo.assetsLocation || "")
   return newAnimationManager
 }
 
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
index 51bd2158..5acf8ace 100644
--- a/src/components/Editor.jsx
+++ b/src/components/Editor.jsx
@@ -103,7 +103,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
                     size={56}
                     resolution={2048}
                     numFrames={128}
-                    icon={templateInfo.traitIconsDirectorySvg + item.iconSvg}
+                    icon={ (templateInfo.assetsLocation || "") + templateInfo.traitIconsDirectorySvg + item.iconSvg}
                     rarity={currentTraitName !== item.name ? "none" : "mythic"}
                     onClick={() => {
                       selectOption(item)
diff --git a/src/components/Selector.jsx b/src/components/Selector.jsx
index 2d963658..53102f2d 100644
--- a/src/components/Selector.jsx
+++ b/src/components/Selector.jsx
@@ -342,7 +342,7 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
       }
       
       
-      const baseDir = useTemplateBaseDirectory ? templateInfo.traitsDirectory : "";
+      const baseDir = useTemplateBaseDirectory ? (templateInfo.assetsLocation || "") + templateInfo.traitsDirectory : "";
       // load necesary assets for the options
       options.map((option, index)=>{
         if (option.selected){
diff --git a/src/components/TraitInformation.jsx b/src/components/TraitInformation.jsx
index 41c73ee1..e8f2c220 100644
--- a/src/components/TraitInformation.jsx
+++ b/src/components/TraitInformation.jsx
@@ -14,6 +14,7 @@ export default function TraitInformation({currentVRM, animationManager}){
     const [cullOutDistance, setCullOutDistance] = useState(0); // set from the values of the trait
     const [cullInDistance, setCullInDistance] = useState(0);
     const [cullLayer, setCullLayer] = useState(0);
+    const [animationName, setAnimationName] = useState(animationManager.getCurrentAnimationName());
 
     useEffect(() => {
         if (currentVRM != null){
@@ -22,6 +23,11 @@ export default function TraitInformation({currentVRM, animationManager}){
             setCullInDistance(currentVRM?.data?.cullingDistance[1]||0);
         }
     }, [currentVRM])
+
+    useEffect(()=>{
+        //console.log(animationManager.currentAnimationName);
+        setAnimationName(animationManager.getCurrentAnimationName());
+    },[animationManager.currentAnimationName])
     
 
     const handleCullOutChange = (event) => {
@@ -48,15 +54,13 @@ export default function TraitInformation({currentVRM, animationManager}){
         }
     };
 
-    const nextAnimation = () => {
-        animationManager.loadNextAnimation();
-        console.log(animationManager);
-        console.log("next")
+    const nextAnimation = async () => {
+        await animationManager.loadNextAnimation();
+        setAnimationName(animationManager.getCurrentAnimationName());
     }
-    const prevAnimation = () => {
-        animationManager.loadPreviousAnimation();
-        console.log(animationManager);
-        console.log("prev")
+    const prevAnimation = async () => {
+        await animationManager.loadPreviousAnimation();
+        setAnimationName(animationManager.getCurrentAnimationName());
     }
 
     return (
@@ -120,7 +124,7 @@ export default function TraitInformation({currentVRM, animationManager}){
                                 className={styles["traitInfoText"]}
                                 onClick={prevAnimation}
                             >1</button>
-                            <div className={styles["traitInfoText"]}>animation name</div>
+                            <div className={styles["traitInfoText"]}>{animationName}</div>
                             <button 
                                 className={styles["traitInfoText"]}
                                 onClick={nextAnimation}
diff --git a/src/library/animationManager.js b/src/library/animationManager.js
index a8c5d16d..b2b29bd0 100644
--- a/src/library/animationManager.js
+++ b/src/library/animationManager.js
@@ -3,7 +3,7 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader"
 import { addModelData } from "./utils";
 import { getMixamoAnimation } from './loadMixamoAnimation';
-import { getAsArray } from './utils';
+import { getAsArray, getFileNameWithoutExtension } from './utils';
 
 // make a class that hold all the informarion
 const fbxLoader = new FBXLoader();
@@ -97,6 +97,7 @@ export class AnimationManager{
     this.animations = null;
 
     this.curLoadAnim = 0;
+    this.currentAnimationName = "";
     
     this.weightIn = NaN; // note: can't set null, because of check `null < 1` will result `true`.
     this.weightOut = NaN;
@@ -123,8 +124,12 @@ export class AnimationManager{
 
    
   
-  async loadAnimation(paths, isfbx = true){
-    const path = getAsArray(paths)[0];
+  async loadAnimation(paths, isfbx = true, pathBase = "", name = ""){
+    console.log(paths)
+    const path = pathBase + (pathBase != "" ? "/":"") + getAsArray(paths)[0];
+    name = name == "" ? getFileNameWithoutExtension(path) : name;
+    this.currentAnimationName = name;
+    console.log(this.currentAnimationName);
     const loader = isfbx ? fbxLoader : gltfLoader;
     const animationModel = await loader.loadAsync(path);
     // if we have mixamo animations store the model
@@ -154,10 +159,15 @@ export class AnimationManager{
   
   }
 
-  storeAnimationPaths(pathArray){
-    this.animationPaths = getAsArray(pathArray);   
+  getCurrentAnimationName(){
+    return this.currentAnimationName;
   }
-  
+
+  storeAnimationPaths(pathArray, pathBase){
+    const paths = getAsArray(pathArray);   
+    this.animationPaths = paths.map(path => `${pathBase}/${path}`);
+  }
+
   loadNextAnimation(){
     if (this.curLoadAnim == this.animationPaths.length-1)
       this.curLoadAnim = 0;
diff --git a/src/library/option-utils.js b/src/library/option-utils.js
index 39932ff7..43f0d527 100644
--- a/src/library/option-utils.js
+++ b/src/library/option-utils.js
@@ -72,7 +72,7 @@ export const getClassOptions = (manifest) => {
 
 export function getTraitOptions(trait, template) {
   const traitOptions = []
-  const thumbnailBaseDir = template.thumbnailsDirectory
+  const thumbnailBaseDir = (template.assetsLocation || "") + template.thumbnailsDirectory
   trait.collection.map((item, index) => {
     const textureTraits = template.textureCollections.find(
       (texture) => texture.trait === item.textureCollection,
diff --git a/src/library/utils.js b/src/library/utils.js
index aae2b0ed..4d5ff0b6 100644
--- a/src/library/utils.js
+++ b/src/library/utils.js
@@ -29,6 +29,13 @@ export async function prepareModel(templateInfo){
   }));
 }
 
+export function getFileNameWithoutExtension(filePath) {
+  // Get the base file name without the extension
+  const baseFileName = filePath.replace(/^.*[\\/]/, '').split('.').slice(0, -1).join('.');
+
+  return baseFileName;
+}
+
 export function getRandomObjectKey (obj) {
   const arr = Object.keys(obj);
   return obj[arr[Math.floor(Math.random() * arr.length)]];
diff --git a/src/pages/Appearance.jsx b/src/pages/Appearance.jsx
index 58dd4780..95c58317 100644
--- a/src/pages/Appearance.jsx
+++ b/src/pages/Appearance.jsx
@@ -8,6 +8,7 @@ import { LanguageContext } from "../context/LanguageContext"
 import { SoundContext } from "../context/SoundContext"
 import { AudioContext } from "../context/AudioContext"
 import FileDropComponent from "../components/FileDropComponent"
+import { getFileNameWithoutExtension } from "../library/utils"
 
 function Appearance({
   animationManager,
@@ -76,12 +77,14 @@ function Appearance({
   // Translate hook
   const { t } = useContext(LanguageContext)
 
-  const handleFileDrop = (file) => {
+  const handleFileDrop = async(file) => {
     // Check if the file has the .fbx extension
     if (file && file.name.toLowerCase().endsWith('.fbx')) {
+      const animName = getFileNameWithoutExtension(file.name);
       console.log('Dropped .fbx file:', file);
       const path = URL.createObjectURL(file);
-      animationManager.loadAnimation(path, true);
+      console.log("path")
+      await animationManager.loadAnimation(path, true, "", animName);
       // Handle the dropped .fbx file
     } 
   };