diff --git a/src/Services/AllApiCalls.js b/src/Services/AllApiCalls.js
new file mode 100644
index 0000000..f1e41e0
--- /dev/null
+++ b/src/Services/AllApiCalls.js
@@ -0,0 +1,14 @@
+import GetApis from "@/Services/GetApis.js";
+import PutApis from "@/Services/PutApis.js";
+export default {
+    mixins: [GetApis, PutApis],
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+
+
+    },
+}
\ No newline at end of file
diff --git a/src/Services/ApiCalls.js b/src/Services/ApiCalls.js
new file mode 100644
index 0000000..d70d284
--- /dev/null
+++ b/src/Services/ApiCalls.js
@@ -0,0 +1,195 @@
+import http from "@/Services/http.js";
+import Rules from "@/pages/Common/rules.js"
+export default {
+    mixins: [Rules],
+    data() {
+        return {
+
+            // LOADER
+            showLoader: false,
+            loading: false,
+            // SNACKBAR
+            snackbar: false,
+            snackbarColor: '',
+            text: '',
+            timeout: 4000,
+            y: "top",
+            x: "right",
+            mode: "",
+
+            // PAGINATION
+            size: 10,
+            elements: "",
+            pageCount: "",
+            pageNumber: 0
+
+        }
+    },
+    methods: {
+        // SNACKBAR
+        seeSnackbar(message, color) {
+            this.text = message;
+            this.showLoader = false;
+            this.snackbarColor = color;
+            this.snackbar = true;
+        },
+
+        // SET PAGINATION
+        setPagination(response) {
+            this.elements = response.data.totalElements;
+            var l = this.elements;
+            var s = this.size;
+            var floor = (l / s);
+            this.pageCount = Math.floor(floor);
+            if (this.pageCount == floor) {
+                this.pageCount -= 1
+            }
+            this.showLoader = false;
+            this.loading = false;
+        },
+
+        generateError(error) {
+            var customError
+            const errorNo = error.response.status
+            // console.log("satus code errorNo", errorNo)
+            switch (errorNo) {
+                case 400:
+                    let er = error
+                    if (er.response.data.error) {
+                        customError = error.response.data.error
+                    }
+                    if (er.response.data.errorMessage) {
+                        customError = error.response.data.errorMessage
+                    }
+                    if (er.response.data.message) {
+                        customError = error.response.data.message
+                    }
+                    return customError
+                    break;
+                case 401:
+                    customError = "Session expired"
+                    return customError
+                    break;
+                case 404:
+                    customError = error.response.data.errorMessage
+                    return customError
+                    break;
+                case 409:
+                    customError = error.response.data.errorMessage
+                    return customError
+                    break;
+                case 500:
+                    customError = error.response.data.message
+                    return customError
+                    break;
+                default:
+                    customError = "unknown error"
+                    return customError
+            }
+
+        },
+
+        // GET
+        getMethod(url, params) {
+            this.showLoader = true
+            return http()
+                .get(url, {
+                    params: params,
+
+                    headers: {
+                        // headers: { Authorization: "Bearer " + this.token }
+                    }
+                })
+                .then(response => {
+                    this.showLoader = false
+                    return response
+                })
+                .catch(error => {
+                    this.showLoader = false
+                    // console.log("error in getMethod = ", error.response)
+                    const message = this.generateError(error)
+                    if (message == "Session expired") {
+                        this.$store.dispatch("setToken", null);
+                        this.$router.push({
+                            name: 'Login'
+                        });
+                    } else {
+                        throw new Error(message);
+                    }
+
+                });
+        },
+
+        // POST
+        postMethod(url, payload) {
+            this.showLoader = true
+            return http()
+                .post(url, payload, {
+                    // headers: { Authorization: "Bearer " + this.token }
+                })
+                .then(response => {
+                    this.showLoader = false
+                    return response
+                })
+                .catch(error => {
+                    this.showLoader = false
+                    console.log("error in postMethod = ", error.response)
+                    const message = this.generateError(error)
+                    if (message == "Session expired") {
+                        this.$store.dispatch("setToken", null);
+                        this.$router.push({
+                            name: 'Login'
+                        });
+                    } else {
+                        throw new Error(message);
+                    }
+
+                });
+        },
+
+        // PUT
+        putMethod(url, payload) {
+            return http()
+                .put(url, payload, {
+                    // headers: {
+                    //     // Authorization: 'Bearer ' + this.token
+                    // }
+                })
+                .then(response => {
+                    return response
+                })
+                .catch(error => {
+                    console.log("error in putMethod = ", error.response)
+                    const message = this.generateError(error)
+                    if (message == "Session expired") {
+                        this.$store.dispatch("setToken", null);
+                        this.$router.push({
+                            name: 'Login'
+                        });
+                    } else {
+                        throw new Error(message);
+                    }
+
+                })
+        }
+
+    },
+    computed: {
+        displayedPageNumber() {
+            return this.pageNumber + 1;
+        },
+        // managerIsADMIN_VIEW: {
+        //     get() {
+        //         if (this.$store.state.roleName == "ADMIN_VIEW") {
+        //             return true;
+        //         } else {
+        //             return false
+        //         }
+        //     },
+        //     set(newValue) {
+        //         this.managerIsADMIN_VIEW = newValue;
+        //     }
+
+        // }
+    },
+}
\ No newline at end of file
diff --git a/src/Services/GetApis.js b/src/Services/GetApis.js
new file mode 100644
index 0000000..d4039ea
--- /dev/null
+++ b/src/Services/GetApis.js
@@ -0,0 +1,40 @@
+import ApiCalls from "@/Services/ApiCalls.js";
+export default {
+    mixins: [ApiCalls],
+    data() {
+        return {
+            courseData: [],
+
+
+        }
+    },
+    methods: {
+        /* getParticularCourseDetail */
+        async getParticularCourseDetail(courseId) {
+
+            try {
+                let response = await this.getMethod("/getParticularCourseDetail", {
+                    courseId: courseId
+                })
+                return response
+            } catch (error) {
+                console.log("error in getParticularCourseDetail - ", error.message)
+            }
+        },
+
+        /* getStudentCourses - to get courseData */
+        async getStudentCourses(params) {
+            try {
+                let response = await this.getMethod("/getStudentCourses", {
+                    classId: params.classId,
+                    studentId: params.studentId
+                })
+                this.courseData = response.data.data;
+                console.log("coursesData - ", this.courseData)
+            } catch (error) {
+                console.log("error in getStudentCourses - ", error.message)
+            }
+        }
+
+    },
+}
\ No newline at end of file
diff --git a/src/Services/PutApis.js b/src/Services/PutApis.js
new file mode 100644
index 0000000..ad72e42
--- /dev/null
+++ b/src/Services/PutApis.js
@@ -0,0 +1,14 @@
+import ApiCalls from "@/Services/ApiCalls.js";
+export default {
+    mixins: [ApiCalls],
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+
+
+
+    },
+}
\ No newline at end of file
diff --git a/src/components/pageHeader/AppToolbar.vue b/src/components/pageHeader/AppToolbar.vue
index 2d6b3ee..5582e58 100644
--- a/src/components/pageHeader/AppToolbar.vue
+++ b/src/components/pageHeader/AppToolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-toolbar flat class="white pt-2" fixed app>
+  <v-toolbar flat class="white" fixed app>
     <v-toolbar-title>
       <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon>
     </v-toolbar-title>
@@ -15,9 +15,7 @@
         type="text"
         dark
       ></v-text-field>-->
-      <v-toolbar-title
-        class="header-route-name pl-2"
-      >{{ $route.name }}</v-toolbar-title>
+      <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>
     </v-flex>
     <v-spacer></v-spacer>
     <v-btn type="button" @click="goToSchool" v-if="adminRole && SchoolRole">Towards School!</v-btn>
diff --git a/src/pages/Common/rules.js b/src/pages/Common/rules.js
new file mode 100644
index 0000000..e647fb7
--- /dev/null
+++ b/src/pages/Common/rules.js
@@ -0,0 +1,59 @@
+export default {
+    data() {
+        return {
+            cantBeEmpty: [v => !!v || "Field cannot be empty"],
+            hasToBeNumber: [
+                v => !!v || "Field cannot be empty",
+                v => {
+                    if (isNaN(v) || v.length < 10 || v.length > 10) {
+                        return false || "Field can only be a 10 digit number";
+                    } else {
+                        return true;
+                    }
+                }
+            ],
+            tenDigitNo: [
+                v => {
+                    if (v.length > 0) {
+                        if (isNaN(v) || v.length < 10 || v.length > 10) {
+                            return false || "Field can only be a 10 digit number";
+                        } else {
+                            return true;
+                        }
+
+                    } else {
+                        return true
+                    }
+
+                }
+            ],
+            hasToBeNumericValue: [
+                v => !!v || "Field cannot be empty",
+                v => {
+                    if (isNaN(v)) {
+                        return false || "Field can only be a number";
+                    } else {
+                        return true;
+                    }
+                }
+            ],
+            pinCodeRule: [
+                v => !!v || "Field cannot be empty",
+                v => {
+                    if (isNaN(v) || v.length < 6 || v.length > 6) {
+                        return false || "Field can only be a 6 digit number";
+                    } else {
+                        return true;
+                    }
+                }
+            ],
+            emailRule: [
+                v =>
+                /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
+                "E-mail must be valid"
+            ]
+
+        }
+    },
+
+}
\ No newline at end of file
diff --git a/src/pages/Dashboard/ChapterInfo.vue b/src/pages/Dashboard/ChapterInfo.vue
index 1b78043..01546c2 100644
--- a/src/pages/Dashboard/ChapterInfo.vue
+++ b/src/pages/Dashboard/ChapterInfo.vue
@@ -1,7 +1,26 @@
 <template>
   <div>
+    <!-- LOADER -->
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
+
+    <!-- SNACKBAR -->
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      :color="snackbarColor"
+    >
+      {{ text }}
+      <v-spacer></v-spacer>
+      <v-btn flat text @click="snackbar = false">X</v-btn>
+    </v-snackbar>
+
     <v-container class="pt-0">
-      <v-layout row class="mt-2">
+      <v-layout row class="mt-1">
         <v-flex xs8>
           <!-- CHAPTER INFO -->
           <div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div>
@@ -52,26 +71,35 @@
             <v-container class="pt-0">
               <div class="side-bar-color font-weight-bold title">Courses</div>
 
-              <div v-for="(course,index) in courseData">
-                <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
-                <span class="subheading">{{course.coursrName}}</span>
+              <div v-for="(course,index) in courseData" :key="index">
+                <v-btn
+                  flat
+                  class="subheading text-xs-start justify-left"
+                  style="cursor: pointer;"
+                  block
+                  @click="routeToCourseDetails(course._id)"
+                >
+                  <div style="width: 100%;text-align: left;">
+                    <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
+                    {{course.coursrName}}
+                  </div>
+                </v-btn>
               </div>
             </v-container>
           </v-card>
         </v-flex>
       </v-layout>
     </v-container>
-    <div class="loader" v-if="showLoader">
-      <v-progress-circular indeterminate color="white"></v-progress-circular>
-    </div>
   </div>
 </template>
 <script>
 import http from "@/Services/http.js";
+import AllApiCalls from "@/Services/AllApiCalls.js";
 export default {
+  mixins: [AllApiCalls],
   data() {
     return {
-      courseData: [],
+      // courseData: [],
       showLoader: false,
       chapter: { chapters: [{}] },
       chapterNames: [],
@@ -103,6 +131,20 @@ export default {
           console.log("err====>", err);
           this.showLoader = false;
         });
+    },
+    async routeToCourseDetails(courseId) {
+      /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
+      let response = await this.getParticularCourseDetail(courseId);
+
+      /* If the response is null then dont route */
+      if (response.data.data.length > 0) {
+        this.$router.push({
+          name: "Course Details",
+          query: { courseId: courseId }
+        });
+      } else {
+        this.seeSnackbar("No Data Available", "warning");
+      }
     }
   },
   // computed:{
@@ -110,7 +152,7 @@ export default {
 
   //   }
   // }
-  created() {
+  async created() {
     console.log("route query - ", this.$route.query);
 
     this.selectedChapterId = this.$route.query.chapterId;
@@ -133,28 +175,13 @@ export default {
     console.log(" index of selected chapter - ", this.indexSelectedChapter);
 
     /* get chapter clicked on using the id */
-    this.getParticularChapterDetail(this.selectedChapterId);
+    await this.getParticularChapterDetail(this.selectedChapterId);
 
-    /* getStudentCourses - to get courseData */
-    let ClassId = localStorage.getItem("parentClassId");
-    let parentStudentsId = localStorage.getItem("parentStudentId");
-    this.showLoader = true;
-    http()
-      .get("/getStudentCourses", {
-        params: {
-          classId: ClassId,
-          studentId: parentStudentsId
-        }
-      })
-      .then(response => {
-        this.courseData = response.data.data;
-        console.log(" course data - ", this.courseData);
-        this.showLoader = false;
-      })
-      .catch(err => {
-        console.log("err====>", err);
-        this.showLoader = false;
-      });
+    /* getStudentCourses - to get courseData - defined in GetApis.js*/
+    await this.getStudentCourses({
+      classId: localStorage.getItem("parentClassId"),
+      studentId: localStorage.getItem("parentStudentId")
+    });
   }
 };
 </script>
diff --git a/src/pages/Dashboard/CourseDetails.vue b/src/pages/Dashboard/CourseDetails.vue
index 4c878f2..90413c6 100644
--- a/src/pages/Dashboard/CourseDetails.vue
+++ b/src/pages/Dashboard/CourseDetails.vue
@@ -1,7 +1,26 @@
 <template>
   <div>
+    <!-- LOADER -->
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
+
+    <!-- SNACKBAR -->
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      :color="snackbarColor"
+    >
+      {{ text }}
+      <v-spacer></v-spacer>
+      <v-btn flat text @click="snackbar = false">X</v-btn>
+    </v-snackbar>
+
     <v-container class="pt-0">
-      <v-layout row class="mt-2">
+      <v-layout row class="mt-1">
         <v-flex xs8>
           <div
             class="title side-bar-color font-weight-bold"
@@ -18,7 +37,7 @@
           <div>
             <span
               style="cursor: pointer;"
-              @click="$router.push({name: 'Course Discussion Forum'})"
+              @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})"
               class="grey--text lighten-1"
             >
               <v-icon>question_answer</v-icon>Course discussion forum
@@ -56,8 +75,18 @@
               <div class="side-bar-color font-weight-bold title">Courses</div>
 
               <div v-for="(course,index) in courseData">
-                <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
-                <span class="subheading">{{course.coursrName}}</span>
+                <v-btn
+                  flat
+                  class="subheading text-xs-start justify-left"
+                  style="cursor: pointer;"
+                  block
+                  @click="routeToCourseDetails(course._id)"
+                >
+                  <div style="width: 100%;text-align: left;">
+                    <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
+                    {{course.coursrName}}
+                  </div>
+                </v-btn>
               </div>
               <!-- <v-expansion-panel focusable class="elevation-0">
                 <v-expansion-panel-content v-for="(item,i) in courseData" :key="i">
@@ -71,21 +100,20 @@
         </v-flex>
       </v-layout>
     </v-container>
-    <div class="loader" v-if="showLoader">
-      <v-progress-circular indeterminate color="white"></v-progress-circular>
-    </div>
   </div>
 </template>
 <script>
+import AllApiCalls from "@/Services/AllApiCalls.js";
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
+  mixins: [AllApiCalls],
   data() {
     return {
       showLoader: false,
       courseDetails: [{ courseId: {}, classId: {} }],
       chapterIds: [],
-      courseData: [],
+      // courseData: [],
       courseDataTree: []
     };
   },
@@ -104,48 +132,34 @@ export default {
         name: "Chapter Info",
         query: obj
       });
+    },
+    async routeToCourseDetails(courseId) {
+      /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
+      let response = await this.getParticularCourseDetail(courseId);
+
+      /* If the response is null then dont route */
+      if (response.data.data.length > 0) {
+        this.$router.push({
+          name: "Course Details",
+          query: { courseId: courseId }
+        });
+      } else {
+        this.seeSnackbar("No Data Available", "warning");
+      }
     }
   },
-  created() {
-    /* getParticularCourseDetail */
-    this.showLoader = true;
-    http()
-      .get("/getParticularCourseDetail", {
-        params: {
-          courseId: this.$route.query.courseId
-        }
-      })
-      .then(response => {
-        this.courseDetails = response.data.data;
-        console.log("courseDetails - ", this.courseDetails);
-        this.showLoader = false;
-      })
-      .catch(err => {
-        console.log("err====>", err);
-        this.showLoader = false;
-      });
+  async created() {
+    /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
+    let response = await this.getParticularCourseDetail(
+      this.$route.query.courseId
+    );
+    this.courseDetails = response.data.data;
 
-    /* getStudentCourses - to get courseData */
-    let ClassId = localStorage.getItem("parentClassId");
-    let parentStudentsId = localStorage.getItem("parentStudentId");
-    this.showLoader = true;
-    http()
-      .get("/getStudentCourses", {
-        params: {
-          classId: ClassId,
-          studentId: parentStudentsId
-        }
-      })
-      .then(response => {
-        this.courseData = response.data.data;
-        console.log(" course data - ", this.courseData);
-        let obj = {};
-        this.showLoader = false;
-      })
-      .catch(err => {
-        console.log("err====>", err);
-        this.showLoader = false;
-      });
+    /* getStudentCourses - to get courseData - defined in GetApis.js*/
+    await this.getStudentCourses({
+      classId: localStorage.getItem("parentClassId"),
+      studentId: localStorage.getItem("parentStudentId")
+    });
   }
 };
 </script>
diff --git a/src/pages/Dashboard/CourseDiscussionForum.vue b/src/pages/Dashboard/CourseDiscussionForum.vue
index 562a189..e184814 100644
--- a/src/pages/Dashboard/CourseDiscussionForum.vue
+++ b/src/pages/Dashboard/CourseDiscussionForum.vue
@@ -1,31 +1,168 @@
 <template>
-  <div>
-    <v-container class="pt-0">
-      <v-layout row class="mt-2">
+  <div class="body-color">
+    <!-- LOADER -->
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
+
+    <!-- SNACKBAR -->
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      :color="snackbarColor"
+    >
+      {{ text }}
+      <v-spacer></v-spacer>
+      <v-btn flat text @click="snackbar = false">X</v-btn>
+    </v-snackbar>
+
+    <!-- DIALOG TO ADD COURSE DISCUSSION FORUM -->
+    <v-dialog v-model="addForumDialog" max-width="500" persistent>
+      <v-card flat class="card-style pa-2" dark>
+        <v-layout>
+          <v-flex xs12>
+            <label class="title text-xs-center">Add Forum</label>
+            <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-container fluid>
+          <v-layout align-center>
+            <v-flex xs12>
+              <v-flex xs12 sm12>
+                <v-form ref="form" v-model="valid" lazy-validation>
+                  <v-layout>
+                    <v-flex
+                      xs12
+                      class="text-xs-center text-sm-center text-md-center text-lg-center"
+                    >
+                      <v-avatar size="100px" v-if="!imageUrl">
+                        <img src="/static/icon/user.png" />
+                      </v-avatar>
+                      <input
+                        type="file"
+                        style="display: none"
+                        ref="image"
+                        accept="image/*"
+                        @change="onFilePicked"
+                      />
+                      <img
+                        :src="imageData.imageUrl"
+                        height="150"
+                        width="150"
+                        v-if="imageUrl"
+                        style="border-radius:50%; width:200px"
+                      />
+                    </v-flex>
+                  </v-layout>
+
+                  <v-layout wrap>
+                    <!-- SUBJECT -->
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 sm4 class="pt-4 subheading">
+                          <label class="right hidden-xs-only hidden-sm-only">Subject:</label>
+                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
+                        </v-flex>
+                        <v-flex xs8 sm8 class="ml-3">
+                          <v-text-field
+                            v-model="addForumParams.subject"
+                            placeholder="subject"
+                            type="text"
+                            :rules="cantBeEmpty"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <!-- DESCRIPTION -->
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 sm4 class="pt-4 subheading">
+                          <label class="right hidden-xs-only hidden-sm-only">Description:</label>
+                          <label
+                            class="right hidden-lg-only hidden-md-only hidden-xl-only"
+                          >Description:</label>
+                        </v-flex>
+                        <v-flex xs8 sm8 class="ml-3">
+                          <v-text-field
+                            v-model="addForumParams.description"
+                            placeholder="Description"
+                            type="text"
+                            :rules="cantBeEmpty"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <!-- UPLOAD IMAGE -->
+                    <v-flex xs12 sm12>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
+                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-text-field
+                            label="Select Image"
+                            @click="pickFile"
+                            v-model="imageName"
+                            append-icon="attach_file"
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm12>
+                      <v-layout class="right">
+                        <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-form>
+              </v-flex>
+            </v-flex>
+          </v-layout>
+        </v-container>
+      </v-card>
+    </v-dialog>
+
+    <v-container grid-list-xl class="pt-0">
+      <v-layout row class="mt-1">
         <v-flex xs8>
-          <!-- HEADING -->
-          <div class="title side-bar-color font-weight-bold">Course Discussion Forum</div>
-          <div class="subheading grey--text lighten-1">General news and announcements</div>
-          <div>
-            <v-btn round class="open-dialog-button hidden-sm-only hidden-xs-only ml-0" dark>
-              <v-icon class="white--text pr-1" size="20">add</v-icon>Add A New Discussion Topic
-            </v-btn>
-          </div>
+          <v-layout column>
+            <!-- HEADING -->
+            <v-flex>
+              <div class="title side-bar-color font-weight-bold">Course Discussion Forum</div>
+              <div class="subheading grey--text lighten-1">General news and announcements</div>
+            </v-flex>
 
-          <!-- ACTIVITIES -->
-          <div class="mt-5">
-            <v-icon>library_books</v-icon>
-            <span class="subheading font-weight-bold">Activities</span>
-          </div>
-          <!-- OTHER OPTIONS -->
-          <div class="mt-5">
-            <ul class="subheading">
-              <li>Live online classes solution</li>
-              <li>Tutorial-pharmacetutical</li>
-              <li>HSP Interactive content</li>
-              <li>Assessment</li>
-            </ul>
-          </div>
+            <!-- ADD DISCUSSION FORUM BUTTON -->
+            <v-flex>
+              <div>
+                <v-btn
+                  fab
+                  dark
+                  class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
+                  small
+                  @click="addForumDialog = true"
+                >
+                  <v-icon dark>add</v-icon>
+                </v-btn>
+                <v-btn
+                  round
+                  class="open-dialog-button hidden-sm-only hidden-xs-only"
+                  dark
+                  @click="addForumDialog = true"
+                >
+                  <v-icon class="white--text pr-1" size="20">add</v-icon>Add A New Discussion Topic
+                </v-btn>
+              </div>
+            </v-flex>
+          </v-layout>
 
           <!-- NEXT CHAPTER -->
           <!-- <v-flex
@@ -52,20 +189,130 @@
               <div class="side-bar-color font-weight-bold title">Courses</div>
 
               <div v-for="(course,index) in courseData">
-                <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
-                <span class="subheading">{{course.coursrName}}</span>
+                <v-btn
+                  flat
+                  class="subheading text-xs-start justify-left"
+                  style="cursor: pointer;"
+                  block
+                  @click="routeToCourseDetails(course._id)"
+                >
+                  <div style="width: 100%;text-align: left;">
+                    <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
+                    {{course.coursrName}}
+                  </div>
+                </v-btn>
               </div>
             </v-container>
           </v-card>
         </v-flex>
       </v-layout>
     </v-container>
-    <div class="loader" v-if="showLoader">
-      <v-progress-circular indeterminate color="white"></v-progress-circular>
-    </div>
   </div>
 </template>
-<script></script>
+<script>
+import AllApiCalls from "@/Services/AllApiCalls.js";
+import http from "@/Services/http.js";
+export default {
+  mixins: [AllApiCalls],
+  data() {
+    return {
+      valid: true,
+      addForumDialog: false,
+      addForumParams: {},
+      // UPLOAD IMAGE
+      imageName: "",
+      imageUrl: "",
+      imageFile: "",
+      imageData: {}
+    };
+  },
+  methods: {
+    /* UPLOAD IMAGE */
+    pickFile() {
+      this.$refs.image.click();
+    },
+
+    onFilePicked(e) {
+      // console.log(e)
+      const files = e.target.files;
+      this.imageData.upload = e.target.files[0];
+      if (files[0] !== undefined) {
+        this.imageName = files[0].name;
+        if (this.imageName.lastIndexOf(".") <= 0) {
+          return;
+        }
+        const fr = new FileReader();
+        fr.readAsDataURL(files[0]);
+        fr.addEventListener("load", () => {
+          this.imageUrl = fr.result;
+          this.imageFile = files[0]; // this is an image file that can be sent to server...
+          this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
+        });
+      } else {
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
+    submit() {
+      if (this.$refs.form.validate()) {
+        this.addForumParams.classId = localStorage.getItem("parentClassId");
+        this.addForumParams.courseId = this.$route.query.courseId;
+        this.addForumParams.studentId = localStorage.getItem("parentStudentId");
+
+        if (this.imageUrl) {
+          var str = this.imageUrl;
+          const [baseUrl, imageUrl] = str.split(/,/);
+          this.addForumParams.upload = imageUrl;
+        }
+        this.loading = true;
+        http()
+          .post("/createCourseDiscussion", this.addForumParams)
+          .then(response => {
+            this.snackbar = true;
+            this.text = "Discussion added successfully";
+            this.snackbarColor = "green";
+            this.addForumDialog = false;
+            this.clear();
+            this.loading = false;
+            console.log("response of createCourseDiscussion - ", response);
+          })
+          .catch(error => {
+            this.snackbar = true;
+            this.text = error.response.data.message;
+            this.color = "error";
+            this.loading = false;
+          });
+      }
+    },
+    clear() {
+      this.$refs.form.reset();
+      this.imageUrl = "";
+    },
+    async routeToCourseDetails(courseId) {
+      /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
+      let response = await this.getParticularCourseDetail(courseId);
+
+      /* If the response is null then dont route */
+      if (response.data.data.length > 0) {
+        this.$router.push({
+          name: "Course Details",
+          query: { courseId: courseId }
+        });
+      } else {
+        this.seeSnackbar("No Data Available", "warning");
+      }
+    }
+  },
+  async created() {
+    /* getStudentCourses - to get courseData - defined in GetApis.js*/
+    await this.getStudentCourses({
+      classId: localStorage.getItem("parentClassId"),
+      studentId: localStorage.getItem("parentStudentId")
+    });
+  }
+};
+</script>
 <style scoped>
 .side-bar-color {
   color: #827bfa !important;
diff --git a/src/pages/Dashboard/dashboard.vue b/src/pages/Dashboard/dashboard.vue
index 08fe33c..2d5857d 100644
--- a/src/pages/Dashboard/dashboard.vue
+++ b/src/pages/Dashboard/dashboard.vue
@@ -48,6 +48,26 @@
       </v-card>
     </v-dialog>-->
     <!-- <v-container fluid grid-list-xl> -->
+
+    <!-- LOADER -->
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
+
+    <!-- SNACKBAR -->
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      :color="snackbarColor"
+    >
+      {{ text }}
+      <v-spacer></v-spacer>
+      <v-btn flat text @click="snackbar = false">X</v-btn>
+    </v-snackbar>
+
     <v-layout wrap>
       <v-flex xs12>
         <v-layout wrap row>
@@ -239,7 +259,7 @@
                               <v-list-tile-content>
                                 <v-list-tile-title
                                   style="cursor: pointer;"
-                                  @click="$router.push( { name:'Course Details', query:{courseId: course._id} } )"
+                                  @click="routeToCourseDetails(course._id)"
                                 >{{ course.coursrName }}</v-list-tile-title>
                               </v-list-tile-content>
                             </v-list-tile>
@@ -414,21 +434,20 @@
         </v-flex>
       </v-card>
     </v-dialog>
-    <div class="loader" v-if="showLoader">
-      <v-progress-circular indeterminate color="white"></v-progress-circular>
-    </div>
   </v-app>
 </template>
 
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
+import AllApiCalls from "@/Services/AllApiCalls.js";
 // import { FunctionalCalendar } from "vue-functional-calendar";
 
 export default {
   components: {
     // FunctionalCalendar
   },
+  mixins: [AllApiCalls],
   data() {
     return {
       // data: {
@@ -437,6 +456,7 @@ export default {
       // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
       // calendarData: {},
       // calendar: {},
+
       colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
       demoEvents: [
         {
@@ -623,6 +643,20 @@ export default {
     // this.getUsersList();
   },
   methods: {
+    async routeToCourseDetails(courseId) {
+      /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
+      let response = await this.getParticularCourseDetail(courseId);
+
+      /* If the response is null then dont route */
+      if (response.data.data.length > 0) {
+        this.$router.push({
+          name: "Course Details",
+          query: { courseId: courseId }
+        });
+      } else {
+        this.seeSnackbar("No Data Available", "warning");
+      }
+    },
     studentMeetingEvents() {
       http()
         .get("/studentMeetingEvents", {
@@ -831,14 +865,14 @@ export default {
 
           if (localStorage.getItem("parentStudentId") == null) {
             var parentStudentsId = response.data.data.students[0].classId;
-            var ClassId = response.data.data.students[0]._id;
+            var classId = response.data.data.students[0]._id;
           }
           if (localStorage.getItem("parentStudentId")) {
             var parentStudentsId = localStorage.getItem("parentStudentId");
-            var ClassId = localStorage.getItem("parentClassId");
+            var classId = localStorage.getItem("parentClassId");
           }
-          this.getCourses(parentStudentsId, ClassId);
-          this.getAnnoucementes(ClassId);
+          this.getCourses(parentStudentsId, classId);
+          this.getAnnoucementes(classId);
           this.showLoader = false;
         })
         .catch(err => {
@@ -846,30 +880,36 @@ export default {
           this.showLoader = false;
         });
     },
-    getCourses(parentStudentsId, ClassId) {
-      this.showLoader = true;
-      http()
-        .get("/getStudentCourses", {
-          params: {
-            classId: ClassId,
-            studentId: parentStudentsId
-          }
-        })
-        .then(response => {
-          this.courseData = response.data.data;
-          this.showLoader = false;
-        })
-        .catch(err => {
-          console.log("err====>", err);
-          this.showLoader = false;
-        });
+    async getCourses(parentStudentsId, classId) {
+      /* getStudentCourses - to get courseData - defined in GetApis.js*/
+      await this.getStudentCourses({
+        classId: classId,
+        studentId: parentStudentsId
+      });
+      // this.showLoader = true;
+      // http()
+      //   .get("/getStudentCourses", {
+      //     params: {
+      //       classId: classId,
+      //       studentId: parentStudentsId
+      //     }
+      //   })
+      //   .then(response => {
+      //     this.courseData = response.data.data;
+      //     console.log("course data - ",this.courseData)
+      //     this.showLoader = false;
+      //   })
+      //   .catch(err => {
+      //     console.log("err====>", err);
+      //     this.showLoader = false;
+      //   });
     },
-    getAnnoucementes(ClassId) {
+    getAnnoucementes(classId) {
       this.showLoader = true;
       http()
         .get("/getAnnoucementesList", {
           params: {
-            classId: ClassId
+            classId: classId
           }
         })
         .then(response => {