diff --git a/frappe/printing/page/print_format_builder/print_format_builder.css b/frappe/printing/page/print_format_builder/print_format_builder.css
index 1812721b3c..00ba537e55 100644
--- a/frappe/printing/page/print_format_builder/print_format_builder.css
+++ b/frappe/printing/page/print_format_builder/print_format_builder.css
@@ -67,19 +67,28 @@
 	margin-top: 5px;
 }
 
+.field-label.data-pill {
+	border: 1px solid var(--dark-border-color);
+	padding: 4px 8px;
+	color: var(--text-light);
+}
+
 .print-format-builder-sidebar {
-	display: inline-block;
-	width: 160px;
-	vertical-align: top;
-	position: fixed;
-	top: 120px;
-	bottom: 0px;
+	padding: 5px;
+	top: var(--navbar-height);
+	height: 85vh;
 	overflow-y: auto;
+	position: sticky;
+}
+
+.filter-searchbox {
+	padding: 10px;
+	padding-left: 0;
+	margin-bottom: 10px;
 }
 
 .print-format-builder-main {
 	display: inline-block;
 	vertical-align: top;
 	border-top: 0px;
-	margin-left: 160px;
 }
diff --git a/frappe/printing/page/print_format_builder/print_format_builder.js b/frappe/printing/page/print_format_builder/print_format_builder.js
index c889a423c9..ace09fab9b 100644
--- a/frappe/printing/page/print_format_builder/print_format_builder.js
+++ b/frappe/printing/page/print_format_builder/print_format_builder.js
@@ -42,14 +42,12 @@ frappe.PrintFormatBuilder = Class.extend({
 		this.page = frappe.ui.make_app_page({
 			parent: this.parent,
 			title: __("Print Format Builder"),
-			single_column: true
 		});
 
 		this.page.main.css({"border-color": "transparent"});
 
-		this.page.sidebar = $('<div class="print-format-builder-sidebar"></div>').appendTo(this.page.main);
-		this.page.main = $('<div class="border print-format-builder-main frappe-card" \
-			style="width: calc(100% - 160px);"></div>').appendTo(this.page.main);
+		this.page.sidebar = $('<div class="print-format-builder-sidebar"></div>').appendTo(this.page.sidebar);
+		this.page.main = $('<div class="col-md-12 border print-format-builder-main frappe-card"></div>').appendTo(this.page.main);
 
 		// future-bindings for buttons on sections / fields
 		// bind only once
@@ -61,7 +59,6 @@ frappe.PrintFormatBuilder = Class.extend({
 	},
 	show_start: function() {
 		this.page.main.html(frappe.render_template("print_format_builder_start", {}));
-		this.page.sidebar.html("");
 		this.page.clear_actions();
 		this.page.set_title(__("Print Format Builder"));
 		this.start_edit_print_format();
@@ -168,16 +165,11 @@ frappe.PrintFormatBuilder = Class.extend({
 		});
 	},
 	setup_sidebar: function() {
-		var me = this;
-		this.page.sidebar.empty();
-
 		// prepend custom HTML field
 		var fields = [this.get_custom_html_field()].concat(this.meta.fields);
-
 		$(frappe.render_template("print_format_builder_sidebar",
 			{fields: fields}))
 			.appendTo(this.page.sidebar);
-
 		this.setup_field_filter();
 	},
 	get_custom_html_field: function() {
diff --git a/frappe/printing/page/print_format_builder/print_format_builder_field.html b/frappe/printing/page/print_format_builder/print_format_builder_field.html
index eb29092f28..772ffe426e 100644
--- a/frappe/printing/page/print_format_builder/print_format_builder_field.html
+++ b/frappe/printing/page/print_format_builder/print_format_builder_field.html
@@ -1,35 +1,35 @@
 <div class="print-format-builder-field"
-    {% if(field.print_hide) { %}style="background-color: #F7FAFC; color: #8D99A6;"
-        title="{{ __("Hidden") }}"{% } %}
-    data-fieldname="{%= field.fieldname %}"
-    data-label="{{ __(field.label) }}"
+	{% if(field.print_hide) { %}style="background-color: #F7FAFC; color: #8D99A6;"
+		title="{{ __("Hidden") }}"{% } %}
+	data-fieldname="{%= field.fieldname %}"
+	data-label="{{ __(field.label) }}"
 
 	{% if field.align %}data-align="{{ field.align }}"{% endif %}
-    data-fieldtype="{%= field.fieldtype %}"
-    {% if(field.fieldtype==="Table") { %}
-        data-columns="{%= me.get_visible_columns_string(field) %}"
-        data-doctype="{%= field.options %}"
-    {% } %}>
+	data-fieldtype="{%= field.fieldtype %}"
+	{% if(field.fieldtype==="Table") { %}
+		data-columns="{%= me.get_visible_columns_string(field) %}"
+		data-doctype="{%= field.options %}"
+	{% } %}>
 	{% if !in_list(["Table", "HTML", "Custom HTML"], field.fieldtype) %}
-    <a class="field-settings pull-right
-        btn-default btn-xs" style="padding-top: 3px">
-        <span class="octicon octicon-gear text-muted"></span></a>
+	<a class="field-settings pull-right
+		btn-default btn-xs" style="padding-top: 3px">
+		<span class="octicon octicon-gear text-muted"></span></a>
 	{% endif %}
-    {% if(field.fieldtype==="Custom HTML") { %}
-        <div class="text-right">
-            <a class="edit-html btn btn-default btn-xs">
-                {%= __("Edit HTML") %}</a>
-        </div>
-        <div class="html-content"
+	{% if(field.fieldtype==="Custom HTML") { %}
+		<div class="text-right">
+			<a class="edit-html btn btn-default btn-xs">
+				{%= __("Edit HTML") %}</a>
+		</div>
+		<div class="html-content"
 			{% if field.custom_html_id!==undefined %}
 				data-custom-html-id={{ field.custom_html_id }}{% endif %}>
 			{{ field.options || me.get_no_content() }}</div>
-    {% } else { %}
-        <span class="field-label">{{ __(field.label) }}</span>
-        {% if(field.fieldtype==="Table") { %}
-            <span> ({%= __("Table") %})</span>
-            <a class="pull-right select-columns btn btn-default btn-xs">
-                {%= __("Select Columns") %}</a>
-        {% } %}
-    {% } %}
+	{% } else { %}
+		<div class="field-label">{{ __(field.label) }}</div>
+		{% if(field.fieldtype==="Table") { %}
+			<span> ({%= __("Table") %})</span>
+			<a class="pull-right select-columns btn btn-default btn-xs">
+				{%= __("Select Columns") %}</a>
+		{% } %}
+	{% } %}
 </div>
diff --git a/frappe/printing/page/print_format_builder/print_format_builder_sidebar.html b/frappe/printing/page/print_format_builder/print_format_builder_sidebar.html
index 09777e4c43..bf6c12e49c 100644
--- a/frappe/printing/page/print_format_builder/print_format_builder_sidebar.html
+++ b/frappe/printing/page/print_format_builder/print_format_builder_sidebar.html
@@ -1,18 +1,18 @@
-<div class="panel-bg" style="padding: 10px; margin-bottom: 10px;">
-    <input type="text" class="form-control input-sm filter-fields" name="filter-fields"
-        placeholder="{%= __("Filter...") %}">
+<div class="panel-bg filter-searchbox">
+	<input type="text" class="form-control input-sm filter-fields" name="filter-fields"
+		placeholder="{%= __("Filter...") %}">
 </div>
 <div class="print-format-builder-fields">
-    {% for (var i=0, l=fields.length; i < l; i++) { var f = fields[i]; %}
-        {% if(!in_list(["Section Break", "Column Break", "Fold"], f.fieldtype)) { %}
-        <div class="print-format-builder-field-placeholder ellipsis"
-            data-fieldname="{%= f.fieldname %}">
-            <span class="btn btn-xs field-label
-                {%= (f.fieldtype==="Custom HTML") ? "btn-info" : "btn-default" %}"
-                style="cursor: grab; display: inline-block">
-                {%= __(f.label) %}
-            </span>
-        </div>
-        {% } %}
-    {% } %}
+	{% for (var i=0, l=fields.length; i < l; i++) { var f = fields[i]; %}
+		{% if(!in_list(["Section Break", "Column Break", "Fold"], f.fieldtype)) { %}
+		<div class="print-format-builder-field-placeholder"
+			data-fieldname="{%= f.fieldname %}">
+			<div title="{{f.label}}" class="field-label data-pill ellipsis
+				{%= (f.fieldtype==="Custom HTML") ? "btn-secondary-dark" : "btn-default" %}"
+				style="cursor: grab; display: inline-block">
+				{%= __(f.label) %}
+			</div>
+		</div>
+		{% } %}
+	{% } %}
 </div>
diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss
index 4c899bf0a9..acae66c24f 100644
--- a/frappe/public/scss/variables.scss
+++ b/frappe/public/scss/variables.scss
@@ -141,6 +141,8 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 	--text-xl: 18px;
 	--text-2xl: 20px;
 
+	--navbar-height: 60px;
+
 	--text-bold: 500;
 
 	--shadow-xs: 0px 0px 0.5px rgba(0,0,0,0.75), 0px 1px 2px rgba(0,0,0,0.13);