diff --git a/src/canvas/main.js b/src/canvas/main.js
index 1d98d7ab8..2829e61d4 100644
--- a/src/canvas/main.js
+++ b/src/canvas/main.js
@@ -116,6 +116,34 @@ define(function(require) {
 				return	this.CanvasView.render().el;
 			},
 
+			/**
+			 * Get frame position
+			 * @return {Object}
+			 * @private
+			 */
+			getOffset: function() {
+				var frameOff = this.offset(this.getFrameEl());
+				var canvasOff = this.offset(this.getElement());
+				return {
+					top: frameOff.top - canvasOff.top,
+					left: frameOff.left - canvasOff.left
+				};
+			},
+
+			/**
+       * Get the offset of the element
+       * @param  {HTMLElement} el
+       * @return {Object}
+       * @private
+       */
+      offset: function(el){
+        var rect = el.getBoundingClientRect();
+        return {
+          top: rect.top + document.body.scrollTop,
+          left: rect.left + document.body.scrollLeft
+        };
+      },
+
 			/**
 			 * Returns wrapper element
 			 * @return {HTMLElement}
diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 36d4a4e27..3cb524410 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -222,7 +222,6 @@ define(function() {
 			 * @private
 			 */
 			onFrameScroll: function(e){
-				console.log('scrolling');
 				if(this.cacheEl)
 					this.updateBadge(this.cacheEl);
 			},
diff --git a/src/demo.js b/src/demo.js
index 0566fca61..fa3b8aa63 100644
--- a/src/demo.js
+++ b/src/demo.js
@@ -22,13 +22,13 @@ require(['config/require-config'], function() {
 													id: 	'undo',
 													run: 	function(editor, sender){
 														sender.set('active',false);
-														editor.UndoManager.undo();
+														editor.UndoManager.undo(true);
 													}
 												},{
 													id: 	'redo',
 													run: 	function(editor, sender){
 														sender.set('active',false);
-														editor.UndoManager.redo();
+														editor.UndoManager.redo(true);
 													}
 												},{
 													id: 	'clean-all',
@@ -57,7 +57,7 @@ require(['config/require-config'], function() {
 					      				   { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
 				      				   ]
 			},
-/*
+
 panels: {
         defaults    : [{
           id    : 'commands',
@@ -65,8 +65,38 @@ panels: {
             id        : 'selcomp',
             className : 'fa fa fa-mouse-pointer',
             command   : 'select-comp',
-          }]}]},
-*/
+          },{
+            id        : 'create',
+            className : 'fa fa-plus-square-o icon-add-comp',
+            command   : 'create-comp',
+          },{
+            id: 'image-comp',
+            className: 'fa fa-picture-o',
+            dragDrop: 1,
+            options:  {
+              content: '<div style="width:100%; padding:7px">'+
+                          '<div class="redbg" style="width:33.333%; min-height:75px; padding:7px; float:left;"></div>' +
+                          '<div style="width:33.333%; min-height:75px; padding:7px; float:left; background:blue"></div>' +
+                          '<div style="width:33.333%; min-height:75px; padding:7px; float:left; background:blue"></div>' +
+                          '<div style="clear:both"></div>' +
+                        '</div>'
+            },
+          }]
+        },{
+          id  : 'options',
+          buttons : [
+                     { id: 'visibility',  className: 'fa fa-eye',   command: 'sw-visibility',   active: true, context: 'sw-visibility', attributes: { title: 'View components' }, },
+                     { id: 'export',    className: 'fa fa-code',  command: 'export-template', attributes: { title: 'View code' }, },
+                     { id: 'view-github', className: 'fa fa-github',  command: 'open-github', attributes: { title: 'View on Github' }, },
+          ],
+        },{
+          id  : 'views',
+          buttons : [{ id: 'open-sm',   className: 'fa fa-paint-brush', command: 'open-sm',   active: true, attributes: { title: 'Open Style Manager' },},
+                     { id: 'open-layers', className: 'fa fa-bars',    command: 'open-layers', attributes  : { title: 'Open Layer Manager' }, },
+                     { id: 'open-blocks', className: 'fa fa-th-large',    command: 'open-blocks', attributes  : { title: 'Open Blocks' }, }],
+        }]},
+
+
 /*
 			panels: {
 				defaults		: [{
@@ -155,9 +185,9 @@ panels: {
 					       	   { id: 'open-layers', className: 'fa fa-bars', 		command: 'open-layers',	attributes	: { title: 'Open Layer Manager' }, },],
 				}],
 			},
-
 */
 
+
 			styleManager : {
 				sectors: [{
 					name: 'General',
diff --git a/src/panels/view/ButtonView.js b/src/panels/view/ButtonView.js
index c3c73f8c0..a10a64217 100644
--- a/src/panels/view/ButtonView.js
+++ b/src/panels/view/ButtonView.js
@@ -8,7 +8,7 @@ function(Backbone, require) {
 		tagName: 'span',
 
 		initialize: function(o){
-			_.bindAll(this, 'startTimer', 'stopTimer', 'showButtons', 'hideButtons','closeOnKeyPress','onDrop');
+			_.bindAll(this, 'startTimer', 'stopTimer', 'showButtons', 'hideButtons','closeOnKeyPress','onDrop', 'initSorter', 'stopDrag');
 			var cls = this.model.get('className');
 			this.config = o.config || {};
 			this.em = this.config.em || {};
@@ -35,24 +35,34 @@ function(Backbone, require) {
 
 			this.events = {};
 
-			if(this.model.get('dragDrop'))
+			if(this.model.get('dragDrop')){
 				this.events.mousedown = 'initDrag';
-			else
+				this.em.on('loaded', this.initSorter);
+			}else
 				this.events.click = 'clicked';
 			this.delegateEvents();
+		},
 
+		initSorter: function(){
 			if(this.em.Canvas){
-				this.canvasEl = this.em.Canvas.getElement();
+				var canvas = this.em.Canvas;
+				this.canvasEl = canvas.getBody();
 				this.sorter = new this.em.Utils.Sorter({
 					container: this.canvasEl,
+					placer: canvas.getPlacerEl(),
 					containerSel: '*',
 					itemSel: '*',
 					pfx: this.ppfx,
 					onMove: this.onDrag,
 					onEndMove: this.onDrop,
-					direction: 'auto',
+					document: canvas.getFrameEl().contentDocument,
+					direction: 'a',
+					wmargin: 1,
 					nested: 1,
 				});
+				var offDim = canvas.getOffset();
+				this.sorter.offTop = offDim.top;
+				this.sorter.offLeft = offDim.left;
 			}
 		},
 
@@ -65,6 +75,16 @@ function(Backbone, require) {
 			this.sorter.startSort(this.el);
 			this.sorter.setDropContent(this.model.get('options').content);
 			this.canvasEl.style.cursor = 'grabbing';
+			$(document).on('mouseup', this.stopDrag);
+		},
+
+		/**
+		 * Stop dragging
+		 * @private
+		 */
+		stopDrag: function(){
+			$(document).off('mouseup', this.stopDrag);
+			this.sorter.endMove();
 		},
 
 		/**
@@ -126,7 +146,7 @@ function(Backbone, require) {
 		startTimer: function()
 		{
 			this.timeout = setTimeout(this.showButtons, this.config.delayBtnsShow);
-			$(document).on('mouseup', 	this.stopTimer);
+			$(document).on('mouseup', this.stopTimer);
 		},
 
 		/**
diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
index 359596513..c907f5560 100644
--- a/src/utils/Sorter.js
+++ b/src/utils/Sorter.js
@@ -123,7 +123,7 @@ define(['backbone'],
         }
 
         this.$el.on('mousemove',this.onMove);
-        $(this.document).on('keypress',this.rollback);
+        $(document).on('keypress',this.rollback);
       },
 
       /**
@@ -479,7 +479,8 @@ define(['backbone'],
           var opts = {at: index, noIncrement: 1};
           if(!this.dropContent){
             modelTemp = targetCollection.add({}, opts);
-            modelToDrop = model.collection.remove(model);
+            if(model)
+              modelToDrop = model.collection.remove(model);
 
           }else{
             modelToDrop = this.dropContent;
@@ -503,6 +504,7 @@ define(['backbone'],
        * @param {Bool} Indicates if rollback in anycase
        * */
       rollback: function(e){
+        $(document).off('keypress',this.rollback);
         var key = e.which || e.keyCode;
         if(key == 27){
           this.moved = false;
diff --git a/styles/css/main.css b/styles/css/main.css
index 153bb6971..9b758e30c 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2642,12 +2642,14 @@ $fontColorActive: #4f8ef7;
 /*************  CANVAS  ****************/
 .wte-cv-canvas {
   background-color: rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
   position: absolute;
-  width: 83%;
+  width: 85%;
   height: 100%;
-  top: 0;
-  left: 2%;
+  bottom: 0;
+  left: 0;
   overflow: hidden;
+  padding-top: 40px;
   z-index: 1;
   /* This simulate body behaviour */ }
   .wte-cv-canvas > iframe {
@@ -2823,18 +2825,13 @@ ol.example li.placeholder:before {
   text-align: center;
   z-index: 3; }
   .wte-pn-panel#wte-pn-commands, .wte-pn-panel#wte-pn-options2 {
-    min-width: 35px;
-    height: 100%;
-    width: 2%;
+    width: 85%;
     left: 0;
+    top: 0;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
   .wte-pn-panel#wte-pn-options {
-    min-width: 35px;
-    height: 100%;
-    width: 2%;
-    left: 0;
-    bottom: 0;
-    height: auto; }
+    right: 15%;
+    top: 0; }
   .wte-pn-panel#wte-pn-options2 {
     bottom: 150px;
     height: auto; }
@@ -2855,6 +2852,11 @@ ol.example li.placeholder:before {
     overflow: auto;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
 
+.wte-pn-buttons {
+  align-items: center;
+  display: flex;
+  justify-content: center; }
+
 .wte-pn-btn, .wte-btnt {
   box-sizing: border-box;
   height: 30px;
@@ -2863,7 +2865,7 @@ ol.example li.placeholder:before {
   background-color: transparent;
   border: none;
   font-size: 18px;
-  margin-bottom: 5px;
+  margin-right: 5px;
   border-radius: 2px;
   cursor: pointer;
   padding: 5px;
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index 0ab66d255..597216d64 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -138,11 +138,13 @@ $imageCompDim:	50px;
 /*************  CANVAS  ****************/
 .#{$cv-prefix}canvas {
   background-color: rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
   position: absolute;
-  width: 83%;
+  width: 85%;
   height: 100%;
-  top: 0; left: 2%;
+  bottom: 0; left: 0;
   overflow: hidden;
+  padding-top: 40px;
   z-index:1;
 
   > iframe {
@@ -321,18 +323,13 @@ $leftWidth: 15%;
   z-index:3;
 
   &##{$pn-prefix}commands{
-  	min-width: 35px;
-    height: 100%;
-    width: 2%; left:0;
+    width: 85%;
+    left:0; top: 0;
     box-shadow: 0 0 5px $mainDkColor;
   }
 
   &##{$pn-prefix}options{
-  	min-width: 35px;
-    height: 100%;
-    width: 2%; left:0;
-  	bottom: 0;
-  	height: auto;
+  	right: 15%; top: 0;
   }
 
   &##{$pn-prefix}options2{
@@ -364,6 +361,12 @@ $leftWidth: 15%;
   }
 }
 
+.#{$pn-prefix}buttons{
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
 .#{$pn-prefix}btn, .#{$app-prefix}btnt{
   @extend .#{$app-prefix}color-main;
 	box-sizing: border-box;
@@ -372,7 +375,7 @@ $leftWidth: 15%;
 	background-color: transparent;
 	border:none;
 	font-size: 18px;
-	margin-bottom: 5px;
+	margin-right: 5px;
 	border-radius: 2px;
 	cursor: pointer;
 	padding: 5px;