diff --git a/package.json b/package.json
index fd11e49..020db22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "anubias",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "description": "anubias desktop application",
   "author": {
@@ -31,6 +31,7 @@
     "path": "^0.12.7",
     "vazir-font": "^28.0.0",
     "vue": "^2.6.11",
+    "vue-easy-dnd": "^1.10.2",
     "vue-router": "^3.5.1"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 76d8fb1..14373e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,16 +33,16 @@ export default {
     window.api.receive("message", (data) => {
       switch (data.type) {
         case 'warning':
-          window.alertify.warning(data.msg);
+          window.alertify.warning(data.msg,10);
           break;
         case 'error':
-          window.alertify.error(data.msg);
+          window.alertify.error(data.msg,10);
           break;
         case 'success':
-          window.alertify.success(data.msg);
+          window.alertify.success(data.msg,10);
           break;
         default:
-          window.alertify.message(data.msg);
+          window.alertify.message(data.msg,10);
       }
     });
   }
@@ -50,5 +50,6 @@ export default {
 </script>
 
 <style>
-
+  #app{
+  }
 </style>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 1453bcf..aec5550 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -80,3 +80,78 @@ label{
     color: black;
 }
 
+.inactive{
+    opacity: 0.025;
+}
+
+/*dnd fix*/
+
+.drag {
+    /*border: 1px solid rgba(220, 220, 255,.2);*/
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 33%;
+    text-align: center;
+    transition: all 0.5s;
+}
+
+.drop {
+    margin: 20px 10px;
+    height: 80px;
+    border: 2px dashed rgba(0,0,0,0.2);
+    position: relative;
+}
+
+.drop::before {
+    font-size: 15px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    opacity: 0.2;
+    white-space: nowrap;
+}
+
+.drop.visual::before {
+    content: "viual component";
+}
+
+.drop.non-visual::before {
+    content: "non-visual component";
+}
+
+.drop.any::before {
+    content: "CUT ANY NUMBERS";
+}
+
+.drop-allowed {
+    background-color: rgba(0, 255, 0, 0.2);
+}
+
+.drop-forbidden {
+    background-color: rgba(255, 0, 0, 0.2);
+}
+
+.drop-in {
+    box-shadow: 0 0 5px rgba(0, 0, 255, 0.4);
+}
+
+
+.list-enter,
+.list-leave-to {
+    opacity: 0;
+}
+
+.list-leave-active {
+    position: absolute;
+}
+
+.ajs-message{
+    background: #4285f4;
+    color: black;
+}
+.ajs-warning{
+    color: red;
+}
\ No newline at end of file
diff --git a/src/assets/js/winVars.js b/src/assets/js/winVars.js
index ea7947e..11cb7e4 100644
--- a/src/assets/js/winVars.js
+++ b/src/assets/js/winVars.js
@@ -20,6 +20,7 @@ window.project = {
 window.devices = require('../json/devices.json').data;
 window.colors = require('../json/colors.json').data;
 window.material_icons = require('../json/mateialIcons.json').data;
+window.components = require('../json/components.json').data;
 window.defaults = {};
 window.defaults.page = require('../json/defaults/defPage.json');
 window.defaults.preloader = require('../json/defaults/defPreloader.json');
\ No newline at end of file
diff --git a/src/assets/json/components.json b/src/assets/json/components.json
new file mode 100644
index 0000000..7e46f4c
--- /dev/null
+++ b/src/assets/json/components.json
@@ -0,0 +1,193 @@
+{
+  "data": [
+    {
+      "title": "Preloader",
+      "icon": "fa fa-spinner",
+      "active": true,
+      "visual": true,
+      "data": "window.defaults.preloader"
+    },
+    {
+      "title": "Container",
+      "icon": "far fa-square",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.container"
+    },
+    {
+      "title": "AppBar",
+      "icon": "far fa-window-maximize",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.appbar"
+    },
+    {
+      "title": "AppBar",
+      "icon": "far fa-window-maximize",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.appbar"
+    },
+    {
+      "title": "Image",
+      "icon": "far fa-image",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.image"
+    },
+    {
+      "title": "Icon",
+      "icon": "far fa-smile",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.icon"
+    },
+    {
+      "title": "Text",
+      "icon": "fas fa-font",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.text"
+    },
+    {
+      "title": "Column",
+      "icon": "fas fa-bars",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.column"
+    },
+    {
+      "title": "Row",
+      "icon": "fas fa-bars fa-rotate-90",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.row"
+    },
+    {
+      "title": "Nav",
+      "icon": "far fa-window-maximize fa-rotate-180",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.nav"
+    },
+    {
+      "title": "List",
+      "icon": "fa fa-list",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.list"
+    },
+    {
+      "title": "Dropdown",
+      "icon": "fa fa-prescription-bottle",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.dropdown"
+    },
+    {
+      "title": "Input",
+      "icon": "fab fa-yoast",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.input"
+    },
+    {
+      "title": "Button",
+      "icon": "far fa-plus-square",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.button"
+    },
+    {
+      "title": "Toggle",
+      "icon": "fa fa-toggle-on",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.toggle"
+    },
+    {
+      "title": "Menu",
+      "icon": "fa fa-list-alt",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.menu"
+    },
+    {
+      "title": "Grid",
+      "icon": "fa fa-th",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.grid"
+    },
+    {
+      "title": "Rate",
+      "icon": "fa fa-star",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.rate"
+    },
+    {
+      "title": "Rate",
+      "icon": "fa fa-star",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.rate"
+    },
+    {
+      "title": "Calendar",
+      "icon": "fa fa-calendar-alt",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.calendar"
+    },
+    {
+      "title": "DatePicker",
+      "icon": "fa fa-calendar-check",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.datepicker"
+    },
+    {
+      "title": "Image Picker",
+      "icon": "fa fa-file-image",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.imagepicker"
+    },
+    {
+      "title": "File Picker",
+      "icon": "fa fa-folder-open",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.filepicker"
+    },
+    {
+      "title": "Map",
+      "icon": "fa fa-map",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.map"
+    },
+    {
+      "title": "Location",
+      "icon": "fa fa-map-marker-alt",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.location"
+    },
+    {
+      "title": "Slider",
+      "icon": "fa fa-ellipsis-h",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.slider"
+    },
+    {
+      "title": "Timer",
+      "icon": "fa fa-stopwatch",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.timer"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/assets/json/defaults/defPage.json b/src/assets/json/defaults/defPage.json
index af627e5..9c51c00 100644
--- a/src/assets/json/defaults/defPage.json
+++ b/src/assets/json/defaults/defPage.json
@@ -6,5 +6,8 @@
   "bgColor": "Colors.transparent",
   "padding": "15",
   "align": "center",
-  "children": []
+  "children": {
+    "visual": [],
+    "nonvisual": []
+  }
 }
\ No newline at end of file
diff --git a/src/assets/json/defaults/defPreloader.json b/src/assets/json/defaults/defPreloader.json
index 4b616bc..fc7f14f 100644
--- a/src/assets/json/defaults/defPreloader.json
+++ b/src/assets/json/defaults/defPreloader.json
@@ -1,4 +1,5 @@
 {
+  "type": "preloader",
   "name": "preloader",
   "padding": "10",
   "align": "center",
diff --git a/src/components/elements/AppMenuElement.vue b/src/components/elements/AppMenuElement.vue
index ed68d58..f39d8ed 100644
--- a/src/components/elements/AppMenuElement.vue
+++ b/src/components/elements/AppMenuElement.vue
@@ -13,14 +13,14 @@
           Open project
         </a>
       </li>
-      <li :class="(cantEditPrj?' disabled':'')" >
-        <a  @click="save">
+      <li :class="(cantEditPrj?' disabled':'')">
+        <a @click="save">
           <i class="fa fa-save"></i>
           Save project
         </a>
       </li>
       <li :class="(cantEditPrj?' disabled':'')">
-        <a  @click="saveAs">
+        <a @click="saveAs">
           <i class="fa fa-save"></i>
           Save project as
         </a>
@@ -35,13 +35,21 @@
     </ul>
     <nav class="top-nav">
       <div class="nav-wrapper grey darken-4">
-        <ul class="left hide-on-med-and-down">
-          <li class="logo active"><a><img src="../../assets/img/logo.svg" alt=""></a></li>
-          <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Project<i class="material-icons right">arrow_drop_down</i></a>
-          <li><a>About</a></li>
+        <ul class="left">
+          <li class="logo active">
+            <a><img src="../../assets/img/logo.svg" alt=""></a>
+          </li>
+          <li>
+            <a class="dropdown-trigger" href="#!" data-target="dropdown1">
+              Project<i class="material-icons right">arrow_drop_down</i>
+            </a>
+          </li>
           <!--          <li><a href="badges.html">Components</a></li>-->
           <!--          <li><a href="collapsible.html">JavaScript</a></li>-->
         </ul>
+        <ul id="nav-mobile" class="right">
+          <li><a>About</a></li>
+        </ul>
       </div>
     </nav>
   </div>
@@ -51,6 +59,7 @@
 /*eslint-disable */
 /*eslint-enable */
 import {fnc} from '@/assets/js/functions';
+
 export default {
   name: "AppMenuElement",
   data: function () {
@@ -63,15 +72,15 @@ export default {
     $(".dropdown-trigger").dropdown();
   }, methods: {
     save: function () {
-      if (this.cantEditPrj){
-        return  false;
+      if (this.cantEditPrj) {
+        return false;
       }
       if (window.project.file === '') {
         this.saveAs();
         return false;
       }
       var data = {
-        project:window.project ,
+        project: window.project,
         data: window.appData
       };
       window.api.send("save-project", data);
@@ -102,8 +111,8 @@ export default {
       this.$router.push('/project');
     },
     saveAs: function () {
-      if (this.cantEditPrj){
-        return  false;
+      if (this.cantEditPrj) {
+        return false;
       }
       var data = {
         dialog: {
@@ -117,9 +126,9 @@ export default {
       };
       window.api.send("save-as-file-project", data);
     }
-  },computed:{
-    cantEditPrj:function () {
-      return this.appData.project.name ==='';
+  }, computed: {
+    cantEditPrj: function () {
+      return this.appData.project.name === '';
     }
   }
 }
@@ -127,11 +136,11 @@ export default {
 
 <style scoped>
 /*-995px width*/
-@media ( max-width: 995px ) {
-  .top-nav {
-    display: none;
-  }
-}
+/*@media ( max-width: 995px ) {*/
+/*  .top-nav {*/
+/*    display: none;*/
+/*  }*/
+/*}*/
 
 nav, nav .nav-wrapper i, nav > a.sidenav-trigger, nav > a.sidenav-trigger i {
   height: 40px;
@@ -154,8 +163,9 @@ nav .fa {
   margin-right: 5px;
   font-size: 15px;
 }
-.nav-wrapper li{
-  border-right: 1px rgba(0,0,0,0.2) solid;
+
+.nav-wrapper li {
+  border-right: 1px rgba(0, 0, 0, 0.2) solid;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/components/elements/ComponentElement.vue b/src/components/elements/ComponentElement.vue
index b607b28..6d3b724 100644
--- a/src/components/elements/ComponentElement.vue
+++ b/src/components/elements/ComponentElement.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="component">
+  <div class="component" title="Double click to remove">
     <i :class="'ico '+icon"></i>
     <span class="title">{{title}}</span>
     <slot></slot>
@@ -18,19 +18,16 @@ export default {
 
 <style scoped>
     .component{
-      padding: 15px;
-      padding-top: 0;
       text-align: center;
-      display: inline-block;
-      width: 30%;
       box-sizing: border-box;
-      height: 70px;
+      width: 100%;
+      display: block;
       vertical-align: top;
     }
     .component:hover{
       background: rgba(0, 0, 0, 0.2);
       cursor: pointer;
-      color: lime;
+      color: #1b9a59;
     }
     .ico{
       font-size:  30px;
diff --git a/src/components/pages/MainAppPage.vue b/src/components/pages/MainAppPage.vue
index 2e22278..f591648 100644
--- a/src/components/pages/MainAppPage.vue
+++ b/src/components/pages/MainAppPage.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <app-menu></app-menu>
     <div id="main">
+      <app-menu></app-menu>
       <div class="container">
-        <div v-if="!isInitProject">
-          <div id="device-selector">
+        <div v-if="isInitProject">
+          <div id="device-selector" :class="(data.pages.length < 1?'inactive':'')">
             <div class="input-field">
               <select @change="changeDisplay" id="dev" v-model="currentDisplay" class="white-text">
                 <option :value="dev" v-for="(dev,i) in devices" :key="i">
                   {{ dev.name }}
-                  ({{dev.width }}x{{ dev.height }})
+                  ({{ dev.width }}x{{ dev.height }})
                 </option>
               </select>
               <label for="dev">
@@ -19,7 +19,7 @@
             </div>
             <span>
             Scale:
-          </span>
+            </span>
             <ul class="pagination">
               <li @click="changeScale(1.25)"
                   :class="'waves-effect waves-light btn btn-small '+(display.scale === 1.25?'green basic':'grey darken-4')">
@@ -43,7 +43,7 @@
             </ul>
             <span>
             Rotate:
-          </span>
+            </span>
             <button @click="changeRotate(false)"
                     :class="'waves-effect waves-light btn-small '+(!display.landscape?'green':'grey darken-4')">
               <i class="fa fa-mobile-alt"></i>
@@ -52,41 +52,26 @@
                     :class="'waves-effect waves-light btn-small '+(display.landscape?'green':'grey darken-4')">
               <i class="fa fa-mobile-alt fa-rotate-90"></i>
             </button>
+            <div id="non-visual">
+              <drop class="drop non-visual" @drop="onNonVisualDrop" :accepts-data="(n) => !isVisual(n)">
+<!--                <span v-for="(n, index) in oddDropped" :key="index">Dropped : {{ n }},&nbsp;</span>-->
+              </drop>
+            </div>
           </div>
-          <div id="mobile"
+          <div id="mobile" :class="(data.pages.length < 1?'inactive':'')"
                :style="'width:'+(display.landscape?display.height:display.width  )* display.scale+'px;height:'+(display.landscape?display.width:display.height  ) * display.scale+'px'+';background-color:'+data.project.bgColor+';color:'+data.project.textColor+' !important' ">
             <div id="dir" :style="'direction:'+(data.project.isRTL?'rtl':'ltr')">
-              <simulator type="preloader" :scale="display.scale" :properties='{"name":"preloader","padding":"90","align":"center","width":150,"height":150,"color":"default","hide":false}'></simulator>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur error ipsum placeat quam? Ad
-              alias
-              commodi debitis distinctio doloribus illo necessitatibus neque nesciunt nobis optio quo reprehenderit,
-              sed,
-              sequi voluptatum!
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur error ipsum placeat quam? Ad
-              alias
-              commodi debitis distinctio doloribus illo necessitatibus neque nesciunt nobis optio quo reprehenderit,
-              sed,
-              sequi voluptatum!
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur error ipsum placeat quam? Ad
-              alias
-              commodi debitis distinctio doloribus illo necessitatibus neque nesciunt nobis optio quo reprehenderit,
-              sed,
-              sequi voluptatum!
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur error ipsum placeat quam? Ad
-              alias
-              commodi debitis distinctio doloribus illo necessitatibus neque nesciunt nobis optio quo reprehenderit,
-              sed,
-              sequi voluptatum!
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur error ipsum placeat quam? Ad
-              alias
-              commodi debitis distinctio doloribus illo necessitatibus neque nesciunt nobis optio quo reprehenderit,
-              sed,
-              sequi voluptatum!
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur error ipsum placeat quam? Ad
-              alias
-              commodi debitis distinctio doloribus illo necessitatibus neque nesciunt nobis optio quo reprehenderit,
-              sed,
-              sequi voluptatum!
+              <div v-if="data.pages[currentPage] !== undefined && data.pages[currentPage].children.visual !== undefined">
+                <span v-for="(comp,i) in data.pages[currentPage].children.visual"
+                      :key="i" >
+                  <simulator :type="comp.type" :properties="comp" :scale="display.scale"></simulator>
+                </span>
+              </div>
+
+              <drop class="drop visual" @drop="onVisualDrop" :accepts-data="(n) => isVisual(n)"></drop>
+              <!--              <drop class="drop any" @drop="onAnyDrop" mode="cut">-->
+              <!--                <span v-for="(n, index) in anyDropped" :key="index">Dropped : {{n}},&nbsp;</span>-->
+              <!--              </drop>-->
             </div>
           </div>
         </div>
@@ -101,32 +86,13 @@
           Elements
           <i class="fa fa-cubes"></i>
         </h2>
-        <compo title="Container" icon="far fa-square"></compo>
-        <compo title="AppBar" icon="far fa-window-maximize"></compo>
-        <compo title="Image" icon="far fa-image"></compo>
-        <compo title="Icon" icon="far fa-smile"></compo>
-        <compo title="Text" icon="fas fa-font"></compo>
-        <compo title="Column" icon="fas fa-bars"></compo>
-        <compo title="Row" icon="fas fa-bars fa-rotate-90"></compo>
-        <compo title="Scaffold" icon="fa fa-vector-square"></compo>
-        <compo title="Nav" icon="far fa-window-maximize fa-rotate-180"></compo>
-        <compo title="List" icon="fa fa-list"></compo>
-        <compo title="Dropdown" icon="fa fa-prescription-bottle"></compo>
-        <compo title="Text" icon="fab fa-yoast"></compo>
-        <compo title="Button" icon="far fa-plus-square"></compo>
-        <compo title="Toggle" icon="fa fa-toggle-on"></compo>
-        <compo title="Menu" icon="fa fa-list-alt"></compo>
-        <compo title="Grid" icon="fa fa-th"></compo>
-        <compo title="Preloader" icon="fa fa-spinner"></compo>
-        <compo title="Rate" icon="fa fa-star"></compo>
-        <compo title="Calendar" icon="fa fa-calendar-alt"></compo>
-        <compo title="DatePicker" icon="fa fa-calendar-check"></compo>
-        <compo title="Map" icon="fa fa-map"></compo>
-        <compo title="Location" icon="fa fa-map-marker-alt"></compo>
-        <compo title="Slider" icon="fa fa-ellipsis-h"></compo>
-        <compo title="Timer" icon="fa fa-stopwatch"></compo>
-        <compo title="Image Picker" icon="fa fa-file-image"></compo>
-        <compo title="File Picker" icon="fa fa-folder-open"></compo>
+        <transition-group name="list" tag="div">
+          <drag v-for="(comp,n) in components" :key="n" class="drag" :data="n">
+            <compo :title="comp.title" :icon="comp.icon"></compo>
+          </drag>
+        </transition-group>
+
+        <!--        <compo title="Scaffold" icon="fa fa-vector-square"></compo>-->
 
       </div>
       <div id="properties">
@@ -134,7 +100,7 @@
           Properties
           <i class="fa fa-expand"></i>
         </h2>
-        <div v-if="!isInitProject">
+        <div v-if="isInitProject">
           <property :properties="currentProperties"></property>
         </div>
         <div v-else class="text-center">
@@ -144,12 +110,12 @@
     </div>
     <div id="pages">
       <div class="container">
-        <div v-if="!isInitProject">
+        <div v-if="isInitProject">
           <page v-for="(page,i) in data.pages" @click.native="changePage(i)" :key="i" :title="page.name"
                 :active="currentPage === i">
             <i class="fa fa-times" @click="removePage(i)"></i>
             hello {{ i }}
-            {{page.name}}
+            {{ page.name }}
           </page>
           <i class="fa fa-plus-circle" id="page-add" @click="newPage"></i>
         </div>
@@ -166,20 +132,31 @@ import page from '../elements/PageElement';
 import property from '../elements/PropertyElement';
 import compo from '../elements/ComponentElement';
 import appMenu from '../elements/AppMenuElement';
-import simulator from '../elements/Simulator'
+import simulator from '../elements/Simulator';
+import {Drag, Drop} from "vue-easy-dnd";
 // const {remote} = require("electron");
 import {fnc} from '@/assets/js/functions';
 
 export default {
   name: "MainAppPage",
-  components: {page, property, compo, appMenu, simulator},
+  components: {
+    page,
+    property,
+    compo,
+    appMenu,
+    simulator,
+    Drag,
+    Drop
+  },
   data: function () {
     return {
+      numbers: [1, 2, 3, 4, 5, 6],
       data: window.appData,
+      components: window.components,
       currentDisplay: "Nexus 5",
       currentPage: 0,
       currentProperties: {},
-      isInitProject: false,
+      // isInitProject: false,
       display: {
         name: 'Nexus 5',
         width: 1080,
@@ -191,17 +168,17 @@ export default {
     }
   }, mounted() {
 
-    if (window.appData.project.name === '') {
-      this.isInitProject = true;
-    }
     try {
       var $ = window.jQuery;
-      $("html").niceScroll();
-      $("#mobile").niceScroll({touchbehavior: true});
+      // $("#main").niceScroll();
+      // $("#mobile").niceScroll({touchbehavior: true});
       // $("#elements").niceScroll();
       $('#main select').formSelect();
 
 
+      if(this.isInitProject &&  this.data.pages.length > 0){
+        this.changePage(0);
+      }
       /*eslint-disable */
       /*eslint-enable */
     } catch (e) {
@@ -227,17 +204,18 @@ export default {
       this.data.pages.push(fnc.clone(window.defaults.page));
       let j = 0;
       let nextName = false;
-      do{
-        var currrentName = 'page' + (this.data.pages.length+j).toString();
+      do {
+        var currrentName = 'page' + (this.data.pages.length + j).toString();
         nextName = false;
-        for( const page of this.data.pages) {
-          if (page.name === currrentName){
+        for (const page of this.data.pages) {
+          if (page.name === currrentName) {
             j++;
-            nextName= true;
+            nextName = true;
           }
         }
-      }while (nextName)
-      this.data.pages[this.data.pages.length - 1].name = currrentName ;
+      } while (nextName)
+      this.data.pages[this.data.pages.length - 1].name = currrentName;
+      this.changePage(this.data.pages.length - 1);
     },
     changePage: function (i) {
       this.currentPage = i;
@@ -247,9 +225,9 @@ export default {
       var self = this;
       window.alertify.confirm('Are you sure to remove page?', 'Remove confirm', function () {
             let pages = [];
-            for( const j in self.data.pages) {
-              let page = self.data.pages[j] ;
-              if (i != j){
+            for (const j in self.data.pages) {
+              let page = self.data.pages[j];
+              if (i != j) {
                 pages.push(page);
               }
             }
@@ -261,6 +239,37 @@ export default {
             window.alertify.error('Cancel')
           });
     },
+    onVisualDrop(event) {
+      // this.evenDropped.push(event.data);
+      try {
+        var component = window.components[event.data];
+        var properties = eval(component.data);
+        if (properties === undefined){
+          window.alertify.warning('Invalid component',15);
+        }else{
+
+          this.data.pages[this.currentPage].children.visual.push(properties);
+        }
+      } catch(e) {
+        console.log(e.message);
+        window.alertify.warning('unknown error on load component');
+      }
+
+    },
+    onNonVisualDrop(event) {
+      // this.oddDropped.push(event.data);
+    },
+    remove(n) {
+      let index = this.numbers.indexOf(n);
+      this.numbers.splice(index, 1);
+    },
+    isVisual:function (n) {
+      return window.components[n].visual;
+    },
+  },computed:{
+    isInitProject:function () {
+     return  window.appData.project.name !== '';
+    }
   }
 }
 </script>
@@ -313,11 +322,12 @@ export default {
   background: white;
   /*width: 300px;*/
   /*height: 600px;*/
-  margin: auto;
+  margin: 10px auto 10px auto;
   border-radius: 15px;
   border: 10px solid black;
   border-top-width: 30px;
   border-bottom-width: 30px;
+  overflow-y: scroll;
 }
 
 #main .container {
@@ -380,8 +390,17 @@ export default {
   padding-bottom: 5px;
 }
 
+#non-visual {
+  border: 1px solid #20252b;
+  background: #1e2329;
+  margin-top: 15px;
+  min-height: 20vh;
+  overflow: hidden;
+  max-width: 315px;
+}
+
 .logo {
-  width: 55%;
+  width: 45%;
 }
 
 .logo-sm {