diff --git a/accounts/page/accounts_browser/accounts_browser.html b/accounts/page/accounts_browser/accounts_browser.html
deleted file mode 100644
index 109d8cc..0000000
--- a/accounts/page/accounts_browser/accounts_browser.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<div class="appframe col col-lg-12">
-	<div class="appframe-area"></div>
-	<div class="layout-main">
-		<div class="tree-area"></div>
-		<hr>
-		<div class="well">
-			<h4>Quick Help</h4>
-			<ol>
-			<li>To add child nodes, explore tree and click on the node under which you want to add more nodes.
-			<li>Accounting Entries can be made against leaf nodes, called <b>Ledgers</b>. Entries against <b>Groups</b> are not allowed.
-			<li>Please do NOT create Account (Ledgers) for Customers and Suppliers. They are created directly from the Customer / Supplier masters.
-			<li><b>To create a Bank Account:</b> Go to the appropriate group (usually Application of Funds > Current Assets > Bank Accounts) and create a new Account Ledger (by clicking on Add Child) of type "Bank or Cash"
-			<li><b>To create a Tax Account:</b> Go to the appropriate group (usually Source of Funds > Current Liabilities > Taxes and Duties) and create a new Account Ledger (by clicking on Add Child) of type "Tax" and do mention the Tax rate.
-			</ol>
-			<p>Please setup your chart of accounts before you start Accounting Entries</p>
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/accounts/page/accounts_browser/accounts_browser.js b/accounts/page/accounts_browser/accounts_browser.js
index ede10e6..534201a 100644
--- a/accounts/page/accounts_browser/accounts_browser.js
+++ b/accounts/page/accounts_browser/accounts_browser.js
@@ -21,9 +21,37 @@
 // see ledger
 
 pscript['onload_Accounts Browser'] = function(wrapper){
-	wrapper.appframe = new wn.ui.AppFrame($(wrapper).find('.appframe-area'));
-	wrapper.appframe.add_home_breadcrumb()
-	wrapper.appframe.add_module_icon("Accounts")
+	wn.ui.make_app_page({
+		parent: wrapper,
+		single_column: true
+	})
+
+	wrapper.appframe.add_module_icon("Accounts");
+
+	var main = $(wrapper).find(".layout-main"),
+		chart_area = $("<div>")
+			.css({"margin-bottom": "15px"})
+			.appendTo(main),
+		help_area = $('<div class="well">\
+		<h4>Quick Help</h4>\
+		<ol>\
+		<li>To add child nodes, explore tree and click on the node under which you \
+			want to add more nodes.\
+		<li>Accounting Entries can be made against leaf nodes, called <b>Ledgers</b>.\
+		 	Entries against <b>Groups</b> are not allowed.\
+		<li>Please do NOT create Account (Ledgers) for Customers and Suppliers. \
+			They are created directly from the Customer / Supplier masters.\
+		<li><b>To create a Bank Account:</b> Go to the appropriate group \
+			(usually Application of Funds > Current Assets > Bank Accounts)\
+			and create a new Account Ledger (by clicking on Add Child) of \
+			type "Bank or Cash"\
+		<li><b>To create a Tax Account:</b> Go to the appropriate group \
+			(usually Source of Funds > Current Liabilities > Taxes and Duties) \
+			and create a new Account Ledger (by clicking on Add Child) of type\
+			 "Tax" and do mention the Tax rate.\
+		</ol>\
+		<p>Please setup your chart of accounts before you start Accounting Entries</p>\
+	</div>').appendTo(main);
 	
 	if (wn.boot.profile.can_create.indexOf("Company") !== -1) {
 		wrapper.appframe.add_button('New Company', function() { newdoc('Company'); },
@@ -35,13 +63,13 @@
 		}, 'icon-refresh');
 
 	// company-select
-	wrapper.$company_select = $('<select class="accbrowser-company-select"></select>')
+	wrapper.$company_select = wrapper.appframe.add_select("Company", [])
 		.change(function() {
 			var ctype = wn.get_route()[1] || 'Account';
-			erpnext.account_chart = new erpnext.AccountsChart(ctype, $(this).val(), wrapper);
+			erpnext.account_chart = new erpnext.AccountsChart(ctype, $(this).val(), 
+				chart_area.get(0));
 			pscript.set_title(wrapper, ctype, $(this).val());
 		})
-		.appendTo(wrapper.appframe.$w.find('.appframe-toolbar'));
 		
 	// load up companies
 	wn.call({
@@ -77,7 +105,7 @@
 
 erpnext.AccountsChart = Class.extend({
 	init: function(ctype, company, wrapper) {
-		$(wrapper).find('.tree-area').empty();
+		$(wrapper).empty();
 		var me = this;
 		me.ctype = ctype;
 		me.can_create = wn.model.can_create(this.ctype);
@@ -87,7 +115,7 @@
 		
 		me.company = company;
 		this.tree = new wn.ui.Tree({
-			parent: $(wrapper).find('.tree-area'), 
+			parent: $(wrapper), 
 			label: company,
 			args: {ctype: ctype, comp: company},
 			method: 'accounts.page.accounts_browser.accounts_browser.get_children',
diff --git a/home/page/activity/activity.css b/home/page/activity/activity.css
index f3988b2..34562cb 100644
--- a/home/page/activity/activity.css
+++ b/home/page/activity/activity.css
@@ -1,20 +1,20 @@
-#activity-list .label {
+#page-activity .label {
 	display: inline-block;
 	width: 100px;
 	margin-right: 7px;
 }
 
-#activity-list .label-info {
+#page-activity .label-info {
 	cursor: pointer;
 }
 
-#activity-list .user-info {
+#page-activity .user-info {
 	float: right;
 	color: #777;
 	font-size: 10px;
 }
 
-#activity-list .date-sep {
+#page-activity .date-sep {
 	margin-bottom: 11px;
 	padding: 5px 0px;
 	border-bottom: 1px solid #aaa;
diff --git a/home/page/activity/activity.html b/home/page/activity/activity.html
deleted file mode 100644
index 8b67d3c..0000000
--- a/home/page/activity/activity.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="appframe col col-lg-12">
-	<div class="layout-appframe"></div>
-	<div class="layout-main">
-		<div id="activity-list">
-		</div>		
-	</div>
-</div>
\ No newline at end of file
diff --git a/home/page/activity/activity.js b/home/page/activity/activity.js
index 3443cc2..cf7a06f 100644
--- a/home/page/activity/activity.js
+++ b/home/page/activity/activity.js
@@ -1,13 +1,15 @@
 wn.pages['activity'].onload = function(wrapper) {
-	wrapper.appframe = new wn.ui.AppFrame($(wrapper).find('.layout-appframe'));
-	wrapper.appframe.add_home_breadcrumb();
-	wrapper.appframe.add_breadcrumb(wn.modules["Activity"].icon);
-	wrapper.appframe.title('Activity');
+	wn.ui.make_app_page({
+		parent: wrapper,
+		title: "Activity",
+		single_column: true
+	})
+	wrapper.appframe.add_module_icon("Activity");
 	
 	var list = new wn.ui.Listing({
 		appframe: wrapper.appframe,
 		method: 'home.page.activity.activity.get_feed',
-		parent: $('#activity-list'),
+		parent: $(wrapper).find(".layout-main"),
 		render_row: function(row, data) {
 			new erpnext.ActivityFeed(row, data);
 		}
diff --git a/selling/page/sales_browser/sales_browser.html b/selling/page/sales_browser/sales_browser.html
deleted file mode 100644
index 19c7503..0000000
--- a/selling/page/sales_browser/sales_browser.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="appframe col col-lg-12">
-	<div class="appframe-area"></div>
-	<div class="layout-main-section">
-		<div class="tree-area"></div>
-	</div>
-	<div class="layout-side-section">
-		<div class="help">To add child nodes, explore tree and click on the node under which you want to add more nodes.
-		</div>
-	</div>
-	<div class="clear"></div>
-</div>
\ No newline at end of file
diff --git a/selling/page/sales_browser/sales_browser.js b/selling/page/sales_browser/sales_browser.js
index 60bb1fd..ed13f9d 100644
--- a/selling/page/sales_browser/sales_browser.js
+++ b/selling/page/sales_browser/sales_browser.js
@@ -15,14 +15,22 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 pscript['onload_Sales Browser'] = function(wrapper){
-	wrapper.appframe = new wn.ui.AppFrame($(wrapper).find('.appframe-area'));
-	wrapper.appframe.add_home_breadcrumb()
+	wn.ui.make_app_page({
+		parent: wrapper,
+	})
+	
 	wrapper.appframe.add_module_icon("Selling")
 	
 	wrapper.appframe.add_button('Refresh', function() {  
 			wrapper.make_tree();
 		}, 'icon-refresh');
 
+
+	$(wrapper)
+		.find(".layout-side-section")
+		.html('<div class="text-muted">Click on a link to get options to expand \
+		 	get options Add / Edit / Delete.</div>')
+
 	wrapper.make_tree = function() {
 		var ctype = wn.get_route()[1] || 'Territory';
 		wn.call({
@@ -30,7 +38,13 @@
 			args: {ctype: ctype},
 			callback: function(r) {
 				var root = r.message[0]["value"];
-				erpnext.sales_chart = new erpnext.SalesChart(ctype, root, wrapper);
+				erpnext.sales_chart = new erpnext.SalesChart(ctype, root, 
+					$(wrapper)
+						.find(".layout-main-section")
+						.css({
+							"min-height": "300px",
+							"padding-bottom": "25px"
+						}));
 			}
 		});
 	}
@@ -50,12 +64,12 @@
 };
 
 erpnext.SalesChart = Class.extend({
-	init: function(ctype, root, wrapper) {
-		$(wrapper).find('.tree-area').empty();
+	init: function(ctype, root, parent) {
+		$(parent).empty();
 		var me = this;
 		me.ctype = ctype;
 		this.tree = new wn.ui.Tree({
-			parent: $(wrapper).find('.tree-area'), 
+			parent: $(parent), 
 			label: root,
 			args: {ctype: ctype},
 			method: 'selling.page.sales_browser.sales_browser.get_children',