diff --git a/frappe/core/page/dashboard/dashboard.js b/frappe/core/page/dashboard/dashboard.js
index a0965fc794..9d2f1e5822 100644
--- a/frappe/core/page/dashboard/dashboard.js
+++ b/frappe/core/page/dashboard/dashboard.js
@@ -1,63 +1,91 @@
 frappe.pages['dashboard'].on_page_load = function(wrapper) {
-	var me = this
 
-	this.route = frappe.get_route()
-	this.dashboard_name = this.route.slice(-1)[0]
-	this.dashboard_doc = null
 
-	var page = frappe.ui.make_app_page({
+	let page = frappe.ui.make_app_page({
 		parent: wrapper,
-		title: this.dashboard_name,
+		title: __("Dashboard"),
 		single_column: true
 	})
 
-	frappe.model.with_doc('Dashboard', this.dashboard_name).then((doc) => {
-		this.dashboard_doc = doc
-		this.charts = this.dashboard_doc.charts
-
-		this.charts.map((chart) => {
-			var id = `dashboard-chart-${chart.name}`
-
-			const column_width_map = {
-				"Half": "6",
-				"Full": "12",
-			}
-			var columns = column_width_map[chart.chart_width]
-			var chart_wrapper = $(`<div class="col-sm-${columns}"><div id="${id}"></div></div>`)
-			chart_wrapper.appendTo($("#dashboard-graph"))
-
-			this.create_chart(`#${id}`, chart, JSON.parse(chart.chart_filters_json))
-		})
-
+	frappe.dashboard = new Dashboard(wrapper)
+	$(wrapper).bind('show', function() {
+		frappe.dashboard.show()
 	})
 
-	$(`<div class="dashboard page-main-content">
-		<div id="dashboard-graph" class="row"></div>
-	</div>`).appendTo(this.page.main)
+}
 
-	this.create_chart = function(wrapper, chart, filters) {
-		frappe.call({
-			method: "frappe.core.page.dashboard.dashboard.get_data",
-			args: {
-				dashboard_name: chart.chart_path,
-				filters: filters,
-			},
-			callback: function(message) {
-				const chart_type_map = {
-					"Line": "line",
-					"Bar": "bar",
-				}
-				const data = message.message
-				var chart_args = {
-					title: chart.chart_name,
-					data: {
-						datasets: data.datasets,
-						labels: data.labels,
-					},
-					type: chart_type_map[chart.chart_type],
-				}
-				new Chart(wrapper, chart_args)
-			}
+class Dashboard {
+	constructor(wrapper) {
+		this.wrapper = $(wrapper)
+		$(`<div class="dashboard">
+			<div class="dashboard-graph" class="row"></div>
+		</div>`).appendTo(this.wrapper.find(".page-content").empty())
+		this.container = this.wrapper.find(".dashboard-graph")
+		this.page = wrapper.page
+	}
+
+	show() {
+		this.route = frappe.get_route()
+		const current_dashboard_name = this.route.slice(-1)[0]
+
+		if(this.dashboard_name !== current_dashboard_name) {
+			this.dashboard_name = current_dashboard_name
+			this.page.set_title(this.dashboard_name)
+			this.refresh()
+		}
+	}
+
+	refresh() {
+		this.get_dashboard_doc().then((doc) => {
+			this.dashboard_doc = doc
+			this.charts = this.dashboard_doc.charts
+
+			this.charts.map((chart) => {
+				this.fetch_and_render_chart(chart);
+			})
 		})
 	}
+
+	fetch_and_render_chart(chart) {
+		this.fetch_chart(chart).then((data) => this.render_chart(chart, data))
+	}
+
+	get_dashboard_doc() {
+		return frappe.model.with_doc('Dashboard', this.dashboard_name)
+	}
+
+	fetch_chart(chart) {
+		return frappe.xcall(
+			"frappe.core.page.dashboard.dashboard.get_data",
+			{
+				dashboard_name: chart.chart_path,
+				filters: JSON.parse(chart.chart_filters_json),
+			}
+		)
+	}
+
+	render_chart(chart, data) {
+		const column_width_map = {
+			"Half": "6",
+			"Full": "12",
+		};
+		let columns = column_width_map[chart.chart_width];
+		let chart_container = $(`<div class="col-sm-${columns}"><div class="chart-wrapper"></div></div>`);
+		chart_container.appendTo(this.container);
+
+
+		const chart_type_map = {
+			"Line": "line",
+			"Bar": "bar",
+		};
+		let chart_args = {
+			title: chart.chart_name,
+			data: {
+				datasets: data.datasets,
+				labels: data.labels,
+			},
+			type: chart_type_map[chart.chart_type],
+		};
+		new Chart(chart_container.find(".chart-wrapper")[0], chart_args);
+	}
 }
\ No newline at end of file