diff --git a/public/js/legacy/widgets/form/form.js b/public/js/legacy/widgets/form/form.js
index 5ad2d2e2a5..a0e4338590 100644
--- a/public/js/legacy/widgets/form/form.js
+++ b/public/js/legacy/widgets/form/form.js
@@ -562,8 +562,8 @@ _f.Frm.prototype.refresh_fields = function() {
 	}
 
 	// refresh sections
-	$.each(this.sections, function(i, f) {
-		f.refresh(true);
+	$.each(this.sections, function(i, section) {
+		section.toggle(!(section[0].df && section[0].df.hidden));
 	})
 
 	// cleanup activities after refresh
diff --git a/public/js/wn/form/grid.js b/public/js/wn/form/grid.js
index 9199149815..9666977e4a 100644
--- a/public/js/wn/form/grid.js
+++ b/public/js/wn/form/grid.js
@@ -22,18 +22,12 @@ wn.ui.form.Grid = Class.extend({
 		var me = this;
 		$(this.parent).find(".grid-row").remove();
 		$.each(this.get_data() || [], function(ri, d) {
-			var panel = $('<div class="panel grid-row">').appendTo(me.parent);
-			$('<div class="panel-heading">Row #'+ ri +'</div>').appendTo(panel);
-			row = $('<div class="row">').appendTo(panel);
-			$.each(me.docfields, function(ci, df) {
-				if(!df.hidden) {
-					var fieldwrapper = $('<div class="col-span-3" \
-						style="height: 60px; overflow: hidden;">').appendTo(row);
-					var fieldobj = make_field(df, me.df.options, 
-						fieldwrapper.get(0), this.frm);
-					fieldobj.docname = d.name;
-					fieldobj.refresh();
-				}
+			new wn.ui.form.GridRow({
+				parent: me.parent,
+				parent_df: me.df,
+				docfields: me.docfields,
+				doc: d,
+				frm: me.frm
 			});
 		})
 	},
@@ -45,7 +39,13 @@ wn.ui.form.Grid = Class.extend({
 		});
 		data.sort(function(a, b) { return a.idx > b.idx ? 1 : -1 });
 		return data;
-	}
+	},
+	set_column_disp: function() {
+		// return
+	},
+	get_field: function(fieldname) {
+		return {};
+	},
 	// make_table: function() {
 	// 	$(this.parent).find("table").remove();
 	// 	this.table = $("<table class='table table-bordered'>\
@@ -83,4 +83,46 @@ wn.ui.form.Grid = Class.extend({
 	// get_field: function(fieldname) {
 	// 	return {}
 	// }
-})
\ No newline at end of file
+});
+
+wn.ui.form.GridRow = Class.extend({
+	init: function(opts) {
+		$.extend(this, opts);
+		this.show = false;
+		this.make();
+	},
+	make: function() {
+		var me = this;
+		var panel = $('<div class="panel grid-row">')
+			.appendTo(me.parent)
+			.css({"cursor": "pointer"})
+			.click(function() {
+				me.toggle();
+			});
+		$('<div class="panel-heading">Row #'+ this.doc.idx +'</div>').appendTo(panel);
+		this.row = $('<div class="row">').appendTo(panel)
+			.css({"display":"none"});
+	},
+	toggle: function(show) {
+		this.show = show===undefined ? 
+			show = !this.show :
+			show
+		this.row.toggle(this.show);
+		this.show ? 
+			this.render_form() :
+			$(this.row).empty();
+	},
+	render_form: function() {
+		var me = this;
+		$.each(me.docfields, function(ci, df) {
+			if(!df.hidden) {
+				var fieldwrapper = $('<div class="col-span-3" \
+					style="height: 60px; overflow: hidden;">').appendTo(me.row);
+				var fieldobj = make_field(df, me.parent_df.options, 
+					fieldwrapper.get(0), me.frm);
+				fieldobj.docname = me.doc.name;
+				fieldobj.refresh();
+			}
+		});
+	}
+});
\ No newline at end of file
diff --git a/public/js/wn/form/layout.js b/public/js/wn/form/layout.js
index f0f4a038a2..32e418d065 100644
--- a/public/js/wn/form/layout.js
+++ b/public/js/wn/form/layout.js
@@ -53,6 +53,7 @@ wn.ui.form.Layout = Class.extend({
 		}
 		this.section = $('<div class="row">').appendTo(this.wrapper);
 		this.frm.sections.push(this.section);
+		this.section[0].df = df;
 		if(df) {
 			if(df.label) {
 				$('<div class="col-span-12"><h4>' + df.label + "</h4></div>").appendTo(this.section);
diff --git a/public/js/wn/ui/appframe.js b/public/js/wn/ui/appframe.js
index 42bb210996..2836e55c4d 100644
--- a/public/js/wn/ui/appframe.js
+++ b/public/js/wn/ui/appframe.js
@@ -74,12 +74,18 @@ wn.ui.AppFrame = Class.extend({
 		var module_info = wn.modules[module];
 		if(module_info) {
 			this.$w.find(".title-icon").html('<i class="'
-				+module_info.icon+' text-muted"></i> ')
+				+module_info.icon+'"></i> ')
 				.css({"cursor":"pointer"})
 				.attr("module-name", module)
 				.click(function() {
 					wn.set_route(wn.modules[$(this).attr("module-name")].link);
 				});
+			this.$w.prepend("<div>").css({
+				"border-top": "7px solid " + module_info.color
+			});
+			// this.$w.find(".title-area").css({
+			// 	"border-left": "5px solid " + module_info.color
+			// })
 		}
 	},