diff --git a/frappe/core/page/background_jobs/background_jobs.js b/frappe/core/page/background_jobs/background_jobs.js
index bbc8bf049b..789784d5aa 100644
--- a/frappe/core/page/background_jobs/background_jobs.js
+++ b/frappe/core/page/background_jobs/background_jobs.js
@@ -1,45 +1,63 @@
-frappe.pages['background_jobs'].on_page_load = function(wrapper) {
-	var page = frappe.ui.make_app_page({
-		parent: wrapper,
-		title: __('Background Jobs'),
-		single_column: true
+frappe.pages["background_jobs"].on_page_load = (wrapper) => {
+	background_job = new BackgroundJobs(wrapper);
+
+	$(wrapper).bind('show', () => {
+		background_job.show();
 	});
 
-	$(frappe.render_template('background_jobs_outer')).appendTo(page.body);
-	page.content = $(page.body).find('.table-area');
+	window.background_jobs = background_job;
+};
 
-	frappe.pages.background_jobs.page = page;
-}
+class BackgroundJobs {
+	constructor(wrapper) {
+		this.page = frappe.ui.make_app_page({
+			parent: wrapper,
+			title: __('Background Jobs'),
+			single_column: true
+		});
 
-frappe.pages['background_jobs'].on_page_show = function(wrapper) {
-	frappe.pages.background_jobs.refresh_jobs();
-	frappe.call({
-		method: 'frappe.core.page.background_jobs.background_jobs.get_scheduler_status',
-		callback: function(r) {
-			frappe.pages.background_jobs.page.set_indicator(...r.message);
-		}
-	});
-}
+		this.called = false;
+		this.show_failed = false;
 
-frappe.pages.background_jobs.refresh_jobs = function() {
-	var page = frappe.pages.background_jobs.page;
+		this.show_failed_button = this.page.add_inner_button(__("Show Failed Jobs"), () => {
+			this.show_failed = !this.show_failed
+			this.show_failed_button && this.show_failed_button.text(
+				this.show_failed ? __("Hide Failed Jobs") : __("Show Failed Jobs")
+			)
+		});
 
-	// don't call if already waiting for a response
-	if(page.called) return;
-	page.called = true;
-	frappe.call({
-		method: 'frappe.core.page.background_jobs.background_jobs.get_info',
-		args: {
-			show_failed: page.body.find('.show-failed').prop('checked') ? 1 : 0
-		},
-		callback: function(r) {
-			page.called = false;
-			page.body.find('.list-jobs').remove();
-			$(frappe.render_template('background_jobs', {jobs:r.message || []})).appendTo(page.content);
+		$(frappe.render_template('background_jobs_outer')).appendTo(this.page.body);
+		this.content = $(this.page.body).find('.table-area');
+	}
 
-			if(frappe.get_route()[0]==='background_jobs') {
-				frappe.background_jobs_timeout = setTimeout(frappe.pages.background_jobs.refresh_jobs, 2000);
+	show() {
+		this.refresh_jobs();
+		frappe.call({
+			method: 'frappe.core.page.background_jobs.background_jobs.get_scheduler_status',
+			callback: res => {
+				this.page.set_indicator(...res.message);
 			}
-		}
-	});
-}
+		});
+	}
+
+	refresh_jobs() {
+		if (this.called) return;
+		this.called = true;
+
+		frappe.call({
+			method: 'frappe.core.page.background_jobs.background_jobs.get_info',
+			args: {
+				show_failed: this.show_failed
+			},
+			callback: (res) => {
+				this.called = false;
+				this.page.body.find('.list-jobs').remove();
+				$(frappe.render_template('background_jobs', { jobs: res.message || [] })).appendTo(this.content);
+
+				if (frappe.get_route()[0] === 'background_jobs') {
+					setTimeout(() => this.refresh_jobs(), 2000);
+				}
+			}
+		});
+	}
+}
\ No newline at end of file
diff --git a/frappe/core/page/background_jobs/background_jobs_outer.html b/frappe/core/page/background_jobs/background_jobs_outer.html
index 4da4498304..4ca3a32906 100644
--- a/frappe/core/page/background_jobs/background_jobs_outer.html
+++ b/frappe/core/page/background_jobs/background_jobs_outer.html
@@ -1,11 +1,4 @@
-<div style="padding: 20px;">
-	<p>
-		<div class="checkbox">
-			<label>
-			<input type="checkbox" class="show-failed"> {{ __("Show failed jobs") }}
-			</label>
-		</div>
-	</p>
+<div class="frappe-card">
 	<div class="table-area">
 
 	</div>