diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index f0a4899..e870179 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -7,6 +7,24 @@
 // Fonts
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
+//Globals
+
+// Column base styles
+[class^="col-"] {
+  position: relative;
+  width: 100%;
+  padding: 0 15px;
+}
+
+// Generate column classes
+@for $i from 1 through 12 {
+  .col-#{$i} {
+    $width: percentage(calc($i / 12));
+    flex: 0 0 calc($width - var(--gap));
+    max-width: calc($width - var(--gap));
+  }
+}
+
 body {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -30,6 +48,7 @@ a {
   font-family: $titles;
   color: $white;
   font-weight: 500;
+  margin: 0;
 }
 
 p,
@@ -62,6 +81,15 @@ input {
   }
 }
 
+.modal-form {
+  .form-fields {
+    --gap: 10px;
+    display: flex;
+    gap: var(--gap);
+    flex-wrap: wrap;
+  }
+}
+
 .input-cyan {
   padding: 8px 10px;
   font-family: $titles;
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index ad3168b..3dcc141 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,9 +1,9 @@
 <template>
   <Teleport to="body">
     <div v-if="isModalOpenRef"
-         class="fixed bg-opacity-80 bg-gray-800 border-2 border-cyan-800 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg"
+         class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg"
          :style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }">
-      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-b border-cyan-800">
+      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
         <slot name="modalHeader" />
         <div class="flex gap-2.5">
           <button @click="close" v-if="closable" class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
@@ -17,7 +17,7 @@
              class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]"
              @mousedown="startResize" />
       </div>
-      <div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-t border-cyan-800">
+      <div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
         <slot name="modalFooter" />
       </div>
     </div>
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 844981b..70a57d8 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -143,16 +143,18 @@ function toTop() {
       display: none;
     }
     .image-container {
-      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 300px;
       img {
-        height: 200px;
-        padding-right: 10px;
-        margin: 20px 0;
+        max-height: 280px;
       }
     }
     .modal-form {
       &.asset-manager {
         margin: 10px;
+        padding: 10px;
         width: calc(100% - 40px);
         display: block;
 
@@ -160,13 +162,7 @@ function toTop() {
           display: flex;
           gap: 10px;
           flex-wrap: wrap;
-
-          .form-field {
-            width: calc(50% - 5px);
-            &.name {
-              width: 100%;
-            }
-          }
+          
           .submit {
             width: 100%;
           }
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 82b540f..9d00749 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -1,24 +1,21 @@
 <template>
   <div class="object-manager">
     <div class="image-container">
-      <!--      @TODO show img with width100% to keep quality and show it center with padding around it, preferably the window wont jump if a larger object is selected -->
       <img :src="objectImageUrl" :alt="'Object ' + selectedObject" />
     </div>
     <div class="modal-form asset-manager">
       <form class="form-fields" @submit.prevent>
-        <div class="form-field name">
+        <div class="form-field col-12">
           <label for="name">Name</label>
           <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
         </div>
-        <div class="form-field name">
-          <label for="name">Origin X</label>
-          <!-- @TODO only allow numbers here -->
-          <input class="input-cyan" type="text" name="name" placeholder="Origin X" />
+        <div class="form-field">
+          <label for="origin-x">Origin X</label>
+          <input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
         </div>
-        <div class="form-field name">
-          <label for="name">Origin Y</label>
-          <!-- @TODO only allow numbers here -->
-          <input class="input-cyan" type="text" name="name" placeholder="Origin Y" />
+        <div class="form-field">
+          <label for="origin-y">Origin Y</label>
+          <input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
         </div>
         <div class="submit">
           <button class="btn-cyan" type="button" @click="removeObject">Save</button>
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index 90f0caa..49bc3ae 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -1,65 +1,83 @@
 <template>
-  <div class="wrapper">
-    <div class="toolbar">
-      <div class="tools">
-        <button class="tool move" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
-          <img src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
+  <div class="flex justify-center m-2.5">
+    <div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
+      <div class="tools flex gap-2.5">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
         </button>
 
-        <div class="divider"></div>
+        <div class="w-[1px] bg-cyan"></div>
 
-        <button class="tool pencil" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
-          <img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
           <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
-            <div class="select-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
+            <div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
               {{ zoneEditorStore.drawMode }}
-              <img src="/assets/icons/zoneEditor/chevron.svg" />
+              <img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
-            <div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
-              <span class="option" @click="setDrawMode('tile')">Tile</span>
-              <span class="option" @click="setDrawMode('object')">Object</span>
-              <span class="option" @click="setDrawMode('teleport')">Teleport</span>
-              <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
+            <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
+                Tile
+                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+              </span>
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('object')">
+                Object
+                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+              </span>
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('teleport')">
+                Teleport
+                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+              </span>
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('blocking tile')">Blocking tile</span>
             </div>
           </div>
         </button>
 
-        <div class="divider"></div>
+        <div class="w-[1px] bg-cyan"></div>
 
-        <button class="tool paint" :class="{ active: zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
-          <img src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" />
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" />
         </button>
 
-        <div class="divider"></div>
+        <div class="w-[1px] bg-cyan"></div>
 
-        <button class="tool eraser" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
-          <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
           <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
-            <div class="select-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
+            <div class="select-trigger capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
               {{ zoneEditorStore.drawMode }}
-              <img src="/assets/icons/zoneEditor/chevron.svg" />
+              <img class="invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
             </div>
-            <div class="options" v-show="selectEraserOpen">
-              <span class="option" @click="setDrawMode('tile')">Tile</span>
-              <span class="option" @click="setDrawMode('decoration')">Decoration</span>
-              <span class="option" @click="setDrawMode('teleport')">Teleport</span>
-              <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
+            <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
+                Tile
+                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+              </span>
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('decoration')">
+                Decoration
+                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+              </span>
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('teleport')">
+                Teleport
+                <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
+              </span>
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('blocking tile')">Blocking tile</span>
             </div>
           </div>
         </button>
 
-        <div class="divider"></div>
+        <div class="w-[1px] bg-cyan"></div>
 
-        <button class="tool settings" @click="() => zoneEditorStore.toggleSettingsModal()">
-          <img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
         </button>
       </div>
 
-      <div class="buttons">
-        <button class="btn-cyan">Load</button>
-        <button class="btn-cyan" @click="() => emit('save')">Save</button>
-        <button class="btn-cyan" @click="clear">Clear</button>
-        <button class="btn-cyan" @click="() => zoneEditorStore.toggleActive()">Exit</button>
+      <div class="flex gap-2.5 ml-auto">
+        <button class="btn-cyan px-3.5">Load</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('save')">Save</button>
+        <button class="btn-cyan px-3.5" @click="clear">Clear</button>
+        <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
       </div>
     </div>
   </div>
@@ -136,122 +154,21 @@ function clear() {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/scss/main';
-
-.wrapper {
-  display: flex;
-  justify-content: center;
-  margin: 10px;
-}
-
 .toolbar {
-  position: fixed;
-  top: 20px;
-  border-radius: 5px;
-  display: flex;
-  background: rgba($dark-gray, 0.8);
-  border: 2px solid $cyan;
-  color: $light-gray;
-  padding: 5px 5px 5px 10px;
-  min-width: 90%;
-  height: 40px;
-
   .tools {
-    display: flex;
-    gap: 10px;
-
-    .divider {
-      width: 1px;
-      background: $cyan;
-    }
-
-    // vertical center
-    .tool {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-width: 40px;
-      padding: 0;
-      position: relative;
-
-      select {
-        display: none;
-      }
-
-      &.active {
-        border-bottom: 3px solid $light-cyan;
-        gap: 10px;
-      }
+    .active {
+      @apply border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5;
 
       .select {
         .select-trigger {
-          text-transform: capitalize;
-          display: flex;
-          gap: 15px;
-
-          img {
-            transform: rotate(0);
-            transition: ease-in-out 0.2s;
-          }
-
           &.open {
             img {
-              transform: rotate(180deg);
-            }
-          }
-        }
-        .options {
-          display: flex;
-          flex-direction: column;
-          position: absolute;
-          top: calc(100% + 20px);
-          left: 50%;
-          transform: translateX(-50%);
-          background: rgba($dark-gray, 0.8);
-          border-radius: 5px;
-          min-width: 100px;
-          border: 1px solid $cyan;
-          text-align: left;
-          .option {
-            padding: 8px 10px;
-            position: relative;
-            &:hover {
-              background-color: rgba($cyan, 0.5);
-            }
-            &::after {
-              content: '';
-              position: absolute;
-              width: 80%;
-              left: 50%;
-              transform: translateX(-50%);
-              bottom: 0;
-              height: 1px;
-              background-color: $cyan;
-            }
-            &:last-child::after {
-              display: none;
+              @apply rotate-180;
             }
           }
         }
       }
     }
-
-    img {
-      filter: invert(1);
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .buttons {
-    display: flex;
-    gap: 10px;
-    margin-left: auto;
-
-    button {
-      padding-left: 15px;
-      padding-right: 15px;
-    }
   }
 }
 </style>
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index 61441c0..6d0e4ca 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -8,21 +8,19 @@
       <div class="container settings">
         <form method="post" @submit.prevent="" class="modal-form">
           <div class="form-fields">
-            <div class="form-field">
+            <div class="form-field col-12">
               <label for="name">Name</label>
               <input class="input-cyan" v-model="name" name="name" id="name" />
             </div>
-            <div class="form-field two-col">
-              <div class="field">
-                <label for="name">Width</label>
-                <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
-              </div>
-              <div class="field">
-                <label for="name">Height</label>
-                <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
-              </div>
+            <div class="form-field col-6">
+              <label for="name">Width</label>
+              <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
             </div>
-            <div class="form-field">
+            <div class="form-field col-6">
+              <label for="name">Height</label>
+              <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
+            </div>
+            <div class="form-field col-12">
               <label for="name">PVP enabled</label>
               <input class="input-cyan" name="name" id="name" />
             </div>
@@ -56,3 +54,12 @@ watch(height, (value) => {
   zoneEditorStore.setHeight(parseInt(value))
 })
 </script>
+
+<style lang="scss">
+  .form-fields {
+    --gap: 10px;
+    display: flex;
+    gap: var(--gap);
+    flex-wrap: wrap;
+  }
+</style>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index a80023f..e407a67 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,8 +3,44 @@ export default {
   content: [],
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        red: {
+          DEFAULT: '#d50000',
+          50: '#d50000',
+          100: '#b30000'
+        },
+        bordeaux: {
+          DEFAULT: '#800020',
+          50: '#cc0033',
+          100: '#800020',
+          200: '#4c0000'
+        },
+        blue: {
+          DEFAULT: '#00c2ff'
+        },
+        green: {
+          DEFAULT: '#09ad19'
+        },
+        cyan: {
+          DEFAULT: '#368f8b',
+          50: '#00b3b3',
+          100: '#368f8b',
+          200: '#376362'
+        },
+        gray: {
+          DEFAULT: '#7f7f7f',
+          50: '#d3d3d3',
+          100: '#7f7f7f',
+          200: '#696969',
+          300: '#313638',
+          500: '#778899'
+        }
+      }
+    },
   },
   plugins: [],
+  corePlugins: {
+    preflight: false
+  }
 }
-