diff --git a/backend/README.md b/backend/README.md
index e704d5b..bbbff42 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -57,4 +57,4 @@ firebase deploy --only functions:generateThumbnail
 ### create-page-collaboration
 > This function is triggered every time a record is added to the pageCollaborations collection.
 
-* firebase deploy --only functions:onCreatePageCollaboration
+* firebase deploy --only functions:onCreatePage
diff --git a/backend/functions/create-page.js b/backend/functions/create-page.js
index 7eed4d2..8e62b05 100644
--- a/backend/functions/create-page.js
+++ b/backend/functions/create-page.js
@@ -6,6 +6,7 @@ const common = require('./common')
 exports.handler = async (newPagesDoc, context, database) => {
   console.log(`In onCreatePages:[${newPagesDoc.id}]`)
 
+  // if this page is part of a collaboration then we also publish preview
   if (newPagesDoc.data().parentPagesRef) {
     console.log(`Page document is child record`)
 
@@ -44,7 +45,28 @@ exports.handler = async (newPagesDoc, context, database) => {
     }
 
     console.log('story data:', storiesDoc.data())
-    console.log('newPagesDoc1:', newPagesDoc.id)
+    console.log('newPagesDoc id:', newPagesDoc.id)
+
+    let background = '#000000'
+    if (newPagesDoc.data().quote && newPagesDoc.data().quote.background) {
+      background = newPagesDoc.data().quote.background
+    } else if (
+      newPagesDoc.data().background &&
+      newPagesDoc.data().background.color
+    ) {
+      background = newPagesDoc.data().background.color
+    }
+
+    let fontColor = '#ffffff'
+    if (newPagesDoc.data().quote && newPagesDoc.data().quote.color) {
+      fontColor = newPagesDoc.data().quote.color
+    } else if (
+      newPagesDoc.data().background &&
+      newPagesDoc.data().background.font &&
+      newPagesDoc.data().background.font.color
+    ) {
+      fontColor = newPagesDoc.data().background.font.color
+    }
 
     // save record in the previews collection
     const preview = {
@@ -60,6 +82,9 @@ exports.handler = async (newPagesDoc, context, database) => {
       uid: user.uid,
       usersRef: usersRef,
       userDisplayName: user.displayName || '',
+      quote: newPagesDoc.data().quote ? newPagesDoc.data().quote.src : '',
+      fontColor: fontColor,
+      backgroundColor: background,
       previewImageUrl: imagePreviewUrl,
       imageFilenameOid: imageOid,
       created: Date.now(),
diff --git a/backend/functions/delete-page.js b/backend/functions/delete-page.js
index e121f3c..3cc43ee 100644
--- a/backend/functions/delete-page.js
+++ b/backend/functions/delete-page.js
@@ -19,25 +19,47 @@ exports.handler = async (snap, context, database, storage, bucketName) => {
   const bookFilename = common.getBookFilename(deletedValue.book)
   console.log(`bookFilename:${bookFilename}`)
   if (bookFilename) {
-    await removeFile(bucket, 'books', bookFilename)
+    try {
+      await removeFile(bucket, 'books', bookFilename)
+    } catch (e) {
+      console.log(
+        `Error removing file:[books/${bookFilename}] for rich text`,
+        e
+      )
+    }
   }
 
   const richTextsFilename = common.getRichTextFilename(deletedValue.richText)
   console.log(`richTextsFilename:${richTextsFilename}`)
   if (richTextsFilename) {
-    await removeFile(bucket, 'richTexts', richTextsFilename)
+    try {
+      await removeFile(bucket, 'richTexts', richTextsFilename)
+    } catch (e) {
+      console.log(
+        `Error removing file:[richTexts/${richTextsFilename}] for rich text`,
+        e
+      )
+    }
   }
 
   const imageFilename = common.getImageFilename(deletedValue.image)
   console.log(`imageFilename:${imageFilename}`)
   if (imageFilename) {
-    await common.deleteImageFromDB(database, imageFilename)
+    try {
+      await common.deleteImageFromDB(database, imageFilename)
+    } catch (e) {
+      console.log(`Error deleting image:[${imageFilename}] from DB`, e)
+    }
   }
 
   if (common.pageIsCoverToStory(database, pageOid, imageFilename)) {
     console.log('Page image is cover story')
     if (deletedValue.storyOid) {
-      await common.updateStoryCoverImage(database, deletedValue.storyOid)
+      try {
+        await common.updateStoryCoverImage(database, deletedValue.storyOid)
+      } catch (e) {
+        console.log(`Error updating story cover image`, e)
+      }
     }
   }
 
diff --git a/ui/api/service/page.js b/ui/api/service/page.js
index 9ab5e6f..311dee5 100644
--- a/ui/api/service/page.js
+++ b/ui/api/service/page.js
@@ -18,12 +18,14 @@ function findPages(pagesRef) {
         image: { ...m.data().image },
         book: { ...m.data().book },
         richText: { ...m.data().richText },
+        quote: { ...m.data().quote },
         parentPagesOid: m.data().parentPagesOid,
         // parentPagesRef: m.data().parentPagesRef,
         parentPagesRef: `pages/${m.data().parentPagesOid}`,
         summary: m.data().summary,
         comments: m.data().comments,
         likes: m.data().likes,
+        background: { ...m.data().background },
         wallpaperUrl: m.data().wallpaperUrl
       }
       log('page:', page)
diff --git a/ui/api/service/preview.js b/ui/api/service/preview.js
index 7d43a0f..24d579b 100644
--- a/ui/api/service/preview.js
+++ b/ui/api/service/preview.js
@@ -12,6 +12,9 @@ function findPreviews(previewsRef) {
         imageFilenameOid: m.data().imageFilenameOid,
         pageOid: m.data().pageOid,
         pagesRef: m.data().pagesRef,
+        quote: m.data().quote,
+        fontColor: m.data().fontColor,
+        backgroundColor: m.data().backgroundColor,
         previewImageUrl: m.data().previewImageUrl,
         wallpaperUrl: m.data().wallpaperUrl,
         storyOid: m.data().storyOid,
@@ -68,3 +71,7 @@ export function addPreview(preview) {
   log(`Adding preview:[${preview}]`)
   return DB.collection('previews').add(preview)
 }
+
+
+export const BACKGROUND_COLOURS = ['#26c6da', '#3f51b5', '#ffffff', '#000000', '#C2185B', '#ff8f00']
+
diff --git a/ui/components/BaseMediumViewer.vue b/ui/components/BaseMediumViewer.vue
index 3363898..81f6676 100644
--- a/ui/components/BaseMediumViewer.vue
+++ b/ui/components/BaseMediumViewer.vue
@@ -44,7 +44,7 @@
                 >
                   <upload-button
                     :selected-callback="previewMediaFile"
-                    :acceptedFileTypes="acceptedFileTypes"
+                    :accepted-file-types="acceptedFileTypes"
                     icon="mdi-cloud-upload-outline"
                   />
                 </span>
@@ -61,6 +61,19 @@
               class="transparent"
               mandatory
             >
+              <v-tooltip bottom>
+                <template #activator="{ on }">
+                  <v-btn
+                    v-if="showQuoteToolbarBtn"
+                    :value="4"
+                    text
+                    v-on="on"
+                  >
+                    <v-icon>mdi-comment-quote-outline</v-icon>
+                  </v-btn>
+                </template>
+                <span>Quote</span>
+              </v-tooltip>
               <v-tooltip bottom>
                 <template #activator="{ on }">
                   <v-btn
@@ -82,7 +95,9 @@
                     text
                     v-on="on"
                   >
-                    <v-icon>mdi-book-outline</v-icon>
+                    <v-icon>
+                      mdi-book-open-page-variant
+                    </v-icon>
                   </v-btn>
                 </template>
                 <span>Words</span>
@@ -123,12 +138,12 @@
         fill-height
         class="dialog-content"
       >
-        <!--        <v-flex xs12 fill-height>-->
+        <v-flex xs12 fill-height>
         <slot
           name="content-container"
           :activeMedium="activeMedium"
         />
-        <!--        </v-flex>-->
+        </v-flex>
       </v-layout>
       <!--</v-responsive>-->
     </v-card>
@@ -161,6 +176,10 @@ export default {
       type: Boolean,
       default: false
     },
+    isQuoteEnabled: {
+      type: Boolean,
+      default: false
+    },
     isBookEnabled: {
       type: Boolean,
       default: false
@@ -215,6 +234,13 @@ export default {
       if (this.isImageEnabled) count++
       return count
     },
+    showQuoteToolbarBtn: function() {
+      return (
+        this.enabledMediumTypeCount > 1 &&
+        this.isQuoteEnabled &&
+        !this.canDelete
+      )
+    },
     showRichTextToolbarBtn: function() {
       return (
         this.enabledMediumTypeCount > 1 &&
diff --git a/ui/components/BasePagePublish.vue b/ui/components/BasePagePublish.vue
new file mode 100644
index 0000000..d845dff
--- /dev/null
+++ b/ui/components/BasePagePublish.vue
@@ -0,0 +1,444 @@
+<template>
+  <v-layout
+    justify-center
+  >
+    <v-dialog
+      v-model="dialog"
+      persistent
+      width="600px"
+    >
+      <v-card>
+        <v-toolbar
+          :color="theme"
+        >
+          <v-toolbar-title>{{ title }}</v-toolbar-title>
+          <v-spacer />
+          <v-btn
+            icon
+            @click="closeDialog()"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <v-container grid-list-md>
+            <v-row
+              justify="end"
+              align="center"
+              class="mt-4 mb-6"
+              no-gutters
+            >
+              <v-col
+                v-if="isQuotePage"
+                align="center"
+              >
+                <v-sheet
+                  :color="page.quote.background"
+                  height="200"
+                  width="200"
+                  tile
+                  justify-center
+                >
+                  <div
+                    class="quote-block text-center pa-2 pt-0"
+                    :class="page.quote.color === '#000000' ? 'black--text' : 'white--text'"
+                  >
+                    <span style="white-space: pre-line" class="quote-txt subtitle-1">{{ page.quote.src }}</span>
+                  </div>
+                </v-sheet>
+              </v-col>
+              <v-col v-else>
+                <input
+                  v-show="false"
+                  ref="imageUploader"
+                  type="file"
+                  accept="image/*"
+                  @change="previewImageSelected"
+                >
+                <v-carousel
+                  v-model="previewImageCarousel"
+                  hide-delimiters
+                  height="200"
+                >
+                  <v-carousel-item
+                    v-if="pageImageSrc"
+                    value="page-image"
+                  >
+                    <v-row
+                      class="fill-height"
+                      align="center"
+                      justify="center"
+                    >
+                      <v-img
+                        :src="pageImageSrc"
+                        aspect-ratio="0.5"
+                        max-width="200"
+                        max-height="200"
+                      />
+                    </v-row>
+                  </v-carousel-item>
+                  <v-carousel-item
+                    value="file-upload-image"
+                    class="preview-image-item"
+                  >
+                    <v-row
+                      class="fill-height"
+                      align="center"
+                      justify="center"
+                    >
+                      <v-img
+                        :src="previewImageSrc"
+                        aspect-ratio="0.5"
+                        max-width="200"
+                        max-height="200"
+                        @click="openFileUpload"
+                      />
+                    </v-row>
+                  </v-carousel-item>
+                  <v-carousel-item
+                    v-for="(color, idx) in backgroundColors"
+                    :key="color"
+                    :value="'color-' + idx"
+                  >
+                    <v-row
+                      class="fill-height"
+                      align="center"
+                      justify="center"
+                    >
+                      <v-sheet
+                        :color="color"
+                        height="200"
+                        width="200"
+                        tile
+                        justify-center
+                      >
+                        <div class="text-center pa-2 body-2">
+                          <span style="white-space: pre-line">{{ summary }}</span>
+                        </div>
+                      </v-sheet>
+                    </v-row>
+                  </v-carousel-item>
+                  <v-carousel-item
+                    v-for="(previewImage, idx) in previewImages"
+                    :key="previewImage"
+                    :value="'wallpaper-' + idx"
+                  >
+                    <v-row
+                      class="fill-height"
+                      align="center"
+                      justify="center"
+                    >
+                      <v-img
+                        :src="previewImage"
+                        aspect-ratio="0.5"
+                        max-width="200"
+                        max-height="200"
+                      >
+                        <v-container fill-height fluid>
+                          <v-layout
+                            fill-height
+                          >
+                            <v-flex xs12 align-end flexbox>
+                              <span style="white-space: pre-line" class="headline no-image-text">{{ summary }}</span>
+                            </v-flex>
+                          </v-layout>
+                        </v-container>
+                      </v-img>
+                    </v-row>
+                  </v-carousel-item>
+                </v-carousel>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-textarea
+                  v-model="summary"
+                  auto-grow
+                  filled
+                  :color="theme"
+                  label="Summary"
+                  maxlength="500"
+                  rows="5"
+                  row-height="24"
+                />
+              </v-col>
+            </v-row>
+            <slot name="form-custom-input" />
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <slot name="form-action-buttons" />
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-layout>
+</template>
+<script>
+import debug from 'debug'
+
+import { BACKGROUND_COLOURS } from '~/api/service/preview'
+import { DEFAULT_WALLPAPERS } from '~/api/service/page'
+
+const log = debug('app:components/PagePublish')
+
+export default {
+  name: 'BasePagePublish',
+  props: {
+    value: {
+      type: Object,
+      required: true
+    },
+    dialog: {
+      type: Boolean,
+      default: false
+    },
+    page: {
+      type: Object,
+      required: true
+    },
+    uid: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: 'Publish Page'
+    },
+    userDisplayName: {
+      type: String,
+      required: true
+    },
+    theme: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  data() {
+    return {
+      summary: '',
+      summaryDialog: false,
+      isInvite: false,
+      inviteSwitch: false,
+      pageImageSrc: null,
+      model: null,
+      showArrows: true,
+      prevIcon: false,
+      nextIcon: false,
+      centerActive: false,
+      previewImageCarousel: 'page-image',
+      previewImages: DEFAULT_WALLPAPERS,
+      previewImageSlide: {
+        page: 'page-image',
+        color: 'color',
+        upload: 'custom-image',
+        wallpaper: 'wallpaper'
+      },
+      colorBackground: '#26c6da',
+      uploadedPreviewImageSrc: null,
+      selectedPreviewImageFile: null
+    }
+  },
+  computed: {
+    backgroundColors() {
+      return BACKGROUND_COLOURS
+    },
+    backgroundWallpapers() {
+      return DEFAULT_WALLPAPERS
+    },
+    previewImageSrc: {
+      get() {
+        log('in previewImageSrc get', this.page.likes)
+        // todo ?? this.contribution.image.ref ....
+        if (this.uploadedPreviewImageSrc) {
+          return this.uploadedPreviewImageSrc
+        } else {
+          return '/img/missing-image.png'
+        }
+      },
+      set(val) {
+        log('in previewImageSrc set', val)
+
+        if (val) {
+          this.uploadedPreviewImageSrc = val
+        }
+      }
+    },
+    isQuotePage: function() {
+      return this.page.quote && this.page.quote.src
+    }
+  },
+  watch: {
+    previewImageCarousel: function(idx) {
+      log('in watch previewImageCarousel', idx)
+      this.$emit('input', this.getPublishData())
+    },
+    summary: function(idx) {
+      log('in watch previewImageCarousel', idx)
+      this.$emit('input', this.getPublishData())
+    }
+  },
+  mounted: function() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  created: function() {},
+  methods: {
+    init() {
+      if (this.page.image && this.page.image.ref) {
+        this.pageImageSrc = this.page.image.ref
+        this.pageImageFilename = this.page.image.filename
+        this.previewImageCarousel = 'page-image'
+      } else if (this.value.background.type) {
+        this.previewImageCarousel = this.value.background.type
+      } else {
+        this.previewImageCarousel = 'file-upload-image'
+      }
+      this.summary = this.value.summary
+    },
+    // findImageFilenameKey() {
+    //   if (this.page.image && this.page.image.filename) {
+    //     const filenameKey = this.page.image.filename.split('.').shift()
+    //     return findImageByOid(filenameKey)
+    //   } else {
+    //     return Promise.resolve()
+    //   }
+    // },
+    getPublishData() {
+      // const selectedPreviewImageSlide = this.getSelectedPreviewImageSlide()
+      // log('selectedPreviewImageSlideL', selectedPreviewImageSlide)
+
+      const publishData = {
+        background: this.getBackgroundData(),
+        summary: this.summary
+      }
+
+      log('publishData:', publishData)
+
+      return publishData
+    },
+    getFontColor(backgroundColor) {
+      return backgroundColor === '#ffffff' ? '#000000' : '#ffffff'
+    },
+    getBackgroundData() {
+      if (this.isCarouselColor()) {
+        return {
+          type: 'color',
+          val: this.backgroundColors[this.getCarouselLastIndex()],
+          font: {
+            color: this.getFontColor(this.backgroundColors[this.getCarouselLastIndex()])
+          }
+        }
+      } else if (this.isCarouselFileUploadImage()) {
+        log(
+          'in isCarouselFileUploadImage',
+          this.uploadedPreviewImageSrc,
+          this.uploadedPreviewImageFile
+        )
+        return {
+          type: 'file-upload-image',
+          val: this.uploadedPreviewImageSrc,
+          file: this.uploadedPreviewImageFile
+        }
+      } else if (this.isCarouselPageImage()) {
+        return {
+          type: 'page-image',
+          val: this.pageImageSrc,
+          id: this.pageImageFilename
+            ? this.pageImageFilename.split('.').shift()
+            : null
+        }
+      } else if (this.isCarouselWallpaper()) {
+        return {
+          type: 'wallpaper',
+          val: this.backgroundWallpapers[this.getCarouselLastIndex()]
+        }
+      } else {
+        return {}
+      }
+    },
+    getCarouselLastIndex() {
+      return this.previewImageCarousel.substring(
+        this.previewImageCarousel.lastIndexOf('-') + 1
+      )
+    },
+    closeDialog() {
+      this.$emit('close')
+    },
+    openFileUpload() {
+      log('openFileUpload')
+      // this.$refs.imageUploader.value = ''
+      this.$refs.imageUploader.click()
+    },
+    previewImageSelected(e) {
+      log('previewImageSelected')
+      const imageFile = e.target.files[0]
+      const limit = 2000000
+      if (imageFile) {
+        if (imageFile.size > limit) {
+          this.$toast.error(
+            `The file is over the ${limit / 1000 / 1000}MB limit`
+          )
+        } else if (!imageFile.type.startsWith('image/')) {
+          this.$toast.error(`Please upload a valid image`)
+        } else {
+          log('sssssssssssssssssss', imageFile)
+          this.uploadedPreviewImageFile = imageFile
+          this.previewImageSrc = URL.createObjectURL(imageFile)
+        }
+      } else {
+        this.$toast.error('No preview image selected')
+      }
+    },
+    isCarouselPageImage() {
+      return this.previewImageCarousel.startsWith('page-image')
+    },
+    isCarouselFileUploadImage() {
+      return this.previewImageCarousel.startsWith('file-upload-image')
+    },
+    isCarouselColor() {
+      return this.previewImageCarousel.startsWith('color')
+    },
+    isCarouselWallpaper() {
+      return this.previewImageCarousel.startsWith('wallpaper')
+    }
+    // uploadPreviewImage() {
+    //   if (this.uploadedPreviewImageFile) {
+    //     return uploadImage(this.uploadedPreviewImageFile).then(result => {
+    //       log('uploaded image:', result)
+    //
+    //       this.uploadedPreviewImageFile = null
+    //
+    //       const previewImageData = {
+    //         filename: result.filename,
+    //         ref: result.downloadUrl,
+    //         created: Date.now()
+    //       }
+    //
+    //       return previewImageData
+    //     })
+    //   } else {
+    //     log('selectedPreviewImageFile not set therefore not uploading')
+    //     return Promise.resolve()
+    //   }
+    // }
+  }
+}
+</script>
+<style>
+.preview-image-item {
+  cursor: pointer;
+}
+
+.quote-block {
+  line-height: 200px;
+  height: 200px;
+  overflow: hidden;
+}
+
+.quote-txt {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>
diff --git a/ui/components/MediumViewerImage.vue b/ui/components/MediumViewerImage.vue
index 27d0e56..b17b940 100644
--- a/ui/components/MediumViewerImage.vue
+++ b/ui/components/MediumViewerImage.vue
@@ -84,6 +84,7 @@ export default {
 
       reader.onloadend = () => {
         this.mutableSrc = reader.result
+        this.$emit('image-updated', this.mutableSrc)
       }
 
       reader.readAsDataURL(file)
diff --git a/ui/components/MediumViewerQuote.vue b/ui/components/MediumViewerQuote.vue
new file mode 100644
index 0000000..c0470e2
--- /dev/null
+++ b/ui/components/MediumViewerQuote.vue
@@ -0,0 +1,66 @@
+<template>
+  <v-layout
+    align-center
+    justify-center
+    class="medium-viewer-quote-container pt-6"
+  >
+    <page-detail-quote-capture
+      v-model="quote"
+      :theme="theme" />
+  </v-layout>
+</template>
+
+<script>
+
+// import debug from 'debug'
+import MediumViewerMixin from '../mixins/MediumViewerMixin'
+import PageDetailQuoteCapture from '~/components/PageDetailQuoteCapture'
+// const log = debug('app:components/MediumViewerQuote')
+
+export default {
+  name: 'MediumViewerQuote',
+  components: {
+    PageDetailQuoteCapture
+  },
+  mixins: [MediumViewerMixin],
+  props: {
+    origin: {
+      type: String,
+      default: 'page'
+    },
+    theme: {
+      type: String,
+      default: 'primary'
+    },
+    value: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    quote: {
+      get () {
+        return this.value
+      },
+      set (quote) {
+        this.$emit('input', quote)
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.medium-viewer-quote-container {
+  /*display: block;*/
+  /*overflow-y: scroll;*/
+  /*height: 100vh;*/
+}
+
+/*.medium-viewer-image-container img {*/
+/*  max-height: calc(100vh - 48px);*/
+/*  !*margin: 0 auto;*!*/
+/*  !*display: block;*!*/
+/*  !*max-width: 100%;*!*/
+/*}*/
+
+</style>
diff --git a/ui/components/PageComments.vue b/ui/components/PageComments.vue
index 71f137f..3ca9717 100644
--- a/ui/components/PageComments.vue
+++ b/ui/components/PageComments.vue
@@ -104,8 +104,7 @@ export default {
     return {
       comment: undefined,
       commentDialog: false,
-      mutableComments: [],
-      form: false
+      mutableComments: []
     }
   },
   created: function() {
diff --git a/ui/components/PageContributionCard.vue b/ui/components/PageContributionCard.vue
index 82c5471..740de37 100644
--- a/ui/components/PageContributionCard.vue
+++ b/ui/components/PageContributionCard.vue
@@ -25,6 +25,20 @@
             </v-layout>
           </v-container>
         </v-img>
+        <v-sheet
+          v-else-if="backgroundColor"
+          :color="backgroundColor"
+          height="300"
+          tile
+          justify-center
+        >
+          <div
+            class="quote-block text-center pa-2"
+            :class="backgroundTextClass"
+          >
+            <span class="quote-txt subtitle-1">{{ childPage.quote && childPage.quote.src ? childPage.quote.src : childPage.summary }}</span>
+          </div>
+        </v-sheet>
         <v-card-title
           class="headline"
         >
@@ -33,7 +47,7 @@
           </nuxt-link>
         </v-card-title>
         <v-card-text class="grey--text truncate">
-          {{ childPage.summary }}
+          <span style="white-space: pre-line">{{ childPage.summary }}</span>
         </v-card-text>
       </div>
       <v-card-actions
@@ -123,6 +137,34 @@ export default {
       } else {
         return 0
       }
+    },
+    backgroundColor: function() {
+      if (this.childPage.quote && this.childPage.quote.background) {
+        return this.childPage.quote.background
+      } else if (this.childPage.background && this.childPage.background.color) {
+        return this.childPage.background.color
+      } else {
+        return null
+      }
+    },
+    backgroundFontColor: function() {
+      if (this.childPage.quote && this.childPage.quote.color) {
+        return this.childPage.quote.color
+      } else if (
+        this.childPage.background &&
+        this.childPage.background.font &&
+        this.childPage.background.font.color
+      ) {
+        return this.childPage.background.font.color
+      } else {
+        return `#ffffff`
+      }
+    },
+    backgroundTextClass: function() {
+      // todo ... handle font color
+      return this.backgroundFontColor === '#000000'
+        ? `black--text`
+        : `white--text`
     }
   },
   methods: {
diff --git a/ui/components/PageContributionList.vue b/ui/components/PageContributionList.vue
index ffa78b7..b576f2f 100644
--- a/ui/components/PageContributionList.vue
+++ b/ui/components/PageContributionList.vue
@@ -30,6 +30,23 @@
       <v-card v-if="Object.entries(collaborations).length === 0 && collaborations.constructor === Object" flat>
         <v-card-title>
           <v-layout wrap>
+            <v-flex x4 mt-1 ml-4 text-center>
+              <v-tooltip bottom>
+                <template #activator="{ on }">
+                  <v-btn
+                    large
+                    text
+                    v-on="on"
+                    @click.stop="openMediumViewerNewPage(4, 4)"
+                  >
+                    <v-icon large>
+                      mdi-comment-quote-outline
+                    </v-icon>
+                  </v-btn>
+                </template>
+                <span>Quote</span>
+              </v-tooltip>
+            </v-flex>
             <v-flex x4 mt-1 ml-4 text-center>
               <v-tooltip bottom>
                 <template #activator="{ on }">
@@ -57,7 +74,7 @@
                     @click.stop="openMediumViewerNewPage(2, 2)"
                   >
                     <v-icon large>
-                      mdi-book-outline
+                      mdi-book-open-page-variant
                     </v-icon>
                   </v-btn>
                 </template>
@@ -151,6 +168,7 @@
     />
 
     <v-card
+      v-if="Object.entries(collaborations).length > 0"
       :key="pageDetailDialogKey"
       flat
     >
@@ -191,6 +209,15 @@
           :user="user"
           :show-thumbnail="false"
         />
+<!--        <page-detail-quote-->
+<!--          :dialog="pageQuoteDialog && user.uid !== selectedChildPage.uid"-->
+<!--          :page="selectedChildPage"-->
+<!--          :src="selectedChildPageSrc"-->
+<!--          :user="user"-->
+<!--          :theme="'secondary'"-->
+<!--          @close="pageQuoteDialog = false"-->
+<!--          @saved="onQuoteSaved"-->
+<!--        />-->
       </v-card-text>
     </v-card>
   </v-layout>
@@ -206,10 +233,11 @@ import { findUserByOid } from '~/api/service/user'
 import PageContributionCard from '~/components/PageContributionCard'
 import PageContributionMediumViewer from '~/components/PageContributionMediumViewer'
 import PageComments from '~/components/PageComments'
-  import PageDetailRichText from './PageDetailRichText'
+import PageDetailRichText from './PageDetailRichText'
 import PageDetailBookEpub from './PageDetailBookEpub'
 import PageDetailBookPdf from './PageDetailBookPdf'
 import PageDetailImage from './PageDetailImage'
+// import PageDetailQuote from './PageDetailQuote'
 
 const log = debug('app:components/PageContributionList')
 
@@ -223,6 +251,7 @@ export default {
     PageDetailBookEpub,
     PageDetailBookPdf,
     PageDetailImage,
+    // PageDetailQuote,
   },
   mixins: [MediumViewerMixin, PageMixin],
   props: {
@@ -256,6 +285,7 @@ export default {
           filename: null
         },
         richText: {},
+        quote: {},
         summary: null,
         userDisplayName: null,
         comments: null
@@ -266,11 +296,13 @@ export default {
       pageDetailBookEpubDialog: false,
       pageDetailBookPdfDialog: false,
       pageDetailImageDialog: false,
+      pageDetailQuoteDialog: false,
       readOnly: true,
       dialogKey: 0,
       viewerKey: 0,
       pageDetailDialogKey: 0,
-      commentsDialog: false
+      commentsDialog: false,
+      // pageQuoteDialog: false
     }
   },
   computed: {
@@ -347,6 +379,15 @@ export default {
       // force rerender
       this.dialogKey += 1
     },
+    // openPageQuoteDialog() {
+    //   this.pageQuoteDialog = true
+    // },
+    onQuoteSaved(quote) {
+      // log('in quote saved', quote)
+      // EventBus.$emit('story-page-quote-save', quote)
+      // this.pageDetailKey += 1
+      // this.pageQuoteDialog = false
+    },
     openMediumViewerNewPage(mediumType, selectedMedium) {
       this.selectedMedium = selectedMedium
       this.activeMedium = mediumType
@@ -367,6 +408,7 @@ export default {
           ref: null
         },
         richText: {},
+        quote: {},
         parentPagesOid: this.page.id,
         // parentPagesRef: null, // todo?
         summary: null,
@@ -385,6 +427,7 @@ export default {
       this.pageDetailBookEpubDialog = false
       this.pageDetailBookPdfDialog = false
       this.pageDetailImageDialog = false
+      this.pageDetailQuoteDialog = false
 
       this.readOnly = true
       this.selectedChildPage = page
@@ -400,30 +443,26 @@ export default {
         this.pageMediumDialog = true
       } else {
         if (this.getPageRichTextSrc(page)) {
-          log('a')
           this.selectedChildPageSrc = this.getPageRichTextSrc(page)
           this.pageDetailRichTextDialog = true
           // EventBus.$emit('open-page-detail-rich-text-dialog')
         } else if (this.getPageBookSrc(page)) {
-          log('b')
           this.selectedChildPageSrc = this.getPageBookSrc(page)
           if (this.getIsEpub(this.getBookType(page))) {
-            log('c')
             this.pageDetailBookEpubDialog = true
             // EventBus.$emit('open-page-detail-book-epub-dialog')
           } else if (this.getIsPdf(this.getBookType(page))) {
-            log('d')
             this.pageDetailBookPdfDialog = true
             // EventBus.$emit('open-page-detail-book-pdf-dialog')
           }
         } else if (this.getPageImageSrc(page)) {
-          log('e')
           this.pageDetailImageDialog = true
           this.selectedChildPageSrc = this.getPageImageSrc(page)
-          log('e', this.selectedChildPageSrc)
           // EventBus.$emit('open-page-detail-image-dialog')
-        } else {
-          log('end')
+        } else if (this.getPageQuoteSrc(page)) {
+          this.pageDetailQuoteDialog = true
+          this.selectedChildPageSrc = this.getPageQuoteSrc(page)
+          // EventBus.$emit('open-page-detail-image-dialog')
         }
       }
     },
diff --git a/ui/components/PageContributionMediumViewer.vue b/ui/components/PageContributionMediumViewer.vue
index 7395132..d87c100 100644
--- a/ui/components/PageContributionMediumViewer.vue
+++ b/ui/components/PageContributionMediumViewer.vue
@@ -6,6 +6,7 @@
     :theme="'secondary'"
     :user="user"
     :initial-medium="allSelectedMedium ? selectedMedium : activeMedium"
+    :is-quote-enabled="isQuoteEnabled"
     :is-book-enabled="isBookEnabled"
     :is-image-enabled="isImageEnabled"
     :is-rich-text-enabled="isRichTextEnabled"
@@ -44,10 +45,18 @@
     </template>
 
     <template #content-container="slotProps">
+      <medium-viewer-quote
+        v-show="isMediaQuoteType(slotProps.activeMedium)"
+        v-model="quote"
+        :origin="origin"
+        :theme="'secondary'"
+      />
+
       <medium-viewer-image
         v-show="isMediaImageType(slotProps.activeMedium)"
         :src="imageSrc"
         :origin="origin"
+        @image-updated="imageUpdated"
       />
 
       <medium-viewer-book
@@ -65,21 +74,29 @@
         @save="saveRichText"
       />
 
-      <page-contribution-save-dialog
-        :dialog="pageContributionSaveDialog"
-        @save="saveMedia"
-        @close="pageContributionSaveDialog = false"
+      <page-contribution-publish
+        :key="publishKey"
+        :dialog="publishDialog"
+        :contribution="contribution"
+        :quote="quote"
+        :image-src="imageSrc"
+        :uid="user.uid"
+        :user-display-name="user.data.displayName ? user.data.displayName : 'Anon'"
+        @close="publishDialog = false"
+        @publish="onPublishComplete"
       />
+      <!--      <page-contribution-save-dialog-->
+      <!--        :dialog="publishDialog"-->
+      <!--        @save="saveMedia"-->
+      <!--        @close="publishDialog = false"-->
+      <!--      />-->
 
       <page-contribution-delete-dialog
         :dialog="pageContributionDeleteDialog"
         @delete="deleteMedia"
         @close="pageContributionDeleteDialog = false"
       />
-
-
     </template>
-
   </base-medium-viewer>
 </template>
 
@@ -92,16 +109,16 @@ import MediumViewerMixin from '../mixins/MediumViewerMixin'
 import BaseMediumViewer from '~/components/BaseMediumViewer'
 import MediumViewerBook from '~/components/MediumViewerBook'
 import MediumViewerImage from '~/components/MediumViewerImage'
+import MediumViewerQuote from '~/components/MediumViewerQuote'
 import MediumViewerRichText from '~/components/MediumViewerRichText'
+import PageContributionPublish from '~/components/PageContributionPublish'
 import PageContributionDeleteDialog from '~/components/PageContributionDeleteDialog'
-import PageContributionSaveDialog from '~/components/PageContributionSaveDialog'
 import { uploadImage } from '~/api/service/image'
 import { uploadBook } from '~/api/service/book'
 import { uploadJson } from '~/api/service/rich-text'
 import {
   addPage,
-  deletePage,
-  getRandomPreviewWallpaper
+  deletePage
 } from '~/api/service/page'
 
 const log = debug('app:components/PageContributionMediumViewer')
@@ -112,9 +129,10 @@ export default {
     BaseMediumViewer,
     MediumViewerBook,
     MediumViewerImage,
+    MediumViewerQuote,
     MediumViewerRichText,
-    PageContributionDeleteDialog,
-    PageContributionSaveDialog
+    PageContributionPublish,
+    PageContributionDeleteDialog
   },
   mixins: [MediumViewerMixin],
   props: {
@@ -162,9 +180,15 @@ export default {
       isRichTextPreview: false,
       hasBookChanged: false,
       isReadOnly: true,
-      pageContributionSaveDialog: false,
+      publishDialog: false,
       pageContributionDeleteDialog: false,
-      savedPart: null
+      savedPart: null,
+      publishKey: 0,
+      quote: {
+        src: '',
+        background: '',
+        color: ''
+      }
     }
   },
   computed: {
@@ -172,20 +196,43 @@ export default {
     allSelectedMedium: function() {
       return this.selectedMedium === undefined
     },
+    isQuoteEnabled: function() {
+      return (
+        this.allSelectedMedium || this.isMediaQuoteType(this.selectedMedium)
+      )
+    },
     isBookEnabled: function() {
       return this.allSelectedMedium || this.isMediaBookType(this.selectedMedium)
     },
     isImageEnabled: function() {
-      return this.allSelectedMedium || this.isMediaImageType(this.selectedMedium)
+      return (
+        this.allSelectedMedium || this.isMediaImageType(this.selectedMedium)
+      )
     },
     isRichTextEnabled: function() {
       return this.allSelectedMedium || this.isMediaRichType(this.selectedMedium)
     },
-    imageSrc: function() {
-      if (this.contribution.image && this.contribution.image.ref) {
-        return this.contribution.image.ref
+    // quoteSrc: function() {
+    //   if (this.contribution.quote && this.contribution.quote.src) {
+    //     return this.contribution.quote.src
+    //   }
+    //   return ''
+    // },
+    imageSrc: {
+      get() {
+        log('in imageSrc.get', this.contribution.image)
+        if (this.contribution.image && this.contribution.image.ref) {
+          return this.contribution.image.ref
+        }
+        return ''
+      },
+      set(val) {
+        log('in previewImageSrc set', val)
+
+        if (val) {
+          this.contribution.image.ref = val
+        }
       }
-      return ''
     },
     bookSrc() {
       if (this.contribution.book && this.contribution.book.ref) {
@@ -228,56 +275,92 @@ export default {
     saveMediaDialog(activeMedium) {
       log('saveMediaDialog:', activeMedium)
       this.mediaToSave = activeMedium
-      this.pageContributionSaveDialog = true
+      this.publishDialog = true
     },
-    saveMedia(summary) {
-      log('in save media', this.mediaToSave, summary)
+    onPublishComplete(basePagePublishModel) {
+      log('in onPublishComplete', basePagePublishModel)
+      this.saveMedia(basePagePublishModel)
+    },
+    saveMedia(basePagePublishModel) {
+      log('in save media', this.mediaToSave, basePagePublishModel)
 
-      let keywords = []
-      let authorTags = []
-      keywords = stringUtils.findKeywords(summary)
-      authorTags = stringUtils.findAuthorTags(summary)
+      if (basePagePublishModel && basePagePublishModel.summary) {
+        // only need to save page, Create-page function will create the preview record in the background
+        let keywords = []
+        let authorTags = []
+        keywords = stringUtils.findKeywords(basePagePublishModel.summary)
+        authorTags = stringUtils.findAuthorTags(basePagePublishModel.summary)
 
-      const pageCollaborationPart = {
-        invite: false,
-        public: true,
-        chapterOid: this.contribution.chapterOid,
-        storyOid: this.contribution.storyOid,
-        richText: {},
-        parentPagesOid: this.contribution.parentPagesOid,
-        // parentPagesRef: this.contribution.parentPagesRef,
-        summary: summary,
-        keywords: keywords.map(keyword => keyword.toLowerCase()),
-        authorTags: authorTags,
-        uid: this.user.uid,
-        wallpaperUrl: getRandomPreviewWallpaper()
-      }
+        const pageCollaborationPart = {
+          invite: false,
+          public: true,
+          chapterOid: this.contribution.chapterOid,
+          storyOid: this.contribution.storyOid,
+          richText: {},
+          parentPagesOid: this.contribution.parentPagesOid,
+          // parentPagesRef: this.contribution.parentPagesRef,
+          summary: basePagePublishModel.summary,
+          keywords: keywords.map(keyword => keyword.toLowerCase()),
+          authorTags: authorTags,
+          uid: this.user.uid,
+          quote: this.quote.src ? this.quote : null,
+          background: {
+            color:
+              basePagePublishModel.background.type === 'color'
+                ? basePagePublishModel.background.val
+                : '#000000',
+            font: {
+              color:
+                basePagePublishModel.background.type === 'color'
+                  ? basePagePublishModel.background.fontColor
+                  : '#FFFFFF'
+            },
+          },
+          wallpaperUrl: basePagePublishModel.background.val
+        }
 
-      if (this.isMediaBookType(this.mediaToSave)) {
-        this.saveBookFile(pageCollaborationPart)
-          .then(page => {
-            log('Page created:', page)
-            this.addPageToList(this.enhancePage(page))
-            this.$toast.success('Book updated')
-          })
-          .catch(error => {
-            log('Error saving book', error)
-            this.$toast.error('Error saving book')
-          })
-      } else if (this.isMediaImageType(this.mediaToSave)) {
-        this.saveImageFile(pageCollaborationPart)
-          .then(page => {
-            log('Page created:', page)
-            this.addPageToList(this.enhancePage(page))
-            this.$toast.success('Image updated')
-          })
-          .catch(error => {
-            log('Error saving image', error)
-            this.$toast.error('Error saving image')
-          })
-      } else if (this.isMediaRichType(this.mediaToSave)) {
-        this.savedPart = pageCollaborationPart
-        EventBus.$emit('rich-text-save')
+        if (this.isMediaBookType(this.mediaToSave)) {
+          this.saveBookFile(pageCollaborationPart)
+            .then(page => {
+              log('Page created:', page)
+              this.addPageToList(this.enhancePage(page))
+              this.$toast.success('Book submitted')
+            })
+            .catch(error => {
+              log('Error saving book', error)
+              this.$toast.error('Error saving book')
+            })
+        } else if (this.isMediaImageType(this.mediaToSave)) {
+          this.saveImageFile(pageCollaborationPart)
+            .then(page => {
+              log('Page created:', page)
+              this.addPageToList(this.enhancePage(page))
+              this.$toast.success('Image submitted')
+            })
+            .catch(error => {
+              log('Error saving image', error)
+              this.$toast.error('Error saving image')
+            })
+        } else if (this.isMediaRichType(this.mediaToSave)) {
+          this.savedPart = pageCollaborationPart
+          EventBus.$emit('rich-text-save')
+        } else if (this.isMediaQuoteType(this.mediaToSave)) {
+          log('adding quote:', this.quote)
+          this.saveQuote(pageCollaborationPart)
+            .then(page => {
+              log('Page created:', page)
+              this.addPageToList(this.enhancePage(page))
+              this.$toast.success('Quote submitted')
+            })
+            .catch(error => {
+              log('Error saving image', error)
+              this.$toast.error('Error saving image')
+            })
+        }
+      } else {
+        this.$toast.error(
+          'Please enter a short summary of your page you are going to publish'
+        )
       }
     },
     saveBookFile(part) {
@@ -304,6 +387,20 @@ export default {
         return Promise.reject(new Error('File is not initialised'))
       }
     },
+    saveQuote(part) {
+      if (this.quote) {
+        const pageQuoteData = {
+          quote: this.quote
+        }
+
+        return addPage({
+          ...part,
+          ...pageQuoteData
+        })
+      } else {
+        return Promise.reject(new Error('Quote is not initialised'))
+      }
+    },
     saveImageFile(part) {
       if (this.file) {
         return uploadImage(this.file).then(result => {
@@ -379,7 +476,7 @@ export default {
       }
     },
     addPageToList(page) {
-      this.pageContributionSaveDialog = false
+      this.publishDialog = false
       this.$emit('add', page)
     },
     deleteMedia() {
@@ -396,13 +493,22 @@ export default {
         })
     },
     deletePageFromList(pageOid) {
-      this.pageContributionSaveDialog = false
+      this.publishDialog = false
       this.$emit('delete', pageOid)
     },
     enhancePage(page) {
       page.userDisplayName = this.user.data.displayName
       return page
     },
+    imageUpdated(src) {
+      log('Image upload updated:', src)
+      this.imageSrc = src
+      this.rePublishDialog()
+    },
+    rePublishDialog() {
+      // force rerender
+      this.publishKey += 1
+    },
     close() {
       this.$emit('close')
     }
diff --git a/ui/components/PageContributionPublish.vue b/ui/components/PageContributionPublish.vue
new file mode 100644
index 0000000..3f451d2
--- /dev/null
+++ b/ui/components/PageContributionPublish.vue
@@ -0,0 +1,112 @@
+<template>
+  <base-page-publish
+    v-model="basePagePublishModel"
+    :dialog="dialog"
+    :page="page"
+    :theme="'secondary'"
+    :title="title"
+    :uid="uid"
+    :user-display-name="userDisplayName"
+    @published="this.$emit('published', false)"
+    @close="closeDialog()"
+  >
+    <template #form-action-buttons="slotProps">
+      <v-btn
+        color="secondary"
+        @click="publish()"
+      >
+        <v-icon float-left>
+          mdi-launch
+        </v-icon>
+        Save & Publish
+      </v-btn>
+    </template>
+  </base-page-publish>
+</template>
+<script>
+import debug from 'debug'
+import BasePagePublish from '~/components/BasePagePublish'
+
+const log = debug('app:components/PageContributionPublish')
+
+export default {
+  name: 'PageContributionPublish',
+  components: {
+    BasePagePublish
+  },
+  props: {
+    contribution: {
+      type: Object,
+      required: true
+    },
+    dialog: {
+      type: Boolean,
+      default: false
+    },
+    quote: {
+      type: Object,
+      required: true
+    },
+    imageSrc: {
+      type: String,
+      default: ''
+    },
+    uid: {
+      type: String,
+      required: true
+    },
+    userDisplayName: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      basePagePublishModel: {
+        background: {
+          type: '',
+          val: ''
+        },
+        summary: ''
+      },
+    }
+  },
+  computed: {
+    page: function() {
+      log('in page', this.quote)
+      log('in page this.imageSrc:', this.imageSrc)
+      const page = {
+        quote: this.quote,
+        image: {
+          ref: this.imageSrc
+        }
+      }
+      return page
+    },
+    title: function() {
+      return 'Save and Publish Page Collaboration'
+    }
+  },
+  mounted: function() {
+    this.$nextTick(() => {
+      log('in page contr publish on mounted')
+    })
+  },
+  methods: {
+    // isQuotePage: function() {
+    //   return true
+    //   // return this.page.quote && this.page.quote.src
+    // },
+    publish() {
+      log('publishing')
+      // this.$emit('publish', this.summary)
+      // todo ...
+
+      this.$emit('publish', this.basePagePublishModel)
+    },
+    closeDialog() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
diff --git a/ui/components/PageContributionSaveDialog.vue b/ui/components/PageContributionSaveDialog.vue
index be4272c..8fe91fa 100644
--- a/ui/components/PageContributionSaveDialog.vue
+++ b/ui/components/PageContributionSaveDialog.vue
@@ -5,7 +5,7 @@
     width="600px"
   >
     <v-card>
-      <v-toolbar 
+      <v-toolbar
         color="secondary"
       >
         <v-toolbar-title>Save and Publish Page Collaboration</v-toolbar-title>
diff --git a/ui/components/PageDetail.vue b/ui/components/PageDetail.vue
index 927d0a7..2da73c2 100644
--- a/ui/components/PageDetail.vue
+++ b/ui/components/PageDetail.vue
@@ -12,6 +12,23 @@
       </v-toolbar>
       <v-card-title>
         <v-layout wrap>
+          <v-flex x4 mt-1 ml-4 text-center>
+            <v-tooltip bottom>
+              <template #activator="{ on }">
+                <v-btn
+                  large
+                  text
+                  v-on="on"
+                  @click.stop="openPageMediumDialog(4)"
+                >
+                  <v-icon large>
+                    mdi-comment-quote-outline
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>Quote</span>
+            </v-tooltip>
+          </v-flex>
           <v-flex x4 mt-1 ml-4 text-center>
             <v-tooltip bottom>
               <template #activator="{ on }">
@@ -39,7 +56,7 @@
                   @click.stop="openPageMediumDialog(2)"
                 >
                   <v-icon large>
-                    mdi-book-outline
+                    mdi-book-open-page-variant
                   </v-icon>
                 </v-btn>
               </template>
@@ -75,16 +92,23 @@
     </v-card>
     <v-card
       v-else
-      flat
       :key="pageDetailKey"
+      flat
     >
       <v-card-title
-        class="page-detail-title subtitle-2 mb-2">
+        class="page-detail-title subtitle-2 mb-2"
+      >
         {{ activeChapterName }}
-        <v-spacer></v-spacer>
-        Page {{ activeChapter.index }} - {{ activePageNumber }}
+        <v-spacer />
+        Page {{ activeChapter.index }}.{{ activePageNumber }}
       </v-card-title>
       <v-card-text>
+        <page-detail-quote
+          v-if="pageQuoteSrc"
+          :page="page"
+          :src="pageQuoteSrc"
+          :user="user"
+        />
         <page-detail-rich-text
           v-if="pageRichTextSrc"
           :page="page"
@@ -93,10 +117,10 @@
         />
         <page-detail-book-pdf
           v-else-if="pageBookSrc && isPdf"
+          :key="pageDetailKey"
           :page="page"
           :src="pageBookSrc"
           :user="user"
-          :key="pageDetailKey"
         />
         <page-detail-book-epub
           v-else-if="pageBookSrc && isEpub"
@@ -170,6 +194,7 @@ import PageMixin from '~/mixins/PageMixin'
 import PageMediumViewer from '~/components/PageMediumViewer'
 import PageComments from '~/components/PageComments'
 import PageContributionList from './PageContributionList'
+import PageDetailQuote from './PageDetailQuote'
 import PageDetailRichText from './PageDetailRichText'
 import PageDetailBookEpub from './PageDetailBookEpub'
 import PageDetailBookPdf from './PageDetailBookPdf'
@@ -182,6 +207,7 @@ export default {
     PageContributionList,
     PageMediumViewer,
     PageComments,
+    PageDetailQuote,
     PageDetailRichText,
     PageDetailBookEpub,
     PageDetailBookPdf,
@@ -221,7 +247,12 @@ export default {
     ...mapGetters('page', ['activePage']),
     ...mapGetters('chapter', ['activeChapter']),
     contentExists: function() {
-      return this.pageRichTextSrc || this.pageBookSrc || this.pageImageSrc
+      return (
+        this.pageQuoteSrc ||
+        this.pageRichTextSrc ||
+        this.pageBookSrc ||
+        this.pageImageSrc
+      )
     },
     pageRichTextSrc: function() {
       return this.getPageRichTextSrc(this.page)
@@ -241,6 +272,13 @@ export default {
     pageImageSrc: function() {
       return this.getPageImageSrc(this.page)
     },
+    pageQuoteSrc: function() {
+      if (this.page.quote && this.page.quote.src) {
+        return this.page.quote.src
+      } else {
+        return undefined
+      }
+    },
     activePageNumber: function() {
       if (this.activePage && this.activePage.page) {
         return this.activePage.page.page
@@ -249,7 +287,11 @@ export default {
       }
     },
     activeChapterName: function() {
-      if (this.activeChapter && this.activeChapter.chapter && this.activeChapter.chapter.name) {
+      if (
+        this.activeChapter &&
+        this.activeChapter.chapter &&
+        this.activeChapter.chapter.name
+      ) {
         return this.activeChapter.chapter.name
       } else if (this.activeChapter) {
         return `Chapter ${this.activeChapter.index}`
@@ -302,7 +344,6 @@ export default {
       this.pageMediumDialog = false
     },
     like() {
-      log('in like', this.liked)
       this.liked = !this.liked
       log('updating page', this.page.id, this.page.likes)
       updatePage(this.page.id, { likes: this.page.likes })
@@ -314,6 +355,11 @@ export default {
         this.page.comments = [comment]
       }
     },
+    // onQuoteSaved(quote) {
+    //   log('in quote saved', quote)
+    //   EventBus.$emit('story-page-quote-save', quote)
+    //   this.pageDetailKey += 1
+    // },
     openPageMediumDialog(mediumType) {
       this.selectedMedium = mediumType
       this.pageMediumDialog = true
diff --git a/ui/components/PageDetailQuote.vue b/ui/components/PageDetailQuote.vue
new file mode 100644
index 0000000..ce069b3
--- /dev/null
+++ b/ui/components/PageDetailQuote.vue
@@ -0,0 +1,114 @@
+<template>
+  <v-layout 
+    justify-center
+    mb-2
+  >
+    <v-card
+      v-if="showThumbnail"
+      flat
+      class="mx-auto text-center"
+      :color="background"
+      dark
+      width="100%"
+      max-width="600"
+    >
+      <v-card-text
+        :class="`${color}--text`"
+        class="title"
+        align="center"
+      >
+        <span style="white-space: pre-line">{{ src }}</span>
+      </v-card-text>
+    </v-card>
+    <v-dialog
+      v-model="mutableDialog"
+      scrollable
+      fullscreen
+      hide-overlay
+    >
+      <v-card fill-height dark>
+        <v-btn
+          color="grey"
+          dark
+          fab
+          icon
+          fixed
+          @click="mutableDialog = false"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+        <v-layout
+          dark
+          align-center
+          justify-center
+          class="quote-container"
+        >
+          <v-card
+            flat
+            class="mx-auto text-center"
+            :color="background"
+            dark
+            width="100%"
+            max-width="600"
+          >
+            <v-card-text
+              :class="`${color}--text`"
+              class="title"
+              align="center"
+            >
+              <span style="white-space: pre-line">{{ src }}</span>
+            </v-card-text>
+          </v-card>
+        </v-layout>
+      </v-card>
+    </v-dialog>
+  </v-layout>
+</template>
+<script>
+export default {
+  name: 'PageDetailQuote',
+  props: {
+    dialog: {
+      type: Boolean,
+      default: false
+    },
+    page: {
+      type: Object,
+      required: true
+    },
+    showThumbnail: {
+      type: Boolean,
+      default: true
+    },
+    src: {
+      type: String,
+      required: true
+    },
+    theme: {
+      type: String,
+      default: 'primary'
+    },
+    user: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      mutableDialog: this.dialog
+    }
+  },
+  computed: {
+    color() {
+      return this.page.quote && this.page.quote.color !== '#000000'
+        ? 'white'
+        : 'black'
+    },
+    background() {
+      return this.page.quote
+        ? this.page.quote.background || '#26c6da'
+        : '#26c6da'
+    }
+  }
+}
+</script>
diff --git a/ui/components/PageDetailQuoteCapture.vue b/ui/components/PageDetailQuoteCapture.vue
new file mode 100644
index 0000000..44c8bcf
--- /dev/null
+++ b/ui/components/PageDetailQuoteCapture.vue
@@ -0,0 +1,134 @@
+<template>
+  <v-container grid-list-md>
+    <v-row
+      justify="end"
+      class="mt-4 mb-6"
+      no-gutters
+    >
+      <v-col>
+        <v-carousel
+          v-model="colorCarousel"
+          hide-delimiters
+          height="200"
+        >
+          <v-carousel-item
+            v-for="color in backgroundColors"
+            :key="color"
+          >
+            <v-row
+              class="fill-height"
+              align="center"
+              justify="center"
+            >
+              <v-sheet
+                :color="color"
+                height="200"
+                width="400"
+                tile
+                justify-center
+              >
+                <div
+                  class="quote-block2 text-center pa-2"
+                  :class="color === '#ffffff' ? 'black--text' : ''"
+                >
+                  <span style="white-space: pre-line" class="quote-txt title">{{ src }}</span>
+                </div>
+              </v-sheet>
+            </v-row>
+          </v-carousel-item>
+        </v-carousel>
+      </v-col>
+    </v-row>
+    <v-row
+      justify="end"
+      class="mt-4 mb-6"
+      no-gutters
+    >
+      <v-col>
+        <v-textarea
+          v-model.lazy="src"
+          auto-grow
+          filled
+          :color="theme"
+          label="Quote"
+          rows="4"
+          maxlength="300"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script>
+import { BACKGROUND_COLOURS } from '~/api/service/preview'
+
+// import debug from 'debug'
+// const log = debug('app:components/PageDetailQuoteCapture')
+
+export default {
+  name: 'PageDetailQuoteCapture',
+  props: {
+    value: {
+      type: Object,
+      required: true
+    },
+    theme: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  data() {
+    return {
+      colorCarousel: 0
+    }
+  },
+  computed: {
+    backgroundColors() {
+      return BACKGROUND_COLOURS
+    },
+    src: {
+      get() {
+        return this.value.src
+      },
+      set(src) {
+        this.$emit('input', {
+          src: src,
+          background: this.selectedBackgroundColor(this.colorCarousel),
+          color: this.selectedFontColor()
+        })
+      }
+    }
+  },
+  watch: {
+    colorCarousel: function(idx) {
+      this.$emit('input', {
+        src: this.src,
+        background: this.selectedBackgroundColor(idx),
+        color: this.selectedFontColor()
+      })
+    }
+  },
+  methods: {
+    selectedBackgroundColor(index) {
+      return this.backgroundColors[index]
+    },
+    selectedFontColor() {
+      return this.selectedBackgroundColor(this.colorCarousel) === '#ffffff'
+        ? '#000000'
+        : '#ffffff'
+    }
+  }
+}
+</script>
+<style>
+.quote-block2 {
+  height: 200px;
+  text-align: center;
+  /*line-height: 200px;*/
+  overflow: hidden;
+}
+
+.quote-txt {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>
diff --git a/ui/components/PageDetailQuoteDialog.vue.del b/ui/components/PageDetailQuoteDialog.vue.del
new file mode 100644
index 0000000..8e30d43
--- /dev/null
+++ b/ui/components/PageDetailQuoteDialog.vue.del
@@ -0,0 +1,119 @@
+<template>
+  <v-layout 
+    justify-center
+  >
+    <v-dialog
+      v-model="dialog"
+      persistent
+      width="600px"
+    >
+      <v-card>
+        <v-toolbar
+          :color="theme"
+        >
+          <v-toolbar-title>Quote</v-toolbar-title>
+          <v-spacer />
+          <v-btn
+            icon
+            @click="closeDialog()"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <page-detail-quote-capture v-model="quote" />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            :class="theme"
+            @click="save"
+          >
+            <v-icon float-left>
+              mdi-content-save-outline
+            </v-icon>
+            Submit
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-layout>
+</template>
+<script>
+import debug from 'debug'
+import { updatePage } from '~/api/service/page'
+import PageDetailQuoteCapture from '~/components/PageDetailQuoteCapture'
+const log = debug('app:components/PageDetailQuoteDialog')
+
+export default {
+  name: 'PageDetailQuoteDialog',
+  components: {
+    PageDetailQuoteCapture
+  },
+  props: {
+    dialog: {
+      type: Boolean,
+      default: false
+    },
+    pageId: {
+      type: String,
+      required: true
+    },
+    theme: {
+      type: String,
+      default: 'primary'
+    },
+    uid: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      quote: {
+        src: '',
+        background: '',
+        color: ''
+      },
+      quoteDialog: false
+    }
+  },
+  methods: {
+    save() {
+      if (this.quote) {
+        log('adding quote:', this.quote)
+
+        updatePage(this.pageId, { quote: this.quote } )
+          .then(() => {
+            this.$emit('saved', this.quote)
+            this.quote = {
+              src: '',
+              background: '',
+              color: ''
+            }
+          })
+          .catch(err => {
+            log('Error adding quote', err)
+            this.$toast.error(`Error adding quote`)
+          })
+      } else {
+        this.$toast.error('No quote was entered')
+      }
+    },
+    closeDialog() {
+      this.$emit('close', false)
+    }
+  }
+}
+</script>
+<style>
+.quote-block {
+  line-height: 200px;
+  overflow: hidden;
+}
+
+.quote-txt {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>
diff --git a/ui/components/PageMediumViewer.vue b/ui/components/PageMediumViewer.vue
index a88d2ca..e015fb1 100644
--- a/ui/components/PageMediumViewer.vue
+++ b/ui/components/PageMediumViewer.vue
@@ -45,6 +45,10 @@
     </template>
 
     <template #content-container="slotProps">
+      <medium-viewer-quote
+        v-show="isMediaQuoteType(slotProps.activeMedium)"
+        v-model="quote"
+      />
       <medium-viewer-image
         v-show="isMediaImageType(slotProps.activeMedium)"
         :src="imageSrc"
@@ -72,8 +76,10 @@ import MediumViewerMixin from '../mixins/MediumViewerMixin'
 import BaseMediumViewer from '~/components/BaseMediumViewer'
 import MediumViewerBook from '~/components/MediumViewerBook'
 import MediumViewerImage from '~/components/MediumViewerImage'
+import MediumViewerQuote from '~/components/MediumViewerQuote'
 import { uploadPageBook } from '~/api/service/book'
 import { uploadPageImage } from '~/api/service/image'
+import { updatePage } from '~/api/service/page'
 import { uploadPageRichText } from '~/api/service/rich-text'
 import MediumViewerRichText from '~/components/MediumViewerRichText'
 import { deleteCover, updateStory } from '~/api/service/story'
@@ -86,6 +92,7 @@ export default {
     BaseMediumViewer,
     MediumViewerBook,
     MediumViewerImage,
+    MediumViewerQuote,
     MediumViewerRichText
   },
   mixins: [MediumViewerMixin],
@@ -124,7 +131,12 @@ export default {
       isCover: false,
       isRichTextPreview: false,
       hasBookChanged: false,
-      hasImageChanged: false
+      hasImageChanged: false,
+      quote: {
+        src: '',
+        background: '',
+        color: ''
+      }
     }
   },
   computed: {
@@ -141,6 +153,13 @@ export default {
       return this.isMediaRichType(this.selectedMedium)
       // && (!this.readOnly || !!this.richTextSrc)
     },
+
+    // quoteSrc: function() {
+    //   if (this.page.quote && this.page.quote.src) {
+    //     return this.page.quote.src
+    //   }
+    //   return ''
+    // },
     imageSrc: function() {
       if (this.page.image && this.page.image.ref) {
         return this.page.image.ref
@@ -213,6 +232,21 @@ export default {
       } else if (this.isMediaRichType(activeMedium)) {
         EventBus.$emit('rich-text-save')
         this.closeDialog()
+      } else if (this.isMediaQuoteType(activeMedium)) {
+        this.saveQuote(this.quote)
+          .then(() => {
+            this.quote = {
+              src: '',
+              background: '',
+              color: ''
+            }
+            this.$toast.success('Quote added')
+            this.closeDialog()
+          })
+          .catch(err => {
+            log('Error adding quote', err)
+            this.$toast.error(`Error adding quote`)
+          })
       }
     },
     saveImageFile() {
@@ -300,6 +334,16 @@ export default {
           })
       }
     },
+    saveQuote(quote) {
+      log('Saving quote', quote)
+
+      if (quote) {
+        log('adding quote:', quote)
+        return updatePage(this.page.id, { quote: quote })
+      } else {
+        return Promise.reject(new Error('Quote is not initialised'))
+      }
+    },
     previewRichTextContent() {
       log('In preview Rich Text')
       this.isRichTextPreview = !this.isRichTextPreview
diff --git a/ui/components/PagePublish.vue b/ui/components/PagePublish.vue
index f1d220c..34e5f68 100644
--- a/ui/components/PagePublish.vue
+++ b/ui/components/PagePublish.vue
@@ -1,165 +1,77 @@
 <template>
-  <v-layout
-    justify-center
+  <base-page-publish
+    v-model="basePagePublishModel"
+    :dialog="dialog"
+    :page="page"
+    :theme="theme"
+    :title="title"
+    :uid="uid"
+    :user-display-name="userDisplayName"
+    @published="this.$emit('published', false)"
+    @close="closeDialog()"
   >
-    <v-dialog
-      v-model="dialog"
-      persistent
-      width="600px"
-    >
-      <v-card>
-        <v-toolbar
-          :color="theme"
-        >
-          <v-toolbar-title>{{ title }}</v-toolbar-title>
-          <v-spacer />
-          <v-btn
-            icon
-            @click="closeDialog()"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </v-toolbar>
-        <v-card-text>
-          <v-container grid-list-md>
-            <v-row
-              justify="end"
-              class="mt-4 mb-6"
-              no-gutters
-            >
-              <v-col>
-                <input
-                  v-show="false"
-                  ref="imageUploader"
-                  type="file"
-                  accept="image/*"
-                  @change="previewImageSelected"
-                >
-                <v-carousel
-                  v-model="previewImageCarousel"
-                  hide-delimiters
-                  height="200"
-                >
-                  <v-carousel-item
-                    v-if="pageImageSrc"
-                  >
-                    <v-row
-                      class="fill-height"
-                      align="center"
-                      justify="center"
-                    >
-                      <v-img
-                        :src="pageImageSrc"
-                        aspect-ratio="0.5"
-                        max-width="200"
-                        max-height="200"
-                      />
-                    </v-row>
-                  </v-carousel-item>
-                  <v-carousel-item class="preview-image-item">
-                    <v-row
-                      class="fill-height"
-                      align="center"
-                      justify="center"
-                    >
-                      <v-img
-                        :src="previewImageSrc"
-                        aspect-ratio="0.5"
-                        max-width="200"
-                        max-height="200"
-                        @click="openFileUpload"
-                      />
-                    </v-row>
-                  </v-carousel-item>
-                  <v-carousel-item
-                    v-for="previewImage in previewImages"
-                    :key="previewImage"
-                  >
-                    <v-row
-                      class="fill-height"
-                      align="center"
-                      justify="center"
-                    >
-                      <v-img
-                        :src="previewImage"
-                        aspect-ratio="0.5"
-                        max-width="200"
-                        max-height="200"
-                      />
-                    </v-row>
-                  </v-carousel-item>
-                </v-carousel>
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col>
-                <v-textarea
-                  v-model="summary"
-                  auto-grow
-                  filled
-                  color="primary"
-                  label="Summary"
-                  maxlength="500"
-                  rows="5"
-                  row-height="24"
+    <template #form-custom-input="slotProps">
+      <v-row>
+        <v-col>
+          <v-flex v-if="!isPublished">
+            <v-tooltip top>
+              <template #activator="{ on }">
+                <v-switch
+                  v-model="inviteSwitch"
+                  label="Invite"
+                  color="secondary"
+                  v-on="on"
                 />
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col>
-                <v-flex v-if="!isPublished">
-                  <v-tooltip top>
-                    <template #activator="{ on }">
-                      <v-switch
-                        v-model="inviteSwitch"
-                        label="Invite"
-                        color="secondary"
-                        v-on="on"
-                      />
-                    </template>
-                    <span>Invite others to collaborate</span>
-                  </v-tooltip>
-                </v-flex>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            v-if="isPublished"
-            color="secondary"
-            @click="publishAndInvite()"
-          >
-            Invite
-          </v-btn>
-          <v-btn
-            v-if="!isPublished"
-            color="primary"
-            @click="publish()"
-          >
-            Publish
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-layout>
+              </template>
+              <span>Invite others to collaborate</span>
+            </v-tooltip>
+          </v-flex>
+        </v-col>
+      </v-row>
+    </template>
+    <template #form-action-buttons="slotProps">
+      <v-btn
+        v-if="isPublished"
+        color="secondary"
+        @click="publishAndInvite()"
+      >
+        <v-icon float-left>
+          mdi-launch
+        </v-icon>
+        Invite
+      </v-btn>
+      <v-btn
+        v-if="!isPublished"
+        color="primary"
+        @click="publish()"
+      >
+        <v-icon float-left>
+          mdi-launch
+        </v-icon>
+        Publish
+      </v-btn>
+    </template>
+  </base-page-publish>
 </template>
 <script>
 import debug from 'debug'
-import stringUtils from '~/utils/string'
 
 import { mapGetters } from 'vuex'
-import {
-  publishPage,
-  DEFAULT_WALLPAPERS
-} from '~/api/service/page'
-import { findImageByOid, uploadImage } from '~/api/service/image'
+
+import BasePagePublish from '~/components/BasePagePublish'
+import stringUtils from '~/utils/string'
+
+import { publishPage } from '~/api/service/page'
+// import { findImageByOid, uploadImage } from '~/api/service/image'
+import { uploadImage } from '~/api/service/image'
 
 const log = debug('app:components/PagePublish')
 
 export default {
-  name: 'PagePublish',
+  name: 'PagePublish2',
+  components: {
+    BasePagePublish
+  },
   props: {
     dialog: {
       type: Boolean,
@@ -184,51 +96,26 @@ export default {
   },
   data() {
     return {
-      summary: '',
-      summaryDialog: false,
-      isInvite: false,
-      inviteSwitch: false,
-      pageImageSrc: null,
-      model: null,
-      showArrows: true,
-      prevIcon: false,
-      nextIcon: false,
-      centerActive: false,
-      previewImageCarousel: 0,
-      previewImages: DEFAULT_WALLPAPERS,
-      previewImageSlide: {
-        page: 'page-image',
-        custom: 'custom-image',
-        wallpaper: 'wallpaper'
+      basePagePublishModel: {
+        background: {
+          type: '',
+          val: ''
+        },
+        font: {
+          color: null
+        },
+        summary: ''
       },
-      uploadedPreviewImageSrc: null,
-      selectedPreviewImageFile: null
+      inviteSwitch: false
     }
   },
   computed: {
     ...mapGetters('story', ['story']),
-    title: function() {
-      return this.isPublished ? 'Invite Collaborators' : 'Publish Story'
-    },
     theme: function() {
       return this.isPublished ? 'secondary' : 'primary'
     },
-    previewImageSrc: {
-      get() {
-        log('in previewImageSrc get', this.page.likes)
-        if (this.uploadedPreviewImageSrc) {
-          return this.uploadedPreviewImageSrc
-        } else {
-          return '/img/missing-image.png'
-        }
-      },
-      set(val) {
-        log('in previewImageSrc set', val)
-
-        if (val) {
-          this.uploadedPreviewImageSrc = val
-        }
-      }
+    title: function() {
+      return this.isPublished ? 'Invite Collaborators' : 'Publish Page'
     }
   },
   mounted: function() {
@@ -240,84 +127,120 @@ export default {
   methods: {
     init() {
       log('in init')
-      if (this.page.image && this.page.image.ref) {
-        this.pageImageSrc = this.page.image.ref
-      }
     },
-    findImageFilenameKey() {
-      if (this.page.image && this.page.image.filename) {
-        const filenameKey = this.page.image.filename.split('.').shift()
-        return findImageByOid(filenameKey)
-      } else {
-        return Promise.resolve()
-      }
+    isQuotePage: function() {
+      return this.page.quote && this.page.quote.src
     },
-    getSelectedPreviewImageSrc() {
-      const selectedPreviewImageSlide = this.getSelectedPreviewImageSlide()
-      log('selectedPreviewImageSlideL', selectedPreviewImageSlide)
-      if (selectedPreviewImageSlide === this.previewImageSlide.page) {
-        return this.pageImageSrc
-      } else if (selectedPreviewImageSlide === this.previewImageSlide.custom) {
-        return this.uploadedPreviewImageSrc
+    uploadPreviewImage(uploadedPreviewImageFile) {
+      if (uploadedPreviewImageFile) {
+        return uploadImage(uploadedPreviewImageFile).then(result => {
+          log('uploaded image:', result)
+
+          uploadedPreviewImageFile = null
+
+          const previewImageData = {
+            filename: result.filename,
+            ref: result.downloadUrl,
+            created: Date.now()
+          }
+
+          return previewImageData
+        })
       } else {
-        let startingIndex = 1
-        if (this.pageImageSrc) {
-          startingIndex = 2
-        }
-        return this.previewImages[this.previewImageCarousel - startingIndex]
+        log('selectedPreviewImageFile not set therefore not uploading')
+        return Promise.resolve()
       }
     },
+    // findImageFilenameKey() {
+    //   if (this.page.image && this.page.image.filename) {
+    //     const filenameKey = this.page.image.filename.split('.').shift()
+    //     return findImageByOid(filenameKey)
+    //   } else {
+    //     return Promise.resolve()
+    //   }
+    // },
     publishAndInvite() {
       log('page already published just need to send invitation')
       this.inviteSwitch = true
       this.publish()
     },
     publish() {
-      log('getSelectedPreviewImageSrc', this.getSelectedPreviewImageSrc())
+      log('basePagePublishModel', this.basePagePublishModel)
+      log('page:', this.page)
+
+      if (this.basePagePublishModel && this.basePagePublishModel.summary) {
+        if (this.isQuotePage()) {
+          this.publishPagePreview({
+            quote: {
+              src: this.page.quote.src
+            },
+            background: {
+              color: this.page.quote.background
+            },
+            font: {
+              color: this.page.quote.color
+            }
+          })
+        } else if (this.basePagePublishModel.background.type === 'page-image') {
+          log('page image src:', this.basePagePublishModel.background.val)
+          log('page image id:', this.basePagePublishModel.background.id)
+          this.publishPagePreview({
+            image: {
+              url: this.basePagePublishModel.background.val,
+              id: this.basePagePublishModel.background.id
+            }
+          })
 
-      if (this.summary) {
-        const selectedPreviewImage = this.getSelectedPreviewImageSrc()
-        if (selectedPreviewImage) {
-          const selectedPreviewImageSlide = this.getSelectedPreviewImageSlide()
-          log('selectedPreviewImageSlide:', selectedPreviewImageSlide)
+          // this.findImageFilenameKey()
+          //   .then(imageSnapshot => {
+          //     if (imageSnapshot && imageSnapshot.exists) {
+          //       // url should be same as : this.basePagePublishModel.background.val
+          //       this.publishPagePreview({
+          //         image: {
+          //           url: imageSnapshot.data().previewUrl,
+          //           id: imageSnapshot.id
+          //         }
+          //       })
+          //     }
+          //   })
+          //   .catch(error => {
+          //     log('There was an error publishing page', error)
+          //     this.$toast.error(error.message)
+          //   })
 
-          if (selectedPreviewImageSlide === this.previewImageSlide.page) {
-            this.findImageFilenameKey()
-              .then(imageSnapshot => {
-                if (imageSnapshot && imageSnapshot.exists) {
-                  this.publishPagePreview({
-                    previewImageUrl: imageSnapshot.data().previewUrl,
-                    previewImageOid: imageSnapshot.id
-                  })
+        } else if (
+          this.basePagePublishModel.background.type === 'file-upload-image'
+        ) {
+          this.uploadPreviewImage(
+            this.basePagePublishModel.background.file
+          ).then(imageData => {
+            log('uploaded preview image, imageData:', imageData)
+            if (imageData) {
+              this.publishPagePreview({
+                image: {
+                  url: imageData.ref,
+                  id: imageData.filename
                 }
               })
-              .catch(error => {
-                log('There was an error publishing page', error)
-                this.$toast.error(error.message)
-              })
-          } else if (
-            selectedPreviewImageSlide === this.previewImageSlide.custom
-          ) {
-            this.uploadPreviewImage().then(imageData => {
-              log('uploaded preview image, imageData:', imageData)
-              if (imageData) {
-                this.publishPagePreview({
-                  previewImageUrl: imageData.ref,
-                  previewImageOid: imageData.filename
-                })
-              } else {
-                this.$toast.error('There was an error uploading preview image')
-              }
-            })
-          } else {
-            this.publishPagePreview({
-              previewWallpaperImage: selectedPreviewImage
-            })
-          }
-        } else {
-          this.$toast.error(
-            'A preview image needs to be selected in order to publish page'
-          )
+            } else {
+              this.$toast.error('There was an error uploading preview image')
+            }
+          })
+        } else if (this.basePagePublishModel.background.type === 'color') {
+          this.publishPagePreview({
+            background: {
+              color: this.basePagePublishModel.background.val
+            },
+            font: {
+              color: this.basePagePublishModel.font ? this.basePagePublishModel.font.color : null
+            }
+          })
+        } else if (this.basePagePublishModel.background.type === 'wallpaper') {
+          this.publishPagePreview({
+            wallpaper: {
+              url: this.basePagePublishModel.background.val
+            }
+          })
         }
       } else {
         this.$toast.error(
@@ -325,36 +248,44 @@ export default {
         )
       }
     },
-    publishPagePreview(previewImageData) {
+    publishPagePreview(previewData) {
+      log('in publish page preview, previewData:', previewData)
       let keywords = []
       let authorTags = []
       log('inviteSwitch', this.inviteSwitch)
 
-      log('publish page:', this.summary)
-      keywords = stringUtils.findKeywords(this.summary)
-      authorTags = stringUtils.findAuthorTags(this.summary)
+      log('publish page:', this.basePagePublishModel.summary)
+      keywords = stringUtils.findKeywords(this.basePagePublishModel.summary)
+      authorTags = stringUtils.findAuthorTags(this.basePagePublishModel.summary)
 
       const preview = {
         storyOid: this.story.id,
         chapterOid: this.page.chapterOid,
         pageOid: this.page.id,
         title: this.story.title,
-        summary: this.summary,
+        quote: previewData.quote ? previewData.quote.src : '',
+        fontColor: previewData.font ? previewData.font.color : '#FFFFFF',
+        summary: this.basePagePublishModel.summary,
         uid: this.uid,
         userDisplayName: this.userDisplayName,
-        previewImageUrl: previewImageData.previewImageUrl
-          ? previewImageData.previewImageUrl
-          : '',
-        imageFilenameOid: previewImageData.previewImageOid
-          ? previewImageData.previewImageOid
-          : '',
+        backgroundColor:
+          previewData.background && previewData.background.color
+            ? previewData.background.color
+            : '#000000',
+        previewImageUrl:
+          previewData.image && previewData.image.url
+            ? previewData.image.url
+            : '',
+        imageFilenameOid:
+          previewData.image && previewData.image.id ? previewData.image.id : '',
         created: Date.now(),
         keywords: keywords.map(keyword => keyword.toLowerCase()),
         authorTags: authorTags,
         invite: this.inviteSwitch,
-        wallpaperUrl: previewImageData.previewWallpaperImage
-          ? previewImageData.previewWallpaperImage
-          : ''
+        wallpaperUrl:
+          previewData.wallpaper && previewData.wallpaper.url
+            ? previewData.wallpaper.url
+            : ''
       }
 
       log('publishing page with preview:', preview)
@@ -363,6 +294,8 @@ export default {
           this.$emit('published', false)
           this.closeDialog()
           this.$toast.success('Story published')
+          // todo ... redirecting here so do we need above steps?
+          this.$router.push(`/user/${this.uid}`)
         })
         .catch(error => {
           log('There was an error publishing page', error)
@@ -371,71 +304,9 @@ export default {
     },
     closeDialog() {
       this.$emit('close')
-    },
-    openFileUpload() {
-      log('openFileUpload')
-      // this.$refs.imageUploader.value = ''
-      this.$refs.imageUploader.click()
-    },
-    previewImageSelected(e) {
-      log('previewImageSelected')
-      const imageFile = e.target.files[0]
-      const limit = 2000000
-      if (imageFile) {
-        if (imageFile.size > limit) {
-          this.$toast.error(
-            `The file is over the ${limit / 1000 / 1000}MB limit`
-          )
-        } else if (!imageFile.type.startsWith('image/')) {
-          this.$toast.error(`Please upload a valid image`)
-        } else {
-          this.uploadedPreviewImageFile = imageFile
-          this.previewImageSrc = URL.createObjectURL(imageFile)
-        }
-      } else {
-        this.$toast.error('No preview image selected')
-      }
-    },
-    getSelectedPreviewImageSlide() {
-      if (this.pageImageSrc && this.previewImageCarousel === 0) {
-        return this.previewImageSlide.page
-      } else if (
-        this.uploadedPreviewImageSrc &&
-        this.uploadedPreviewImageFile &&
-        ((!this.pageImageSrc && this.previewImageCarousel === 0) ||
-          (this.pageImageSrc && this.previewImageCarousel === 1))
-      ) {
-        return this.previewImageSlide.custom
-      } else {
-        return this.previewImageSlide.wallpaper
-      }
-    },
-    uploadPreviewImage() {
-      if (this.uploadedPreviewImageFile) {
-        return uploadImage(this.uploadedPreviewImageFile).then(result => {
-          log('uploaded image:', result)
-
-          this.uploadedPreviewImageFile = null
-
-          const previewImageData = {
-            filename: result.filename,
-            ref: result.downloadUrl,
-            created: Date.now()
-          }
-
-          return previewImageData
-        })
-      } else {
-        log('selectedPreviewImageFile not set therefore not uploading')
-        return Promise.resolve()
-        // return Promise.reject(new Error('File is not initialised'))
-      }
     }
   }
 }
 </script>
 <style>
-.preview-image-item {
-  cursor: pointer;
-}
 </style>
diff --git a/ui/components/StoriesPreviewCard.vue b/ui/components/StoriesPreviewCard.vue
index d6c14ff..abfa7f9 100644
--- a/ui/components/StoriesPreviewCard.vue
+++ b/ui/components/StoriesPreviewCard.vue
@@ -26,12 +26,6 @@
             v-if="preview.previewImageUrl"
             :src="preview.previewImageUrl"
           />
-          <!--          <div-->
-          <!--            v-else-->
-          <!--            class="v-responsive v-image no-image"-->
-          <!--          >-->
-          <!--            {{ preview.summary }}-->
-          <!--          </div>-->
           <v-img
             v-else-if="preview.wallpaperUrl"
             :src="preview.wallpaperUrl"
@@ -41,16 +35,30 @@
                 fill-height
               >
                 <v-flex xs12 align-end flexbox>
-                  <span class="headline no-image-text">{{ preview.summary }}</span>
+                  <span style="white-space: pre-line" class="headline no-image-text">{{ preview.summary }}</span>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-img>
+          <v-sheet
+            v-else-if="preview.backgroundColor"
+            :color="preview.backgroundColor"
+            height="300"
+            tile
+            justify-center
+          >
+            <div
+              class="quote-block text-center pa-2"
+              :class="preview.fontColor === '#000000' ? `black--text` : `white--text`"
+            >
+              <span class="quote-txt subtitle-1">{{ preview.quote ? preview.quote : preview.summary }}</span>
+            </div>
+          </v-sheet>
           <v-card-title>
             {{ preview.title }}
           </v-card-title>
           <v-card-text class="grey--text truncate">
-            {{ preview.summary }}
+            <span style="white-space: pre-line">{{ preview.summary }}</span>
           </v-card-text>
         </div>
       </v-badge>
@@ -165,4 +173,14 @@ export default {
   overflow-wrap: break-word;
   word-break: break-word;
 }
+
+.quote-block {
+  line-height: 300px;
+  overflow: hidden;
+}
+
+.quote-txt {
+  display: inline-block;
+  vertical-align: middle;
+}
 </style>
diff --git a/ui/mixins/MediumViewerMixin.js b/ui/mixins/MediumViewerMixin.js
index 46b95f3..351c2fb 100644
--- a/ui/mixins/MediumViewerMixin.js
+++ b/ui/mixins/MediumViewerMixin.js
@@ -13,6 +13,9 @@ export default {
     },
     mediaImageType: function() {
       return 3
+    },
+    mediaQuoteType: function() {
+      return 4
     }
   },
   created: function() {
@@ -30,6 +33,9 @@ export default {
     })
   },
   methods: {
+    isMediaQuoteType(activeMedium) {
+      return activeMedium === this.mediaQuoteType
+    },
     isMediaBookType(activeMedium) {
       return activeMedium === this.mediaBookType
     },
diff --git a/ui/mixins/PageMixin.js b/ui/mixins/PageMixin.js
index 3bc67f3..172565c 100644
--- a/ui/mixins/PageMixin.js
+++ b/ui/mixins/PageMixin.js
@@ -19,6 +19,13 @@ export default {
     },
     getPageImageSrc(page) {
       return FileUtils.pageImageSrc(page)
+    },
+    getPageQuoteSrc(page) {
+      if (page.quote && page.quote.src) {
+        return page.quote.src
+      } else {
+        return ''
+      }
     }
   }
 }
diff --git a/ui/pages/story/_id/index.vue b/ui/pages/story/_id/index.vue
index 5afd7a7..f1b5477 100644
--- a/ui/pages/story/_id/index.vue
+++ b/ui/pages/story/_id/index.vue
@@ -78,6 +78,9 @@ export default {
           filename: null,
           ref: null
         },
+        quote: {
+          src: null
+        },
         previewOid: null
       },
       mutablePages: [],
@@ -141,6 +144,15 @@ export default {
         }
       })
 
+      EventBus.$on('story-page-quote-save', quote => {
+        log(`story-page-quote-save event received:`, quote)
+        this.page.quote = {
+          src: quote.src,
+          color: quote.color,
+          background: quote.background
+        }
+      })
+
       EventBus.$on('save-pages', pages => {
         log(`savePages event received:`, pages)
         this.mutablePages = this.pages.slice()
@@ -151,6 +163,7 @@ export default {
     EventBus.$off('story-image-file-key')
     EventBus.$off('story-book-file-key')
     EventBus.$off('story-rich-text-file-key')
+    EventBus.$off('story-page-quote-save')
     EventBus.$off('save-pages')
   },
   methods: {
@@ -201,6 +214,7 @@ export default {
         invite: pageData.invite,
         public: pageData.public,
         richText: pageData.richText,
+        quote: pageData.quote,
         storyOid: pageData.storyOid,
         uid: pageData.uid,
         previewOid: pageData.previewRef ? pageData.previewRef.id : undefined,