diff --git a/src/assets/json/colors.json b/src/assets/json/colors.json
index 6ba7173..704d281 100644
--- a/src/assets/json/colors.json
+++ b/src/assets/json/colors.json
@@ -1,107 +1,117 @@
 {
   "data": [
     {
-      "name": "Pink",
+      "name": "default",
+      "value": "",
+      "color": "#ffffff"
+    },
+    {
+      "name": "transparent",
+      "value": "Colors.transparent",
+      "color": "transparent"
+    },
+    {
+      "name": "pink",
       "value": "Colors.pink",
       "color": "#e91e63"
     },
     {
-      "name": "Red",
+      "name": "red",
       "value": "Colors.red",
       "color": "#f44336"
     },
     {
-      "name": "DeepOrange",
+      "name": "deepOrange",
       "value": "Colors.deepOrange",
       "color": "#ff5722"
     },
     {
-      "name": "Orange",
+      "name": "orange",
       "value": "Colors.orange",
       "color": "#ff9800"
     },
     {
-      "name": "Amber",
+      "name": "amber",
       "value": "Colors.amber",
       "color": "#ffc107"
     },
     {
-      "name": "Yellow",
+      "name": "yellow",
       "value": "Colors.yellow",
       "color": "#ffeb3b"
     },
     {
-      "name": "Lime",
+      "name": "lime",
       "value": "Colors.lime",
       "color": "#cddc39"
     },
     {
-      "name": "LightGreen",
+      "name": "lightGreen",
       "value": "Colors.lightGreen",
       "color": "#8bc34a"
     },
     {
-      "name": "Green",
+      "name": "green",
       "value": "Colors.green",
       "color": "#4caf50"
     },
     {
-      "name": "Teal",
+      "name": "teal",
       "value": "Colors.teal",
       "color": "#009688"
     },
     {
-      "name": "Cyan",
+      "name": "cyan",
       "value": "Colors.cyan",
       "color": "#00bcd4"
     },
     {
-      "name": "LightBlue",
+      "name": "lightBlue",
       "value": "Colors.lightBlue",
       "color": "#03a9f4"
     },
     {
-      "name": "Blue",
+      "name": "blue",
       "value": "Colors.blue",
       "color": "#2196f3"
     },
     {
-      "name": "Indigo",
+      "name": "indigo",
       "value": "Colors.indigo",
       "color": "#3f51b5"
     },
     {
-      "name": "Purple",
+      "name": "purple",
       "value": "Colors.purple",
       "color": "#9c27b0"
     },
     {
-      "name": "DeepPurple",
+      "name": "deepPurple",
       "value": "Colors.deepPurple",
       "color": "#673ab7"
     },
     {
-      "name": "BlueGrey",
+      "name": "blueGrey",
       "value": "Colors.blueGrey",
       "color": "#607d8b"
     },
     {
-      "name": "Brown",
+      "name": "brown",
       "value": "Colors.brown",
       "color": "#795548"
     },
     {
-      "name": "Grey",
+      "name": "grey",
       "value": "Colors.grey",
       "color": "#9e9e9e"
     },
     {
-      "name": "Black",
+      "name": "black",
       "value": "Colors.black",
       "color": "#000000"
     },
     {
-      "name": "White",
+      "name": "white",
       "value": "Colors.white",
       "color": "#ffffff"
     }
diff --git a/src/assets/json/defaults/defPage.json b/src/assets/json/defaults/defPage.json
index 6e5a1fd..3b745e6 100644
--- a/src/assets/json/defaults/defPage.json
+++ b/src/assets/json/defaults/defPage.json
@@ -2,7 +2,7 @@
   "name": "page",
   "scrollable": true,
   "safeArea": false,
-  "bgColor": "transparent",
+  "bgColor": "Colors.transparent",
   "padding": "15",
   "align": "center"
 }
\ No newline at end of file
diff --git a/src/assets/json/defaults/defPreloader.json b/src/assets/json/defaults/defPreloader.json
index fc40a8d..f6743ac 100644
--- a/src/assets/json/defaults/defPreloader.json
+++ b/src/assets/json/defaults/defPreloader.json
@@ -4,6 +4,6 @@
   "align": "center",
   "width": 50.0,
   "height": 50.0,
-  "color": "appColor",
+  "color": "default",
   "hide": false
 }
\ No newline at end of file
diff --git a/src/components/elements/PropertyElement.vue b/src/components/elements/PropertyElement.vue
index 3a83ec0..8055ded 100644
--- a/src/components/elements/PropertyElement.vue
+++ b/src/components/elements/PropertyElement.vue
@@ -1,53 +1,89 @@
 <template>
   <div id="property">
     <table>
-      <tr>
+<!--      <tr>-->
+<!--        <th>-->
+<!--          <label for="p1">-->
+<!--            Color-->
+<!--          </label>-->
+<!--        </th>-->
+<!--        <td>-->
+<!--          <input type="text" id="p1" value="red">-->
+<!--        </td>-->
+<!--      </tr>-->
+<!--      <tr>-->
+<!--        <th>-->
+<!--          <label for="p2">-->
+<!--            Text-->
+<!--          </label>-->
+<!--        </th>-->
+<!--        <td>-->
+<!--          <input type="text" value="title text here" id="p2">-->
+<!--        </td>-->
+<!--      </tr>-->
+<!--      <tr>-->
+<!--        <th>-->
+<!--          <label for="p3">-->
+<!--              Lock-->
+<!--          </label>-->
+<!--        </th>-->
+<!--        <td>-->
+<!--          <div class="switch">-->
+<!--            <label>-->
+<!--              <input type="checkbox">-->
+<!--              <span class="lever"></span>-->
+<!--            </label>-->
+<!--          </div>-->
+<!--        </td>-->
+<!--      </tr>-->
+<!--      <tr>-->
+<!--        <th>-->
+<!--          <label for="p4">-->
+<!--            Align-->
+<!--          </label>-->
+<!--        </th>-->
+<!--        <td>-->
+<!--          <select id="p4">-->
+<!--            <option value=""> left</option>-->
+<!--            <option value=""> center</option>-->
+<!--            <option value=""> right</option>-->
+<!--          </select>-->
+<!--        </td>-->
+<!--      </tr>-->
+      <tr v-for="(p,k) in properties" :key="k" >
         <th>
-          <label for="p1">
-            Color
+          <label :for="k">
+            {{k}}
           </label>
         </th>
         <td>
-          <input type="text" id="p1" value="red">
-        </td>
-      </tr>
-      <tr>
-        <th>
-          <label for="p2">
-            Text
-          </label>
-        </th>
-        <td>
-          <input type="text" value="title text here" id="p2">
-        </td>
-      </tr>
-      <tr>
-        <th>
-          <label for="p3">
-              Lock
-          </label>
-        </th>
-        <td>
-          <div class="switch">
-            <label>
-              <input type="checkbox">
-              <span class="lever"></span>
-            </label>
+          <div v-if="k === 'hide' || k === 'safeArea' || k === 'scrollable'">
+            <div class="switch">
+              <label>
+                <input type="checkbox" v-model="properties[k]">
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+          <div v-else-if="k === 'name'">
+            <input type="text" @blur="nameCheck($event,true)" @keyup="nameCheck($event,false)" :id="k" v-model="properties[k]">
+          </div>
+          <div v-else-if="k === 'align'">
+            <select v-model="properties[k]" :id="k">
+              <option value="left"> left </option>
+              <option value="center"> center </option>
+              <option value="right"> right </option>
+            </select>
+          </div>
+          <div v-else-if="k.toLowerCase().indexOf('color') !== -1">
+            <select v-model="properties[k]" :id="k">
+                <option :value="cl.value" v-for="(cl,n) in colors"  class="ui dropdown" v-bind:key="n"
+                        :style="'background:'+cl.color + (['white','transparent','yellow','lime','grey','default'].indexOf(cl.name) > -1?';color:black;':'')"> {{cl.name}} </option>
+            </select>
+          </div>
+          <div v-else>
+            <input type="text" :id="k" v-model="properties[k]">
           </div>
-        </td>
-      </tr>
-      <tr>
-        <th>
-          <label for="p4">
-            Align
-          </label>
-        </th>
-        <td>
-          <select id="p4">
-            <option value=""> left</option>
-            <option value=""> center</option>
-            <option value=""> right</option>
-          </select>
         </td>
       </tr>
     </table>
@@ -57,15 +93,43 @@
 <script>
 export default {
   name: "PropertyElement",
-  props:[
-    'props'
-  ],
+  mounted() {
+  },
+  data:function () {
+    return {
+      colors: window.colors,
+    }
+  },
+  props:{
+    properties: {
+      default: function () {
+        return {}
+      },
+      type: Object
+    }
+  },methods:{
+    nameCheck:function (e,isBlur) {
+      let name = e.target.value;
+      if (!/^[a-zA-Z_$][a-zA-Z_$0-9]*$/.test(name)){
+        e.target.classList.add('invalid');
+      }else {
+        e.target.classList.remove('invalid');
+      }
+      if(isBlur){
+        e.target.focus();
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
+#property{
+  overflow-x: hidden;
+}
 table {
   width: 100%;
+  overflow: hidden;
 }
 
 th {
diff --git a/src/components/pages/MainAppPage.vue b/src/components/pages/MainAppPage.vue
index ae286d3..17f39f4 100644
--- a/src/components/pages/MainAppPage.vue
+++ b/src/components/pages/MainAppPage.vue
@@ -135,7 +135,7 @@
           <i class="fa fa-expand"></i>
         </h2>
         <div v-if="!isInitProject">
-          <property></property>
+          <property :properties="currentProperties"></property>
         </div>
         <div v-else class="text-center">
           <img src="../../assets/img/logo.svg" class="logo-sm" alt="">
@@ -145,7 +145,7 @@
     <div id="pages">
       <div class="container">
         <div v-if="!isInitProject">
-          <page v-for="(page,i) in data.pages" @click.native="changePage(i)"   :title="page.name" :active="currentPage === i">
+          <page v-for="(page,i) in data.pages" @click.native="changePage(i)" :key="i"   :title="page.name" :active="currentPage === i">
             hello {{i}}
           </page>
           <i class="fa fa-plus-circle" id="page-add" @click="newPage"></i>
@@ -175,6 +175,7 @@ export default {
       data: window.appData,
       currentDisplay: "Nexus 5",
       currentPage: 0,
+      currentProperties:{},
       isInitProject: false,
       display: {
         name: 'Nexus 5',
@@ -193,9 +194,8 @@ export default {
     try {
       var $ = window.jQuery;
       $("html").niceScroll();
-      $("#properties").niceScroll();
-      $("#mobile").niceScroll({touchbehavior: true,});
-      $("#elements").niceScroll();
+      $("#mobile").niceScroll({touchbehavior: true});
+      // $("#elements").niceScroll();
       $('#main select').formSelect();
 
 
@@ -226,6 +226,7 @@ export default {
     },
     changePage:function (i) {
         this.currentPage = i;
+        this.currentProperties = this.data.pages[i];
     },
   }
 }
diff --git a/src/components/pages/ProjectPage.vue b/src/components/pages/ProjectPage.vue
index 59adc7d..70b6959 100644
--- a/src/components/pages/ProjectPage.vue
+++ b/src/components/pages/ProjectPage.vue
@@ -34,7 +34,7 @@
         <label for="clr" class="active">Color</label>
         <select id="clr" @change="changeColor" v-model="data.xColor">
           <option  :data-icon="'data:image/svg+xml;base64,'+color2base64svg(cl.color)" :value="cl.value" v-for="(cl,n) in colors" class="circle left" v-bind:key="n"
-                  :style="'background:'+cl.color + (cl.name === 'Black'?';color:white;':'')"> {{cl.name}} </option>
+                  :style="'background:'+cl.color + (cl.name === 'Black'?';color:white;':'')" :disabled="(['transparent','default'].indexOf(cl.name) > -1)" > {{cl.name}} </option>
         </select>
       </div>
       <div class="input-field col s6">