diff --git a/docker/watching/watch.sh b/docker/watching/watch.sh
index 7ddeff54..635c96d5 100755
--- a/docker/watching/watch.sh
+++ b/docker/watching/watch.sh
@@ -2,4 +2,4 @@
 npm config set registry https://npm.americanwhitewater.org
 npm i
 rm -rf dist/*
-npm run serve
+node ./scripts/dev-laravel.js
diff --git a/scripts/dev-laravel.js b/scripts/dev-laravel.js
new file mode 100755
index 00000000..395f33b4
--- /dev/null
+++ b/scripts/dev-laravel.js
@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+require("dotenv").config();
+// grab cli service requirements.
+const { error } = require("@vue/cli-shared-utils");
+const Service = require("@vue/cli-service/lib/Service");
+const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd());
+
+//parse the environment base
+const url = require("url");
+const baseURL = process.env.VUE_APP_BASE_URL || "http://localhost:9669";
+const parts = url.parse(baseURL);
+
+const command = "serve";
+const publicHost = `${parts.hostname}:${parts.port}`;
+
+//set container name based on URL base.
+const args = ["--public", publicHost, "--port", parts.port];
+const argsV = { public: publicHost, port: parts.port };
+
+service.run(command, argsV, args).catch((err) => {
+  error(err);
+  process.exit(1);
+});
diff --git a/src/app/assets/scss/components/_article-card.scss b/src/app/assets/scss/components/_article-card.scss
index bd0a42ea..3b9d349d 100644
--- a/src/app/assets/scss/components/_article-card.scss
+++ b/src/app/assets/scss/components/_article-card.scss
@@ -118,4 +118,15 @@
   .bx--article-card__icon--action
   svg {
   fill: $carbon--gray-70; //$disabled-02 for gray 90
+}
+
+.abstract-content {
+  p {
+    display: inline;
+  }
+}
+
+.read-more {
+  color: $ui-02;
+  font-weight: 200;
 }
\ No newline at end of file
diff --git a/src/app/assets/scss/views/river-detail/components/_side-bar-articles.scss b/src/app/assets/scss/views/river-detail/components/_side-bar-articles.scss
index 1dce408e..da3046bc 100644
--- a/src/app/assets/scss/views/river-detail/components/_side-bar-articles.scss
+++ b/src/app/assets/scss/views/river-detail/components/_side-bar-articles.scss
@@ -5,13 +5,10 @@
     align-items: center;
   }
 
-  .sidebar-article {
+  .sidebar-title {
     &:hover {
       cursor: pointer;
-      h5,
-      p {
-        text-decoration: underline;
-      }
+      text-decoration: underline;
     }
 
     .article-thumb {
diff --git a/src/app/global/components/app-toaster/app-toaster.vue b/src/app/global/components/app-toaster/app-toaster.vue
index 0b6ee700..9ac58fd7 100644
--- a/src/app/global/components/app-toaster/app-toaster.vue
+++ b/src/app/global/components/app-toaster/app-toaster.vue
@@ -111,7 +111,8 @@ export default {
   },
   created() {
     document.addEventListener("swUpdated", this.showRefreshUI, { once: true });
-    navigator.serviceWorker.addEventListener("controllerchange", () => {
+    //navigator.serviceWorker only exists when either https://... or http://localhost/...
+    navigator && navigator.serviceWorker && navigator.serviceWorker.addEventListener("controllerchange", () => {
       if (this.refreshing) return;
       this.refreshing = true;
       window.location.reload();
diff --git a/src/app/global/components/post-update-modal/post-update-modal.vue b/src/app/global/components/post-update-modal/post-update-modal.vue
index 532d5b57..2000c4d2 100644
--- a/src/app/global/components/post-update-modal/post-update-modal.vue
+++ b/src/app/global/components/post-update-modal/post-update-modal.vue
@@ -180,7 +180,7 @@ export default {
       this.formPending = true
       this.$emit('update:pending', true)
 
-      try {  
+      try {
         const result = await updatePost(this.formData)
         if (!result.errors) {
           this.$emit('update:success', result.data.postUpdate.id)
diff --git a/src/app/global/lib/gages/index.js b/src/app/global/lib/gages/index.js
new file mode 100644
index 00000000..eb069075
--- /dev/null
+++ b/src/app/global/lib/gages/index.js
@@ -0,0 +1,21 @@
+/**
+ * Returns the reading with the precision specified by the gauge format.
+ * @param reading {number}
+ * @param metric_format {string} - value from metrics
+ * @return number with the specified precision
+ */
+
+export function formatReading(reading, metric_format) {
+  if (typeof reading === "number") {
+    if (metric_format) {
+      const m = metric_format.match(/%([0-9]+)\.([0-9]+)f/);
+
+      if (m.length) {
+        return reading.toFixed(Number.parseInt(m[2]));
+      }
+    }
+
+    return reading.toFixed(2);
+  }
+  return "";
+}
diff --git a/src/app/plugins/random-id.js b/src/app/plugins/random-id.js
index 89ad0206..1246a239 100644
--- a/src/app/plugins/random-id.js
+++ b/src/app/plugins/random-id.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import { nanoid } from 'nanoid'
+import { customAlphabet } from 'nanoid'
 
 /**
  * @description use this when creating new resources.
@@ -9,5 +9,6 @@ import { nanoid } from 'nanoid'
  */
 
 Vue.prototype.$randomId = function () {
-  return nanoid(21, '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz')
+  const nanoid = customAlphabet('1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz', 21);
+  return nanoid();
 }
diff --git a/src/app/services/updatePost.js b/src/app/services/updatePost.js
index de6dcf41..c6fadc66 100644
--- a/src/app/services/updatePost.js
+++ b/src/app/services/updatePost.js
@@ -1,14 +1,22 @@
 import http from "@/app/http";
 
 export async function updatePost(formData, photo) {
-  //if post is coming in with an ID then remove that property.
-  const photoCopy = Object.assign({}, photo);
-  delete photoCopy.id;
-  photoCopy.post_id = formData.id;
+  const variables = {
+    id: formData.id,
+    post: formData.post
+  };
+  if (photo) {
+    // if post is coming in with an ID then remove that property.
+    const photoCopy = Object.assign({}, photo);
+    delete photoCopy.id;
+    photoCopy.post_id = formData.id;
+    variables.photo = photoCopy;
+    variables.photo_id = photo.id;
+  }
   return http
     .post("/graphql", {
       query: `
-      mutation ($id:ID!, $photo_id: ID!, $photo: PhotoInput!, $post: PostInput!) {
+      mutation ($id:ID!, ${photo ? "$photo_id: ID!, $photo: PhotoInput!, " : ''}$post: PostInput!) {
           postUpdate(id: $id, post:$post)  {
           id
           detail
@@ -24,17 +32,9 @@ export async function updatePost(formData, photo) {
             uid
           }
         }
-        photoUpdate(id: $photo_id, photo: $photo)
-          {
-            id
-          },
+        ${photo ?  "photoUpdate(id: $photo_id, photo: $photo) { id }," : '' }
       }`,
-      variables: {
-        id: formData.id,
-        post: formData.post,
-        photo: photoCopy,
-        photo_id: photo.id,
-      },
+      variables: variables,
     })
     .then((response) => {
       return response.data;
diff --git a/src/app/store/modules/river-credits.js b/src/app/store/modules/river-credits.js
index add0a9c9..e8cf73a6 100644
--- a/src/app/store/modules/river-credits.js
+++ b/src/app/store/modules/river-credits.js
@@ -17,9 +17,8 @@ export default {
         context.commit('DATA_REQUEST')
         const result = await getReachCredits(id)
         
-        
         if (!result.errors) {
-          context.commit('DATA_SUCCESS', result)
+          context.commit('DATA_SUCCESS', result.data.reach.revisions.data)
         }
         
       } catch (error) {
diff --git a/src/app/views/river-detail/components/main-tab/components/beta-box/beta-box.vue b/src/app/views/river-detail/components/main-tab/components/beta-box/beta-box.vue
index c5210879..b6528f4d 100644
--- a/src/app/views/river-detail/components/main-tab/components/beta-box/beta-box.vue
+++ b/src/app/views/river-detail/components/main-tab/components/beta-box/beta-box.vue
@@ -41,7 +41,7 @@
           <td>Gage</td>
           <template v-if="!loading">
             <td
-              v-if="gages && gages.length"
+              v-if="gages && gages.length && reachGage && reachGage.gauge"
               class="river-gages"
             >
               <a :href="formatLinkUrl(`content/gauge/detail-new/${reachGage.gauge.id || ''}`)">{{
@@ -70,7 +70,7 @@
               v-if="gages && gages.length"
               class="flow-range"
             >
-              {{ formatFlowRange(reachGage.rmin, reachGage.rmax) }}
+              {{ formatFlowRange(reachGage.rmin, reachGage.rmax, reachGage.gauge_metric) }}
             </td>
             <td
               v-else
@@ -97,7 +97,7 @@
               v-if="gages && gages.length"
               class="river-flow-rate"
             >
-              {{ gages[0].gauge_reading }}
+              {{ formatReading(reachGage.gauge_reading, reachGage.gauge_metric) }}
               {{ formatMetric(reachGage.gauge_metric) }}
               <cv-tag
                 v-if="reachGage.adjusted_reach_class"
@@ -167,6 +167,7 @@
 import { mapState } from 'vuex'
 import { humanReadable } from '@/app/global/services/human-readable'
 import { BetaBoxEditModal } from './components'
+import { formatReading } from '@/app/global/lib/gages'
 
 /**
  * @todo if reach has multiple gages, add dropdown to
@@ -200,8 +201,9 @@ export default {
       return this.$route.params.id
     },
     reachGage() {
+
       if (this.river && this.river.readingsummary && this.gages) {
-        return this.gages.find(g => g.gauge.id.toString() === this.river.readingsummary.gauge_id.toString())
+        return this.gages.find(g => g.gauge.id.toString() === this.river.readingsummary.gauge_id.toString());
       }
       return this.gages[0]
     }
@@ -227,18 +229,29 @@ export default {
       }
       return humanReadable(input)
     },
-    formatFlowRange (min, max) {
+    formatFlowRange (min, max, metricID) {
       if (min && max) {
-        return `${min} – ${max} ${this.formatMetric(this.gages[0].gauge_metric)}`
+        return `${this.formatReading(min,metricID)} – ${this.formatReading(max,metricID)} ${this.formatMetric(metricID)}`
       }
       return 'n/a'
     },
+    getMetric(metricID){
+      if(metricID && this.metrics?.length)
+      {
+        return this.metrics.find(m => m.id === metricID.toString())
+      }
+      return null;
+    },
     formatMetric (metricId) {
       if (this.metrics) {
-        return this.metrics.find(m => m.id === metricId.toString())?.unit
+        return this.getMetric(metricId)?.unit || 'n/a'
       }
       return 'n/a'
     },
+    formatReading(reading, metricID)
+    {
+      return formatReading(reading,this.getMetric(metricID)?.format || '');
+    },
     formatTag (gage) {
       if (gage.rmin && gage.rmax && gage.gauge_reading) {
         if (gage.gauge_reading < gage.rmin) {
diff --git a/src/app/views/river-detail/components/main-tab/components/rapids-section/components/rapid-item.vue b/src/app/views/river-detail/components/main-tab/components/rapids-section/components/rapid-item.vue
index 5b68333e..12b6511e 100644
--- a/src/app/views/river-detail/components/main-tab/components/rapids-section/components/rapid-item.vue
+++ b/src/app/views/river-detail/components/main-tab/components/rapids-section/components/rapid-item.vue
@@ -64,26 +64,20 @@
               <template
                 v-if="
                   sanitizedDescription &&
-                  sanitizedDescription.length > characterLimit
+                  sanitizedDescription.length > characterLimit &&
+                  !readMoreActive
                 "
               >
                 <div
                   class="description"
                   v-html="sanitizedDescription.slice(0, characterLimit) + '...'"
                 />
-                <div
-                  v-if="sanitizedDescription && readMoreActive"
-                  v-html="
-                    sanitizedDescription.slice(
-                      characterLimit,
-                      sanitizedDescription.length * 2
-                    )
-                  "
-                />
+              
               </template>
               <template v-else>
                 <div class="description" v-html="sanitizedDescription" />
               </template>
+
             </template>
             <template v-else>
               <div class>
diff --git a/src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-articles.vue b/src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-articles.vue
index b9f132bf..53082cd3 100644
--- a/src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-articles.vue
+++ b/src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-articles.vue
@@ -24,9 +24,8 @@
       <div
         v-for="(article, i) in articles.slice(0, 1)"
         :key="i + 3 * 4"
-        class="bx--row mb-spacing-xs sidebar-article"
-        @keydown.enter="readArticle(article)"
-        @click.exact="readArticle(article)"
+        class="bx--row mb-spacing-xs"
+       
       >
         <div class="bx--col-sm-12 bx--col-md-3">
           <img
@@ -38,12 +37,35 @@
         <div class="bx--col-sm-12 bx--col-md-5">
           <div class="pt-spacing-sm pb-spacing-md">
             <h5
-              class="mb-spacing-2xs"
+              class="mb-spacing-2xs sidebar-title"
+              @click.exact="readArticle(article)"
+              @keydown.enter="readArticle(article)"
               v-text="$titleCase(article.title)"
             />
-            <p v-html="article.abstract" />
+            <div
+              v-if="article.abstract.length > 200"
+              ref="abstract"
+              class="abstract-content"
+            
+            >
+              <span v-html="article.abstract.slice(0, 200)"/>
+              <cv-link 
+                :href="articleUrl(article)"
+                class="read-more">
+                ... Read More
+              </cv-link>
+            </div>
+            <div
+              v-else
+              ref="abstract"
+              class="abstract-content"
+              v-html="article.abstract"
+            />
+             
+             
           </div>
         </div>
+        
       </div>
     </template>
     <template v-else>
@@ -79,8 +101,8 @@ export default {
       }
       return null
     },
-    readArticle (article) {
-      this.goToLink(this.formatLinkUrl(`content/Article/view/article_id/${article.id}/`))
+    articleUrl (article) {
+      return `/content/Article/view/article_id/${article.id}/`
     }
   }
 }
diff --git a/src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-projects.vue b/src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-projects.vue
index 71d9ee51..7ae6b486 100644
--- a/src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-projects.vue
+++ b/src/app/views/river-detail/components/main-tab/components/recent-alerts/components/side-bar-projects.vue
@@ -27,7 +27,25 @@
               </h5>
             </cv-link>
 
-            <p v-html="project.description" />
+            <div
+              v-if="project.description.length > 200"
+              ref="abstract"
+              class="abstract-content"
+            
+            >
+              <span v-html="project.description.slice(0, 200)"/>
+              <cv-link 
+                :href="projectUrl(project)"
+                class="read-more">
+                ... Read More
+              </cv-link>
+            </div>
+            <div
+              v-else
+              ref="abstract"
+              class="abstract-content"
+              v-html="project.description"
+            />
           </div>
         </div>
       </div>
diff --git a/src/app/views/river-detail/components/media-upload-form.vue b/src/app/views/river-detail/components/media-upload-form.vue
index acbbf3d6..5c0eaa7d 100644
--- a/src/app/views/river-detail/components/media-upload-form.vue
+++ b/src/app/views/river-detail/components/media-upload-form.vue
@@ -165,7 +165,7 @@ export default {
     async submitPost () {
       this.formPending = true
       try {
-        //upload the details collected from the form, not just reach id etc.
+        // upload the details collected from the form, not just reach id etc.
         await updatePost(this.postFormData, { ...this.formData.photo, id: this.formData.id })
 
         this.$emit('form:success')
diff --git a/src/app/views/river-detail/river-detail.vue b/src/app/views/river-detail/river-detail.vue
index 6fcd5c4c..96d03c5a 100644
--- a/src/app/views/river-detail/river-detail.vue
+++ b/src/app/views/river-detail/river-detail.vue
@@ -13,20 +13,11 @@
             </header>
             <header v-else-if="reach" class="bx--tile">
               <div>
-                <h4>
+                <h1>
                   {{ reach.river }}
-                </h4>
+                </h1>
 
-                <h1 class="mb-spacing-md" v-text="reach.section" />
-
-                <cv-breadcrumb no-trailing-slash>
-                  <cv-breadcrumb-item>
-                    <cv-link to="/river-index"> River Index </cv-link>
-                  </cv-breadcrumb-item>
-                  <cv-breadcrumb-item>
-                    <cv-link href="#0"> River Id: {{ reach.id }} </cv-link>
-                  </cv-breadcrumb-item>
-                </cv-breadcrumb>
+                <h4 class="mb-spacing-md" v-text="reach.section" />
               </div>
               <div>
                 <cv-button
diff --git a/vue.config.js b/vue.config.js
index b8176ea2..c4e63c97 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -95,12 +95,14 @@ module.exports = {
   lintOnSave: false,
 
   devServer: {
+    // if these options aren't set HMR breaks and debugging remotely fails (say to local to VM)
+    disableHostCheck: true,
+    headers: { "Access-Control-Allow-Origin": "*" },
     /**
      * disables linting overlay which disrupts workflow.
      * linting reserved for pre-commit git hook.
      */
 
-    // headers: { "Access-Control-Allow-Origin": "*" },
     overlay: {
       error: false,
       warning: false,