diff --git a/src/routes/convergenceLoop/+page.svelte b/src/routes/convergenceLoop/+page.svelte
index dabe8fad5e0b3ed4c6631216c297f76214f64875..a73d4fc90ecf6bd8ecae15967cf7d5c321a6eeaa 100644
--- a/src/routes/convergenceLoop/+page.svelte
+++ b/src/routes/convergenceLoop/+page.svelte
@@ -110,7 +110,7 @@
     }
 </script>
 <Container>
-    <h2>Simulationsmodel</h2>
+    <h2>Convergence Loop</h2>
     <Alert color="primary" isOpen={saveAlert} toggle={() => (saveAlert = false)}>
         Changes in Model please save or reload before starting!.
     </Alert>
diff --git a/src/routes/model/+page.svelte b/src/routes/model/+page.svelte
index b4f1ede27b85d546fe16a85eceab90e2e66a6e58..90dd3e0c1a8bab645fd35c53c0f0e08e614844fa 100644
--- a/src/routes/model/+page.svelte
+++ b/src/routes/model/+page.svelte
@@ -67,12 +67,14 @@
         label:string;
         description:string;
         bind:string;
-        input: number;
-        constructor(label:string,description:string, bind:string, input:number) {
+        unit:string;
+        max:number=Number.POSITIVE_INFINITY;
+        min:number=Number.NEGATIVE_INFINITY;
+        constructor(label:string,description:string, bind:string, unit:string) {
             this.bind = bind;
             this.label=label;
             this.description = description;
-            this.input=input;
+            this.unit=unit;
         }
     }
     class SettingsLabel{
@@ -117,6 +119,10 @@
             modules = modules.concat(data["SizingLoop"]);
             modules = Array.from(new Set(modules))
             modules.sort()
+            const res2 = await fetch("http://127.0.0.1:8000/modules");
+            const data2 = await res2.json();
+            groups=data2["groups"]
+            console.log(data2)
     })
     async function loadModel(){
                 const res = await fetch("http://127.0.0.1:8000/convergence");
@@ -156,7 +162,7 @@
         modalModule.name = module;
         modalModule.response = JSON.parse(data);
         modalModule.html= []
-        generateHTML(modalModule.response,modalModule.html)
+        generateHTML(modalModule.response)
         modalModule=modalModule;
     }
     function generateHTML(json: object){
@@ -165,7 +171,15 @@
                 if(value.description&&value.description.includes("Switch")){
                     modalModule.html.push(new SettingsSwitch(key,value.description,value))
                 }else if(value.description&&value.description.includes("Selector")){
-                    modalModule.html.push(new SettingsSelector(key,value.description,value,["mode_0","mode_1","mode_2"]))
+                    let options = [];
+                    for (let i= 0; i<4;i++){
+                        if(value.description.includes("mode_"+i)){
+                            options.push("mode_"+i)
+                        }
+                    }
+                    modalModule.html.push(new SettingsSelector(key,value.description,value,options))
+                }else if(value.hasOwnProperty("unit")){
+                    modalModule.html.push((new SettingsNumberfield(key,value.description,value,value.unit)))
                 }else{
                     modalModule.html.push(new SettingsTextfield(key,value.description,key,key))
                 }
@@ -177,6 +191,17 @@
             }
         })
     }
+    async function uploadModuleConf(){
+        const response = await fetch('http://127.0.0.1:8000/modules/config/update', {
+            method: 'PUT',
+            body: JSON.stringify(modalModule.response),
+            headers: {
+                'content-type': 'application/json'
+            }
+        })
+            .then(response => response.json())
+            console.log(JSON.stringify(modalModule.response))
+    }
     function dragStart(event,groupIndex :number, itemIndex :number) {
         const data =  {groupIndex, itemIndex};
         event.dataTransfer.setData('text/plain', JSON.stringify(data));
@@ -304,7 +329,7 @@
                         {element.description}
                     </Tooltip>
                 {:else if element.type=="label"}
-                    <h6>{element.label}</h6>
+                    <h3>{element.label}</h3>
                 {:else if element.type =="selector"}
                     <h6>{element.label}</h6>
                     <Input id={element.label} type="select" bind:value={element.bind.value}>
@@ -317,7 +342,20 @@
                     </Tooltip>
                 {:else if element.type=="textfield"}
                     <h7>{element.label}</h7>
-                    <Input id={element.label} type="text" />
+                    <Input id={element.label} type="text"/>
+                    <Tooltip target={element.label} placement="left">
+                        {element.description}
+                    </Tooltip>
+                {:else if element.type=="numberfield"}
+                    {#if element.unit !="1"&&element.unit !="-" }
+                        <h7>{element.label} (in {element.unit})</h7>
+                    {:else}
+                        <h7>{element.label}</h7>
+                    {/if}
+                    {#if element.max!=Number.POSITIVE_INFINITY&&element.min!=Number.NEGATIVE_INFINITY}
+                        <Input type="range" min={element.min} max={element.max} step={1} bind:value={element.bind.value} placeholder="range placeholder"/>
+                    {/if}
+                    <Input id={element.label} type="number" min={element.min} max={element.max} bind:value={element.bind.value}/>
                     <Tooltip target={element.label} placement="left">
                         {element.description}
                     </Tooltip>
@@ -325,7 +363,7 @@
             {/each}
         </ModalBody>
         <ModalFooter>
-            <Button on:click={console.log(modalModule.response)}>test switch</Button>
+            <Button on:click={uploadModuleConf}>test switch</Button>
         </ModalFooter>
     </Modal>
     <Modal isOpen={modulesModalOpen} toggle={toggleModules} scrollable>