diff --git a/erpnext/hr/doctype/employee_attendance_tool/employee_attendance_tool.js b/erpnext/hr/doctype/employee_attendance_tool/employee_attendance_tool.js
index 9467d39..f29bc89 100644
--- a/erpnext/hr/doctype/employee_attendance_tool/employee_attendance_tool.js
+++ b/erpnext/hr/doctype/employee_attendance_tool/employee_attendance_tool.js
@@ -1,25 +1,25 @@
 frappe.ui.form.on("Employee Attendance Tool", {
-	refresh:function(frm){
+	refresh: function(frm) {
 		frm.disable_save();
 	},
 
-	onload:function(frm){
+	onload: function(frm) {
 		erpnext.employee_attendance_tool.load_employees(frm);
 	},
 
-	date:function(frm){
+	date: function(frm) {
 		erpnext.employee_attendance_tool.load_employees(frm);
 	},
 
-	department:function(frm){
+	department: function(frm) {
 		erpnext.employee_attendance_tool.load_employees(frm);
 	},
 
-	branch:function(frm){
+	branch: function(frm) {
 		erpnext.employee_attendance_tool.load_employees(frm);
 	},
 
-	company:function(frm){
+	company: function(frm) {
 		erpnext.employee_attendance_tool.load_employees(frm);
 	}
 
@@ -28,20 +28,20 @@
 
 
 erpnext.employee_attendance_tool = {
-	load_employees: function(frm){
-		if(frm.doc.date){
+	load_employees: function(frm) {
+		if(frm.doc.date) {
 			frappe.call({
-				method:"erpnext.hr.doctype.employee_attendance_tool.employee_attendance_tool.get_employees",
-				args:{
-					date:frm.doc.date,
-					department:frm.doc.department,
-					branch:frm.doc.branch,
-					company:frm.doc.company
+				method: "erpnext.hr.doctype.employee_attendance_tool.employee_attendance_tool.get_employees",
+				args: {
+					date: frm.doc.date,
+					department: frm.doc.department,
+					branch: frm.doc.branch,
+					company: frm.doc.company
 				},
-				callback:function(r){
-					if(r.message['unmarked'].length > 0){
+				callback: function(r) {
+					if(r.message['unmarked'].length > 0) {
 						unhide_field('unmarked_attendance_section')
-						if(!frm.employee_area){						
+						if(!frm.employee_area) {
 							frm.employee_area = $('<div>')
 							.appendTo(frm.fields_dict.employees_html.wrapper);
 						}
@@ -51,14 +51,13 @@
 						hide_field('unmarked_attendance_section')
 					}
 
-					if(r.message['marked'].length > 0){
+					if(r.message['marked'].length > 0) {
 						unhide_field('marked_attendance_section')
-						if(!frm.marked_employee_area){
-
+						if(!frm.marked_employee_area) {
 							frm.marked_employee_area = $('<div>')
-							.appendTo(frm.fields_dict.marked_attendance_html.wrapper);
+								.appendTo(frm.fields_dict.marked_attendance_html.wrapper);
 						}
-						frm.MarkedEmployee = new erpnext.MarkedEmployee(frm, frm.marked_employee_area, r.message['marked'])
+						frm.marked_employee = new erpnext.MarkedEmployee(frm, frm.marked_employee_area, r.message['marked'])
 					}
 					else{
 						hide_field('marked_attendance_section')
@@ -79,18 +78,30 @@
 		var me = this;
 		$(this.wrapper).empty();
 
+		var row;
 		$.each(employee, function(i, m) {
-			var attendance_icon = "'icon-check'"
+			var attendance_icon = "icon-check";
+			var color_class = "";
 			if(m.status == "Absent") {
-				attendance_icon="'icon-check-empty'"
+				attendance_icon = "icon-check-empty"
+				color_class = "text-muted";
 			}
-			else if(m.status == "Half Day"){
-				attendance_icon = "'icon-check-minus'"
+			else if(m.status == "Half Day") {
+				attendance_icon = "icon-check-minus"
 			}
-			$(repl('<div class="col-sm-3">\
-				<label class="marked-employee-label"><span class=%(icon)s></span>\
+
+			if (i===0 || i % 4===0) {
+				row = $('<div class="row"></div>').appendTo(me.wrapper);
+			}
+
+			$(repl('<div class="col-sm-3 %(color_class)s">\
+				<label class="marked-employee-label"><span class="%(icon)s"></span>\
 				%(employee)s</label>\
-				</div>', {employee: m.employee_name, icon: attendance_icon})).appendTo(me.wrapper);
+				</div>', {
+					employee: m.employee_name,
+					icon: attendance_icon,
+					color_class: color_class
+				})).appendTo(row);
 		});
 	}
 });
@@ -104,7 +115,7 @@
 	},
 	make: function(frm, employee) {
 		var me = this;
-		
+
 		$(this.wrapper).empty();
 		var employee_toolbar = $('<div class="col-sm-12 top-toolbar">\
 			<button class="btn btn-default btn-add btn-xs"></button>\
@@ -112,121 +123,121 @@
 			</div>').appendTo($(this.wrapper));
 
 		var mark_employee_toolbar = $('<div class="col-sm-12 bottom-toolbar">\
-			<button class="btn btn-default btn-primary btn-mark-present btn-xs"></button>\
-			<button class="btn btn-default btn-primary btn-mark-absent btn-xs"></button>\
-			<button class="btn btn-default btn-primary btn-mark-half-day btn-xs"></button></div>')
+			<button class="btn btn-primary btn-mark-present btn-xs"></button>\
+			<button class="btn btn-default btn-mark-absent btn-xs"></button>\
+			<button class="btn btn-default btn-mark-half-day btn-xs"></button></div>')
 
 		employee_toolbar.find(".btn-add")
-		.html(__('Check all'))
-		.on("click", function() {
-			$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
-				if(!$(check).is(":checked")) {
-					check.checked = true;
-				}
+			.html(__('Check all'))
+			.on("click", function() {
+				$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
+					if(!$(check).is(":checked")) {
+						check.checked = true;
+					}
+				});
 			});
-		});
 
 		employee_toolbar.find(".btn-remove")
-		.html(__('Uncheck all'))
-		.on("click", function() {
-			$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
-				if($(check).is(":checked")) {
-					check.checked = false;
-				}
+			.html(__('Uncheck all'))
+			.on("click", function() {
+				$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
+					if($(check).is(":checked")) {
+						check.checked = false;
+					}
+				});
 			});
-		});
-		
+
 		mark_employee_toolbar.find(".btn-mark-present")
-		.html(__('Mark Present'))
-		.on("click", function() {
-			var employee_present = [];
-			$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
-				if($(check).is(":checked")) {
-					employee_present.push(employee[i]);
-				}
-			});
-			frappe.call({
-				method: "erpnext.hr.doctype.employee_attendance_tool.employee_attendance_tool.mark_employee_attendance",
-				args:{
-					"employee_list":employee_present, 
-					"status":"Present",
-					"date":frm.doc.date,
-					"company":frm.doc.company
-				},
+			.html(__('Mark Present'))
+			.on("click", function() {
+				var employee_present = [];
+				$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
+					if($(check).is(":checked")) {
+						employee_present.push(employee[i]);
+					}
+				});
+				frappe.call({
+					method: "erpnext.hr.doctype.employee_attendance_tool.employee_attendance_tool.mark_employee_attendance",
+					args:{
+						"employee_list":employee_present,
+						"status":"Present",
+						"date":frm.doc.date,
+						"company":frm.doc.company
+					},
 
-				callback: function(r) {
-					erpnext.employee_attendance_tool.load_employees(frm);
+					callback: function(r) {
+						erpnext.employee_attendance_tool.load_employees(frm);
 
-				}
+					}
+				});
 			});
-		});
 
 		mark_employee_toolbar.find(".btn-mark-absent")
-		.html(__('Mark Absent'))
-		.on("click", function() {
-			var employee_absent = [];
-			$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
-				if($(check).is(":checked")) {
-					employee_absent.push(employee[i]);
-				}
-			});
-			frappe.call({
-				method: "erpnext.hr.doctype.employee_attendance_tool.employee_attendance_tool.mark_employee_attendance",
-				args:{
-					"employee_list":employee_absent, 
-					"status":"Absent",
-					"date":frm.doc.date,
-					"company":frm.doc.company
-				},
+			.html(__('Mark Absent'))
+			.on("click", function() {
+				var employee_absent = [];
+				$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
+					if($(check).is(":checked")) {
+						employee_absent.push(employee[i]);
+					}
+				});
+				frappe.call({
+					method: "erpnext.hr.doctype.employee_attendance_tool.employee_attendance_tool.mark_employee_attendance",
+					args:{
+						"employee_list":employee_absent,
+						"status":"Absent",
+						"date":frm.doc.date,
+						"company":frm.doc.company
+					},
 
-				callback: function(r) {
-					erpnext.employee_attendance_tool.load_employees(frm);
+					callback: function(r) {
+						erpnext.employee_attendance_tool.load_employees(frm);
 
-				}
+					}
+				});
 			});
-		});
 
 
 		mark_employee_toolbar.find(".btn-mark-half-day")
-		.html(__('Mark Half Day'))
-		.on("click", function() {
-			var employee_half_day = [];
-			$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
-				if($(check).is(":checked")) {
-					employee_half_day.push(employee[i]);
-				}
+			.html(__('Mark Half Day'))
+			.on("click", function() {
+				var employee_half_day = [];
+				$(me.wrapper).find('input[type="checkbox"]').each(function(i, check) {
+					if($(check).is(":checked")) {
+						employee_half_day.push(employee[i]);
+					}
+				});
+				frappe.call({
+					method: "erpnext.hr.doctype.employee_attendance_tool.employee_attendance_tool.mark_employee_attendance",
+					args:{
+						"employee_list":employee_half_day,
+						"status":"Half Day",
+						"date":frm.doc.date,
+						"company":frm.doc.company
+					},
+
+					callback: function(r) {
+						erpnext.employee_attendance_tool.load_employees(frm);
+
+					}
+				});
 			});
-			frappe.call({
-				method: "erpnext.hr.doctype.employee_attendance_tool.employee_attendance_tool.mark_employee_attendance",
-				args:{
-					"employee_list":employee_half_day, 
-					"status":"Half Day",
-					"date":frm.doc.date,
-					"company":frm.doc.company
-				},
 
-				callback: function(r) {
-					erpnext.employee_attendance_tool.load_employees(frm);
 
-				}
-			});
-		});
-
-		
+		var row;
 		$.each(employee, function(i, m) {
+			if (i===0 || (i % 4) === 0) {
+				row = $('<div class="row"></div>').appendTo(me.wrapper);
+			}
+
 			$(repl('<div class="col-sm-3 unmarked-employee-checkbox">\
 				<div class="checkbox">\
 				<label><input type="checkbox" class="employee-check" employee="%(employee)s"/>\
 				%(employee)s</label>\
-				</div></div>', {employee: m.employee_name})).appendTo(me.wrapper);
-
-
-
+				</div></div>', {employee: m.employee_name})).appendTo(row);
 		});
 
 		mark_employee_toolbar.appendTo($(this.wrapper));
-
-		
 	}
 });
 
diff --git a/erpnext/hr/report/employee_holiday_attendance/employee_holiday_attendance.py b/erpnext/hr/report/employee_holiday_attendance/employee_holiday_attendance.py
index ce8d5dd..ac51b57 100644
--- a/erpnext/hr/report/employee_holiday_attendance/employee_holiday_attendance.py
+++ b/erpnext/hr/report/employee_holiday_attendance/employee_holiday_attendance.py
@@ -16,11 +16,12 @@
 
 
 def get_columns():
-
 	return [
-		_("Employee") + ":Link/Employee:120", _("Name") + ":Data:200", _("Date")+ ":Date:100",
-		_("Status") + ":Data:70",_("Holiday") + ":Data:200"
-		
+		_("Employee") + ":Link/Employee:120",
+		_("Name") + ":Data:200",
+		_("Date")+ ":Date:100",
+		_("Status") + ":Data:70",
+		_("Holiday") + ":Data:200"
 	]
 
 
@@ -30,14 +31,17 @@
 	holidays_list = []
 
 	for holiday in holidays:
-		holidays_list.append("'" + holiday.holiday_date.strftime('%Y-%m-%d') + "'")
+		holidays_list.append(holiday.holiday_date)
 		holiday_names[holiday.holiday_date] = holiday.description
 
-	employee_list = frappe.db.sql(
-		"select employee, employee_name, att_date, status from tabAttendance where att_date in ("
-		+ ', '.join(holidays_list) + ")",
-		as_list=True)
+	employee_list = frappe.db.sql("""select
+	        employee, employee_name, att_date, status
+	    from tabAttendance
+	    where
+	        att_date in ({0})""".format(', '.join(["%s"]*len(holidays_list))),
+	    holidays_list, as_list=True)
 
 	for employee_data in employee_list:
 		employee_data.append(holiday_names[employee_data[2]])
+
 	return employee_list