diff --git a/bricks/.DS_Store b/bricks/.DS_Store
index 1488c89..412be8b 100755
Binary files a/bricks/.DS_Store and b/bricks/.DS_Store differ
diff --git a/bricks/conform.js b/bricks/conform.js
index cfb8efb..8cee484 100644
--- a/bricks/conform.js
+++ b/bricks/conform.js
@@ -1,12 +1,13 @@
 var bricks = window.bricks || {};
 bricks.Conform = class extends bricks.BMessage {
 	constructor(opts){
-		opts.auto_dismiss = false;
+		opts.auto_open = true;
+		opts.auto_close = false;
 		super(opts);
-		this.create_btns();
+		this.create_toolbar();
 	}
-	create_tooolbar(){
-		desc = {
+	create_toolbar(){
+		var desc = {
 			tools:[
 				bricks.extend({
 					"name":"conform",
@@ -14,13 +15,13 @@ bricks.Conform = class extends bricks.BMessage {
 					"label":'Conform'
 				}, this.opts.conform||{}),
 				bricks.extend({
-					"name":"cancel",
+					"name":"discard",
 					"icon":bricks_resource('imgs/cancel.png'),
 					"label":"Discard"
 				}, this.opts.discard||{})
 			]
 		}
-		w = new bricks.IconTextBar(desc);
+		var w = new bricks.IconTextBar(desc);
 		w.bind('conform', this.conform_hndl.bind(this));
 		w.bind('discard', this.discard_hndl.bind(this));
 		if (!w) return;
@@ -32,7 +33,6 @@ bricks.Conform = class extends bricks.BMessage {
 	}
 	discard_hndl(event){
 		this.dismiss();
-		this.dispatch('discard');
 	}
 }
 
diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index 0f21424..70a4c59 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -32,6 +32,7 @@ body {
 	width: 30%;
 	height: 30%;
 	background-color: #f0f0f0;
+	color:#222222;
 	border: 1px solid #ccc;
 	border-radius: 5px;
 	margin-bottom: 10px;
@@ -49,6 +50,12 @@ body {
 
 .message>.title {
 	background-color: #3030f0;
+	color: #e8e8e8;
+}
+
+.error>.title {
+	background-color: #f03030;
+	color: #e8e8e8;
 }
 
 .vscroll {
@@ -63,10 +70,6 @@ body {
 	overflow:scroll;
 }
 
-.error>.title {
-	background-color: #f03030;
-}
-
 .vcontainer {
 	display: flex;
 	flex-direction: column;
diff --git a/bricks/floaticonbar.js b/bricks/floaticonbar.js
index 2b37efe..232b6f3 100644
--- a/bricks/floaticonbar.js
+++ b/bricks/floaticonbar.js
@@ -24,7 +24,8 @@ bricks.IconBar = class extends bricks.HBox {
 		this.height_int = 0;
 		for (var i=0;i<tools.length;i++){
 			var w = this.build_item(tools[i]);
-			w.set_style('margin', this.opts.margin || '10px');
+			w.set_style('margin-left', this.opts.margin || '10px');
+			w.set_style('margin-right', this.opts.margin || '10px');
 			if (tools[i].name){
 				w.widget_id = tools[i].name;
 			}
@@ -100,7 +101,6 @@ bricks.FloatIconBar = class extends bricks.HBox {
 	constructor(opts){
 		super(opts);
 		this.float_w = new bricks.Icon({url:bricks_resource('imgs/float-out.png')});
-		this.float_w.set_style('margin', '10px');
 		this.float_w.bind('mousemove', this.show_icons.bind(this));
 		this.add_widget(this.float_w);
 		this.icons_box = this.build_bar(opts);
diff --git a/bricks/message.js b/bricks/message.js
index 3a90aaf..0bcee2f 100644
--- a/bricks/message.js
+++ b/bricks/message.js
@@ -17,7 +17,7 @@ bricks.BPopup = class extends bricks.VBox {
 		this.title = opts.title|| 'Title';
 		this.archor = opts.archor || 'cc';
 		this.timeout = opts.timeout;
-		this.set_css('message');
+		this.panel.set_css('message');
 		this.build();
 		archorize(this.dom_element, this.archor);
 	}
@@ -73,9 +73,10 @@ bricks.BMessage = class extends bricks.Modal {
 	}
 	*/
 	constructor(opts){
+		opts.auto_open = true;
 		super(opts);
 		this.create_message_widget();
-		this.set_css('message');
+		this.panel.set_css('message');
 	}
 	create_message_widget(){
 		this.message_w = new bricks.VBox({width:'100%',height:'100%'});
@@ -83,7 +84,7 @@ bricks.BMessage = class extends bricks.Modal {
 		this.message_w.add_widget(w);
 		var t = new bricks.Text({otext:this.opts.message,
 					wrap:true,
-					halign:'center',
+					halign:'middle',
 					i18n:true});
 		w.add_widget(t);
 		this.add_widget(this.message_w);
@@ -93,7 +94,7 @@ bricks.BMessage = class extends bricks.Modal {
 bricks.BError = class extends bricks.BMessage {
 	constructor(opts){
 		super(opts);
-		this.set_css('error');
+		this.panel.set_css('error');
 	}
 }
 
diff --git a/bricks/modal.js b/bricks/modal.js
index fbb1c9b..8352699 100755
--- a/bricks/modal.js
+++ b/bricks/modal.js
@@ -6,6 +6,7 @@ bricks.Modal = class extends bricks.Layout {
 	constructor(options){
 		/*
 		{
+			target: string or Layout
 			auto_open:
 			auto_close:
 			org_index:
@@ -32,6 +33,18 @@ bricks.Modal = class extends bricks.Layout {
 		this.create_title();
 		this.content = new bricks.Filler({width:'100%'});
 		this.panel.add_widget(this.content);
+		this.target_w = null;
+		if (this.target){
+			if (typeof this.target === typeof ''){
+				this.target_w = bricks.getWidgetById(this.target, bricks.Body);
+			} else {
+				this.target_w = this.target;
+			}
+		}
+		if (! this.target_w){
+			this.target_w = bricks.Body;
+		}
+		this.target_w.add_widget(this);
 	}
 	create_title(){
 		this.title_box = new bricks.HBox({width:'100%', height:'auto'});
diff --git a/examples/conform.ui b/examples/conform.ui
new file mode 100644
index 0000000..d0e9ebc
--- /dev/null
+++ b/examples/conform.ui
@@ -0,0 +1,12 @@
+
+{
+	"id":"uuuu",
+	"widgettype":"Conform",
+	"options":{
+		"width":"40%",
+		"height":"40%",
+		"archor":"cc",
+		"title":"Test Title",
+		"message":"This is a test message"
+	}
+}
diff --git a/examples/message.ui b/examples/message.ui
index cebeeeb..e5ea83b 100644
--- a/examples/message.ui
+++ b/examples/message.ui
@@ -1,83 +1,12 @@
 
 {
-	"widgettype":"Tree",
+	"id":"uuuu",
+	"widgettype":"Message",
 	"options":{
-		"idField":"id",
-		"textField":"text",
-		"data":[
-			{
-				"id":1,
-				"text":"node1",
-				"is_leaf":false,
-				"children":[
-					{
-						"id":11,
-						"text":"node11",
-						"is_leaf":false,
-						"children":[
-							{
-								"id":112,
-								"text":"node.12",
-								"is_leaf":false,
-								"children":[
-									{
-										"id":1112,
-										"text":"node1112",
-										"is_leaf":true
-									},
-									{
-										"id":1113,
-										"text":"node113",
-										"is_leaf":true
-									}
-								]
-							},
-							{
-								"id":113,
-								"text":"node113",
-								"is_leaf":true
-							}
-						]
-					},
-					{
-						"id":12,
-						"text":"node12",
-						"is_leaf":true
-					},
-					{
-						"id":13,
-						"text":"node13",
-						"is_leaf":true
-					}
-				]
-			},
-			{
-				"id":2,
-				"text":"node2",
-				"is_leaf":false,
-				"children":[
-					{
-						"id":21,
-						"text":"node21",
-						"is_leaf":true
-					},
-					{
-						"id":22,
-						"text":"node22",
-						"is_leaf":true
-					},
-					{
-						"id":23,
-						"text":"node23",
-						"is_leaf":true
-					}
-				]
-			},
-			{
-				"id":3,
-				"text":"node3",
-				"is_leaf":true
-			}
-		]
+		"width":"40%",
+		"height":"40%",
+		"archor":"cc",
+		"title":"Test Title",
+		"message":"This is a test message"
 	}
 }
diff --git a/examples/modal.json b/examples/modal.json
index 3668ecc..c72734a 100644
--- a/examples/modal.json
+++ b/examples/modal.json
@@ -2,11 +2,12 @@
 	"id":"mymodal",
 	"widgettype":"Modal",
 	"options":{
+		"title":"Test Modal",
 		"auto_close":true,
 		"auto_open":true,
 		"width":"700px",
 		"height":"400px",
-		"archor":"cl"
+		"archor":"cc"
 	},
 	"subwidgets":[
 		{