diff --git a/public/js/legacy/widgets/form/form.js b/public/js/legacy/widgets/form/form.js
index 97947c499d..7eecc93aba 100644
--- a/public/js/legacy/widgets/form/form.js
+++ b/public/js/legacy/widgets/form/form.js
@@ -567,6 +567,8 @@ _f.Frm.prototype.refresh_dependency = function() {
 			}
 		}
 	}
+	
+	this.layout.refresh_section_count();
 }
 
 _f.Frm.prototype.setnewdoc = function(docname) {
diff --git a/public/js/wn/form/layout.js b/public/js/wn/form/layout.js
index 9705497a31..14e227a2e6 100644
--- a/public/js/wn/form/layout.js
+++ b/public/js/wn/form/layout.js
@@ -79,7 +79,7 @@ wn.ui.form.Layout = Class.extend({
 				this.labelled_section_count++;
 				$('<h3 class="col col-lg-12">' 
 					+ (df.options ? (' <i class="text-muted '+df.options+'"></i> ') : "") 
-					+ this.labelled_section_count + ". " 
+					+ '<span class="section-count-label">' + this.labelled_section_count + "</span>. " 
 					+ df.label 
 					+ "</h3>")
 					.css({
@@ -96,6 +96,7 @@ wn.ui.form.Layout = Class.extend({
 				$('<div class="col col-lg-12 small text-muted">' + df.description + '</div>').appendTo(this.section);
 			}
 			if(df.label || df.description) {
+				// spacer
 				$('<div class="col col-lg-12"></div>')
 					.appendTo(this.section)
 					.css({"height": "20px"});
@@ -117,6 +118,11 @@ wn.ui.form.Layout = Class.extend({
 		}
 		return this.section;
 	},
+	refresh_section_count: function() {
+		this.wrapper.find(".section-count-label:visible").each(function(i) {
+			$(this).html(i+1);
+		});
+	},
 	setup_tabbing: function() {
 		var me = this;
 		this.wrapper.on("keydown", function(ev) {