diff --git a/src/components/gameMaster/GmPanel.vue b/src/components/gameMaster/GmPanel.vue
index fadf6c8..c133086 100644
--- a/src/components/gameMaster/GmPanel.vue
+++ b/src/components/gameMaster/GmPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :is-full-screen="true" :disable-bg-texture="true">
+  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :is-full-screen="true" :bg-style="'dark'">
     <template #modalHeader>
       <div class="flex gap-1.5 flex-wrap">
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>
diff --git a/src/components/gameMaster/assetManager/AssetManager.vue b/src/components/gameMaster/assetManager/AssetManager.vue
index ee9a05e..3395eb2 100644
--- a/src/components/gameMaster/assetManager/AssetManager.vue
+++ b/src/components/gameMaster/assetManager/AssetManager.vue
@@ -1,53 +1,41 @@
 <template>
-  <div class="flex h-full w-full relative">
-    <div class="w-2/12 flex flex-col relative overflow-auto">
+  <div class="flex gap-4 h-[calc(100%_-_32px)] w-[calc(100%_-_32px)] relative m-4">
+    <div class="w-2/12 flex flex-col relative overflow-auto rounded-md border border-solid border-gray-500 bg-gray-700 p-2.5">
       <!-- Asset Categories -->
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
-        <span :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
-        <span :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
-        <span :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Items</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">Items</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>NPC's</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">NPC's</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
-        <span :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
-        <span :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
-        <span :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Mounts</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">Mounts</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Pets</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">Pets</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Emoticons</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">Emoticons</span>
       </a>
     </div>
-    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
 
     <!-- Assets list -->
     <div class="overflow-auto h-full w-4/12 flex flex-col relative">
@@ -58,10 +46,8 @@
       <CharacterHairList v-if="selectedCategory === 'characterHair'" />
     </div>
 
-    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
-
     <!-- Asset details -->
-    <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">
+    <div class="flex w-4/12 after:hidden flex-col relative overflow-auto">
       <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
       <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
       <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
diff --git a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
index 952c9ef..eb030dd 100644
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="m-2.5 p-2.5 block">
+    <div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterHair">
         <div class="form-field-full">
           <label for="name">Name</label>
diff --git a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
index 49747c8..2e2365c 100644
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <div class="relative mb-5 flex items-center gap-x-2.5">
     <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+    <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
       <button class="p-0 h-5" id="create-character" @click="createNewCharacterHair">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
         </svg>
       </button>
     </label>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: characterHair } in list" :key="characterHair.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)">
+      <a v-for="{ data: characterHair } in list" :key="characterHair.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)">
         <div class="flex items-center gap-2.5">
-          <span :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
+          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
-    </button>
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
index 83f9f75..3c718e4 100644
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="m-2.5 p-2.5 block">
+    <div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterType">
         <div class="form-field-full">
           <label for="name">Name</label>
diff --git a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
index fb15206..6493358 100644
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <div class="relative mb-5 flex items-center gap-x-2.5">
     <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+    <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
       <button class="p-0 h-5" id="create-character" @click="createNewCharacterType">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
         </svg>
       </button>
     </label>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
+      <a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
         <div class="flex items-center gap-2.5">
-          <span :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span>
+          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
-    </button>
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
index ce85a99..6ce5913 100644
--- a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
-      <div class="filler"></div>
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
       <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
-      <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
-      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
     </div>
-    <div class="m-2.5 p-2.5 block">
+    <div class="mt-5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
         <div class="form-field-full">
           <label for="name">Name</label>
@@ -43,7 +40,10 @@
           <label for="frame-height">Frame height</label>
           <input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
         </div>
-        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+        <div class="flex gap-4">
+          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+          <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
+        </div>
       </form>
     </div>
   </div>
diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
index 7be3ad0..d352700 100644
--- a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
@@ -1,29 +1,29 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <div class="relative mb-5 flex items-center gap-x-2.5">
     <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
     </label>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
+      <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
         <div class="flex items-center gap-2.5">
           <div class="h-7 w-16 max-w-16 flex justify-center">
             <img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
           </div>
           <span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
-    </button>
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
index ed4733c..acad804 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-4 flex flex-col">
-      <div class="flex flex-wrap gap-2">
+    <div class="relative flex flex-col">
+      <div class="flex flex-wrap gap-2 p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700">
         <div class="w-full flex flex-col">
           <label class="mb-1.5 font-titles" for="name">Name</label>
           <input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />
@@ -10,7 +10,6 @@
         <div class="w-full flex gap-2 mt-2 pb-4 relative">
           <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
           <button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
-          <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-gray-500"></div>
         </div>
       </div>
 
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
index c72e807..81843ef 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
@@ -1,25 +1,25 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <div class="relative mb-5 flex items-center gap-x-2.5">
     <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <button @click.prevent="newButtonClickHandler" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+    <button @click.prevent="newButtonClickHandler" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
     </button>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
+      <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
         <div class="flex items-center gap-2.5">
           <span :class="{ 'text-white': assetManagerStore.selectedSprite?.id === sprite.id }">{{ sprite.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
-    </button>
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
index 604da92..78661c8 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
-      <div class="filler"></div>
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
       <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
-      <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
-      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
     </div>
-    <div class="m-2.5 p-2.5 block">
+    <div class="mt-5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
         <div class="form-field-full">
           <label for="name">Name</label>
@@ -16,7 +13,10 @@
           <label for="origin-x">Tags</label>
           <ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" />
         </div>
-        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+        <div class="flex gap-4">
+          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+          <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
+        </div>
       </form>
     </div>
   </div>
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileList.vue b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
index d0180a2..3e740b5 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileList.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
@@ -1,29 +1,29 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <div class="relative mb-5 flex items-center gap-x-2.5">
     <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
     </label>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
   </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
+      <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
         <div class="flex items-center gap-2.5">
           <div class="h-7 w-16 max-w-16 flex justify-center">
             <img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
           </div>
-          <span :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
+          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
         </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>
     </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
-    </button>
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue b/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
index eef1457..d9552a2 100644
--- a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
+++ b/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :disable-bg-texture="true">
+  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
     </template>
diff --git a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
index b3e27e5..3624422 100644
--- a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :disable-bg-texture="true">
+  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="text-lg text-white">Objects</h3>
     </template>
diff --git a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
index eb6d305..c449ef6 100644
--- a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :disable-bg-texture="true">
+  <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
     </template>
diff --git a/src/components/gameMaster/zoneEditor/partials/TileList.vue b/src/components/gameMaster/zoneEditor/partials/TileList.vue
index 5e38a1d..e3d33ff 100644
--- a/src/components/gameMaster/zoneEditor/partials/TileList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TileList.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :disable-bg-texture="true">
+  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="text-lg text-white">Tiles</h3>
     </template>
diff --git a/src/components/gameMaster/zoneEditor/partials/ZoneList.vue b/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
index 734ff34..2d73fb6 100644
--- a/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
@@ -1,6 +1,6 @@
 <template>
   <CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
-  <Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :disable-bg-texture="true">
+  <Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="text-lg text-white">Zones</h3>
     </template>
diff --git a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
index b4e18d4..8dae8d5 100644
--- a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350" :disable-bg-texture="true">
+  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
     </template>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 3b5f941..762a46e 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -5,8 +5,8 @@
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
         <div
           :class="{
-            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
-            'bg-gray-700': disableBgTexture
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
+            'bg-gray-700': bgStyle !== 'textured'
           }"
           class="rounded-t absolute w-full h-full top-0 left-0"
         />
@@ -27,8 +27,9 @@
       <div class="overflow-hidden grow relative">
         <div
           :class="{
-            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
-            'bg-gray-700': disableBgTexture
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
+            'bg-gray-800': bgStyle === 'dark',
+            'bg-gray-700': bgStyle === 'none'
           }"
           class="rounded-b absolute w-full h-full top-0 left-0"
         />
@@ -54,7 +55,7 @@ interface ModalProps {
   modalPositionY?: number
   modalWidth?: number
   modalHeight?: number
-  disableBgTexture?: boolean
+  bgStyle?: string
 }
 
 interface Position {
@@ -74,7 +75,7 @@ const props = withDefaults(defineProps<ModalProps>(), {
   modalPositionY: 0,
   modalWidth: 500,
   modalHeight: 280,
-  disableBgTexture: false
+  bgStyle: 'textured'
 })
 
 const emit = defineEmits<{