diff --git a/erpnext/education/doctype/student_attendance_tool/student_attendance_tool.js b/erpnext/education/doctype/student_attendance_tool/student_attendance_tool.js
index 68e7780039b..45265851758 100644
--- a/erpnext/education/doctype/student_attendance_tool/student_attendance_tool.js
+++ b/erpnext/education/doctype/student_attendance_tool/student_attendance_tool.js
@@ -3,6 +3,10 @@
 frappe.provide("education");
 
 frappe.ui.form.on('Student Attendance Tool', {
+	setup: (frm) => {
+		frm.students_area = $('<div>')
+			.appendTo(frm.fields_dict.students_html.wrapper);
+	},
 	onload: function(frm) {
 		frm.set_query("student_group", function() {
 			return {
@@ -34,6 +38,7 @@ frappe.ui.form.on('Student Attendance Tool', {
 
 	student_group: function(frm) {
 		if ((frm.doc.student_group && frm.doc.date) || frm.doc.course_schedule) {
+			frm.students_area.find('.student-attendance-checks').html(`<div style='padding: 2rem 0'>Fetching...</div>`);
 			var method = "erpnext.education.doctype.student_attendance_tool.student_attendance_tool.get_student_attendance_records";
 
 			frappe.call({
@@ -62,10 +67,6 @@ frappe.ui.form.on('Student Attendance Tool', {
 	},
 
 	get_students: function(frm, students) {
-		if (!frm.students_area) {
-			frm.students_area = $('<div>')
-				.appendTo(frm.fields_dict.students_html.wrapper);
-		}
 		students = students || [];
 		frm.students_editor = new education.StudentsEditor(frm, frm.students_area, students);
 	}
@@ -163,16 +164,26 @@ education.StudentsEditor = class StudentsEditor {
 				);
 			});
 
-		var htmls = students.map(function(student) {
-			return frappe.render_template("student_button", {
-				student: student.student,
-				student_name: student.student_name,
-				group_roll_number: student.group_roll_number,
-				status: student.status
-			})
-		});
+		// make html grid of students
+		let student_html = '';
+		for (let student of students) {
+			student_html += `<div class="col-sm-3">
+					<div class="checkbox">
+						<label>
+							<input
+								type="checkbox"
+								data-group_roll_number="${student.group_roll_number}"
+								data-student="${student.student}"
+								data-student-name="${student.student_name}"
+								class="students-check"
+								${student.status==='Present' ? 'checked' : ''}>
+							${student.group_roll_number} - ${student.student_name}
+						</label>
+					</div>
+				</div>`;
+		}
 
-		$(htmls.join("")).appendTo(me.wrapper);
+		$(`<div class='student-attendance-checks'>${student_html}</div>`).appendTo(me.wrapper);
 	}
 
 	show_empty_state() {
diff --git a/erpnext/education/doctype/student_attendance_tool/student_attendance_tool.py b/erpnext/education/doctype/student_attendance_tool/student_attendance_tool.py
index 7deb6b18da5..92bb20ca52b 100644
--- a/erpnext/education/doctype/student_attendance_tool/student_attendance_tool.py
+++ b/erpnext/education/doctype/student_attendance_tool/student_attendance_tool.py
@@ -24,24 +24,24 @@ def get_student_attendance_records(based_on, date=None, student_group=None, cour
 		student_list = frappe.get_all("Student Group Student", fields=["student", "student_name", "group_roll_number"],
 			filters={"parent": student_group, "active": 1}, order_by= "group_roll_number")
 
-	table = frappe.qb.DocType("Student Attendance")
+	StudentAttendance = frappe.qb.DocType("Student Attendance")
 
 	if course_schedule:
 		student_attendance_list = (
-			frappe.qb.from_(table)
-				.select(table.student, table.status)
+			frappe.qb.from_(StudentAttendance)
+				.select(StudentAttendance.student, StudentAttendance.status)
 				.where(
-					(table.course_schedule == course_schedule)
+					(StudentAttendance.course_schedule == course_schedule)
 				)
 			).run(as_dict=True)
 	else:
 		student_attendance_list = (
-			frappe.qb.from_(table)
-				.select(table.student, table.status)
+			frappe.qb.from_(StudentAttendance)
+				.select(StudentAttendance.student, StudentAttendance.status)
 				.where(
-					(table.student_group == student_group)
-					& (table.date == date)
-					& (table.course_schedule == "") | (table.course_schedule.isnull())
+					(StudentAttendance.student_group == student_group)
+					& (StudentAttendance.date == date)
+					& ((StudentAttendance.course_schedule == "") | (StudentAttendance.course_schedule.isnull()))
 				)
 			).run(as_dict=True)
 
diff --git a/erpnext/public/js/education/student_button.html b/erpnext/public/js/education/student_button.html
deleted file mode 100644
index b64c73a43c7..00000000000
--- a/erpnext/public/js/education/student_button.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="col-sm-3">
-    <div class="checkbox">
-        <label>
-            <input
-                type="checkbox"
-                data-group_roll_number="{{group_roll_number}}"
-                data-student="{{student}}"
-                data-student-name="{{student_name}}"
-                class="students-check"
-                {% if status === "Present" %}
-                checked
-                {% endif %}
-                >
-            {{ group_roll_number }} - {{ student_name }}
-        </label>
-    </div>
-</div>
diff --git a/erpnext/public/js/erpnext.bundle.js b/erpnext/public/js/erpnext.bundle.js
index b3a68b38629..8409e78860b 100644
--- a/erpnext/public/js/erpnext.bundle.js
+++ b/erpnext/public/js/erpnext.bundle.js
@@ -16,7 +16,6 @@ import "./templates/item_quick_entry.html";
 import "./utils/item_quick_entry";
 import "./utils/customer_quick_entry";
 import "./utils/supplier_quick_entry";
-import "./education/student_button.html";
 import "./education/assessment_result_tool.html";
 import "./call_popup/call_popup";
 import "./utils/dimension_tree_filter";