diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index 6d0e4ca..fe00a9b 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -1,28 +1,28 @@
 <template>
-  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="345" :is-resizable="false">
+  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="370" :is-resizable="false">
     <template #modalHeader>
       <h3 class="modal-title">Zone settings</h3>
     </template>
 
     <template #modalBody>
-      <div class="container settings">
-        <form method="post" @submit.prevent="" class="modal-form">
-          <div class="form-fields">
-            <div class="form-field col-12">
-              <label for="name">Name</label>
-              <input class="input-cyan" v-model="name" name="name" id="name" />
+      <div class="settings m-[15px]">
+        <form method="post" @submit.prevent="" class="modal-form inline">
+          <div class="form-fields gap-2.5 flex flex-wrap">
+            <div class="form-field w-full flex flex-col mb-5">
+              <label class="mb-1.5 font-titles" for="name">Name</label>
+              <input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
             </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 class="form-field w-[48%] flex flex-col mb-5">
+              <label class="mb-1.5 font-titles" for="name">Width</label>
+              <input class="input-cyan max-w-[250px]" v-model="width" name="name" id="name" type="number" />
             </div>
-            <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 class="form-field w-[48%] flex flex-col mb-5">
+              <label class="mb-1.5 font-titles" for="name">Height</label>
+              <input class="input-cyan max-w-[250px]" 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 class="form-field w-full flex flex-col mb-5">
+              <label class="mb-1.5 font-titles" for="name">PVP enabled</label>
+              <input class="input-cyan max-w-[250px]" name="name" id="name" />
             </div>
           </div>
         </form>
@@ -53,13 +53,4 @@ watch(width, (value) => {
 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
+</script>
\ No newline at end of file