diff --git a/src/components/CaseStudy.vue b/src/components/CaseStudy.vue
index 4055349..b4e2b76 100644
--- a/src/components/CaseStudy.vue
+++ b/src/components/CaseStudy.vue
@@ -23,10 +23,10 @@
         <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>
+              <a class="nav-link" @click="create('/profile')" style="cursor:pointer">Create Case Study</a>
             </li>
             <li class="nav-item active">
-                <a class="nav-link" style="cursor:pointer">Create Insight</a>
+                <a class="nav-link" @click="create('/insight')"  style="cursor:pointer">Create Insight</a>
             </li>
           </ul>
         </div>
@@ -131,8 +131,8 @@ export default {
         localStorage.setItem('spotlight_caseStudy'+payload._id, JSON.stringify(payload))
         this.$router.push("/profile?"+payload._id);
     },
-    create(){
-         this.$router.push("/profile");
+    create(url){
+         this.$router.push(url);
     },
     logout(){
          this.$router.push("/");
diff --git a/src/components/Insight.vue b/src/components/Insight.vue
new file mode 100644
index 0000000..e7ef67e
--- /dev/null
+++ b/src/components/Insight.vue
@@ -0,0 +1,264 @@
+<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('/profile')"
+                style="cursor: pointer"
+                >Create Case Study</a
+              >
+            </li>
+            <li class="nav-item active">
+              <a
+                class="nav-link"
+                @click="create('/casestudy')"
+                style="cursor: pointer"
+                >Case Study List</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-3 col-md-3 col-lg-3 col-xl-3">
+          <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> -->
+
+      <!-- 1st row -->
+      <div class="row">
+        <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">Case Study Type</label>
+            <select
+              class="form-control"
+              v-model="userData.tag"
+            >
+              <option value="null">Select Case Type</option>
+              <option value="Retake">Retake</option>
+              <option value="Behind-the-scenes">Behind-the-scenes</option>
+              <option value="Critique">Critique</option>
+              <option value="Juxtapose">Juxtapose</option>
+            </select>
+          </div>
+        </div>
+        <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
+          <div class="form-group floating-label">
+            <label for="lname" class="lname">Title</label>
+            <input
+              type="text"
+              class="form-control"
+              value=""
+              placeholder=" "
+              v-model="userData.title"
+            />
+          </div>
+        </div>
+
+      
+      </div>
+      <!-- 1st row -->
+      <!-- 2nd row -->
+      <div class="row">
+        <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
+          <div class="form-group floating-label">
+            <label for="lname" class="lname">Description</label>
+            <input
+              type="text"
+              class="form-control"
+              value=""
+              placeholder=" "
+              v-model="userData.description"
+            />
+          </div>
+        </div>
+
+      
+      </div>
+      <!-- 2nd row -->
+      <!-- 3rd row -->
+      <div class="row">
+        <div class="form-layout signup-frm-spc" style="margin-top:10px">
+          <form>
+            <a
+              href="javascript:void(0);"
+              class="btn btn-lg sb-button"
+              type="submit"
+              @click="submit"
+            >
+              <img src="../assets/images/key.svg" /> submit
+            </a>
+          </form>
+        </div>
+
+      
+      </div>
+      <!-- 3rd row -->
+
+      <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">Insight List</span>
+              </h5>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="row">
+        <table>
+          <tr>
+            <th>Id</th>
+            <th>Tag</th>
+            <th>Title</th>
+            <th>Action</th>
+          </tr>
+          <tr v-for="(insight, j) in insightList" :key="j">
+            <td>{{ insight._id }}</td>
+            <td>{{ insight.tag }}</td>
+            <td>{{ insight.title }}</td>
+            <td><a style="cursor: pointer">Delete</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: "Insight",
+
+  data() {
+    return {
+      loggedinFlag: false,
+      usertoken: null,
+      userData: {
+        tag: null,
+        title: null,
+        description:
+          null,
+        furtherReading: [],
+      },
+      insightList: [],
+    };
+  },
+  mounted() {
+    var userdata = localStorage.getItem("spotlight_usertoken");
+    if (userdata) {
+      userdata = JSON.parse(userdata);
+      this.usertoken = userdata.token;
+      this.getInsight();
+    }
+  },
+  methods: {
+    getInsight() {
+      axios
+        .get("/superAdmin/insight", {
+          headers: {
+            Authorization: "Bearer " + this.usertoken,
+          },
+        })
+        .then((response) => {
+          this.insightList = response.data.data;
+          console.log("response", response.data.data);
+        })
+        .catch((error) => console.log(error));
+    },
+    submit() {
+      axios
+        .post("/superAdmin/insight", this.userData, {
+          headers: {
+            Authorization: "Bearer " + this.usertoken,
+          },
+        })
+        .then((response) => {
+          // this.userData = response.data.data;
+          this.$toaster.success("Insight Created");
+          this.$router.go(this.$router.currentRoute)
+
+          console.log(response);
+        })
+        .catch((error) => {
+          if (error.response) {
+            this.$toaster.error(error.response.data.message);
+          }
+        });
+    },
+    create(url) {
+      this.$router.push(url);
+    },
+    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/Profile.vue b/src/components/Profile.vue
index 4b595fc..34c2c69 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -23,10 +23,10 @@
         <div class="collapse navbar-collapse" id="navbarsExample03">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-              <a class="nav-link" style="cursor:pointer" @click="listPage">Case Study List</a>
+              <a class="nav-link" style="cursor:pointer" @click="listPage('/casestudy')">Case Study List</a>
             </li>
             <li class="nav-item active">
-                <a class="nav-link" style="cursor:pointer">Create Insight</a>
+                <a class="nav-link" style="cursor:pointer" @click="listPage('/insight')">Create Insight</a>
             </li>
           </ul>
         </div>
@@ -330,8 +330,28 @@
                 >
               </p>
             </li>
+             <li class="nav-item active" v-if="slide.insight">
+              <div class="form-group floating-label">
+            <label for="lname" class="lname">Insight</label>
+            <select
+              class="form-control"
+              v-model="insightId"
+              v-on:change="insightSelected(slide)"
+            >
+              <option value="null">Select Insight</option>
+              <option v-for="(insight, i) in insightList" :key="i" :value="insight._id">
+                {{ insight._id }}
+              </option>
+            </select>
+          </div>
+            </li>
           </ul>
         </div>
+       
+
+        
+ 
+
 
         <div class="row">
           <div
@@ -389,6 +409,7 @@
             </div>
           </div>
         </div>
+       
       </div>
 
       <!-- 1st row end -->
@@ -438,6 +459,8 @@ export default {
       slideId: null,
       userList: [],
       templateList: [],
+      insightList: [],
+      insightId:null,
       caseStudy: {
         caseStudyDetails: {
           userId: [],
@@ -485,6 +508,7 @@ export default {
       this.usertoken = userdata.token;
       this.getUserList();
       this.getTemplateList();
+      this.getInsightList();
     }
   },
   methods: {
@@ -525,6 +549,14 @@ export default {
       this.caseStudy.slides.push(this.templateList[i]);
       console.log("this.caseStudy.slides", this.caseStudy.slides);
     },
+    async insightSelected(data) {
+     
+      // this.caseStudy.slides.push(this.templateList[i]);
+      
+      console.log("data",data);
+      data.insightId = this.insightId;
+      this.insightId = null;
+    },
 
     removeSlide(i) {
       this.caseStudy.slides.splice(i, 1);
@@ -677,6 +709,20 @@ export default {
         })
         .catch((error) => console.log(error));
     },
+    getInsightList() {
+      axios
+        .get("/superAdmin/insight", {
+          headers: {
+            Authorization: "Bearer " + this.usertoken,
+          },
+        })
+        .then((response) => {
+          this.insightList = response.data.data;
+          
+          console.log("insight", response.data.data);
+        })
+        .catch((error) => console.log(error));
+    },
 
     getSLideData() {
       axios
@@ -696,6 +742,7 @@ export default {
               _id: this.templateList[i]._id,
               bounceBoard: this.templateList[i].bounceBoard,
               insight: this.templateList[i].insight,
+              slideId:template_._id,
               // commentBox: this.templateList[i].commentBox,
               metaData: {
                 fields: [],
@@ -705,6 +752,9 @@ export default {
             if (this.templateList[i].bounceBoard) {
               obj.commentBox = this.templateList[i].commentBox;
             }
+            if (this.templateList[i].insight) {
+              obj.insightId = template_.insightId;
+            }
             var fieldArray = [];
             this.templateList[i].metaData.fields.forEach((element) => {
               var fieldobj = {
@@ -734,6 +784,14 @@ export default {
         slideData.templateId = slides._id;
         slideData.bounceBoard = slides.bounceBoard;
         slideData.insight = slides.insight;
+        if(slides.slideId){
+          slideData.slideId = slides.slideId;
+
+        }
+        if(slides.insightId){
+          slideData.insightId = slides.insightId;
+
+        }
         if (slides.metaData.comments && slides.metaData.comments.length > 0) {
           slideData.comments = slides.metaData.comments;
           // this.getSLideData();
@@ -777,6 +835,7 @@ export default {
         .then((response) => {
           // this.userData = response.data.data;
           this.$toaster.success("Case Study Created");
+          this.$router.go(this.$router.currentRoute)
 
           console.log(response);
         })
@@ -814,8 +873,8 @@ export default {
           }
         });
     },
-    listPage(){
-         this.$router.push("/casestudy");
+    listPage(url){
+         this.$router.push(url);
     },
 
     async getMeatda(tempId) {
diff --git a/src/router/index.js b/src/router/index.js
index 6ff5bf9..0c8edcc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import { authGuard } from "../auth/authGuard"
 import LandingPage from '@/components/LandingPage'
 import Profile from '@/components/Profile'
 import CaseStudy from '@/components/CaseStudy'
+import Insight from '@/components/Insight'
 
 
 import router from '../router'
@@ -32,6 +33,11 @@ export default new Router({
             path: '/casestudy',
             name: 'CaseStudy',
             component: CaseStudy,
+        },
+        {
+            path: '/insight',
+            name: 'Insight',
+            component: Insight,
         }