diff --git a/api/BaseAPI.js b/api/BaseAPI.js
index ae9bfc001..446a6b84e 100644
--- a/api/BaseAPI.js
+++ b/api/BaseAPI.js
@@ -85,7 +85,7 @@ export default class BaseAPI {
     // - POSTs to session can return errors we want to handle.
     // - 999 can happen if people double-click, and we should just quietly drop it because the first click will
     //   probably do the right thing.
-    // - otherwise pop up an error.
+    // - otherwise throw an exception.
     if (
       status !== 200 ||
       !data ||
@@ -97,7 +97,14 @@ export default class BaseAPI {
       const retstr = data && data.ret ? data.ret : 'Unknown'
       const statusstr = data && data.status ? data.status : 'Unknown'
 
-      if (logError) {
+      // Whether or not we log this error to Sentry depends.  Most errors are worth logging, because they're unexpected.
+      // But some API calls are expected to fail, and throw an exception which is then handled in the code.  We don't
+      // want to log those, otherwise we will spend time investigating them in Sentry.  So we have a parameter which
+      // indicates whether we want to log this to Sentry - which can be a boolean or a function for more complex
+      // decisions.
+      const log = typeof logError === 'function' ? logError(data) : logError
+
+      if (log) {
         Sentry.captureException(
           'API request failed ' +
             path +
diff --git a/api/ChatAPI.js b/api/ChatAPI.js
index ba642cf2e..ab939e3d8 100644
--- a/api/ChatAPI.js
+++ b/api/ChatAPI.js
@@ -40,4 +40,8 @@ export default class ChatAPI extends BaseAPI {
   blockChat(chatid) {
     return this.$post('/chatrooms', { id: chatid, status: 'Blocked' })
   }
+
+  unseenCount(chatid) {
+    return this.$get('/chatrooms', { count: true })
+  }
 }
diff --git a/api/GroupAPI.js b/api/GroupAPI.js
index ba603b537..142100f30 100644
--- a/api/GroupAPI.js
+++ b/api/GroupAPI.js
@@ -6,8 +6,8 @@ export default class GroupAPI extends BaseAPI {
     return groups
   }
 
-  async fetch(id) {
-    const { group } = await this.$get('/group', { id })
+  async fetch(id, log) {
+    const { group } = await this.$get('/group', { id }, log)
     return group
   }
 }
diff --git a/components/ChatButton.vue b/components/ChatButton.vue
index 0b5564053..b4a4d00d7 100644
--- a/components/ChatButton.vue
+++ b/components/ChatButton.vue
@@ -59,15 +59,17 @@ export default {
       this.openChat(null, null, null, popup)
     },
 
-    async openChat(event, firstmessage, firstmsgid, popup) {
+    async openChat(event, firstmessage, firstmsgid, popup, route = true) {
       this.$emit('click')
       console.log(
         'Open chat',
         firstmessage,
         firstmsgid,
         this.groupid,
-        this.userid
+        this.userid,
+        popup
       )
+      console.trace()
 
       if (this.groupid > 0) {
         // Open a chat to the mods
@@ -103,8 +105,8 @@ export default {
           await this.$store.dispatch('popupchats/popup', {
             id: chatid
           })
-        } else {
-          this.$router.go('/chats/' + chatid)
+        } else if (route) {
+          this.$router.push('/chats/' + chatid)
         }
       }
     }
diff --git a/components/ChatMessageText.vue b/components/ChatMessageText.vue
index 26d6c98a7..cb9d13056 100644
--- a/components/ChatMessageText.vue
+++ b/components/ChatMessageText.vue
@@ -2,13 +2,13 @@
   <div>
     <b-row class="pb-1">
       <b-col>
-        <div v-if="chatmessage.userid != $store.state.auth.user.id">
+        <div v-if="chatmessage.userid != $store.state.auth.user.id" class="chatMessageWrapper">
           <div class="chatMessageProfilePic">
             <div>
               <profile-image v-if="othericon" :image="othericon" class="mr-1 mb-1 mt-1 inline" is-thumbnail size="sm" />
             </div>
           </div>
-          <div :class="emessage ? 'media-body chatMessage theirs' : 'media-body'">
+          <div :class="emessage ? 'chatMessage theirs' : ''">
             <span>
               <span v-if="(chatmessage.secondsago < 60) || (chatmessage.id > chat.lastmsgseen)" class="prewrap"><b>{{ emessage }}</b></span>
               <span v-else class="prewrap forcebreak">{{ emessage }}</span>
@@ -16,8 +16,8 @@
             </span>
           </div>
         </div>
-        <div v-else class="myChatMessage">
-          <div :class="emessage ? 'media-body chatMessage mine' : 'media-body'">
+        <div v-else class="myChatMessage chatMessageWrapper">
+          <div :class="emessage ? 'chatMessage mine' : ''">
             <span>
               <span v-if="(chatmessage.secondsago < 60) || (chatmessage.id > chat.lastmsgseen)" class="prewrap"><b>{{ emessage }}</b></span>
               <span v-else class="prewrap forcebreak">{{ emessage }}</span>
@@ -37,6 +37,9 @@
 
 <style scoped lang="scss">
 @import 'color-vars';
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
 
 .chatMessage {
   border: 1px solid $color-gray--light;
@@ -47,15 +50,37 @@
   padding-right: 4px;
   word-wrap: break-word;
   line-height: 1.75;
-  display: inline-block;
+}
+
+.myChatMessage {
+  .chatMessage {
+    margin-left: auto;
+  }
+
+  .chatMessageProfilePic {
+    left: 0;
+  }
 }
 
 .chatMessageProfilePic {
-  display: inline-block;
+  min-width: 25px;
+  position: relative;
+  top: 3px;
+  left: 3px;
+
+  @include media-breakpoint-up(md) {
+    min-width: 35px;
+  }
 }
 
-.myChatMessage {
-  text-align: right;
+.chatMessageWrapper {
+  display: flex;
+  padding-right: 10px;
+
+  &.myChatMessage {
+    padding-left: 10px;
+    padding-right: 0;
+  }
 }
 
 .theirs {
diff --git a/components/ChatPane.vue b/components/ChatPane.vue
index 9f2591d6c..6ab8d3962 100644
--- a/components/ChatPane.vue
+++ b/components/ChatPane.vue
@@ -6,7 +6,7 @@
           <b-col v-if="chat">
             <b-row>
               <b-col cols="8" class="p-0 pl-1">
-                <span v-if="(chat.chattype == 'User2User' || chat.chattype == 'User2Mod')" class="d-inline">
+                <span v-if="(chat.chattype == 'User2User' || chat.chattype == 'User2Mod')" class="d-inline clickme">
                   <span @click="showInfo">
                     {{ chat.name }}
                   </span>
@@ -119,7 +119,7 @@
           </b-row>
           <b-row v-if="!spammer" class="bg-white">
             <b-col class="p-0 pt-1 pb-1">
-              <div class="d-none d-xl-block">
+              <div class="d-none d-lg-block">
                 <span v-if="chat && chat.chattype === 'User2User' && otheruser">
                   <b-btn v-b-tooltip.hover.top variant="white" title="Promise an item to this person" @click="promise">
                     <v-icon name="handshake" />&nbsp;Promise
@@ -146,7 +146,7 @@
                   <v-icon name="camera" />
                 </b-btn>
               </div>
-              <div class="d-flex d-xl-none justify-content-between align-middle">
+              <div class="d-flex d-lg-none justify-content-between align-middle">
                 <span v-if="chat && chat.chattype === 'User2User' && otheruser" v-b-tooltip.hover.top title="Promise an item to this person" class="ml-1 mr-2" @click="promise">
                   <v-icon scale="2" name="handshake" />
                 </span>
diff --git a/components/CommunityEventSidebar.vue b/components/CommunityEventSidebar.vue
index e00204ddf..fdc663518 100644
--- a/components/CommunityEventSidebar.vue
+++ b/components/CommunityEventSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-2">
+  <div>
     <b-card v-if="events.length" variant="white" no-body>
       <b-card-body class="p-0">
         <b-btn variant="white" class="float-right m-1" @click="showEventModal">
diff --git a/components/JobsSidebar.vue b/components/JobsSidebar.vue
index c1005a9dd..67806192e 100644
--- a/components/JobsSidebar.vue
+++ b/components/JobsSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="location" class="mt-2">
+  <div v-if="location">
     <NoticeMessage v-if="blocked" variant="warning">
       <h3>Please help keep Freegle running</h3>
       <p>
@@ -26,25 +26,39 @@
         <p class="text-center small">
           Jobs near you.  Freegle gets a small amount if you click.
         </p>
-        <div v-for="job in jobs" :key="'job-' + job.onmousedown" class="">
+        <div v-for="job in visibleJobs" :key="'job-' + job.onmousedown" class="">
           <Job :summary="true" :job="job" />
         </div>
+        <client-only>
+          <infinite-loading key="infinitejobs" @infinite="loadMore">
+            <span slot="no-results">
+              <notice-message v-if="!jobs || !jobs.length">
+                We can't find any jobs at the moment.
+              </notice-message>
+            </span>
+            <span slot="no-more" />
+            <span slot="spinner" />
+          </infinite-loading>
+        </client-only>
       </b-card-body>
     </b-card>
   </div>
 </template>
 <script>
+import InfiniteLoading from 'vue-infinite-loading'
 import Job from './Job'
 const NoticeMessage = () => import('~/components/NoticeMessage')
 
 export default {
   components: {
     Job,
-    NoticeMessage
+    NoticeMessage,
+    InfiniteLoading
   },
   data: function() {
     return {
-      location: null
+      location: null,
+      show: 0
     }
   },
   computed: {
@@ -53,6 +67,15 @@ export default {
     },
     blocked() {
       return this.$store.getters['jobs/blocked']
+    },
+    visibleJobs() {
+      if (process.browser) {
+        // We have an infinite scroll - return as many as we're currently showing.
+        return this.jobs.slice(0, this.show)
+      } else {
+        // SSR - return all for SEO.
+        return this.job
+      }
     }
   },
   mounted() {
@@ -75,6 +98,16 @@ export default {
       }, 1000)
     }
   },
-  methods: {}
+  methods: {
+    loadMore($state) {
+      // We use an infinite load for the list because it's a lot of DOM to add at initial page load.
+      if (this.show < this.jobs.length) {
+        this.show++
+        $state.loaded()
+      } else {
+        $state.complete()
+      }
+    }
+  }
 }
 </script>
diff --git a/components/JobsTopBar.vue b/components/JobsTopBar.vue
index 2ee98ba55..66f598d88 100644
--- a/components/JobsTopBar.vue
+++ b/components/JobsTopBar.vue
@@ -16,7 +16,7 @@
     <div v-else>
       <div class="mb-1 text-center small text-muted">
         Jobs near you.  Freegle gets a small amount if you click, which helps keep us going.  <nuxt-link to="/jobs">
-          See more
+          See more jobs
         </nuxt-link>.
       </div>
       <div v-for="job in jobs" :key="'job-' + job.onmousedown" class="">
diff --git a/components/Message.vue b/components/Message.vue
index cb9713f58..848831816 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -2,67 +2,169 @@
   <div>
     <b-card class="p-0 mb-1" variant="success">
       <b-card-header :class="'pl-2 pr-2 clearfix' + (ispromised ? ' promisedfade' : '')">
-        <b-card-title class="msgsubj mb-0">
-          <span v-if="attachments && attachments.length > 0" class="float-right clickme" @click="showPhotos">
-            <b-badge v-if="attachments.length > 1" class="photobadge" variant="primary">+{{ attachments.length - 1 }} <v-icon name="camera" /></b-badge>
+        <b-card-title class="msgsubj mb-0 d-block d-sm-none">
+          <div class="d-flex flex-column justify-content-end">
+            <div class="d-flex">
+              <Highlighter
+                v-if="matchedon"
+                :search-words="[matchedon.word]"
+                :text-to-highlight="eSubject"
+                highlight-class-name="highlight"
+              />
+              <span v-else>
+                {{ eSubject }}
+              </span>
+            </div>
+            <div v-for="group in groups" :key="'message-' + id + '-' + group.id" class="small muted">
+              <div class="small">
+                {{ group.arrival | timeago }} on <nuxt-link :to="'/explore/' + group.groupid">
+                  {{ group.namedisplay }}
+                </nuxt-link>
+              </div>
+            </div>
+          </div>
+          <div v-if="attachments && attachments.length > 0" class="d-block mt-1 d-sm-none clickme position-relative" @click="showPhotos">
+            <b-badge v-if="attachments.length > 1" class="photobadge" variant="primary">
+              +{{ attachments.length - 1 }} <v-icon name="camera" />
+            </b-badge>
             <b-img-lazy
               rounded
-              thumbnail
+              fluid-grow
               class="attachment p-0 square"
               alt="Item picture"
               title="Item picture"
               :src="attachments[0].paththumb"
             />
-            <br>
-          </span>
-          <b-btn v-if="expanded" variant="white" class="float-right mr-1" title="Share" @click="share">
-            <v-icon name="share-alt" />
-          </b-btn>
-          <Highlighter
-            v-if="matchedon"
-            :search-words="[matchedon.word]"
-            :text-to-highlight="eSubject"
-            highlight-class-name="highlight"
-          />
-          <span v-else>
-            {{ eSubject }}
-          </span>
+          </div>
+          <div class="small">
+            <div v-if="eSnippet && eSnippet !== 'null' && !expanded">
+              <b class="snippet black">
+                <Highlighter
+                  v-if="matchedon"
+                  :search-words="[matchedon.word]"
+                  :text-to-highlight="eSnippet"
+                  highlight-class-name="highlight"
+                />
+                <span v-else>{{ eSnippet }}</span>
+                ...
+              </b>
+            </div>
+            <div v-if="!eSnippet || eSnippet === 'null' && !expanded">
+              <i>There's no description.</i>
+            </div>
+            <b-button v-if="!expanded" variant="white" class="mt-1" @click="expand">
+              See details and reply <v-icon name="angle-double-right" />
+            </b-button>
+          </div>
         </b-card-title>
-        <span v-for="group in groups" :key="'message-' + id + '-' + group.id" class="small muted">
-          {{ group.arrival | timeago }} on <nuxt-link :to="'/explore/' + group.groupid">{{ group.namedisplay }}</nuxt-link>
-          <nuxt-link :to="'/message/' + id" class="text-sm small text-faded">
-            #{{ id }}&nbsp;
-          </nuxt-link>
-        </span>
-        <div v-if="eSnippet && eSnippet !== 'null' && !expanded">
-          <b class="snippet black">
-            <Highlighter
-              v-if="matchedon"
-              :search-words="[matchedon.word]"
-              :text-to-highlight="eSnippet"
-              highlight-class-name="highlight"
-            />
-            <span v-else>{{ eSnippet }}</span>
-            ...
-          </b>
-        </div>
-        <div v-if="!eSnippet || eSnippet === 'null' && !expanded">
-          <i>There's no description.</i>
-        </div>
-        <b-button v-if="!expanded" variant="white" class="mt-1" @click="expand">
-          See details and reply <v-icon name="angle-double-right" />
-        </b-button>
-        <div v-else class="d-flex justify-content-between mt-1">
-          <b-button variant="link" @click="contract">
-            Close post
-          </b-button>
+        <b-card-title class="msgsubj mb-0 d-none d-sm-block">
+          <div class="d-flex justify-content-between">
+            <div class="d-flex flex-column flex-grow-1">
+              <Highlighter
+                v-if="matchedon"
+                :search-words="[matchedon.word]"
+                :text-to-highlight="eSubject"
+                highlight-class-name="highlight"
+              />
+              <span v-else>
+                {{ eSubject }}
+              </span>
+              <div v-for="group in groups" :key="'message-' + id + '-' + group.id" class="small d-none d-sm-block">
+                <div class="small">
+                  {{ group.arrival | timeago }} on <nuxt-link :to="'/explore/' + group.groupid">
+                    {{ group.namedisplay }}
+                  </nuxt-link>
+                  <nuxt-link :to="'/message/' + id" class="text-sm small text-faded">
+                    #{{ id }}&nbsp;
+                  </nuxt-link>
+                </div>
+              </div>
+              <div flex-grow-1 class="small">
+                <div v-if="eSnippet && eSnippet !== 'null' && !expanded">
+                  <b class="snippet black">
+                    <Highlighter
+                      v-if="matchedon"
+                      :search-words="[matchedon.word]"
+                      :text-to-highlight="eSnippet"
+                      highlight-class-name="highlight"
+                    />
+                    <span v-else>{{ eSnippet }}</span>
+                    ...
+                  </b>
+                </div>
+                <div v-if="!eSnippet || eSnippet === 'null' && !expanded">
+                  <i>There's no description.</i>
+                </div>
+                <b-button v-if="!expanded" variant="white" class="mt-1" @click="expand">
+                  See details and reply <v-icon name="angle-double-right" />
+                </b-button>
+              </div>
+              <div class="d-flex justify-content-between">
+                <b-button v-if="expanded && !hideClose" size="sm" variant="link" class="grey" @click="contract">
+                  Close post
+                </b-button>
+                <b-btn
+                  v-if="expanded && expanded.groups && expanded.groups.length"
+                  variant="link"
+                  class="mr-2 grey"
+                  size="sm"
+                  @click="report"
+                >
+                  Report this post
+                </b-btn>
+                <b-btn
+                  v-if="expanded"
+                  variant="white"
+                  class="mr-4"
+                  title="Share"
+                  size="sm"
+                  @click="share"
+                >
+                  <v-icon name="share-alt" />
+                </b-btn>
+              </div>
+            </div>
+            <div v-if="attachments && attachments.length > 0" class="clickme position-relative" @click="showPhotos">
+              <b-badge v-if="attachments.length > 1" class="photobadge" variant="primary">
+                +{{ attachments.length - 1 }} <v-icon name="camera" />
+              </b-badge>
+              <b-img-lazy
+                rounded
+                thumbnail
+                class="attachment p-0 square nottoobig"
+                alt="Item picture"
+                title="Item picture"
+                :src="attachments[0].paththumb"
+              />
+            </div>
+          </div>
+        </b-card-title>
+        <div v-if="expanded" class="d-flex justify-content-between mt-1 d-block d-sm-none">
+          <div class="flex-grow-2 ">
+            <b-button v-if="expanded && !hideClose" size="sm" variant="link" class="grey" @click="contract">
+              Close post
+            </b-button>
+          </div>
+          <div class="flex-grow-1">
+            <b-btn
+              v-if="expanded.groups && expanded.groups.length"
+              variant="link"
+              class="mr-2 grey"
+              size="sm"
+              @click="report"
+            >
+              Report this post
+            </b-btn>
+          </div>
           <b-btn
-            v-if="expanded.groups && expanded.groups.length"
-            variant="link"
-            class="mr-2"
-            @click="report"
+            v-if="expanded"
+            variant="white"
+            class="mr-1"
+            title="Share"
+            size="sm"
+            @click="share"
           >
-            Report this post
+            <v-icon name="share-alt" />
           </b-btn>
         </div>
       </b-card-header>
@@ -119,7 +221,12 @@
               class="flex-shrink-2"
             />
             <div class="flex-grow-1 text-right ml-2 d-none d-md-block">
-              <b-btn variant="success" :disabled="replying" @click="sendReply">
+              <b-btn variant="success" :disabled="replying" class="d-inline-block d-sm-none" @click="sendReply(false)">
+                Send
+                <v-icon v-if="replying" name="sync" class="fa-spin" />
+                <v-icon v-else name="angle-double-right" />&nbsp;
+              </b-btn>
+              <b-btn variant="success" :disabled="replying" class="d-none d-sm-inline-block" @click="sendReply(true)">
                 Send
                 <v-icon v-if="replying" name="sync" class="fa-spin" />
                 <v-icon v-else name="angle-double-right" />&nbsp;
@@ -129,7 +236,12 @@
         </b-row>
         <b-row class="d-block d-md-none mt-2">
           <b-col>
-            <b-btn variant="success" block :disabled="replying" @click="sendReply">
+            <b-btn variant="success" block :disabled="replying" class="d-inline-block d-sm-none" @click="sendReply(false)">
+              Send
+              <v-icon v-if="replying" name="sync" class="fa-spin" />
+              <v-icon v-else name="angle-double-right" />&nbsp;
+            </b-btn>
+            <b-btn variant="success" block :disabled="replying" class="d-none d-sm-inline-block" @click="sendReply(true)">
               Send
               <v-icon v-if="replying" name="sync" class="fa-spin" />
               <v-icon v-else name="angle-double-right" />&nbsp;
@@ -156,20 +268,11 @@
         </b-button>
       </template>
     </b-modal>
-    <ShareModal v-if="expanded" ref="shareModal" :message="$props" />
+    <ShareModal v-if="expanded && expanded.url" ref="shareModal" :message="expanded" />
     <ChatButton ref="chatbutton" :userid="replyToUser" class="d-none" @sent="sentReply" />
     <MessageReportModal v-if="expanded" ref="reportModal" :message="$props" />
   </div>
 </template>
-<style scoped>
-.highlight {
-  padding: 0;
-}
-
-.promisedfade {
-  opacity: 0.3;
-}
-</style>
 <script>
 // Need to import rather than async otherwise the render doesn't happen and ref isn't set.
 import ChatButton from './ChatButton'
@@ -231,6 +334,16 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    hideClose: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    url: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   data: function() {
@@ -369,7 +482,9 @@ export default {
       this.$refs.reportModal.show()
     },
 
-    async sendReply() {
+    async sendReply(popup) {
+      // We have different buttons which display at different screen sizes.  Which of those is visible and hence
+      // clicked tells us whether we want to open this chat in a popup or not.
       console.log('Send reply', this.reply)
       if (this.reply) {
         const me = this.$store.getters['auth/user']
@@ -416,8 +531,23 @@ export default {
           // Now create the chat and send the first message.
           console.log('Prepare chat', this.reply, this.id, this.replyToUser)
           this.$nextTick(() => {
-            console.log('Now open chat', this.reply, this.id, this.replyToUser)
-            this.$refs.chatbutton.openChat(null, this.reply, this.id)
+            console.log(
+              'Now open chat',
+              this.reply,
+              this.id,
+              this.replyToUser,
+              popup
+            )
+
+            // Open the chat.  We don't want to move from this page - either we'll get a popup chat (so we can
+            // see the reply went) or we're on mobile and we'll display the sent message notice.
+            this.$refs.chatbutton.openChat(
+              null,
+              this.reply,
+              this.id,
+              popup,
+              false
+            )
           })
         } else {
           // We're not logged in yet.  We need to save the reply and force a sign in.
@@ -445,9 +575,6 @@ export default {
         replyTo: null,
         replyMessage: null
       })
-
-      // Now create the chat and send the first message.
-      await this.$refs.chatbutton.openChat()
     }
   }
 }
@@ -476,7 +603,7 @@ h4.snippet {
   height: 200px;
 }
 
-img.attachment {
+.nottoobig {
   max-height: 150px !important;
   max-width: 150px !important;
 }
@@ -491,12 +618,24 @@ img.attachment {
 }
 
 .photobadge {
-  left: 150px;
-  top: -54px;
-  position: relative;
+  right: 10px;
+  position: absolute;
+  top: 10px;
 }
 
 .msgsubj {
   color: $colour-info-fg !important;
 }
+
+.highlight {
+  padding: 0;
+}
+
+.promisedfade {
+  opacity: 0.3;
+}
+
+.grey {
+  color: $color-gray--base;
+}
 </style>
diff --git a/components/MessageEditModal.vue b/components/MessageEditModal.vue
index d388dcfe9..cf3b4a61d 100644
--- a/components/MessageEditModal.vue
+++ b/components/MessageEditModal.vue
@@ -11,7 +11,7 @@
           Edit <em>{{ message.subject }}</em>
         </template>
         <template slot="default">
-          <div v-if="item">
+          <div v-if="message.location">
             <b-row>
               <b-col cols="6" md="3">
                 <b-form-select v-model="message.type">
@@ -24,7 +24,7 @@
                 </b-form-select>
               </b-col>
               <b-col cols="6">
-                <PostItem :item="item" @selected="itemSelect" @typed="itemType" />
+                <PostItem :item="item" @selected="itemSelect" @cleared="itemClear" @typed="itemType" />
               </b-col>
               <b-col cols="6" md="3">
                 <Postcode :find="false" size="md" @selected="postcodeSelect" @cleared="postcodeClear" />
@@ -139,24 +139,26 @@ export default {
       this.showModal = false
     },
     async save() {
-      const attids = []
-      this.saving = true
+      if (this.item && (this.message.textbody || this.attachments.length)) {
+        const attids = []
+        this.saving = true
 
-      for (const att of this.attachments) {
-        attids.push(att.id)
-      }
+        for (const att of this.attachments) {
+          attids.push(att.id)
+        }
 
-      await this.$store.dispatch('messages/patch', {
-        id: this.message.id,
-        msgtype: this.message.type,
-        item: this.item,
-        location: this.postcode.name,
-        textbody: this.$refs.textbody.value,
-        attachments: attids
-      })
+        await this.$store.dispatch('messages/patch', {
+          id: this.message.id,
+          msgtype: this.message.type,
+          item: this.item,
+          location: this.postcode.name,
+          textbody: this.message.textbody,
+          attachments: attids
+        })
 
-      this.saving = null
-      this.hide()
+        this.saving = null
+        this.hide()
+      }
     },
     removePhoto(id) {
       this.attachments = this.attachments.filter(item => {
@@ -181,6 +183,9 @@ export default {
     itemType(value) {
       this.item = value
     },
+    itemClear() {
+      this.item = null
+    },
     itemSelect(item) {
       this.item = item.name
     },
diff --git a/components/MessageUserInfo.vue b/components/MessageUserInfo.vue
index 380473d17..203364a63 100644
--- a/components/MessageUserInfo.vue
+++ b/components/MessageUserInfo.vue
@@ -1,18 +1,21 @@
 <template>
   <nuxt-link :to="'/profile/' + user.id" class="text-success decornone" :title="'Click to view profile for ' + user.displayname">
-    <span class="text-muted small">
+    <span class="text-muted small d-flex justify-content-between">
       <profile-image :image="user.profile.turl" class="ml-1 mb-1 inline" is-thumbnail size="sm" />
-      Posted by {{ user.displayname }}
-      <span v-if="user.info.openoffers + user.info.openwanteds > 0">
-        &bull;
-        <span v-if="user.info.openoffers" class="text-success">
-          {{ user.info.openoffers | pluralize([ 'open OFFER', 'open OFFERs' ], { includeNumber: true }) }}
-        </span>
-        <span v-if="user.info.openoffers && user.info.openwanteds">
-          &bull;
-        </span>
-        <span v-if="user.info.openwanteds" class="text-success">
-          {{ user.info.openwanteds | pluralize([ 'open WANTED', 'open WANTEDs' ], { includeNumber: true }) }}
+      <span class="flex-grow-1">
+        Posted by {{ user.displayname }}
+        <br class="d-block d-sm-none">
+        <span v-if="user.info.openoffers + user.info.openwanteds > 0">
+          <span class="d-none d-sm-inline">&bull;</span>
+          <span v-if="user.info.openoffers" class="text-success">
+            {{ user.info.openoffers | pluralize([ 'open OFFER', 'open OFFERs' ], { includeNumber: true }) }}
+          </span>
+          <span v-if="user.info.openoffers && user.info.openwanteds">
+            &bull;
+          </span>
+          <span v-if="user.info.openwanteds" class="text-success">
+            {{ user.info.openwanteds | pluralize([ 'open WANTED', 'open WANTEDs' ], { includeNumber: true }) }}
+          </span>
         </span>
       </span>
     </span>
diff --git a/components/NewsAlert.vue b/components/NewsAlert.vue
index 56db3d7e1..f475c16fc 100644
--- a/components/NewsAlert.vue
+++ b/components/NewsAlert.vue
@@ -1,31 +1,26 @@
 <template>
   <div>
-    <b-row>
-      <b-col v-if="userid">
-        <profile-image v-if="users[userid].profile.turl" :image="require(`@/static/icon.png`)" class="ml-1 mb-1 inline" is-thumbnail size="lg" />
-        <span class="text-success font-weight-bold pl-2">
-          Freegle
-        </span>
-        <br>
-        <span class="text-muted small pl-2">
-          {{ newsfeed.timestamp | timeago }}
-        </span>
-      </b-col>
-    </b-row>
+    <div>
+      <profile-image :image="require(`@/static/icon.png`)" class="ml-1 mb-1 inline" is-thumbnail size="lg" />
+      <span class="text-success font-weight-bold pl-2">
+        Freegle
+      </span>
+      <br>
+      <span class="text-muted small pl-2">
+        {{ newsfeed.timestamp | timeago }}
+      </span>
+    </div>
     <span v-if="newsfeed.message" class="font-weight-bold prewrap forcebreak">{{ emessage }}</span>
     <div>
-      <b-row v-if="newsfeed.image">
-        <b-col>
-          <b-img
-            v-b-modal="'photoModal-' + newsfeed.id"
-            thumbnail
-            rounded
-            lazy
-            :src="newsfeed.image.paththumb"
-            class="clickme"
-          />
-        </b-col>
-      </b-row>
+      <b-img
+        v-if="newsfeed.image"
+        v-b-modal="'photoModal-' + newsfeed.id"
+        thumbnail
+        rounded
+        lazy
+        :src="newsfeed.image.paththumb"
+        class="clickme"
+      />
     </div>
     <div class="mt-2">
       <NewsLoveComment :newsfeed="newsfeed" @focus-comment="$emit('focus-comment')" />
diff --git a/components/NewsVolunteerOpportunity.vue b/components/NewsVolunteerOpportunity.vue
index 9ce1bc070..be0d29b4a 100644
--- a/components/NewsVolunteerOpportunity.vue
+++ b/components/NewsVolunteerOpportunity.vue
@@ -1,65 +1,62 @@
 <template>
   <div>
-    <b-row>
-      <b-col>
-        <profile-image
-          v-if="users[userid].profile.turl"
-          :image="users[userid].profile.turl"
-          class="ml-1 mr-2 mb-1 inline"
-          is-thumbnail
-          :is-moderator="users[userid].settings.showmod"
-          size="lg"
-        />
-        <span class="text-success font-weight-bold">{{ users[userid].displayname }}</span>
-        posted a volunteering opportunity<span class="d-none d-md-inline-block">:</span><br class="d-block d-md-none"> <b>{{ newsfeed.volunteering.title }}</b>
-        <br>
-        <span class="text-muted small">
-          {{ newsfeed.timestamp | timeago }}
-        </span>
-        on {{ newsfeed.volunteering.groups[0].namedisplay }}
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col cols="12" :lg="newsfeed.volunteering.photo ? 8 : 12">
-        <span v-if="newsfeed.volunteering.description" class="text-truncate d-block">
-          <v-icon name="info-circle" class="fa-fw" /> {{ newsfeed.volunteering.description }}
-        </span>
-        <span v-if="newsfeed.volunteering.location" class="text-truncate d-block">
-          <v-icon name="map-marker-alt" class="fa-fw" /> {{ newsfeed.volunteering.location }}
-        </span>
-        <br>
-        <b-btn variant="primary" class="mt-2" @click="moreInfo">
+    <div>
+      <profile-image
+        v-if="users[userid].profile.turl"
+        :image="users[userid].profile.turl"
+        class="ml-1 mr-2 mb-1 inline"
+        is-thumbnail
+        :is-moderator="users[userid].settings.showmod"
+        size="lg"
+      />
+      <span class="text-success font-weight-bold">{{ users[userid].displayname }}</span>
+      posted a volunteering opportunity<span class="d-none d-md-inline-block">:</span><br class="d-block d-md-none"> <b>{{ newsfeed.volunteering.title }}</b>
+      <br>
+      <span class="text-muted small">
+        {{ newsfeed.timestamp | timeago }}
+      </span>
+      on {{ newsfeed.volunteering.groups[0].namedisplay }}
+    </div>
+    <div class="volunteering__container">
+      <div class="volunteering__description">
+        <div v-if="newsfeed.volunteering.description" class="text-truncate">
+          <v-icon name="info-circle" class="fa-fw" />
+          {{ newsfeed.volunteering.description }}
+        </div>
+        <div v-if="newsfeed.volunteering.location" class="text-truncate">
+          <v-icon name="map-marker-alt" class="fa-fw" />
+          {{ newsfeed.volunteering.location }}
+        </div>
+        <b-btn variant="primary" class="mt-3 mb-2" @click="moreInfo">
           <v-icon name="info-circle" /> More info
         </b-btn>
-      </b-col>
-      <b-col v-if="newsfeed.volunteering.photo" cols="12" lg="4">
+      </div>
+      <div class="volunteering__photo">
         <b-img
+          v-if="newsfeed.volunteering.photo"
           thumbnail
           rounded
           lazy
           :src="newsfeed.volunteering.photo.paththumb"
-          class="clickme d-inline-block mt-2 mt-md-0 float-md-right"
+          class="clickme mt-2 mt-md-0"
           @click="moreInfo"
         />
-      </b-col>
-    </b-row>
+      </div>
+    </div>
     <hr>
-    <b-row class="mt-2">
-      <b-col>
-        <NewsLoveComment :newsfeed="newsfeed" @focus-comment="$emit('focus-comment')" />
-        <span class="float-right d-inline-block">
-          <b-btn variant="white" size="sm" @click="addOpportunity">
-            <v-icon name="plus" /> Add your opportunity
-          </b-btn>
-        </span>
-      </b-col>
-    </b-row>
+    <div class="mt-2">
+      <NewsLoveComment :newsfeed="newsfeed" @focus-comment="$emit('focus-comment')" />
+      <span class="float-right d-inline-block">
+        <b-btn variant="white" size="sm" @click="addOpportunity">
+          <v-icon name="plus" /> Add your opportunity
+        </b-btn>
+      </span>
+    </div>
     <VolunteerOpportunityModal ref="addOpportunity" :start-edit="true" />
     <VolunteerOpportunityModal ref="moreInfo" :volunteering="newsfeed.volunteering" />
   </div>
 </template>
-<style scoped>
-</style>
+
 <script>
 import NewsBase from '~/components/NewsBase'
 import NewsLoveComment from '~/components/NewsLoveComment'
@@ -83,3 +80,32 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
+
+.volunteering__container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.volunteering__description {
+  width: 100%;
+
+  @include media-breakpoint-up(lg) {
+    width: 65%;
+    padding-right: 15px;
+  }
+}
+
+.volunteering__photo {
+  width: 100%;
+
+  @include media-breakpoint-up(lg) {
+    width: 30%;
+  }
+}
+</style>
diff --git a/components/Viewed.vue b/components/Viewed.vue
new file mode 100644
index 000000000..2acabb57b
--- /dev/null
+++ b/components/Viewed.vue
@@ -0,0 +1,29 @@
+<template>
+  <b-card v-if="messages && messages.length" bg-light>
+    <b-card-title>
+      Recently Viewed
+    </b-card-title>
+    <div v-for="message in messages" :key="'message-' + message.id">
+      <nuxt-link :to="'/message/' + message.id">
+        {{ message.subject }}
+      </nuxt-link>
+      <span class="small text-muted">
+        {{ message.viewedat | timeago }}
+      </span>
+    </div>
+  </b-card>
+</template>
+<script>
+export default {
+  name: 'Viewed',
+  computed: {
+    messages() {
+      console.log('Compute messages', this.$store.getters['messages/getViewed'])
+      return this.$store.getters['messages/getViewed']
+    }
+  },
+  async mounted() {
+    await this.$store.dispatch('messages/fetchViewed')
+  }
+}
+</script>
diff --git a/components/VolunteerOpportunitySidebar.vue b/components/VolunteerOpportunitySidebar.vue
index 52f3adb11..8d6a7383b 100644
--- a/components/VolunteerOpportunitySidebar.vue
+++ b/components/VolunteerOpportunitySidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-2">
+  <div class="mb-2">
     <b-card v-if="opportunities.length" variant="white" no-body>
       <b-card-body class="p-0">
         <b-btn variant="white" class="float-right m-1" @click="showVolunteerModal">
diff --git a/ecosystem.config.js b/ecosystem.config.js
index f41ad58a3..d1042f104 100644
--- a/ecosystem.config.js
+++ b/ecosystem.config.js
@@ -12,6 +12,8 @@ module.exports = {
       max_memory_restart: '1G',
       wait_ready: true,
       listen_timeout: 10000,
+
+      // These envs need to match cdn.js if you want to use a CDN.
       env_production: {
         PORT: 3000,
         NODE_ENV: 'production',
diff --git a/layouts/default.vue b/layouts/default.vue
index aae3a8b6e..854a8f7ba 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -541,11 +541,8 @@ export default {
     notificationCount() {
       return this.$store.getters['notifications/count']
     },
-    chatCount() { // CC
-      const chatcount = Object.values(this.$store.getters['chats/list']).reduce(
-        (total, chat) => total + chat.unseen,
-        0
-        )
+    chatCount() {
+      const chatcount = this.$store.getters['chats/unseenCount'] // CC
       setBadgeCount(chatcount) // CC
       return chatcount 
     },
@@ -592,7 +589,7 @@ export default {
     }
   },
 
-  async mounted() {
+  mounted() {
     if (document) {
       // We added a basic loader into the HTML.  This helps if we are loaded on an old browser where our JS bombs
       // out - at least we display something, with a link to support.  But now we're up and running, remove that.
@@ -603,9 +600,6 @@ export default {
       l.style.display = 'none'
     }
 
-    // Clear old notifications because they're probably out of date now.
-    await this.$store.dispatch('notifications/clear')
-
     const me = this.$store.getters['auth/user']
 
     if (me && me.id) {
@@ -747,12 +741,27 @@ export default {
 
       if (me && me.id) {
         console.log("getNotificationCount for me")  // CC just this added
+        let currentCount = this.$store.getters['notifications/count']
+        const notifications = this.$store.getters['notifications/list']
         await this.$store.dispatch('notifications/count')
-        await this.$store.dispatch('chats/listChats', {
-          chattypes: ['User2User', 'User2Mod'],
-          summary: true,
-          noerror: true
-        })
+        let newCount = this.$store.getters['notifications/count']
+
+        if (newCount !== currentCount || !notifications.length) {
+          // Changed or don't know it yet.  Get the list so that it will display zippily when they click.
+          await this.$store.dispatch('notifications/clear')
+          await this.$store.dispatch('notifications/list')
+        }
+
+        currentCount = this.$store.getters['chats/unseenCount']
+        newCount = await this.$store.dispatch('chats/unseenCount')
+
+        if (newCount !== currentCount) {
+          await this.$store.dispatch('chats/listChats', {
+            chattypes: ['User2User', 'User2Mod'],
+            summary: true,
+            noerror: true
+          })
+        }
       }
 
       this.notificationPoll = setTimeout(this.getNotificationCount, 30000)
diff --git a/mobile/freegle/android/config.xml b/mobile/freegle/android/config.xml
index 8493dd836..ce2eeb31b 100644
--- a/mobile/freegle/android/config.xml
+++ b/mobile/freegle/android/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget android-versionCode="1014" id="org.ilovefreegle.direct" version="2.0.10" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget android-versionCode="1015" id="org.ilovefreegle.direct" version="2.0.11" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <name>Freegle</name>
     <description>
       Offer and request free items on your local Freegle reuse group
diff --git a/mobile/freegle/ios/config.xml b/mobile/freegle/ios/config.xml
index d92bcf60f..7b392bae6 100644
--- a/mobile/freegle/ios/config.xml
+++ b/mobile/freegle/ios/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="org.ilovefreegle.iphone" ios-CFBundleVersion="210" version="2.0.10" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="org.ilovefreegle.iphone" ios-CFBundleVersion="211" version="2.0.11" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>Freegle</name>
     <description>Offer and request free items on your local Freegle reuse group</description>
 
diff --git a/nuxt.config.js b/nuxt.config.js
index 4552d9b7a..1b13a1291 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -30,7 +30,7 @@ if (process.env.NUXT_BUILD_TYPE === 'fdapp') {
 const IZNIK_API = process.env.IZNIK_API || 'https://fdapilive.ilovefreegle.org'
 
 // This is the CDN for this site.
-const CDN = process.env.CDN || '/_nuxt'
+const CDN = process.env.CDN
 
 // This is where the user site is.
 const USER_SITE = 'https://www.ilovefreegle.org'
@@ -189,6 +189,7 @@ const config = {
     { src: '~/plugins/dayjs' },
 
     // Some plugins are client-side features
+    { src: '~plugins/cdn', ssr: false },
     { src: '~plugins/visibility.js', ssr: false },
     { src: '~plugins/error-toasts.js', ssr: false },
     { src: '~plugins/vuex-persistedstate', ssr: false },
diff --git a/pages/chats/_id.vue b/pages/chats/_id.vue
index 6efd6ff71..a65f7fb6a 100644
--- a/pages/chats/_id.vue
+++ b/pages/chats/_id.vue
@@ -1,6 +1,6 @@
 <template>
   <b-row class="m-0">
-    <b-col id="chatlist" cols="12" md="3" :class="'chatlist p-0 bg-white ' + (selectedChatId ? 'd-none d-md-block' : '') + ' ' + selectedChatId">
+    <b-col id="chatlist" cols="12" md="3" xl="2" :class="'chatlist p-0 bg-white ' + (selectedChatId ? 'd-none d-md-block' : '') + ' ' + selectedChatId">
       <b-card class="p-0">
         <b-card-body class="p-0">
           <b-row>
@@ -27,10 +27,10 @@
         </infinite-loading>
       </client-only>
     </b-col>
-    <b-col cols="12" md="6" :class="'chatback ' + (selectedChatId ? 'd-block' : 'd-none d-md-block')">
+    <b-col cols="12" md="9" xl="7" :class="'chatback ' + (selectedChatId ? 'd-block' : 'd-none d-md-block')">
       <ChatPane v-if="activeChat" :id="activeChat" />
     </b-col>
-    <b-col cols="0" md="3" class="d-none d-md-block">
+    <b-col cols="0" xl="3" class="d-none d-xl-block p-0 pl-1">
       <SidebarRight :show-volunteer-opportunities="false" :show-job-opportunities="true" />
     </b-col>
   </b-row>
diff --git a/pages/chitchat/_id.vue b/pages/chitchat/_id.vue
index 92fb0568a..cad1c6ed8 100644
--- a/pages/chitchat/_id.vue
+++ b/pages/chitchat/_id.vue
@@ -1,7 +1,7 @@
 <template>
   <b-container v-if="me" fluid>
     <b-row class="m-0">
-      <b-col cols="0" lg="3" class="d-none d-lg-block">
+      <b-col cols="0" lg="3" class="d-none d-lg-block p-0 pr-1">
         <SidebarLeft :show-community-events="true" :show-bot-left="true" />
       </b-col>
       <b-col cols="12" lg="6" class="newsfeedHolder p-0">
@@ -82,7 +82,7 @@
           </client-only>
         </div>
       </b-col>
-      <b-col cols="0" lg="3" class="d-none d-lg-block">
+      <b-col cols="0" lg="3" class="d-none d-lg-block p-0 pl-1">
         <sidebar-right show-volunteer-opportunities show-job-opportunities />
       </b-col>
     </b-row>
diff --git a/pages/communities/_id.vue b/pages/communities/_id.vue
index b47131c11..e9894907b 100644
--- a/pages/communities/_id.vue
+++ b/pages/communities/_id.vue
@@ -1,10 +1,11 @@
 <template>
   <b-container fluid>
     <b-row class="m-0">
-      <b-col cols="0" lg="3" class="d-none d-lg-block">
+      <b-col cols="0" lg="3" class="d-none d-lg-block p-0 pr-1">
         <SidebarLeft :show-community-events="true" :show-bot-left="true" />
       </b-col>
       <b-col cols="12" lg="6" class="p-0">
+        <Viewed class="mb-1" />
         <JobsTopBar />
         <div>
           <div class="d-flex mt-2 mb-3 selection__wrapper justify-content-between">
@@ -27,7 +28,7 @@
           </client-only>
         </div>
       </b-col>
-      <b-col cols="0" lg="3" class="d-none d-lg-block">
+      <b-col cols="0" lg="3" class="d-none d-lg-block p-0 pl-1">
         <sidebar-right show-volunteer-opportunities />
       </b-col>
     </b-row>
@@ -37,6 +38,7 @@
 <script>
 import InfiniteLoading from 'vue-infinite-loading'
 import GroupSelect from '../../components/GroupSelect'
+import Viewed from '../../components/Viewed'
 import loginRequired from '@/mixins/loginRequired.js'
 import buildHead from '@/mixins/buildHead.js'
 import createGroupRoute from '@/mixins/createGroupRoute'
@@ -48,6 +50,7 @@ const SidebarRight = () => import('~/components/SidebarRight')
 
 export default {
   components: {
+    Viewed,
     GroupSelect,
     InfiniteLoading,
     JobsTopBar,
diff --git a/pages/invite/_id.vue b/pages/invite/_id.vue
index 7b6b97a77..1fe8c386f 100644
--- a/pages/invite/_id.vue
+++ b/pages/invite/_id.vue
@@ -15,13 +15,18 @@ export default {
     this.id = this.$route.params.id
   },
   async mounted() {
-    // Record the acceptance
-    await this.$store.dispatch('invitations/edit', {
-      id: this.id,
-      outcome: 'Accepted'
-    })
+    if (this.id) {
+      // Record the acceptance
+      await this.$store.dispatch('invitations/edit', {
+        id: this.id,
+        outcome: 'Accepted'
+      })
 
-    this.$router.push('/')
+      this.$router.push('/')
+    } else {
+      // Probably they're looking for the Spread page.
+      this.$router.push('/spread')
+    }
   },
   head() {
     return this.buildHead('Invitation', "You've been invited to Freegle")
diff --git a/pages/message/_id.vue b/pages/message/_id.vue
index 13fe3989d..71170be6d 100644
--- a/pages/message/_id.vue
+++ b/pages/message/_id.vue
@@ -1,8 +1,8 @@
 <template>
   <b-col>
     <b-row class="m-0">
-      <b-col cols="0" md="3" class="d-none d-md-block" />
-      <b-col cols="12" md="6" class="p-0">
+      <b-col cols="0" xl="3" class="d-none d-xl-block" />
+      <b-col cols="12" xl="6" class="p-0">
         <div v-if="error" class="bg-white p-2">
           <h1>Sorry, that message isn't around any more.</h1>
           <div>
@@ -43,10 +43,10 @@
           </b-row>
         </div>
         <div v-else>
-          <message v-if="message" ref="message" v-bind="message" :start-expanded="true" />
+          <message v-if="message" ref="message" v-bind="message" :start-expanded="true" hide-close />
         </div>
       </b-col>
-      <b-col cols="0" md="3" class="d-none d-md-block" />
+      <b-col cols="0" xl="3" class="d-none d-xl-block" />
     </b-row>
   </b-col>
 </template>
diff --git a/pages/myposts.vue b/pages/myposts.vue
index c72f95581..2af99df7b 100644
--- a/pages/myposts.vue
+++ b/pages/myposts.vue
@@ -1,7 +1,7 @@
 <template>
   <b-container fluid>
     <b-row class="m-0">
-      <b-col cols="0" lg="3" class="d-none d-lg-block">
+      <b-col cols="0" lg="3" class="d-none d-lg-block p-0 pr-1">
         <SidebarLeft :show-community-events="true" :show-bot-left="true" />
       </b-col>
       <b-col cols="12" lg="6" class="p-0">
@@ -178,7 +178,7 @@
           </b-card-body>
         </b-card>
       </b-col>
-      <b-col cols="0" lg="3" class="d-none d-lg-block">
+      <b-col cols="0" lg="3" class="d-none d-lg-block p-0 pl-1">
         <sidebar-right show-volunteer-opportunities />
       </b-col>
     </b-row>
diff --git a/plugins/cdn.js b/plugins/cdn.js
new file mode 100644
index 000000000..006200504
--- /dev/null
+++ b/plugins/cdn.js
@@ -0,0 +1,22 @@
+// We may be using a CDN.  If so then we can force webpack to load chunks from there.
+//
+// The hostnames in here match those in ecosystem.config.js.  There's probably a better way to pass this info
+// around.
+if (process.client) {
+  switch (location.hostname) {
+    case 'iznik.ilovefreegle.org':
+      // eslint-disable-next-line no-undef,camelcase
+      __webpack_public_path__ =
+        'https://freeglecdndbg.azureedge.net' + '/_nuxt/'
+      break
+    case 'dev.ilovefreegle.org':
+      // eslint-disable-next-line no-undef,camelcase
+      __webpack_public_path__ =
+        'https://freeglecdndev.azureedge.net' + '/_nuxt/'
+      break
+    case 'www.ilovefreegle.org':
+      // eslint-disable-next-line no-undef,camelcase
+      __webpack_public_path__ = 'https://freeglecdn.azureedge.net' + '/_nuxt/'
+      break
+  }
+}
diff --git a/plugins/visibility.js b/plugins/visibility.js
index 25a28df5d..89f6a2062 100644
--- a/plugins/visibility.js
+++ b/plugins/visibility.js
@@ -1,17 +1,26 @@
 import visibility from '@/utils/visibility'
 
 export default ({ store }) => {
-  store.watch(
-    () => visibility.visible,
-    visible => {
-      const me = store.getters['auth/user']
+  store.watch(() => visibility.visible, async function(visible) {
+    const me = store.getters['auth/user']
 
-      if (me && visible) {
-        // We have become visible.  Refetch our notification count and chat count, which are the two key things which
-        // produce red badges people should click on.
-        store.dispatch('notifications/count')
-        store.dispatch('chats/listChats')
+    if (me && visible) {
+      // We have become visible.  Refetch our notification count and chat count, which are the two key things which
+      // produce red badges people should click on.
+      store.dispatch('notifications/count')
+
+      const currentCount = store.getters['chats/unseenCount']
+      const newCount = await store.dispatch('chats/unseenCount')
+
+      console.log('Visibiility', currentCount, newCount)
+      if (newCount !== currentCount) {
+        // It's changed - the up to date chat rooms.
+        await store.dispatch('chats/listChats', {
+          chattypes: ['User2User', 'User2Mod'],
+          summary: true,
+          noerror: true
+        })
       }
     }
-  )
+  })
 }
diff --git a/store/chats.js b/store/chats.js
index 9a97bfc9b..cbdaa22dd 100644
--- a/store/chats.js
+++ b/store/chats.js
@@ -74,6 +74,13 @@ export const getters = {
     })
 
     return ret
+  },
+
+  unseenCount: state => {
+    return Object.values(state.list).reduce(
+      (total, chat) => total + chat.unseen,
+      0
+    )
   }
 }
 
@@ -152,5 +159,10 @@ export const actions = {
   async block({ dispatch, commit }, params) {
     await this.$api.chat.blockChat(params.id)
     await dispatch('listChats')
+  },
+
+  async unseenCount({ dispatch, commit }) {
+    const ret = await this.$api.chat.unseenCount()
+    return ret.count
   }
 }
diff --git a/store/group.js b/store/group.js
index 36669558c..617f599d6 100644
--- a/store/group.js
+++ b/store/group.js
@@ -75,6 +75,16 @@ export const actions = {
   },
 
   async fetch({ commit }, { id }) {
-    commit('add', await this.$api.group.fetch(id))
+    commit(
+      'add',
+      await this.$api.group.fetch(id, function(data) {
+        if (data && data.ret === 2) {
+          // Not hosting a group isn't worth logging.
+          return false
+        } else {
+          return true
+        }
+      })
+    )
   }
 }
diff --git a/store/messages.js b/store/messages.js
index 55548e054..a3fa02b4c 100644
--- a/store/messages.js
+++ b/store/messages.js
@@ -5,6 +5,8 @@ export const state = () => ({
   // Use array because we need to store them in the order returned by the server.
   list: [],
 
+  viewed: [],
+
   // The context from the last fetch, used for fetchMore.
   context: null
 })
@@ -45,6 +47,9 @@ export const mutations = {
   },
   setContext(state, ctx) {
     state.context = ctx
+  },
+  setViewed(state, viewed) {
+    state.viewed = viewed
   }
 }
 
@@ -81,6 +86,9 @@ export const getters = {
   },
   getAll: state => {
     return state.list
+  },
+  getViewed: state => {
+    return state.viewed
   }
 }
 
@@ -188,5 +196,16 @@ export const actions = {
 
   async view({ dispatch }, params) {
     await this.$api.message.view(params.id)
+  },
+
+  async fetchViewed({ commit, rootGetters }) {
+    const me = rootGetters['auth/user']
+
+    const { messages } = await this.$api.message.fetchMessages({
+      collection: 'Viewed',
+      fromuser: me.id
+    })
+
+    commit('setViewed', messages)
   }
 }
diff --git a/store/misc.js b/store/misc.js
index 102e1dc8b..dd02d8c53 100644
--- a/store/misc.js
+++ b/store/misc.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 
-export const state = () => ({})
+export const state = () => ({
+  cdn: process.env.CDN
+})
 
 export const mutations = {
   set(state, params) {