diff --git a/src/routes/retailer/boxed-products-ordering.vue b/src/routes/retailer/boxed-products-ordering.vue
index 1b1b7d3..8d0dbd8 100644
--- a/src/routes/retailer/boxed-products-ordering.vue
+++ b/src/routes/retailer/boxed-products-ordering.vue
@@ -1,6 +1,10 @@
 <template>
   <v-container>
-    <div class="h3 my-5 py-5 body-font1">Boxed Products & Ordering</div>
+   <div class="homepage-overflow-x-hidden white" v-if="resourcePage">
+      <div class="h3 my-5 py-5 body-font1">{{ resourcePage.contentHeading }}</div>
+      <div v-html="resourcePage.content"></div>
+    </div>
+    <!-- <div class="h3 my-5 py-5 body-font1">Boxed Products & Ordering</div>
 
     <div class="padding-space">
       <v-hover v-slot:default="{ hover }">
@@ -47,8 +51,8 @@
     <div>
       <v-hover v-slot:default="{ hover }">
         <router-link class="text-decoration-none whyteTmin10-font" to="">
-          <!-- to
-            @click.native="gotoLink('http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Boxed-Holiday-Price-List.xlsx')" -->
+           to
+            @click.native="gotoLink('http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Boxed-Holiday-Price-List.xlsx')" 
           <div
             :class="hover ? 'primary--text' : 'black--text'"
             class="subheading"
@@ -116,7 +120,7 @@
           </div>
         </router-link>
       </v-hover>
-    </div>
+    </div> -->
   </v-container>
 </template>
 <script>
@@ -130,6 +134,19 @@ export default {
       //}
     },
   },
+  computed: {
+    resourcePage: function () {
+      let data = null;
+      let pageContent = this.$store.state.layout.pageContent;
+      if (pageContent.length) {
+        data = pageContent.filter((element) => {
+          return element.identifier === "boxed-products-ordering";
+        })[0];
+      }
+
+      return data;
+    },
+  },
 };
 </script>
 
diff --git a/src/routes/retailer/contact-us.vue b/src/routes/retailer/contact-us.vue
index 84fdfd7..2ac713c 100644
--- a/src/routes/retailer/contact-us.vue
+++ b/src/routes/retailer/contact-us.vue
@@ -1,6 +1,11 @@
 <template>
   <v-container>
-    <div class="h3 my-5 py-5 body-font1">Retailer Communications</div>
+
+      <div class="homepage-overflow-x-hidden white" v-if="resourcePage">
+      <div class="h3 my-5 py-5 body-font1">{{ resourcePage.contentHeading }}</div>
+      <div v-html="resourcePage.content"></div>
+    </div>
+    <!-- <div class="h3 my-5 py-5 body-font1">Retailer Communications</div>
 
     <div class="padding-space">
       <v-hover v-slot:default="{ hover }">
@@ -246,12 +251,25 @@
           </div>
         </router-link>
       </v-hover>
-    </div>
+    </div> -->
   </v-container>
 </template>
 <script>
 export default {
   name: "ContactUs",
+   computed: {
+    resourcePage: function () {
+      let data = null;
+      let pageContent = this.$store.state.layout.pageContent;
+      if (pageContent.length) {
+        data = pageContent.filter((element) => {
+          return element.identifier === "contact-us";
+        })[0];
+      }
+
+      return data;
+    },
+  },
 };
 </script>
 
diff --git a/src/routes/retailer/marketing-tools-promotions.vue b/src/routes/retailer/marketing-tools-promotions.vue
index 7765f86..4a7ee82 100644
--- a/src/routes/retailer/marketing-tools-promotions.vue
+++ b/src/routes/retailer/marketing-tools-promotions.vue
@@ -1,8 +1,11 @@
-
-
 <template>
   <v-container>
-    <div class="h3 my-5 py-5 body-font1">Marketing Tools & Promotions</div>
+
+     <div class="homepage-overflow-x-hidden white" v-if="resourcePage">
+      <div class="h3 my-5 py-5 body-font1">{{ resourcePage.contentHeading }}</div>
+      <div v-html="resourcePage.content"></div>
+    </div>
+    <!-- <div class="h3 my-5 py-5 body-font1">Marketing Tools & Promotions</div>
 
     <div class="padding-space">
       <v-hover v-slot:default="{ hover }">
@@ -69,12 +72,25 @@
           </div>
         </router-link>
       </v-hover>
-    </div>
+    </div> -->
   </v-container>
 </template>
 <script>
 export default {
   name: "MarketingToolsPromotions",
+  computed: {
+    resourcePage: function () {
+      let data = null;
+      let pageContent = this.$store.state.layout.pageContent;
+      if (pageContent.length) {
+        data = pageContent.filter((element) => {
+          return element.identifier === "marketing-tools-promotions";
+        })[0];
+      }
+
+      return data;
+    },
+  },
 };
 </script>
 
diff --git a/src/routes/retailer/personalized-products-ordering.vue b/src/routes/retailer/personalized-products-ordering.vue
index 17d9a91..6103f7f 100644
--- a/src/routes/retailer/personalized-products-ordering.vue
+++ b/src/routes/retailer/personalized-products-ordering.vue
@@ -1,7 +1,11 @@
 
 <template>
   <v-container>
-    <div class="h3 my-5 py-5 body-font1">Personalized Products & Ordering</div>
+ <div class="homepage-overflow-x-hidden white" v-if="resourcePage">
+      <div class="h3 my-5 py-5 body-font1">{{ resourcePage.contentHeading }}</div>
+      <div v-html="resourcePage.content"></div>
+    </div>
+    <!-- <div class="h3 my-5 py-5 body-font1">Personalized Products & Ordering</div>
 
     <div class="padding-space">
       <v-hover v-slot:default="{ hover }">
@@ -95,7 +99,7 @@
           </div>
         </router-link>
       </v-hover>
-    </div>
+    </div> -->
   </v-container>
 </template>
 <script>
@@ -106,6 +110,19 @@ export default {
       window.open(pageLink, "_blank");
     },
   },
+  computed: {
+    resourcePage: function () {
+      let data = null;
+      let pageContent = this.$store.state.layout.pageContent;
+      if (pageContent.length) {
+        data = pageContent.filter((element) => {
+          return element.identifier === "personalized-products-ordering";
+        })[0];
+      }
+
+      return data;
+    },
+  },
 };
 </script>
 
diff --git a/src/routes/retailer/retailer-communications.vue b/src/routes/retailer/retailer-communications.vue
index 2a43037..d92df40 100644
--- a/src/routes/retailer/retailer-communications.vue
+++ b/src/routes/retailer/retailer-communications.vue
@@ -2,7 +2,11 @@
 
 <template>
   <v-container>
-    <div class="h3 my-5 py-5 body-font1">Retailer Communications</div>
+     <div class="homepage-overflow-x-hidden white" v-if="resourcePage">
+      <div class="h3 my-5 py-5 body-font1">{{ resourcePage.contentHeading }}</div>
+      <div v-html="resourcePage.content"></div>
+    </div>
+    <!-- <div class="h3 my-5 py-5 body-font1">Retailer Communications</div>
 
     <div class="padding-space">
       <v-hover v-slot:default="{ hover }">
@@ -36,12 +40,25 @@
           </div>
         </router-link>
       </v-hover>
-    </div>
+    </div> -->
   </v-container>
 </template>
 <script>
 export default {
   name: "RetailerCommunications",
+   computed: {
+    resourcePage: function () {
+      let data = null;
+      let pageContent = this.$store.state.layout.pageContent;
+      if (pageContent.length) {
+        data = pageContent.filter((element) => {
+          return element.identifier === "retailer-communications";
+        })[0];
+      }
+
+      return data;
+    },
+  },
 };
 </script>
 
diff --git a/src/routes/retailer/training.vue b/src/routes/retailer/training.vue
index f4d6845..aead74e 100644
--- a/src/routes/retailer/training.vue
+++ b/src/routes/retailer/training.vue
@@ -1,9 +1,11 @@
-
-
-
 <template>
   <v-container>
-    <div class="h3 my-5 py-5 body-font1">Training</div>
+  <div class="homepage-overflow-x-hidden white" v-if="resourcePage">
+      <div class="h3 my-5 py-5 body-font1">{{ resourcePage.contentHeading }}</div>
+      <div v-html="resourcePage.content"></div>
+    </div>
+    
+    <!-- <div class="h3 my-5 py-5 body-font1">Training</div>
     <div><b>PDS Training Materials</b></div>
     <div class="padding-space">PDS Documentation</div>
     <div>
@@ -165,8 +167,8 @@
     <div>
       <v-hover v-slot:default="{ hover }">
         <router-link class="text-decoration-none whyteTmin10-font" to="">
-          <!-- to   -->
-          <!-- @click.native="gotoLink('https://www.dropbox.com/s/md6dxx0hahlkd4l/2021%20PDS%20Refresh.mp4?dl=0')" -->
+          to   
+          @click.native="gotoLink('https://www.dropbox.com/s/md6dxx0hahlkd4l/2021%20PDS%20Refresh.mp4?dl=0')" 
           <div
             :class="hover ? 'primary--text' : 'black--text'"
             class="subheading"
@@ -316,7 +318,7 @@
           </div>
         </router-link>
       </v-hover>
-    </div>
+    </div> -->
   </v-container>
 </template>
 <script>
@@ -327,6 +329,19 @@ export default {
       window.open(pageLink, "_blank");
     },
   },
+   computed: {
+    resourcePage: function () {
+      let data = null;
+      let pageContent = this.$store.state.layout.pageContent;
+      if (pageContent.length) {
+        data = pageContent.filter((element) => {
+          return element.identifier === "training";
+        })[0];
+      }
+
+      return data;
+    },
+  },
 };
 </script>