diff --git a/docs/app.js b/docs/app.js
index 8062018..eefa604 100644
--- a/docs/app.js
+++ b/docs/app.js
@@ -9,27 +9,111 @@ var currentID = "";
 
 
 const Controls = {
+    "TextBox": {
+        "defaultHTML": "<input style='width: 100%; height: 100%; '>TextBox</input>",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/TextBox.md",
+        "edit": ["content", "font_size", "bold", "type", "text_align"],
+        "defaultWidth": 50,
+        "defaultHeight": 25
+    },
+    "ProgressBar": {
+        "defaultHTML": "<progress max='100' value='0'></progress>",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/ProgressBar.md",
+        "edit": ["min", "value", "max"],
+        "defaultWidth": 50,
+        "defaultHeight": 25
+    },
+    "CheckBox": {
+        "defaultHTML": "<input type='checkbox'></input>",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/CheckBox.md",
+        "edit": ["text_align", "font_size", "checked", "content"],
+        "defaultWidth": 50,
+        "defaultHeight": 25
+    },
+    "RawHtml": {
+        "defaultHTML": "",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/RawHtml.md",
+        "edit": ["HTML"],
+        "defaultWidth": 50,
+        "defaultHeight": 50
+    },
+    "WebView": {
+        "defaultHTML": "",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/WebView.md",
+        "edit": ["url"],
+        "defaultWidth": 50,
+        "defaultHeight": 50
+    },
+    "Rect": {
+        "defaultHTML": "",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Rect.md",
+        "edit": ["scroll"],
+        "defaultWidth": 50,
+        "defaultHeight": 50
+    },
+    "Switch": {
+        "defaultHTML": "",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Rect.md",
+        "edit": ["text_align", "font_size", "checked", "content"],
+        "defaultWidth": 50,
+        "defaultHeight": 50
+    },   
+    "RadioButton": {
+        "defaultHTML": "<progress max='100' value='0'></progress>",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/ProgressBar.md",
+        "edit": ["text_align", "font_size", "checked", "content"],
+        "defaultWidth": 50,
+        "defaultHeight": 25
+    },
+    "ListView": {
+        "defaultHTML": "<h2 style='color: red; width: 100%; height: 100%; '>soon...</h2>",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Text.md",
+        "edit": [],
+        "defaultWidth": 50,
+        "defaultHeight": 25
+    },
     "Text": {
-        "defaultHTML": "<h2 style='width: 50px; height: 25px; '>Text</h2>",
+        "defaultHTML": "<h2 style='width: 100% height: 100%; '>Text</h2>",
         "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Text.md",
-        "edit": ["content", "font_size"],
+        "edit": ["content", "font_size", "bold", "text_align"],
         "defaultWidth": 50,
         "defaultHeight": 25
     },
     "Image": {
-        "defaultHTML": "<img src='./default.png' style='width: 20px; height: 20px;'>",
+        "defaultHTML": "<img src='./assets/logo_dark.png' style='width: 100%; height: 100%;'>",
         "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Image.md",
-        "edit": ["src"],
+        "edit": ["src", "mode"],
         "defaultWidth": 50,
         "defaultHeight": 50
     },
     "Button": {
-        "defaultHTML": "<button style='width: 100px; height: 50px;'>Button</button>",
+        "defaultHTML": "<button style='width: 100%; height: 100%;'>Button</button>",
         "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Button.md",
         "edit": ["content", "font_size"],
         "defaultWidth": 50,
         "defaultHeight": 25
     },
+    "RoundButton": {
+        "defaultHTML": "<button style='width: 100%; height: 100%;'>RoundButton</button>",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/RoundButton.md",
+        "edit": ["content", "font_size", "text_align", "image", "radius"],
+        "defaultWidth": 50,
+        "defaultHeight": 25
+    },
+    "Vscroll": {
+        "defaultHTML": "",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Vscroll.md",
+        "edit": ["bar"],
+        "defaultWidth": 50,
+        "defaultHeight": 25
+    },
+    "Hscroll": {
+        "defaultHTML": "",
+        "doc": "https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/documentation/Hscroll.md",
+        "edit": ["bar"],
+        "defaultWidth": 50,
+        "defaultHeight": 25
+    },
 };
 
 function editChild(property, value, subProperty="", increase=0, pixel=false) {
@@ -153,13 +237,15 @@ function setPercentMode2(e) {
     }
 }
 function hideCustomEdits() {
-	var editFields = document.getElementsById("customEdit");
-	for(i=0; i < editFields.children.length) {
+	var editFields = document.getElementById("customEdit");
+	for(i=0; i < editFields.children.length; i++) {
+        editFields.children[i].style.display = "none"
+    }
 		
 }
 function loadEdit(type) {
-    var editFields = document.getElementsById("customEdit");
-	
+    var editFields = document.getElementById("customEdit");
+	hideCustomEdits();
 	
 	
     if(!type in Controls) {
@@ -167,40 +253,28 @@ function loadEdit(type) {
         return;
     }
 	
-	
-	switch(type) {
-		case "Text":
-			
-			break;
-	}
+	for(i=0; i<Controls[type]["edit"].length; i++) {
+        var element = Controls[type]["edit"][i];
+        if(element != undefined) { 
+            try {
+                document.getElementById("customEdit-"+element).style.display = "block";
+            } catch(e) {
+                console.log("customEdit-"+element+" is not defined");
+            }
+            
+            console.log(element);
+        }
+    }
 
     // displays GeneralAttributes
 
-// name="ControlName";
-// visible="[true/false]";
-// enabled="[true/false]";
-
-// parent="ControlName";
-
-// margin_top="10";
-// margin_left="20";
-// margin_right="5";
-// margin_bottom="25";
-
-// location="x, y";
-// location="[top/top_left/top_right/bottom/bottom_left/bottom_right/left/right/center]";
-
-// color="white";
-// color="255, 255, 255";
-
-// bg_color="black";
-// bg_color="0, 0, 0";
-
-// width="20";
-// width="10%";
+    // parent="ControlName";
+}
 
-// height="10";
-// width="5%";
+function setThemeIcon(path) {
+    document.getElementById("edit-font_size").value = 'path';
+    // https://api.github.com/repos/d3m0n-project/d3m0n_os/contents/rootfs/usr/share/d3m0n/themes/default_dark/icons
+    
 }
 
 function createDraggableElement(type) {
@@ -237,6 +311,8 @@ function createDraggableElement(type) {
         startY = event.clientY;
         currentID = draggable.id;
 
+        loadEdit(type);
+
         document.getElementById("edit-name").value = draggable.id;
         document.getElementById("edit-width").value = parseInt(draggable.style.width);
         document.getElementById("edit-height").value = parseInt(draggable.style.height);
diff --git a/docs/assets/add.png b/docs/assets/add.png
new file mode 100644
index 0000000..98e3835
Binary files /dev/null and b/docs/assets/add.png differ
diff --git a/docs/src/canva.js b/docs/src/canva.js
index 08b96f2..c4dfb54 100644
--- a/docs/src/canva.js
+++ b/docs/src/canva.js
@@ -5,23 +5,21 @@ function resize()
 	let width = box.offsetWidth;
 	let height = box.offsetHeight;
 	document.getElementById("dimentions").innerHTML = width+"x"+height;
-	// width: 480px;
-	// height: 640px;
-	if(width > 480)
+	if(width > 1000)
 	{
-		document.getElementById('window').style.width = "480px";
+		document.getElementById('window').style.width = "1000px";
 	}
 	if(height > 640)
 	{
 		document.getElementById('window').style.height = "640px";
 	}
-	if(width < 48)
+	if(width < 350)
 	{
-		document.getElementById('window').style.width = "48px";
+		document.getElementById('window').style.width = "350px";
 	}
-	if(height < 64)
+	if(height < 200)
 	{
-		document.getElementById('window').style.height = "64px";
+		document.getElementById('window').style.height = "200px";
 	}
 }
 
diff --git a/docs/studio.html b/docs/studio.html
index cd5aa88..d4df2b3 100644
--- a/docs/studio.html
+++ b/docs/studio.html
@@ -6,7 +6,7 @@
     <title>d3m0n App Studio</title>
     <link rel="stylesheet" href="./style.css"></link>
 </head>
-<body>
+<body onload="hideCustomEdits()">
     <h1>d3m0n App Studio</h1>
 
     <div id="appContainer">
@@ -101,9 +101,20 @@ <h1>d3m0n App Studio</h1>
             </div>
 			<div style="width: 100%;" id="customEdit">
 			<!-- document.getElementById("Text_y6j9df").children[0].innerText -->
-				<div style="width: 90%; display: block; overflow: hidden;">content:<input style="float: right; width: 50%;" type="text" id="edit-content" value="" onchange="editChild('innerText', document.getElementById('edit-content').value, '', 0)" /></div>
+				<div id="customEdit-content" style="width: 90%; display: block; overflow: hidden;">content:<input style="float: right; width: 50%;" type="text" id="edit-content" value="" onchange="editChild('innerText', document.getElementById('edit-content').value, '', 0)" /></div>
+                <div id="customEdit-font_size" style="width: 90%; display: block; overflow: hidden;">font_size:<input style="float: right; width: 50%;" type="number" id="edit-font_size" value="" onchange="editChild('style', document.getElementById('edit-font_size').value+'px', 'font-size', 0)" /></div>
+                <div id="customEdit-mode" style="width: 90%; display: block; overflow: hidden;">mode:
+                    <select id="edit-mode" onchange="editImgMode(document.getElementById('edit-mode').value)">
+                        <option>stretch</option>
+                        <option>zoom</option>
+                        <option>auto_size</option>
+                        <option>center</option>
+                    </select>
+                </div>
                 
-			</div>
+                <div id="customEdit-src" style="width: 90%; display: block; overflow: hidden;">src:<input style="float: right; width: 50%;" type="number" id="edit-font_size" value="" onchange="editChild('src', document.getElementById('edit-src').value, '', 0)" />
+                <img src="./assets/add.png" style="float: right; width: 20px; height: 20px;" onclick="document.getElementById('iconSelector').style.display = 'block';"></div>
+            </div>
 
         </div>
         <div style="width: 60%; flex-direction: row; display: flex;">
@@ -122,7 +133,37 @@ <h1>d3m0n App Studio</h1>
     <button id="build">Build</button>
     <pre id="pseudocode"></pre>
 
+    <div id="iconSelector" style="flex-direction: center; display: none; background: grey; width: 100%; height: 100%; position: absolute; z-index: 9999999; opacity: 0.9; top: 0px; left: 0px;">
+        <h2 style="margin-top: 20px; margin-left: 20px;">theme icon</h2>
+        <div id="themeIconsList" style="overflow-x: hidden; align-items: center; justify-content: center; overflow-y: scroll; display: flex; flex-direction: row; flex-wrap: wrap;">
+            <!-- <div class="themeIconItem">
+                <img style="width: 80%; height: 80%;" src="https://github.com/d3m0n-project/d3m0n_os/blob/main/rootfs/usr/share/d3m0n/themes/default_dark/icons/contacts.png?raw=true">
+                <h3 style="margin: 0px;">Test</h3>
+            </div> -->
+        </div>
+        
+    </div>
 
     <script src="./app.js"></script>
+    <script>
+        fetch("https://api.github.com/repos/d3m0n-project/d3m0n_os/contents/rootfs/usr/share/d3m0n/themes/default_dark/icons").then(response => response.json())
+        .then(data => {
+            for(i=0; i<data.length; i++) {
+                var name = data[i]["name"];
+                var url = data[i]["download_url"];
+
+                var iconName = name.replace(".png", "");
+                if(!name.endsWith('Zone.Identifier')) {
+                    document.getElementById('themeIconsList').innerHTML += `
+<div class="themeIconItem" onclick="setThemeIcon(`+iconName+`)">
+    <img style="width: 50%; height: 50%;" src="`+url+`">
+    <h3 style="margin: 0px;">`+iconName+`</h3>
+</div>`;
+                    console.log(name, url);
+                }
+                
+            }
+        })
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/style.css b/docs/style.css
index 61a1eae..2a9838d 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -20,6 +20,18 @@ body {
   padding: 5px;
 }
 
+.themeIconItem {
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  background: #323232;
+  padding: 0px;
+  flex-direction: column;
+  display: flex;
+  padding: 10px;
+}
+
 #appContainer {
   justify-content: center;
   width: 100%;