diff --git a/resources/js/components/CopyTextIcon.vue b/resources/js/components/CopyTextIcon.vue
index e39a304..1385869 100644
--- a/resources/js/components/CopyTextIcon.vue
+++ b/resources/js/components/CopyTextIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="cursor-pointer" @click="copyText">
+    <div class="cursor-pointer flex items-center" @click="copyText">
         <slot />
         <ClipboardIcon class="inline-block ml-1 my-auto w-4 h-4 hover:text-primary flex-shrink-0" />
     </div>
diff --git a/resources/js/components/FormInput.vue b/resources/js/components/FormInput.vue
index e2315ce..ea4de37 100644
--- a/resources/js/components/FormInput.vue
+++ b/resources/js/components/FormInput.vue
@@ -31,7 +31,6 @@
                         :type="type"
                         :min="min"
                         :disabled="disabled"
-                        :value="props.value"
                         :class="[
                             {
                                 'rounded-none rounded-r-md': prefix,
@@ -68,7 +67,6 @@ const props = withDefaults(
         type?: string;
         min?: number;
         modelValue?: number | string | null;
-        value?: number | string;
         disabled?: boolean;
         prefix?: string;
         name: string;
diff --git a/resources/js/components/SupportButton.vue b/resources/js/components/SupportButton.vue
index 90d5776..967d87d 100644
--- a/resources/js/components/SupportButton.vue
+++ b/resources/js/components/SupportButton.vue
@@ -2,7 +2,7 @@
     <a
         href="https://docs.enjin.io/discuss"
         target="_blank"
-        class="fixed bottom-4 right-6 text-white bg-light-surface-brand text-lg font-medium py-2 px-5 rounded-full flex items-center z-50"
+        class="fixed bottom-4 right-6 text-white bg-light-surface-brand text-lg font-medium py-2 px-5 rounded-full flex items-center z-30"
     >
         <QuestionMarkCircleIcon class="mr-1 w-5 h-5 cursor-pointer" stroke-width="36" />
         <span>Support</span>
diff --git a/resources/js/components/TokenIdInput.vue b/resources/js/components/TokenIdInput.vue
index 18ee51f..6407212 100644
--- a/resources/js/components/TokenIdInput.vue
+++ b/resources/js/components/TokenIdInput.vue
@@ -14,7 +14,7 @@
     >
         <template #input>
             <TranslateTransition>
-                <div class="block w-24" v-if="localTokenType === TokenIdSelectType.Erc1155">
+                <div class="block w-16" v-if="localTokenType === TokenIdSelectType.Erc1155">
                     <FormInput name="index" v-model="localIndex" placeholder="Index" input-class="!rounded-none" />
                 </div>
             </TranslateTransition>
diff --git a/resources/js/components/fueltank/DispatchRuleForm.vue b/resources/js/components/fueltank/DispatchRuleForm.vue
index 00b0944..ce24a92 100644
--- a/resources/js/components/fueltank/DispatchRuleForm.vue
+++ b/resources/js/components/fueltank/DispatchRuleForm.vue
@@ -14,7 +14,7 @@
                         <QuestionMarkCircleIcon class="ml-1 w-4 h-4 cursor-pointer" />
                     </Tooltip>
                 </div>
-                <FormInput :value="props.ruleId" name="ruleId" label="Rule set ID" type="number" disabled />
+                <FormInput v-if="props.ruleId" v-model="ruleId" name="ruleId" label="Rule set ID" type="number" disabled />
                 <div class="flex space-x-3">
                     <FormSelect
                         v-model="selectedDispatchRule"
@@ -28,212 +28,218 @@
                         <PlusIcon class="w-6 h-6 m-auto" />
                     </Btn>
                 </div>
-                <div v-if="checkSelectedDispatchRule(DispatchRules.WhitelistedCallers)" class="relative">
-                    <div
-                        class="absolute -right-2 top-0 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
-                        @click="removeSelectedDispatch(DispatchRules.WhitelistedCallers)"
-                    >
-                        <XMarkIcon class="w-6 h-6 m-auto" />
-                    </div>
-                    <FormList
-                        v-model="whitelistedCallers"
-                        @add="addCaller"
-                        @remove="removeCaller"
-                        flex
-                        add-text="Add Caller"
-                        dusk-id="caller"
-                    >
-                        <template #headers>
-                            <div class="flex-1">
-                                <label class="block text-sm font-medium leading-6 text-gray-900">
-                                    Whitelisted Callers
-                                </label>
-                                <p class="mt-1 text-sm text-gray-500">
-                                    The wallet accounts that are allowed to use the fuel tank.
-                                </p>
-                            </div>
-                            <div class="w-5"></div>
-                        </template>
-                        <template #inputs="{ inputs, index }">
-                            <div class="flex-1">
-                                <input
-                                    v-model="inputs.caller"
-                                    :dusk="`input__caller-${index + 1}`"
-                                    type="text"
-                                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
-                                />
-                            </div>
-                        </template>
-                    </FormList>
-                </div>
-
-                <div v-if="checkSelectedDispatchRule(DispatchRules.RequireToken)" class="space-y-2 relative">
-                    <div
-                        class="absolute -right-2 top-0 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
-                        @click="removeSelectedDispatch(DispatchRules.RequireToken)"
-                    >
-                        <XMarkIcon class="w-6 h-6 m-auto" />
-                    </div>
-                    <div>
-                        <h3 class="text-sm font-semibold leading-6 text-gray-900">Require Token</h3>
-                        <p class="mt-1 text-sm text-gray-500">
-                            The wallet account must have a specific token in their wallet to use the fuel tank.
-                        </p>
-                    </div>
-                    <div :class="`grid grid-cols-${isModal ? '1' : '2'} gap-4`">
-                        <FormInput
-                            class="col-span-1"
-                            v-model="collectionId"
-                            name="collectionId"
-                            type="number"
-                            placeholder="Collection ID"
-                        />
-                        <TokenIdInput class="col-span-1" v-model="tokenId" placeholder="Token ID" />
+                <div class="space-y-6 divide-y-[1px] divide-gray-300">
+                    <div v-if="checkSelectedDispatchRule(DispatchRules.WhitelistedCallers)" class="relative pt-3">
+                        <div
+                            class="absolute -right-1 top-1 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
+                            @click="removeSelectedDispatch(DispatchRules.WhitelistedCallers)"
+                        >
+                            <XMarkIcon class="w-6 h-6 m-auto" />
+                        </div>
+                        <FormList
+                            v-model="whitelistedCallers"
+                            @add="addCaller"
+                            @remove="removeCaller"
+                            flex
+                            add-text="Add Caller"
+                            dusk-id="caller"
+                        >
+                            <template #headers>
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium leading-6 text-gray-900">
+                                        Whitelisted Callers
+                                    </label>
+                                    <p class="mt-1 text-sm text-gray-500">
+                                        The wallet accounts that are allowed to use the fuel tank.
+                                    </p>
+                                </div>
+                                <div class="w-5"></div>
+                            </template>
+                            <template #inputs="{ inputs, index }">
+                                <div class="flex-1">
+                                    <input
+                                        v-model="inputs.caller"
+                                        :dusk="`input__caller-${index + 1}`"
+                                        type="text"
+                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                                    />
+                                </div>
+                            </template>
+                        </FormList>
                     </div>
-                </div>
 
-                <div v-if="checkSelectedDispatchRule(DispatchRules.WhitelistedCollections)" class="relative">
-                    <div
-                        class="absolute -right-2 top-0 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
-                        @click="removeSelectedDispatch(DispatchRules.WhitelistedCollections)"
-                    >
-                        <XMarkIcon class="w-6 h-6 m-auto" />
+                    <div v-if="checkSelectedDispatchRule(DispatchRules.RequireToken)" class="space-y-2 relative pt-3">
+                        <div
+                            class="absolute -right-1 top-1 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
+                            @click="removeSelectedDispatch(DispatchRules.RequireToken)"
+                        >
+                            <XMarkIcon class="w-6 h-6 m-auto" />
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-semibold leading-6 text-gray-900">Require Token</h3>
+                            <p class="mt-1 text-sm text-gray-500">
+                                The wallet account must have a specific token in their wallet to use the fuel tank.
+                            </p>
+                        </div>
+                        <div :class="`grid grid-cols-${isModal ? '1' : '2'} gap-4`">
+                            <FormInput
+                                class="col-span-1"
+                                v-model="collectionId"
+                                name="collectionId"
+                                type="number"
+                                placeholder="Collection ID"
+                            />
+                            <TokenIdInput class="col-span-1" v-model="tokenId" placeholder="Token ID" />
+                        </div>
                     </div>
-                    <FormList
-                        v-model="whitelistedCollections"
-                        @add="addWhiteCollection"
-                        @remove="removeWhiteCollection"
-                        flex
-                        add-text="Add Collection"
-                        dusk-id="collection"
-                    >
-                        <template #headers>
-                            <div class="flex-1">
-                                <label class="block text-sm font-medium leading-6 text-gray-900">
-                                    Whitelisted Collections
-                                </label>
-                                <p class="mt-1 text-sm text-gray-500">
-                                    The wallet account must have a specific token in their wallet to use the fuel tank.
-                                </p>
-                            </div>
-                            <div class="w-5"></div>
-                        </template>
-                        <template #inputs="{ inputs, index }">
-                            <div class="flex-1">
-                                <FormInput
-                                    v-model="inputs.collection"
-                                    :name="`collection-${index + 1}`"
-                                    type="number"
-                                    :dusk="`input__collection-id-${index + 1}`"
-                                />
-                            </div>
-                        </template>
-                    </FormList>
-                </div>
 
-                <div v-if="checkSelectedDispatchRule(DispatchRules.MaxFuelBurnPerTransaction)" class="relative">
-                    <div
-                        class="absolute -right-2 top-0 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
-                        @click="removeSelectedDispatch(DispatchRules.MaxFuelBurnPerTransaction)"
-                    >
-                        <XMarkIcon class="w-6 h-6 m-auto" />
+                    <div v-if="checkSelectedDispatchRule(DispatchRules.WhitelistedCollections)" class="relative pt-3">
+                        <div
+                            class="absolute -right-1 top-1 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
+                            @click="removeSelectedDispatch(DispatchRules.WhitelistedCollections)"
+                        >
+                            <XMarkIcon class="w-6 h-6 m-auto" />
+                        </div>
+                        <FormList
+                            v-model="whitelistedCollections"
+                            @add="addWhiteCollection"
+                            @remove="removeWhiteCollection"
+                            flex
+                            add-text="Add Collection"
+                            dusk-id="collection"
+                        >
+                            <template #headers>
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium leading-6 text-gray-900">
+                                        Whitelisted Collections
+                                    </label>
+                                    <p class="mt-1 text-sm text-gray-500">
+                                        The wallet account must have a specific token in their wallet to use the fuel
+                                        tank.
+                                    </p>
+                                </div>
+                                <div class="w-5"></div>
+                            </template>
+                            <template #inputs="{ inputs, index }">
+                                <div class="flex-1">
+                                    <FormInput
+                                        v-model="inputs.collection"
+                                        :name="`collection-${index + 1}`"
+                                        type="number"
+                                        :dusk="`input__collection-id-${index + 1}`"
+                                    />
+                                </div>
+                            </template>
+                        </FormList>
                     </div>
-                    <FormInput
-                        v-model="maxFuelBurnPerTransaction"
-                        name="maxFuelBurnPerTransaction"
-                        label="Max Fuel Burn Per Transaction"
-                        description="The maximum amount of fuel can be used per transaction."
-                        type="number"
-                    />
-                </div>
 
-                <div v-if="checkSelectedDispatchRule(DispatchRules.PermittedExtrinsic)" class="relative">
                     <div
-                        class="absolute -right-2 top-0 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
-                        @click="removeSelectedDispatch(DispatchRules.PermittedExtrinsic)"
+                        v-if="checkSelectedDispatchRule(DispatchRules.MaxFuelBurnPerTransaction)"
+                        class="relative pt-3"
                     >
-                        <XMarkIcon class="w-6 h-6 m-auto" />
-                    </div>
-                    <div class="flex space-x-3">
-                        <FormSelect
-                            v-model="permittedExtrinsicValue"
-                            :options="transactionMethods"
-                            label="Permitted Extrinsics"
-                            description="The list of permitted extrinsics in this ruleset."
-                            name="permittedExtrinsics"
-                            class="flex-1"
-                        />
-                        <Btn @click="addItem" class="!px-2 !flex mt-auto" primary>
-                            <PlusIcon class="w-6 h-6 m-auto" />
-                        </Btn>
-                    </div>
-                    <div class="flex flex-wrap mt-4 gap-2" v-if="permittedExtrinsics.length">
-                        <Chip
-                            v-for="(item, idx) in permittedExtrinsics"
-                            :key="(item as string)"
-                            :text="(item as string)"
-                            @remove="removeItem(idx)"
-                        />
-                    </div>
-                </div>
-
-                <div v-if="checkSelectedDispatchRule(DispatchRules.UserFuelBudget)" class="space-y-2 relative">
-                    <div
-                        class="absolute -right-2 top-0 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
-                        @click="removeSelectedDispatch(DispatchRules.UserFuelBudget)"
-                    >
-                        <XMarkIcon class="w-6 h-6 m-auto" />
-                    </div>
-                    <div>
-                        <h3 class="text-sm font-semibold leading-6 text-gray-900">User Fuel Budget</h3>
-                        <p class="mt-1 text-sm text-gray-500">The rule for fuel budget.</p>
-                    </div>
-                    <div class="grid grid-cols-2 space-x-4">
-                        <FormInput
-                            class="col-span-1"
-                            v-model="userFuelAmount"
-                            name="userFuelAmount"
-                            placeholder="Amount"
-                            type="number"
-                            :prefix="currencySymbol"
-                        />
+                        <div
+                            class="absolute -right-1 top-1 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
+                            @click="removeSelectedDispatch(DispatchRules.MaxFuelBurnPerTransaction)"
+                        >
+                            <XMarkIcon class="w-6 h-6 m-auto" />
+                        </div>
                         <FormInput
-                            class="col-span-1"
-                            v-model="userFuelresetPeriod"
-                            name="userFuelresetPeriod"
-                            placeholder="Reset Period"
+                            v-model="maxFuelBurnPerTransaction"
+                            name="maxFuelBurnPerTransaction"
+                            label="Max Fuel Burn Per Transaction"
+                            description="The maximum amount of fuel can be used per transaction."
                             type="number"
                         />
                     </div>
-                </div>
 
-                <div v-if="checkSelectedDispatchRule(DispatchRules.TankFuelBudget)" class="space-y-2 relative">
-                    <div
-                        class="absolute -right-2 top-0 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
-                        @click="removeSelectedDispatch(DispatchRules.TankFuelBudget)"
-                    >
-                        <XMarkIcon class="w-6 h-6 m-auto" />
+                    <div v-if="checkSelectedDispatchRule(DispatchRules.PermittedExtrinsic)" class="relative pt-3">
+                        <div
+                            class="absolute -right-1 top-1 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
+                            @click="removeSelectedDispatch(DispatchRules.PermittedExtrinsic)"
+                        >
+                            <XMarkIcon class="w-6 h-6 m-auto" />
+                        </div>
+                        <div class="flex space-x-3">
+                            <FormSelect
+                                v-model="permittedExtrinsicValue"
+                                :options="transactionMethods"
+                                label="Permitted Extrinsics"
+                                description="The list of permitted extrinsics in this ruleset."
+                                name="permittedExtrinsics"
+                                class="flex-1"
+                            />
+                            <Btn @click="addItem" class="!px-2 !flex mt-auto" primary>
+                                <PlusIcon class="w-6 h-6 m-auto" />
+                            </Btn>
+                        </div>
+                        <div class="flex flex-wrap mt-4 gap-2" v-if="permittedExtrinsics.length">
+                            <Chip
+                                v-for="(item, idx) in permittedExtrinsics"
+                                :key="(item as string)"
+                                :text="(item as string)"
+                                @remove="removeItem(idx)"
+                            />
+                        </div>
                     </div>
-                    <div>
-                        <h3 class="text-sm font-semibold leading-6 text-gray-900">Tank Fuel Budget</h3>
-                        <p class="mt-1 text-sm text-gray-500">The rule for fuel budget.</p>
+
+                    <div v-if="checkSelectedDispatchRule(DispatchRules.UserFuelBudget)" class="space-y-2 relative pt-3">
+                        <div
+                            class="absolute -right-1 top-1 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
+                            @click="removeSelectedDispatch(DispatchRules.UserFuelBudget)"
+                        >
+                            <XMarkIcon class="w-6 h-6 m-auto" />
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-semibold leading-6 text-gray-900">User Fuel Budget</h3>
+                            <p class="mt-1 text-sm text-gray-500">The rule for fuel budget.</p>
+                        </div>
+                        <div class="grid grid-cols-2 space-x-4">
+                            <FormInput
+                                class="col-span-1"
+                                v-model="userFuelAmount"
+                                name="userFuelAmount"
+                                placeholder="Amount"
+                                type="number"
+                                :prefix="currencySymbol"
+                            />
+                            <FormInput
+                                class="col-span-1"
+                                v-model="userFuelresetPeriod"
+                                name="userFuelresetPeriod"
+                                placeholder="Reset Period"
+                                type="number"
+                            />
+                        </div>
                     </div>
-                    <div class="grid grid-cols-2 space-x-4">
-                        <FormInput
-                            class="col-span-1"
-                            v-model="tankFuelAmount"
-                            name="tankFuelAmount"
-                            placeholder="Amount"
-                            type="number"
-                            :prefix="currencySymbol"
-                        />
-                        <FormInput
-                            class="col-span-1"
-                            v-model="tankFuelresetPeriod"
-                            name="tankFuelresetPeriod"
-                            placeholder="Reset Period"
-                            type="number"
-                        />
+
+                    <div v-if="checkSelectedDispatchRule(DispatchRules.TankFuelBudget)" class="space-y-2 relative pt-3">
+                        <div
+                            class="absolute -right-1 top-1 cursor-pointer rounded-full p-2 hover:bg-gray-50 transition-all text-red-400"
+                            @click="removeSelectedDispatch(DispatchRules.TankFuelBudget)"
+                        >
+                            <XMarkIcon class="w-6 h-6 m-auto" />
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-semibold leading-6 text-gray-900">Tank Fuel Budget</h3>
+                            <p class="mt-1 text-sm text-gray-500">The rule for fuel budget.</p>
+                        </div>
+                        <div class="grid grid-cols-2 space-x-4">
+                            <FormInput
+                                class="col-span-1"
+                                v-model="tankFuelAmount"
+                                name="tankFuelAmount"
+                                placeholder="Amount"
+                                type="number"
+                                :prefix="currencySymbol"
+                            />
+                            <FormInput
+                                class="col-span-1"
+                                v-model="tankFuelresetPeriod"
+                                name="tankFuelresetPeriod"
+                                placeholder="Reset Period"
+                                type="number"
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
@@ -283,6 +289,7 @@ const tokenId = ref(
         tokenType: TokenIdSelectType.Integer,
     }
 );
+const ruleId = ref(props.ruleId);
 const whitelistedCollections = ref(
     formatWhitelistedCollections(props.modelValue.whitelistedCollections) ?? [{ collection: '' }]
 );
diff --git a/resources/js/components/pages/create/CreateCollection.vue b/resources/js/components/pages/create/CreateCollection.vue
index c552e4f..23cb2ad 100644
--- a/resources/js/components/pages/create/CreateCollection.vue
+++ b/resources/js/components/pages/create/CreateCollection.vue
@@ -55,7 +55,7 @@
                     </div>
                 </div>
                 <div v-if="isAdvanced" class="bg-light-surface-primary p-4 md:p-6 shadow rounded-lg">
-                    <div class="">
+                    <div class="space-y-4">
                         <div class="flex items-center">
                             <h3 class="text-base font-semibold leading-6 text-gray-900">Mint Policy</h3>
                             <Tooltip
@@ -241,29 +241,25 @@
                     v-if="isAdvanced"
                     class="bg-light-surface-primary px-4 py-5 shadow rounded-lg transition-all sm:p-6"
                 >
-                    <div class="md:grid md:grid-cols-3 md:gap-6">
-                        <div class="md:col-span-1">
+                    <div class="space-y-6">
+                        <div class="">
                             <h3 class="text-base font-semibold leading-6 text-gray-900">Other Options</h3>
                         </div>
-                        <div class="mt-5 md:col-span-2 md:mt-0">
-                            <div class="flex flex-col gap-6">
-                                <FormInput
-                                    v-model="idempotencyKey"
-                                    name="idempotencyKey"
-                                    label="Idempotency Key"
-                                    description="The idempotency key to set. It is recommended to use a UUID for this."
-                                    tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
-                                    readmore="Idempotency Key"
-                                />
+                        <FormInput
+                            v-model="idempotencyKey"
+                            name="idempotencyKey"
+                            label="Idempotency Key"
+                            description="The idempotency key to set. It is recommended to use a UUID for this."
+                            tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
+                            readmore="Idempotency Key"
+                        />
 
-                                <FormCheckbox
-                                    v-model="skipValidation"
-                                    name="skipValidation"
-                                    label="Skip validation"
-                                    description="Skip all validation rules, use with caution. Defaults to false."
-                                />
-                            </div>
-                        </div>
+                        <FormCheckbox
+                            v-model="skipValidation"
+                            name="skipValidation"
+                            label="Skip validation"
+                            description="Skip all validation rules, use with caution. Defaults to false."
+                        />
                     </div>
                 </div>
 
@@ -370,6 +366,22 @@ const validation = yup.object({
 });
 
 const simpleAttributes = () => {
+    const media = [
+        {
+            url: imageUrl.value,
+            type: imageType.value,
+        },
+    ];
+
+    if (bannerUrl.value) {
+        media.push({
+            url: bannerUrl.value,
+            type: bannerType.value,
+        });
+    }
+
+    console.log(description.value);
+
     return [
         {
             key: 'name',
@@ -381,16 +393,7 @@ const simpleAttributes = () => {
         },
         {
             key: 'media',
-            value: JSON.stringify([
-                {
-                    url: imageUrl.value,
-                    type: imageType.value,
-                },
-                {
-                    url: bannerUrl.value,
-                    type: bannerType.value,
-                },
-            ]),
+            value: JSON.stringify(media),
         },
     ].filter((a) => a.value !== '');
 };
diff --git a/resources/js/components/pages/create/CreateListing.vue b/resources/js/components/pages/create/CreateListing.vue
index cffed0d..378c685 100644
--- a/resources/js/components/pages/create/CreateListing.vue
+++ b/resources/js/components/pages/create/CreateListing.vue
@@ -1,138 +1,134 @@
 <template>
     <div class="px-4 sm:px-6 lg:px-8 py-4 pb-20 overflow-y-auto transition-all">
-        <div class="flow-root">
+        <div class="flow-root space-y-4 pb-4 max-w-3xl mx-auto">
             <div class="mb-4">
                 <h1 class="text-xl md:text-2xl">Create Listing</h1>
             </div>
             <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createListing">
                 <div class="bg-white px-4 py-5 shadow rounded-lg sm:p-6">
-                    <div class="md:grid md:grid-cols-3 md:gap-6">
-                        <div class="md:col-span-1">
+                    <div class="space-y-6">
+                        <div class="">
                             <h3 class="text-base font-semibold leading-6 text-gray-900">Parameters</h3>
                             <p class="mt-1 text-sm text-gray-500">Places a sell order.</p>
                         </div>
-                        <div class="mt-5 md:col-span-2 md:mt-0">
-                            <div class="flex flex-col gap-6">
-                                <FormInput
-                                    v-model="account"
-                                    name="account"
-                                    label="Account"
-                                    description="The seller account."
-                                    required
-                                    tooltip="Wallet Address"
-                                />
+                        <FormInput
+                            v-model="account"
+                            name="account"
+                            label="Account"
+                            description="The seller account."
+                            required
+                            tooltip="Wallet Address"
+                        />
 
-                                <div class="space-y-2">
-                                    <div>
-                                        <h3 class="text-sm leading-6 text-gray-900">
-                                            Make Asset ID
-                                            <span class="text-red-500">&nbsp;*</span>
-                                        </h3>
-                                        <p class="mt-1 text-sm text-gray-500">
-                                            The collection and token ID of the asset being sold.
-                                        </p>
-                                    </div>
-                                    <div class="grid grid-cols-2 gap-4">
-                                        <FormSelect
-                                            v-model="makeCollectionId"
-                                            name="makeCollectionId"
-                                            placeholder="Select a collection ID"
-                                            :options="collectionIds"
-                                        />
-                                        <TokenIdInput
-                                            class="col-span-1"
-                                            v-model="makeTokenId"
-                                            placeholder="Token ID"
-                                            name="makeTokenId"
-                                        />
-                                    </div>
-                                </div>
-
-                                <FormCheckbox
-                                    v-model="enableTakeCollectionId"
-                                    name="enableTakeCollection"
-                                    label="Enable offer"
-                                    description="Use this option to enable offering a different asset in exchange for the asset being sold."
+                        <div class="space-y-2">
+                            <div>
+                                <h3 class="text-sm leading-6 text-gray-900">
+                                    Make Asset ID
+                                    <span class="text-red-500">&nbsp;*</span>
+                                </h3>
+                                <p class="mt-1 text-sm text-gray-500">
+                                    The collection and token ID of the asset being sold.
+                                </p>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4">
+                                <FormSelect
+                                    v-model="makeCollectionId"
+                                    name="makeCollectionId"
+                                    placeholder="Select a collection ID"
+                                    :options="collectionIds"
                                 />
+                                <TokenIdInput
+                                    class="col-span-1"
+                                    v-model="makeTokenId"
+                                    placeholder="Token ID"
+                                    name="makeTokenId"
+                                />
+                            </div>
+                        </div>
 
-                                <div v-if="enableTakeCollectionId" class="space-y-2 animate-fade-in">
-                                    <div>
-                                        <h3 class="text-sm leading-6 text-gray-900">
-                                            Take Asset ID
-                                            <span class="text-red-500">&nbsp;*</span>
-                                        </h3>
-                                        <p class="mt-1 text-sm text-gray-500">
-                                            The collection and token ID of the asset being requested.
-                                        </p>
-                                    </div>
-                                    <div class="grid grid-cols-2 gap-4">
-                                        <FormInput
-                                            class="col-span-1"
-                                            v-model="takeCollectionId"
-                                            name="takeCollectionId"
-                                            placeholder="Collection ID"
-                                            type="number"
-                                        />
-                                        <TokenIdInput
-                                            class="col-span-1"
-                                            v-model="takeTokenId"
-                                            placeholder="Token ID"
-                                            name="takeTokenId"
-                                        />
-                                    </div>
-                                </div>
+                        <FormCheckbox
+                            v-model="enableTakeCollectionId"
+                            name="enableTakeCollection"
+                            label="Enable offer"
+                            description="Use this option to enable offering a different asset in exchange for the asset being sold."
+                        />
 
+                        <div v-if="enableTakeCollectionId" class="space-y-2 animate-fade-in">
+                            <div>
+                                <h3 class="text-sm leading-6 text-gray-900">
+                                    Take Asset ID
+                                    <span class="text-red-500">&nbsp;*</span>
+                                </h3>
+                                <p class="mt-1 text-sm text-gray-500">
+                                    The collection and token ID of the asset being requested.
+                                </p>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4">
                                 <FormInput
-                                    v-model="amount"
-                                    name="amount"
-                                    label="Amount"
-                                    description="The number of units being sold."
+                                    class="col-span-1"
+                                    v-model="takeCollectionId"
+                                    name="takeCollectionId"
+                                    placeholder="Collection ID"
                                     type="number"
-                                    required
                                 />
-
-                                <FormInput
-                                    v-model="price"
-                                    name="price"
-                                    label="Price"
-                                    description="The requested price for each unit. If it’s an auction, this is the minimum bid."
-                                    type="number"
-                                    required
-                                    :prefix="currencySymbol"
+                                <TokenIdInput
+                                    class="col-span-1"
+                                    v-model="takeTokenId"
+                                    placeholder="Token ID"
+                                    name="takeTokenId"
                                 />
+                            </div>
+                        </div>
 
-                                <FormInput
-                                    v-model="salt"
-                                    name="salt"
-                                    label="Salt"
-                                    description="Can be used to differentiate listings."
-                                />
+                        <FormInput
+                            v-model="amount"
+                            name="amount"
+                            label="Amount"
+                            description="The number of units being sold."
+                            type="number"
+                            required
+                        />
 
-                                <FormInput
-                                    v-model="auctionDataStart"
-                                    name="auctionDataStart"
-                                    label="Auction Data Start Block"
-                                    description="The block number the auction starts at."
-                                />
+                        <FormInput
+                            v-model="price"
+                            name="price"
+                            label="Price"
+                            description="The requested price for each unit. If it’s an auction, this is the minimum bid."
+                            type="number"
+                            required
+                            :prefix="currencySymbol"
+                        />
 
-                                <FormInput
-                                    v-model="auctionDataEnd"
-                                    name="auctionDataEnd"
-                                    label="Auction Data End Block"
-                                    description="The block number the auction ends at."
-                                />
+                        <FormInput
+                            v-model="salt"
+                            name="salt"
+                            label="Salt"
+                            description="Can be used to differentiate listings."
+                        />
 
-                                <FormInput
-                                    v-if="appStore.advanced"
-                                    v-model="idempotencyKey"
-                                    name="idempotencyKey"
-                                    label="Idempotency Key"
-                                    description="The idempotency key to set. It is recommended to use a UUID for this."
-                                    tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
-                                    readmore="Idempotency Key"
-                                />
-                            </div>
-                        </div>
+                        <FormInput
+                            v-model="auctionDataStart"
+                            name="auctionDataStart"
+                            label="Auction Data Start Block"
+                            description="The block number the auction starts at."
+                        />
+
+                        <FormInput
+                            v-model="auctionDataEnd"
+                            name="auctionDataEnd"
+                            label="Auction Data End Block"
+                            description="The block number the auction ends at."
+                        />
+
+                        <FormInput
+                            v-if="appStore.advanced"
+                            v-model="idempotencyKey"
+                            name="idempotencyKey"
+                            label="Idempotency Key"
+                            description="The idempotency key to set. It is recommended to use a UUID for this."
+                            tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
+                            readmore="Idempotency Key"
+                        />
                     </div>
                 </div>
 
diff --git a/resources/js/components/slideovers/collection/MutateCollectionSlideover.vue b/resources/js/components/slideovers/collection/MutateCollectionSlideover.vue
index d99c369..f5e1bbc 100644
--- a/resources/js/components/slideovers/collection/MutateCollectionSlideover.vue
+++ b/resources/js/components/slideovers/collection/MutateCollectionSlideover.vue
@@ -25,21 +25,26 @@
                             label="Owner"
                             description="The new owner account of the collection."
                         />
-                        <FormInput
-                            v-model="beneficiaryAddress"
-                            name="beneficiaryAddress"
-                            label="Beneficiary"
-                            description="The account that will receive the royalty."
-                        />
-                        <FormInput
-                            v-model="beneficiaryPercentage"
-                            name="beneficiaryPercentage"
-                            label="Percentage"
-                            description="The amount of royalty the beneficiary receives in percentage."
-                            type="number"
-                            :min="0"
-                            prefix="%"
-                        />
+                        <div class="flex flex-row space-x-4 w-full">
+                            <FormInput
+                                v-model="beneficiaryAddress"
+                                name="beneficiaryAddress"
+                                label="Beneficiary"
+                                class="w-full"
+                                description="The account that will receive the royalty."
+                            />
+                            <FormInput
+                                v-model="beneficiaryPercentage"
+                                name="beneficiaryPercentage"
+                                class="w-[100px] !mr-[40px] flex flex-col justify-between"
+                                label="Percentage"
+                                tooltip="The amount of royalty the beneficiary receives in percentage."
+                                type="number"
+                                :min="0"
+                                prefix="%"
+                            />
+                        </div>
+
                         <FormList
                             flex
                             v-model="explicitRoyaltyCurrencies"
@@ -66,7 +71,7 @@
                                 <div class="w-5"></div>
                             </template>
                             <template #inputs="{ inputs, index }">
-                                <div class="flex-1">
+                                <div class="w-1/2">
                                     <input
                                         v-model="inputs.collectionId"
                                         :dusk="`input__collection-id-${index + 1}`"
@@ -76,7 +81,7 @@
                                         class="block w-full rounded-md border-0 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
                                     />
                                 </div>
-                                <div class="flex-1">
+                                <div class="w-1/2">
                                     <TokenIdInput v-model="inputs.tokenId" :dusk="`input__token-id-${index + 1}`" />
                                 </div>
                             </template>
diff --git a/resources/js/components/slideovers/token/DetailsTokenSlideover.vue b/resources/js/components/slideovers/token/DetailsTokenSlideover.vue
index d197c58..f269e01 100644
--- a/resources/js/components/slideovers/token/DetailsTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/DetailsTokenSlideover.vue
@@ -19,7 +19,7 @@
                         <Address :address="item.owner" />
                     </div>
 
-                    <div class="space-y-2 pt-4 pb-3">
+                    <div v-if="item.unitPrice" class="space-y-2 pt-4 pb-3">
                         <dt class="text-base font-medium text-gray-500">Unit Price</dt>
                         <dd class="mt-1 text-sm text-gray-900">
                             {{ formatPriceFromENJ(item.unitPrice) }} {{ currencySymbol }}
diff --git a/resources/js/components/slideovers/token/MintTokenSlideover.vue b/resources/js/components/slideovers/token/MintTokenSlideover.vue
index bd7d740..59fd884 100644
--- a/resources/js/components/slideovers/token/MintTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/MintTokenSlideover.vue
@@ -43,14 +43,6 @@
                             required
                         />
 
-                        <FormInput
-                            v-model="unitPrice"
-                            name="unitPrice"
-                            label="Unit Price"
-                            description="Leave as null if you want to keep the same unitPrice. You can also put a value if you want to change the unitPrice. Please note you can only increase it and a deposit to the difference of every token previously minted will also be needed."
-                            :prefix="currencySymbol"
-                        />
-
                         <FormInput
                             v-if="useAppStore().advanced"
                             v-model="idempotencyKey"
@@ -81,14 +73,14 @@
 <script setup lang="ts">
 import { Form } from 'vee-validate';
 import * as yup from 'yup';
-import { Ref, computed, ref } from 'vue';
+import { Ref, ref } from 'vue';
 import FormInput from '~/components/FormInput.vue';
 import FormCheckbox from '~/components/FormCheckbox.vue';
 import Btn from '~/components/Btn.vue';
 import { TokenApi } from '~/api/token';
 import snackbar from '~/util/snackbar';
 import { addressToPublicKey, publicKeyToAddress } from '~/util/address';
-import { currencySymbolByNetwork, formatData, formatPriceToENJ, formatToken, snackbarErrors } from '~/util';
+import { formatData, formatToken, snackbarErrors } from '~/util';
 import TokenIdInput from '~/components/TokenIdInput.vue';
 import { TokenIdSelectType } from '~/types/types.enums';
 import { useAppStore } from '~/store';
@@ -118,15 +110,10 @@ const props = withDefaults(
     }
 );
 
-const appStore = useAppStore();
-
-const currencySymbol = computed(() => currencySymbolByNetwork(appStore.config.network));
-
 const isLoading = ref(false);
 const collectionId = ref(props.item?.collectionId);
 const recipient = ref(publicKeyToAddress(props.item?.owner ?? ''));
 const amount = ref();
-const unitPrice = ref();
 const idempotencyKey = ref('');
 const skipValidation = ref(false);
 const tokenId: Ref<TokenIdType> = ref({
@@ -159,7 +146,6 @@ const mintToken = async () => {
                 params: {
                     tokenId: formatToken(tokenId.value),
                     amount: amount.value,
-                    unitPrice: formatPriceToENJ(unitPrice.value) ?? null,
                 },
                 idempotencyKey: idempotencyKey.value,
                 skipValidation: skipValidation.value,
diff --git a/resources/js/components/slideovers/token/MutateTokenSlideover.vue b/resources/js/components/slideovers/token/MutateTokenSlideover.vue
index 9e5a62b..30972a0 100644
--- a/resources/js/components/slideovers/token/MutateTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/MutateTokenSlideover.vue
@@ -26,21 +26,26 @@
                             disabled
                             required
                         />
-                        <FormInput
-                            v-model="beneficiaryAddress"
-                            name="beneficiaryAddress"
-                            label="Beneficiary"
-                            description="The account that will receive the royalty."
-                        />
-                        <FormInput
-                            v-model="beneficiaryPercentage"
-                            name="beneficiaryPercentage"
-                            label="Percentage"
-                            description="The amount of royalty the beneficiary receives in percentage."
-                            type="number"
-                            :min="0"
-                            prefix="%"
-                        />
+                        <div class="flex flex-row space-x-4 w-full">
+                            <FormInput
+                                v-model="beneficiaryAddress"
+                                name="beneficiaryAddress"
+                                label="Beneficiary"
+                                class="w-full"
+                                description="The account that will receive the royalty."
+                            />
+                            <FormInput
+                                v-model="beneficiaryPercentage"
+                                name="beneficiaryPercentage"
+                                label="Percentage"
+                                class="w-[100px] !mr-[40px] flex flex-col justify-between"
+                                tooltip="The amount of royalty the beneficiary receives in percentage."
+                                type="number"
+                                :min="0"
+                                prefix="%"
+                            />
+                        </div>
+
                         <FormCheckbox
                             v-model="isCurrency"
                             name="isCurrency"