diff --git a/web/src/components/UniversalForm.vue b/web/src/components/UniversalForm.vue
index 52002e3f..aca7bf81 100644
--- a/web/src/components/UniversalForm.vue
+++ b/web/src/components/UniversalForm.vue
@@ -1,10 +1,11 @@
 <template>
-    <div v-if="show" class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50 p-4">
+    <div v-if="show"
+        class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50 p-4">
         <div class="relative w-full max-w-md ">
 
             <div
-                class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel duration-150 shadow-lg max-h-screen">
-                <div class="flex flex-row flex-grow items-center mb-2">
+                class="flex flex-col  rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel duration-150 shadow-lg max-h-screen">
+                <div class="flex flex-row flex-grow items-center m-2 p-1">
                     <div class="grow flex items-center">
                         <i data-feather="sliders" class="mr-2 flex-shrink-0"></i>
                         <h3 class="text-lg font-semibold select-none mr-2">
@@ -15,7 +16,7 @@
                     <!-- CLOSE BUTTON -->
                     <div class="items-end">
                         <button type="button" @click.stop="hide(false)" title="Close"
-                            class=" text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white">
+                            class=" bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white">
                             <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                 xmlns="http://www.w3.org/2000/svg">
                                 <path fill-rule="evenodd"
@@ -27,26 +28,51 @@
                     </div>
                 </div>
                 <!-- FORM AREA -->
-                <div class="flex flex-col relative no-scrollbar overflow-y-scroll">
+                <div class="flex flex-col relative no-scrollbar overflow-y-scroll p-2">
+                    <!-- odd:bg-bg-light-tone odd:dark:bg-bg-dark-tone even:bg-bg-light-tone-panel dark:even:bg-bg-dark-tone-panel -->
+                    <div class="px-2 " v-for="(item, index) in controls_array">
+                        <div class="">
+                            <div v-if="item.type != 'bool'">
+                                <label class="flex item-center gap-2 text-sm font-medium text-gray-900 dark:text-white"
+                                    for="file_input">
+                                    {{ item.name }}:
 
-                    <div class="mb-2 " v-for="(item, index) in controls_array">
+                                    <label class="relative inline-flex items-center mb-5 cursor-pointer">
+                                        <input type="checkbox" value="" class="sr-only peer">
+                                        <div class="hover:text-secondary duration-75 active:scale-90 peer-checked:text-secondary">
+                                            <i data-feather="help-circle" class="w-5 h-5 "></i>
+                                        </div>
+                                        <p class="text-sm font-normal text-gray-700 dark:text-gray-400 mb-2 hidden peer-checked:visible">
+                                    {{ item.help }}
+                                </p>
+                                    </label>
+
+                                    <button class="text-sm  hover:text-secondary duration-75 active:scale-90" title="Help"
+                                        type="toggle" @click.stop="">
+
+                                    </button>
+                                </label>
 
 
-                        <div class="mb-3">
-                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">
-                                {{ item.name }}:
-                            </label>
+                                <input type="text" v-model="item.value"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                                    placeholder="Enter value">
 
-                            <input type="text" v-model="item.value"
-                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                                placeholder="Enter value">
-
-                            <input v-if="(item.min != null && item.max != null)" type="range" v-model="item.value"
-                                :min="item.min" :max="item.max" step="0.1"
-                                class="flex-none h-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                                <input v-if="(item.min != null && item.max != null)" type="range" v-model="item.value"
+                                    :min="item.min" :max="item.max" step="0.1"
+                                    class="flex-none h-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                            </div>
+                        </div>
+                        <div v-if="item.type == 'bool'">
+                            <div class="flex items-center ">
+                                <input type="checkbox" v-model="item.value"
+                                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                                <label for="default-checkbox" class="ml-2 text-sm font-medium">{{ item.name
+                                }}</label>
+                            </div>
 
                         </div>
-
+                        <hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700">
                     </div>
 
                     <!-- SUBMIT AND CANCEL BUTTONS -->
@@ -112,15 +138,15 @@ export default {
             }
         },
         showForm(controls_array, title, ConfirmButtonText, DenyButtonText) {
-      this.ConfirmButtonText =ConfirmButtonText || this.ConfirmButtonText
-      this.DenyButtonText =DenyButtonText || this.DenyButtonText
-      return new Promise((resolve) => {
-        this.controls_array = controls_array;
-        this.show = true;
-        this.title=title || this.title
-        this.resolve = resolve;
-      });
-    },
+            this.ConfirmButtonText = ConfirmButtonText || this.ConfirmButtonText
+            this.DenyButtonText = DenyButtonText || this.DenyButtonText
+            return new Promise((resolve) => {
+                this.controls_array = controls_array;
+                this.show = true;
+                this.title = title || this.title
+                this.resolve = resolve;
+            });
+        },
 
     },
     watch: {
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 96355d1d..0dda61b8 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1192,12 +1192,12 @@ export default {
         },
         onSettingsBinding() {
 
-            const arr = '[{"name":"Configuration 1","value":0,"type":"int","min":0,"max":100},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null}]'
+            const arr = '[{"name":"model_name","type":"str","value":"DreamShaper_5_beta2_noVae_half_pruned.ckpt", "help":"Name of the model to be loaded for stable diffusion generation"},{"name":"ddim_steps","type":"int","value":50, "min":10, "max":1024},{"name":"scale","type":"float","value":7.5, "min":0.1, "max":100.0},{"name":"W","type":"int","value":512, "min":10, "max":2048},{"name":"H","type":"int","value":512, "min":10, "max":2048},{"name":"skip_grid","type":"bool","value":true,"help":"Skip building a grid of generated images"},{"name":"batch_size","type":"int","value":1, "min":1, "max":100,"help":"Number of images per batch (requires more memory)"},{"name":"num_images","type":"int","value":1, "min":1, "max":100,"help":"Number of batch of images to generate (to speed up put a batch of n and a single num images, to save vram, put a batch of 1 and num_img of n)"},{"name":"seed","type":"int","value":-1},                {"name":"servers_addresses","type":"list","value":[], "help":"A list of server addresses for example [\'http://localhost:9601\', \'http://localhost:9602\']"},{"name":"keep_only_active_servers","type":"bool","value":true, "help":"If true, then only active servers will be kept in the loop"},{"name":"sampler_name","type":"str","value":"ddim","help":"Supported sampler names: ddim, dpms, plms", "options":["ddim","dpms","plms"]}]'
             const arr2 = JSON.parse(arr)
-    
 
 
-            //this.$refs.universalForm.showForm(arr2, "Baba booey form", "Go for torps", "go home") // disabled to not break UI just add endpoint or anything
+
+            this.$refs.universalForm.showForm(arr2, "Baba booey form", "Go for torps", "go home") // disabled to not break UI just add endpoint or anything
         },
         // messagebox ok stuff
         onMessageBoxOk() {