diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 3b82a1c..602781f 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -830,7 +830,7 @@ color: #514DA7;opacity:1;
         box-sizing: border-box; position: absolute; right: 0px;    top: 198px;} 
 .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000;  box-sizing: border-box; border-radius: 100px;    margin: 0 auto;
   margin-top: -63px;} 
-.app-discovery .top-user img{ width:57px; display: block; margin:0 auto;     margin-top: 45px;}
+.app-discovery .top-user img{ width:100px; display: block; margin:0 auto;     margin-top: 20px;}
 .app-discovery h1{font-size: 60px;
   font-family: 'Zuume';    margin-top: 136px;
   font-weight: 400;
@@ -842,7 +842,7 @@ color: #514DA7;opacity:1;
     line-height: 66px; width: 100%; display: block; text-align: center;
     color: #000;}
    .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} 
-   .popcorn-set{ position: absolute; width: 120px; display: block;     right: 440px; bottom: 0;} 
+   .popcorn-set{ position: absolute; width: 120px; display: block;     left: 50px; bottom: 0;} 
    .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat;  }
    .intro-startup .footer-bottom ul li.active{ background: #514DA7;}
    .ft-comments-group{display: block;
diff --git a/src/assets/css/media.css b/src/assets/css/media.css
index e4a1641..e6ab5b2 100644
--- a/src/assets/css/media.css
+++ b/src/assets/css/media.css
@@ -95,7 +95,7 @@ and (-webkit-min-device-pixel-ratio: 1) {
 and (max-device-width: 1680px) 
 {
   .epi-bg{ left: 13%;}
-  .popcorn-set{    right: 360px;}
+  /* .popcorn-set{    right: 360px;} */
   .ft-comments-group{width: 100%;}
 
 
@@ -151,9 +151,9 @@ and (-webkit-min-device-pixel-ratio: 1) {
   .insights-details{ width: 620px;}
   .episode-intro{    background-position: 101px -266px !important;}
   .spot-light-top{    left: -170px;}
-  .popcorn-set {
+  /* .popcorn-set {
     right: 160px;
-}
+} */
 .ft-comments-group{ margin-left:0px; width: 100%;}
 .comment-frm .frm-wdth{ padding-right: 20px;}
 
diff --git a/src/components/AuthorReadingBreak.vue b/src/components/AuthorReadingBreak.vue
new file mode 100644
index 0000000..0af3282
--- /dev/null
+++ b/src/components/AuthorReadingBreak.vue
@@ -0,0 +1,169 @@
+<template>
+  <main class="landing-page">
+    <div class="container-fluid episode-intro app-discovery-bg">
+      <Header></Header>
+
+      <!-- menu wrapper -->
+      <div class="intro-startup">
+
+
+        <div class="single-author-comments">
+          <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
+          <div class="ct-l-400">
+            <!-- <div class="single-author-li-comments" > -->
+              <div class="right-corner font-style">
+                <p>
+                  {{ currentSlideData.payload.metaData.description }}
+                </p>
+               
+              </div>
+              <!-- comments box -->
+            <!-- </div> -->
+          </div>
+          <img
+            class="s-user-comments m-0"
+            :src="currentSlideData.payload.metaData.authorImage"
+          />
+          <div class="comments-a-wrp ct-width">
+            <div class="single-author-li-comments" >
+              <div class="a-intro-comments">
+                <p>
+                  {{ currentSlideData.payload.comments[0].comment }}
+                </p>
+                <ul class="rly-comment-set">
+                  
+                </ul>
+              </div>
+              <!-- comments box -->
+            </div>
+            <!-- single author comments -->
+            <div class="single-author-li-comments" >
+              <div class="a-intro-comments">
+                <p>
+                  {{ currentSlideData.payload.comments[1].comment }}
+                </p>
+                <ul class="rly-comment-set">
+                 
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="footer-nav">
+          <div class="footer-top">
+            <ul class="top-intro-bt ps_right">
+              <li>
+                <a href="javascript:void(0);" @click="goBack"
+                  ><img src="../assets/images/skip-prev.svg" /> Prev</a
+                >
+              </li>
+              <li>
+                <a href="javascript:void(0);" @click="goNext"
+                  ><img src="../assets/images/skip-next.svg" /> Skip to next
+                  slide</a
+                >
+              </li>
+            </ul>
+          </div>
+          <!-- footer top -->
+          <div class="footer-bottom">
+            <ul>
+              <li></li>
+              <li></li>
+            </ul>
+          </div>
+          <!-- footer top -->
+        </div>
+        <!-- footer -->
+      </div>
+      <!-- body wrapper -->
+    </div>
+    <!-- main wrapper -->
+  </main>
+</template>
+
+<script>
+import Vue from "vue";
+import router from "../router";
+import Header from "./Header";
+
+export default {
+  components: {
+    Header: Header,
+  },
+  name: "AuthorReadingBreak",
+
+  data() {
+    return {
+      allSlide: [],
+      currentSlideIndex: null,
+      currentSlideData: null,
+    };
+  },
+  mounted() {
+    var allSlideData = localStorage.getItem(
+      "spotlight_slide" + this.$route.params.caseStudyId
+    );
+    if (allSlideData) {
+      this.allSlide = JSON.parse(allSlideData);
+      this.getCurrentSlideData();
+    }
+  },
+  methods: {
+    getCurrentSlideData() {
+      var i = this.allSlide.findIndex(
+        (slide_) => slide_.slideId == this.$route.params.slideId
+      );
+      this.currentSlideIndex = i;
+      this.currentSlideData = this.allSlide[i];
+      console.log( "currentSlideData", this.currentSlideData);
+    },
+    goNext() {
+      this.currentSlideIndex++;
+      this.$router.push({
+        name: this.allSlide[this.currentSlideIndex].ur,
+        params: {
+          caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
+          slideId: this.allSlide[this.currentSlideIndex].slideId,
+        },
+      });
+    },
+    goBack() {
+      this.currentSlideIndex--;
+      this.$router.push({
+        name: this.allSlide[this.currentSlideIndex].ur,
+        params: {
+          caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
+          slideId: this.allSlide[this.currentSlideIndex].slideId,
+        },
+      });
+    },
+    goToLogin() {
+      this.$router.push("/login");
+    },
+    goToSignUp() {
+      this.$router.push("/");
+    },
+    goToProfile() {
+      this.$router.push("/profile");
+    },
+
+     commentExistCheck(i) {
+      console.log(this.commentList[i].comment);
+      var returnValue = false;
+      if (this.commentList[i].comment) {
+        returnValue = true;
+      }
+      return returnValue;
+    },
+  },
+};
+</script>
+<style >
+.font-style{
+  color:#35338C;
+  font-size:2rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/AuthorReadingNow.vue b/src/components/AuthorReadingNow.vue
index 1f5b88a..b61d567 100644
--- a/src/components/AuthorReadingNow.vue
+++ b/src/components/AuthorReadingNow.vue
@@ -1,42 +1,37 @@
 <template>
   <main class="landing-page">
      <div class="container-fluid episode-intro app-discovery-bg">
-    <nav class="navbar navbar-expand-sm spotLight-nav">
-        <a class="navbar-brand" href="javascript:void(0);"><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="user-profile-photo insights-profile">
-          <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
-        </div>
-      </nav>
+              <Header></Header>
+
       <!-- menu wrapper -->
     <div class="intro-startup">
         <div class="spot-light-top">
             <img src="../assets/images/spot-light-top.svg" />
             <div class="app-discovery">
                 <div class="top-user">
-                    <img src="../assets/images/app-photo.svg" />
+                   <img src="../assets/images/retake-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Retake'"/>
+                  <img src="../assets/images/behind-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Behind-the-scenes'"/>
+                  <img src="../assets/images/critique-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Critique'"/>
+                  <img src="../assets/images/jxtapose.svg" v-if="this.allSlide[0].payload.metaData.type == 'Juxtapose'"/>
+                    <!-- <img src="../assets/images/app-photo.svg" /> -->
                     </div><!-- top user -->
-                    <h1>App Discovery</h1>
-                      <h2>01</h2>
-                      <img src="../assets/images/discovery.svg" class="discovery-app-img" />
+                    <h1>{{currentSlideData.payload.metaData.title}}</h1>
+                      <h2>{{currentSlideData.payload.metaData.count}}</h2>
+                      <img :src="currentSlideData.payload.metaData.authorImage" class="discovery-app-img" />
                 </div><!-- app Disovery -->
                
         </div><!-- spot light top -->
- <img src="../assets/images/popcorn-set.svg" class="popcorn-set" />
-      <div class="footer-nav">
+ <img src="../assets/images/popcorn-set.svg" class="popcorn-set top-intro-bt" />
+        <div class="footer-nav">
         <div class="footer-top">
-              <ul class="top-intro-bt">
-            <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
-             <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
+              <ul class="top-intro-bt ps_right">
+            <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
+             <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>
           </ul>
           </div><!-- footer top -->
         <div class="footer-bottom">
           <ul>
-            <li class="active"></li>
+            <li></li>
              <li></li>
           </ul>
           </div><!-- footer top -->
@@ -52,22 +47,70 @@
 <script>
 import Vue from "vue";
 import router from "../router";
+import Header from "./Header";
 
 export default {
+components: {
+    Header: Header,
+  },
   name: "AuthorReadingNow",
 
   data() {
-    return {};
+    
+    return {
+      allSlide:[],
+      currentSlideIndex:null,
+      currentSlideData:null,
+    };
+  },
+  mounted() {
+    var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
+    if (allSlideData) {
+      this.allSlide = JSON.parse(allSlideData);
+      this.getCurrentSlideData();
+    }
+
   },
-  mounted() {},
   methods: {
+    getCurrentSlideData(){
+      var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
+      this.currentSlideIndex = i; 
+      this.currentSlideData = this.allSlide[i]
+      console.log( this.allSlide[0],"currentSlideData",this.currentSlideData)
+
+    },
+    goNext(){
+      this.currentSlideIndex++
+      this.$router.push({
+        name: this.allSlide[this.currentSlideIndex].ur,
+        params: {
+          caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
+          slideId: this.allSlide[this.currentSlideIndex].slideId,
+        },
+      });
+
+    },
+    goBack(){
+       this.currentSlideIndex--
+      this.$router.push({
+        name: this.allSlide[this.currentSlideIndex].ur,
+        params: {
+          caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
+          slideId: this.allSlide[this.currentSlideIndex].slideId,
+        },
+      });
+
+    },
     goToLogin() {
       this.$router.push("/login");
     },
     goToSignUp() {
       this.$router.push("/");
     },
+    goToProfile() {
+      this.$router.push("/profile");
+    },
     
   },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 898a741..c10ace8 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -1080,6 +1080,14 @@ export default {
           url: "TwoScreenWithInsight",
           tempId: "T7_za3c3sYgx7bVvtKzasdf",
         },
+        {
+          url: "AuthorReadingNow",
+          tempId: "T8_zb4d4fYgx7bVvtKzasdf",
+        },
+        {
+          url: "AuthorReadingBreak",
+          tempId: "T9_zb3e4fYgy7dVvfKdasdf",
+        },
       ];
       var i = routes.findIndex((routes_) => routes_.tempId == tempId);
       return routes[i].url;
diff --git a/src/router/index.js b/src/router/index.js
index e5426ab..aace080 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,7 @@ import ProductInsight from '@/components/ProductInsight'
 import EpisodeIntro from '@/components/EpisodeIntro'
 import AuthorIntro from '@/components/AuthorIntro'
 import AuthorReadingNow from '@/components/AuthorReadingNow'
+import AuthorReadingBreak from '@/components/AuthorReadingBreak'
 import SingleAuthor from '@/components/SingleAuthor'
 import Outro from '@/components/outro'
 import SingleMobileInsight from '@/components/SingleMobileInsight'
@@ -97,11 +98,16 @@ export default new Router({
             component: AuthorIntro,
         },
         {
-            path: '/author-reading-now',
+            path: '/author-reading-now/:caseStudyId/:slideId',
             name: 'AuthorReadingNow',
             component: AuthorReadingNow,
         },
         {
+            path: '/author-reading-break/:caseStudyId/:slideId',
+            name: 'AuthorReadingBreak',
+            component: AuthorReadingBreak,
+        },
+        {
             path: '/single-author',
             name: 'SingleAuthor',
             component: SingleAuthor,