diff --git a/config/dev.env.js b/config/dev.env.js
index f2ded74..f2f2b38 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -14,4 +14,6 @@ module.exports = merge(prodEnv, {
     courseId1: '"5e4b77e8f77376502a616cd2"',
     courseId2: '"5e4b77f5f77376502a616cd9"',
     courseId3: '"5e4b76155d6509dfec06e109"'
-})
\ No newline at end of file
+})
+
+
diff --git a/src/components/CaseStudy.vue b/src/components/CaseStudy.vue
new file mode 100644
index 0000000..4055349
--- /dev/null
+++ b/src/components/CaseStudy.vue
@@ -0,0 +1,164 @@
+<template>
+  <main class="landing-page">
+    <!-- profile -->
+    <div class="container-fluid inner-wrp" style="background: transparent">
+      <nav class="navbar navbar-expand-sm spotLight-nav">
+        <a class="navbar-brand" href="#"
+          ><img src="../assets/images/logo.png"
+        /></a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#navbarsExample03"
+          aria-controls="navbarsExample03"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+          <span class="navbar-toggler-icon"></span>
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarsExample03">
+          <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+              <a class="nav-link" @click="create" style="cursor:pointer">Create Case Study</a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" style="cursor:pointer">Create Insight</a>
+            </li>
+          </ul>
+        </div>
+        <div class="">
+          <a href="javascript:void(0);" @click="logout">Log Out </a>
+        </div>
+      </nav>
+      <!-- menu wrapper -->
+      <!-- <div class="row profile-tab-spc-top">
+        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
+          <div class="user-profile">
+            <div class="form-group floating-label">
+              <select
+                class="form-control"
+                v-model="userData"
+                v-on:change="selectUser(userData)"
+              >
+                <option value="null">Select User</option>
+                <option v-for="(user, i) in userList" :key="i" :value="i">
+                  {{ user.name }} ({{ user.email }})
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div> -->
+
+      <div class="row">
+        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
+          <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+              <h5 class="nav-link" >
+                  <span style="cursor:pointer"  >Case Study List</span></h5>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="row">
+        <table>
+          <tr>
+            <th>Name</th>
+            <th>App</th>
+            <th>Authors</th>
+            <th>Action</th>
+          </tr>
+          <tr v-for="(study, j) in caseStudyList"
+            :key="j"> 
+            <td>{{study.intro.name}}</td>
+            <td>{{study.intro.app}}</td>
+            <td>{{study.intro.authors[0]}}</td>
+            <td><a style="cursor:pointer" @click="edit(study)">Edit</a></td>
+          </tr>
+        </table>
+      </div>
+      <!-- 1st row -->
+    </div>
+  </main>
+</template>
+
+<script>
+import Vue from "vue";
+import router from "../router";
+import $ from "jquery";
+import axios from "axios";
+
+export default {
+  name: "CaseStudy",
+
+  data() {
+    return {
+      loggedinFlag: false,
+      usertoken: null,
+      userData: {},
+      caseStudyList:[],
+    };
+  },
+  mounted() {
+  
+    var userdata = localStorage.getItem("spotlight_usertoken");
+    if (userdata) {
+      userdata = JSON.parse(userdata);
+      this.usertoken = userdata.token;
+      this.getCaseSTudies();
+    }
+  },
+  methods: {
+    getCaseSTudies() {
+      axios
+        .get("/superAdmin/caseStudies", {
+          headers: {
+            Authorization: "Bearer " + this.usertoken,
+          },
+        })
+        .then((response) => {
+          this.caseStudyList = response.data.data.caseStudies;
+          console.log("response", response.data.data.caseStudies);
+        })
+        .catch((error) => console.log(error));
+    },
+    edit(payload){
+        console.log("study",payload)
+        localStorage.setItem('spotlight_caseStudy'+payload._id, JSON.stringify(payload))
+        this.$router.push("/profile?"+payload._id);
+    },
+    create(){
+         this.$router.push("/profile");
+    },
+    logout(){
+         this.$router.push("/");
+    }
+  },
+};
+</script>
+<style>
+.light-font-weight {
+  font-weight: 300 !important;
+}
+
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+td,
+th {
+  border: 1px solid #000;
+  text-align: left;
+  padding: 8px;
+}
+
+tr:nth-child(even) {
+  background-color: #dddddd;
+}
+</style>
diff --git a/src/components/LandingPage.vue b/src/components/LandingPage.vue
index 47d405f..336f4ac 100644
--- a/src/components/LandingPage.vue
+++ b/src/components/LandingPage.vue
@@ -22,21 +22,23 @@
         <div class="collapse navbar-collapse" id="navbarsExample03">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-              <a class="nav-link" href="#">About</a>
+              <a class="nav-link" href="#"></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Masterclass</a>
+              <a class="nav-link" href="#"></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Stories</a>
+              <a class="nav-link" href="#"></a>
             </li>
             <li class="nav-item spotLight-img">
               <a class="nav-link" href="#"
-                ><img src="../assets/images/SPOTLight.svg"
-              /></a>
+                >
+                <!-- <img src="../assets/images/SPOTLight.svg"
+              /> -->
+              </a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Library</a>
+              <a class="nav-link" href="#"></a>
             </li>
           </ul>
         </div>
@@ -118,7 +120,7 @@ export default {
            this.$toaster.success(response.data.message)
             if(response.data.status == 'success'){
                 localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data))
-                this.$router.push("/profile");
+                this.$router.push("/casestudy");
             }
         })
         .catch( (error) =>{
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 190706d..669f28d 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -23,7 +23,10 @@
         <div class="collapse navbar-collapse" id="navbarsExample03">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-              <a class="nav-link">Create Case Study</a>
+              <a class="nav-link" style="cursor:pointer" @click="listPage">Case Study List</a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" style="cursor:pointer">Create Insight</a>
             </li>
           </ul>
         </div>
@@ -40,6 +43,7 @@
                 class="form-control"
                 v-model="userData"
                 v-on:change="selectUser(userData)"
+                :disabled="editMode"
               >
                 <option value="null">Select User</option>
                 <option v-for="(user, i) in userList" :key="i" :value="i">
@@ -180,19 +184,25 @@
 
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
           <div class="form-group floating-label">
+            <label for="lname" class="lname">Select Insight Tags</label>
+            <select
+              class="form-control"
+              v-model="insightName"
+              @change="addInsight('insight')"
+            >
+              <option value="null">Select Insight Tag</option>
+              <option value="Design">Design</option>
+              <option value="Product">Product</option>
+              <option value="Marketing">Marketing</option>
+              <option value="Pricing">Pricing</option>
+              <option value="Psychology">Psychology</option>
+            </select>
+          </div>
+        </div>
+        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
+          <div class="form-group floating-label">
             <label for="lname" class="lname"></label>
             <ul class="interests">
-              <li>
-                <input
-                  class=""
-                  placeholder="Add Insight Tags"
-                  v-model="insightName"
-                />
-                <a href="javascript:void(0);" @click="addInsight('insight')"
-                  ><img src="../assets/images/plus-circle.svg"
-                /></a>
-              </li>
-
               <li
                 v-for="(interest, i) in caseStudy.caseStudyDetails.insightTags"
                 :key="i"
@@ -413,6 +423,8 @@ export default {
   data() {
     return {
       loggedinFlag: false,
+      caseId: null,
+      editMode: false,
       userData: null,
       usertoken: null,
       insightName: null,
@@ -447,6 +459,20 @@ export default {
     };
   },
   mounted() {
+    if (this.$route.fullPath.split("?").length == 2) {
+      this.editMode = true;
+      this.caseId = this.$route.fullPath.split("?")[1];
+      var introData = localStorage.getItem("spotlight_caseStudy" + this.caseId);
+      if (introData) {
+        introData = JSON.parse(introData);
+        console.log("introData", introData);
+        this.caseStudy.caseStudyDetails.intro = introData.intro;
+        this.caseStudy.caseStudyDetails.userId = introData.userId;
+        this.caseStudy.caseStudyDetails.outro = introData.outro;
+        this.caseStudy.caseStudyDetails.insightTags = introData.insightTags;
+        this.caseStudy.caseStudyDetails.focusAreas = introData.focusAreas;
+      }
+    }
     var userdata = localStorage.getItem("spotlight_usertoken");
     if (userdata) {
       userdata = JSON.parse(userdata);
@@ -634,21 +660,74 @@ export default {
               this.templateList.push(temp);
             }
           });
+          if (this.editMode) {
+            this.getSLideData();
+          }
           console.log("templates", this.templateList);
         })
         .catch((error) => console.log(error));
     },
 
+    getSLideData() {
+      axios
+        .get("/superAdmin/caseStudySlides?caseStudyId=" + this.caseId, {
+          headers: {
+            Authorization: "Bearer " + this.usertoken,
+          },
+        })
+        .then((response) => {
+          var finalArray = [];
+          response.data.data.forEach((template_) => {
+            var keys = [];
+            var i = this.templateList.findIndex(
+              (temp_) => temp_._id == template_.templateId
+            );
+            var obj = {
+              _id: this.templateList[i]._id,
+              bounceBoard: this.templateList[i].bounceBoard,
+              insight: this.templateList[i].insight,
+              // commentBox: this.templateList[i].commentBox,
+              metaData: {
+                fields: [],
+                comments: [],
+              },
+            };
+            if (this.templateList[i].bounceBoard) {
+              obj.commentBox = this.templateList[i].commentBox;
+            }
+            var fieldArray = [];
+            this.templateList[i].metaData.fields.forEach((element) => {
+              var fieldobj = {
+                fieldName: element.fieldName,
+                displayName: element.displayName,
+                fieldValue: template_.metaData[element.fieldName],
+                fieldType: element.fieldType,
+              };
+              obj.metaData.fields.push(fieldobj);
+            });
+            finalArray.push(obj);
+          });
+          this.caseStudy.slides = finalArray;
+          console.log("----", finalArray);
+          console.log(this.templateList, "getSLideData==>");
+        })
+        .catch((error) => console.log(error));
+    },
+
     submit() {
       const latest = Object.create(this.caseStudy);
 
       var slidArray = [];
       latest.slides.forEach((slides) => {
-        console.log("slides",slides)
+        console.log("slides", slides);
         var slideData = {};
         slideData.templateId = slides._id;
         slideData.bounceBoard = slides.bounceBoard;
         slideData.insight = slides.insight;
+        if (slides.metaData.comments && slides.metaData.comments.length > 0) {
+          slideData.comments = slides.metaData.comments;
+          // this.getSLideData();
+        }
         // var comments = [];
         // if (slides.bounceBoard) {
         //   slides.metaData.comments.forEach((element) => {
@@ -665,7 +744,11 @@ export default {
       });
 
       console.log("slideData", slidArray);
-      this.saveProfile(slidArray);
+      if (this.editMode) {
+        this.updateProfile(slidArray);
+      }else{
+        this.saveProfile(slidArray);
+      }
     },
 
     saveProfile(slides) {
@@ -693,6 +776,37 @@ export default {
           }
         });
     },
+    updateProfile(slides) {
+      var obj = {};
+      obj.caseStudyId = this.caseId,
+      obj.caseStudyDetails = this.caseStudy.caseStudyDetails;
+      obj.caseStudyDetails.intro.readTime = Math.round(
+        slides.length / 3
+      ).toString();
+      obj.slides = slides;
+      axios
+        .put("/superAdmin/caseStudy", obj, {
+          headers: {
+            Authorization: "Bearer " + this.usertoken,
+          },
+        })
+        .then((response) => {
+          // this.userData = response.data.data;
+          this.$toaster.success("Case Study Updated");
+          this.$router.go(this.$router.currentRoute)
+
+
+          console.log(response);
+        })
+        .catch((error) => {
+          if (error.response) {
+            this.$toaster.error(error.response.data.message);
+          }
+        });
+    },
+    listPage(){
+         this.$router.push("/casestudy");
+    },
 
     async getMeatda(tempId) {
       var obj = [
diff --git a/src/main.js b/src/main.js
index cd67cc2..0343d90 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+// Add this line
 import App from './App'
 import router from './router'
 import axios from 'axios'
@@ -13,10 +14,10 @@ import { Auth0Plugin } from "./auth"
 import Vuelidate from 'vuelidate'
 import moment from 'moment'
 import Toaster from 'v-toaster'
- 
-// You need a specific loader for CSS files like https://github.com/webpack/css-loader
 import 'v-toaster/dist/v-toaster.css'
  
+// You need a specific loader for CSS files like https://github.com/webpack/css-loader
+
 // optional set default imeout, the default is 10000 (10 seconds).
 Vue.use(Toaster, {timeout: 5000})
 Vue.use(Vuelidate)
diff --git a/src/router/index.js b/src/router/index.js
index 78f3f50..6ff5bf9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import { authGuard } from "../auth/authGuard"
 import LandingPage from '@/components/LandingPage'
 import Profile from '@/components/Profile'
+import CaseStudy from '@/components/CaseStudy'
 
 
 import router from '../router'
@@ -27,6 +28,11 @@ export default new Router({
             name: 'Profile',
             component: Profile,
         },
+        {
+            path: '/casestudy',
+            name: 'CaseStudy',
+            component: CaseStudy,
+        }