diff --git a/src/api/menu.js b/src/api/menu.js
index 4ccaa03..9f202fb 100644
--- a/src/api/menu.js
+++ b/src/api/menu.js
@@ -64,6 +64,7 @@ const adminMenu = [
 		items: [
 			{ name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
 			{ name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
+			{ name: 'courseAttendance', title: 'Course Attendance', component: 'Course Attendance', action: '', },
 			// { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
 		]
 	},
@@ -350,6 +351,7 @@ const teacherMenu = [{
 	items: [
 		{ name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
 		{ name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
+		{ name: 'courseAttendance', title: 'Course Attendance', component: 'Course Attendance', action: '', },
 		// { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
 	]
 },
diff --git a/src/pages/Attendence/courseAttendance.vue b/src/pages/Attendence/courseAttendance.vue
new file mode 100644
index 0000000..c1cbdc9
--- /dev/null
+++ b/src/pages/Attendence/courseAttendance.vue
@@ -0,0 +1,200 @@
+<template>
+  <v-container fluid class="body-color">
+    <v-toolbar color="transparent" flat>
+      <v-spacer></v-spacer>
+      <v-flex xs12 sm4 md2>
+        <v-select
+          small
+          :items="classList"
+          label="Select Class"
+          v-model="getAttendance.classId"
+          item-text="classNum"
+          item-value="_id"
+          name="Select Class"
+          class="px-2"
+          @change="getSection(getAttendance.classId)"
+          required
+        ></v-select>
+      </v-flex>
+      <v-flex xs12 sm4 md2>
+        <v-select
+          small
+          :items="addSection"
+          label="Select Section"
+          v-model="getAttendance.sectionId"
+          item-text="name"
+          item-value="_id"
+          name="Select Section"
+          @change="getStudentsDetail(getAttendance.sectionId)"
+          class="px-2"
+          required
+        ></v-select>
+      </v-flex>
+    </v-toolbar>
+    <v-data-table
+      :headers="headers"
+      :items="studentsData"
+      :pagination.sync="pagination"
+      :search="search"
+    >
+      <template slot="items" slot-scope="props">
+        <tr class="tr">
+          <td class="td td-row">{{ props.index + 1}}</td>
+          <td class="text-xs-center td td-row">
+            <v-avatar size="40">
+              <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
+              <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
+            </v-avatar>
+          </td>
+          <td class="text-xs-center td td-row">{{ props.item.name}}</td>
+          <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
+          <td class="text-xs-center td td-row">{{ props.item.email }}</td>
+          <td class="text-xs-center td td-row">
+            <router-link :to="{ name:'View Course Attendance',params: { id:props.item._id } }">
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:25px; "
+                  class="mr-3"
+                  src="/static/icon/view.png"
+                />
+                <span>View</span>
+              </v-tooltip>
+            </router-link>
+          </td>
+        </tr>
+      </template>
+    </v-data-table>
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      color="color"
+    >{{ text }}</v-snackbar>
+  </v-container>
+</template>
+
+<script>
+import http from "@/Services/http.js";
+import moment from "moment";
+
+export default {
+  data: () => ({
+    snackbar: false,
+    y: "top",
+    x: "right",
+    mode: "",
+    timeout: 3000,
+    text: "",
+    color: "",
+    show: true,
+
+    classList: [],
+    addSection: [],
+    studentsData: [],
+
+    pagination: {
+      rowsPerPage: 10,
+    },
+
+    role: "",
+    schoolRole: "",
+    search: "",
+    getAttendance: {},
+    headers: [
+      {
+        text: "No",
+        align: "",
+        sortable: false,
+        value: "index",
+      },
+      {
+        text: "Profile Pic",
+        value: "profilprofilePicUrlePicUrl",
+        sortable: false,
+        align: "center",
+      },
+      { text: "Name", value: "name", sortable: false, align: "center" },
+      {
+        text: "Mobile No",
+        value: "fatherCellNo",
+        sortable: false,
+        align: "center",
+      },
+      { text: "Email", value: "email", sortable: false, align: "center" },
+      { text: "Attendance", value: "", sortable: false, align: "center" },
+    ],
+  }),
+  methods: {
+    getAllClass() {
+      http()
+        .get("/getClassesList", {
+          headers: { Authorization: "Bearer " + this.token },
+        })
+        .then((response) => {
+          this.classList = response.data.data;
+        })
+        .catch((error) => {
+          this.snackbar = true;
+          this.color = "error";
+          this.text = error.response.data.message;
+        });
+    },
+    getSection(_id) {
+      this.showLoader = true;
+      this.studentsData = [];
+      http()
+        .get(
+          "/getSectionsList",
+          { params: { classId: _id } },
+          {
+            headers: { Authorization: "Bearer " + this.token },
+          }
+        )
+        .then((response) => {
+          this.addSection = response.data.data;
+          this.showLoader = false;
+        })
+        .catch((err) => {
+          this.showLoader = false;
+          this.snackbar = true;
+          this.color = "error";
+          this.text = error.response.data.message;
+          // console.log("err====>", err);
+        });
+    },
+    getStudentsDetail(_id) {
+      this.showLoader = true;
+      http()
+        .get("/getStudentWithClass", {
+          params: {
+            classId: this.getAttendance.classId,
+            sectionId: this.getAttendance.sectionId,
+          },
+        })
+        .then((response) => {
+          this.studentsData = response.data.data;
+          this.showLoader = false;
+          var attendance = "";
+          for (let i = 0; i < this.studentsData.length; i++) {
+            this.studentsData[i].attendance = true;
+          }
+        })
+        .catch((error) => {
+          //   console.log("err====>", error);
+          this.showLoader = false;
+          this.snackbar = true;
+          this.color = "error";
+          this.text = error.response.data.message;
+        });
+    },
+  },
+  mounted() {
+    this.token = this.$store.state.token;
+    this.getAllClass();
+    this.role = this.$store.state.role;
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/pages/Attendence/viewCourseAttendance.vue b/src/pages/Attendence/viewCourseAttendance.vue
new file mode 100644
index 0000000..57d8092
--- /dev/null
+++ b/src/pages/Attendence/viewCourseAttendance.vue
@@ -0,0 +1,283 @@
+<template>
+  <v-container fluid grid-list-md class="body-color">
+    <v-dialog v-model="viewCourseAttendance" max-width="1000" scrollable persistent>
+      <v-card flat class="pa-3">
+        <v-layout>
+          <v-flex xs12>
+            <label class="title text-xs-center">Course Attendance</label>
+            <v-icon size="24" class="right" @click="viewCourseAttendance = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-card-text>
+          <v-data-table :headers="headers" :items="courseAttendanceList">
+            <template slot="items" slot-scope="props">
+              <tr class="tr">
+                <td class="text-xs-center td td-row">{{ props.item.courseId.courseName}}</td>
+                <td class="text-xs-center td td-row">{{ props.item.startTime}}</td>
+                <td class="text-xs-center td td-row">{{ props.item.endTime }}</td>
+              </tr>
+            </template>
+          </v-data-table>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+    <div>
+      <v-layout wrap>
+        <v-flex xs12 sm12 md4>
+          <v-card flat>
+            <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
+            <v-card-text>
+              <v-container>
+                <v-layout wrap>
+                  <v-flex xs12>
+                    <v-layout>
+                      <v-flex
+                        xs12
+                        class="text-xs-center text-sm-center text-md-center text-lg-center"
+                      >
+                        <v-avatar size="80px">
+                          <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />
+                          <img
+                            :src="studentData.profilePicUrl"
+                            v-else-if="studentData.profilePicUrl"
+                          />
+                        </v-avatar>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs12 sm12>
+                        <h3 class="text-xs-center">
+                          <b>{{ studentData.name }}</b>
+                        </h3>
+                        <p class="text-xs-center grey--text">Student</p>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout style="border: 1px solid lightgrey;">
+                      <v-flex xs6 sm6 class="pa-0">
+                        <h4 class="right">
+                          <b>Roll No :</b>
+                        </h4>
+                      </v-flex>
+                      <v-flex sm6 xs6 class="pa-0">
+                        <h4>{{ studentData.rollNo }}</h4>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout style="border: 1px solid lightgrey;">
+                      <v-flex xs6 sm6 class="pa-0">
+                        <h4 class="right">
+                          <b>Class :</b>
+                        </h4>
+                      </v-flex>
+                      <v-flex sm6 xs6 class="right pa-0">
+                        <h4>{{ studentData.classId.classNum }}</h4>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout style="border: 1px solid lightgrey;">
+                      <v-flex xs6 sm6 class="right pa-0">
+                        <h4 class="right">
+                          <b>Section :</b>
+                        </h4>
+                      </v-flex>
+                      <v-flex sm6 xs6 class="right pa-0">
+                        <h4>{{ studentData.sectionId.name}}</h4>
+                      </v-flex>
+                    </v-layout>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </v-card-text>
+          </v-card>
+        </v-flex>
+        <v-flex xs12 sm12 md8>
+          <v-card flat>
+            <h3 class="py-2 text-xs-center card-style white--text">Attendence</h3>
+            <YearCalendar
+              v-model="year"
+              :activeDates="activeDates"
+              prefixClass="your_customized_wrapper_class"
+              :activeClass="activeClass"
+              @toggleDate="toggleDate"
+            ></YearCalendar>
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </div>
+    <img :src="output" v-show="false" />
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
+  </v-container>
+</template>
+
+<script lang="js">
+import moment from "moment";
+import http from "@/Services/http.js";
+import YearCalendar from "vue-material-year-calendar";
+import jsPDF from 'jspdf';
+    // eslint-disable-next-line
+import autoTable from 'jspdf-autotable';
+
+export default {
+  components: { YearCalendar },
+  data() {
+    return {
+      output:null,
+      showLoader: false,
+      token: "",
+      year: new Date().getFullYear(),
+      activeDates: [],
+      activeClass: "",
+      studentData: {
+        classId: {
+          classNum: ""
+        },
+        sectionId: {
+          name: ""
+        },
+	  },
+      courseAttendanceData:{},
+      courseAttendanceList: [],
+	  viewCourseAttendance: false,
+	  headers: [
+      { text: "Course Name", value: "courseName", sortable: false, align: "center" },
+      {
+        text: "Start Time",
+        value: "startTime",
+        sortable: false,
+        align: "center",
+      },
+      { text: "End Time", value: "endTime", sortable: false, align: "center" },
+    ],
+    selectedDates: [],
+    };
+  },
+  mounted() {
+    this.token = this.$store.state.token;
+    this.getStudentAttendence();
+	this.getStudentData();
+  },
+  methods: {
+	  toggleDate (dateInfo) {
+      if (this.selectedDates.includes(dateInfo.date)) {
+          this.viewCourseAttendance = true;
+      }
+    },
+    dates: function(date) {
+      return moment(date).format("MMMM DD, YYYY");
+    },
+    getStudentAttendence() {
+      this.showLoader = true;
+      http()
+        .get(
+          "/studentAttendance",
+          { params: { studentId: this.$route.params.id } },
+          {
+            headers: { Authorization: "Bearer " + this.token }
+          }
+        )
+        .then(response => {
+          this.showLoader = false;
+        })
+        .catch(error => {
+          this.showLoader = false;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+            this.$store.dispatch("Role", null);
+          }
+        });
+    },
+    getStudentData() {
+      http()
+        .get(
+          "/getParticularStudentDetail",
+          { params: { studentId: this.$route.params.id } },
+          {
+            headers: { Authorization: "Bearer " + this.token }
+          }
+        )
+        .then(response => {
+		  this.studentData = response.data.data;
+		  this.getCourseAttendance(response.data.data.classId._id);
+        })
+        .catch(err => {
+		//   console.log("err====>", err);
+		  	this.snackbar = true;
+            this.color = "error";
+            this.text = error.response.data.message;
+          // this.$router.replace({ path: '/' });
+        });
+	},
+	getCourseAttendance(classId) {
+		http()
+        .get(
+          "/getStudentCourseAttendance",
+		  { params: { studentId: this.$route.params.id,
+					 classId: classId } 
+			},
+          {
+            headers: { Authorization: "Bearer " + this.token }
+          }
+        )
+        .then(response => {
+          this.courseAttendanceData = response.data.data;
+          this.courseAttendanceList = response.data.data[0].studentAttendance;
+        //   console.log("===this.courseAttendanceList===", this.courseAttendanceList)
+		  let array = [];
+          for (let i = 0; i < this.courseAttendanceData.length; i++) {
+            if (this.courseAttendanceData[i].date) {
+                this.selectedDates.push(this.courseAttendanceData[i].date)
+              array.push({
+                date: this.courseAttendanceData[i].date,
+                className: "green"
+              });
+            }
+          }
+          this.activeDates = array;
+        })
+        .catch(err => {
+		  	this.snackbar = true;
+            this.color = "error";
+            this.text = error.response.data.message;
+        });
+	},
+	profile(item) {
+      this.viewCourseAttendance = true;
+    },
+  }
+};
+</script>
+
+<style lang="stylus">
+.your_customized_wrapper_class {
+  background-color: #0aa;
+  color: white;
+
+  &.red {
+    background-color: red;
+    color: white;
+
+    &:after {
+      background-size: 100% 100%;
+    }
+  }
+
+  &.blue {
+    background-color: #0000aa;
+    color: white;
+  }
+
+  &.your_customized_classname {
+    background-color: yellow;
+    color: black;
+  }
+}
+</style>
+<style  scoped>
+.card-style {
+  background: #7f62f8 !important;
+  border-color: #7f62f8 !important;
+  border-radius: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Dashboard/LiveOnlineClass.vue b/src/pages/Dashboard/LiveOnlineClass.vue
index e0b35be..1e6b723 100644
--- a/src/pages/Dashboard/LiveOnlineClass.vue
+++ b/src/pages/Dashboard/LiveOnlineClass.vue
@@ -165,6 +165,7 @@ export default {
       appLink: "",
       showStartSessionButton: true,
       showJoinSessionButton: true,
+      courseAttendanceId: {},
     };
   },
   methods: {
@@ -373,6 +374,8 @@ export default {
       http()
         .post("/createCourseAttendance", attendenceData)
         .then((response) => {
+          this.courseAttendanceId = response.data.data._id;
+          this.updateCourseAttendance();
           this.loading = false;
           //   this.snackbar = true;
           //   this.color = "green";
@@ -397,6 +400,22 @@ export default {
           this.showLoader = false;
         });
     },
+    updateCourseAttendance() {
+      this.showLoader = true;
+      var payloadData = {
+        courseAttendanceId: this.courseAttendanceId,
+        liveClassId: this.attendenceLiveClassId,
+        endTime: this.formatAMPM(new Date()),
+      };
+      http()
+        .put("/updateCourseAttendance", payloadData)
+        .then((response) => {
+          this.showLoader = false;
+        })
+        .catch((error) => {
+          this.showLoader = false;
+        });
+    },
     async studentClasses() {
       this.liveLink = "";
       this.room = "";
diff --git a/src/router/paths.js b/src/router/paths.js
index 5d039c9..0d8ea39 100644
--- a/src/router/paths.js
+++ b/src/router/paths.js
@@ -486,6 +486,20 @@ export default [{
 		)
 },
 {
+	path: '/AttendanceCourse',
+	meta: {},
+	name: 'Course Attendance',
+	props: (route) => ({
+		type: route.query.type
+	}),
+	component: () =>
+		import(
+			/* webpackChunkName: "routes" */
+			/* webpackMode: "lazy-once" */
+			`@/pages/Attendence/courseAttendance.vue`
+		)
+},
+{
 	path: '/salaryTemplate',
 	meta: {},
 	name: 'Salary Template',
@@ -712,6 +726,20 @@ export default [{
 		)
 },
 {
+	path: '/CourseAttendance/:id',
+	meta: {},
+	name: 'View Course Attendance',
+	props: (route) => ({
+		type: route.query.type
+	}),
+	component: () =>
+		import(
+			/* webpackChunkName: "routes" */
+			/* webpackMode: "lazy-once" */
+			`@/pages/Attendence/viewCourseAttendance.vue`
+		)
+},
+{
 	path: '/viewInvoice/:viewInvoiceId',
 	meta: {},
 	name: 'View Invoice',