diff --git a/src/app/views/river-detail/__tests__/gage-chart-controls.spec.js b/src/app/views/river-detail/__tests__/gage-chart-controls.spec.js
deleted file mode 100644
index d86ac161..00000000
--- a/src/app/views/river-detail/__tests__/gage-chart-controls.spec.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import GageChartControls from '@/app/views/river-detail/components/flow-tab/components/gage-chart-controls.vue'
-import { createWrapper } from '@/utils'
-
-const mockStore = {
-  state: {
-    GageReadings: {
-      data: null,
-      error: false,
-      loading: false
-    },
-    GageMetrics: {
-      data: null
-    },
-    RiverDetail: {
-      data: null
-    },
-    RiverGages: {
-      data: null
-    }
-  },
-  dispatch: jest.fn()
-}
-
-const mockRoute = {
-  params: {
-    id: '123'
-  }
-}
-const options = {
-  mocks: {
-    $store: mockStore,
-    $route: mockRoute
-  }
-}
-
-describe('gage-chart-controls.vue', () => {
-  it('exists', () => {
-    const wrapper = createWrapper(GageChartControls, options)
-
-    expect(wrapper.find('.gage-chart-controls').exists()).toBe(true)
-  })
-})
diff --git a/src/app/views/river-detail/components/flow-tab/components/gage-chart-controls.vue b/src/app/views/river-detail/components/flow-tab/components/gage-chart-controls.vue
deleted file mode 100644
index 40932207..00000000
--- a/src/app/views/river-detail/components/flow-tab/components/gage-chart-controls.vue
+++ /dev/null
@@ -1,274 +0,0 @@
-<template>
-  <div class="gage-chart-controls">
-    <template v-if="metrics">
-      <cv-dropdown
-          v-if="gages && gages.length > 1"
-          v-model="formData.gauge_id"
-          :placeholder="$titleCase(formData.gauge_name)"
-          label="Selected Gage"
-          class="mb-spacing-md"
-          @change="changeGauge"
-      >
-        <cv-dropdown-item
-            v-for="(g, index) in gages"
-            :key="index"
-            :value="g.gauge.id"
-        >
-          {{ $titleCase(g.gauge.name) }}
-        </cv-dropdown-item>
-      </cv-dropdown>
-
-      <cv-dropdown
-          v-model="formData.timeScale"
-          label="Data Timespan"
-          :disabled="loading"
-          class="mb-spacing-md"
-          @change="fetchReadings"
-      >
-        <cv-dropdown-item value="day">
-          Day
-        </cv-dropdown-item>
-        <cv-dropdown-item value="week">
-          Week
-        </cv-dropdown-item>
-        <cv-dropdown-item value="month">
-          Month
-        </cv-dropdown-item>
-        <cv-dropdown-item value="year">
-          Year
-        </cv-dropdown-item>
-      </cv-dropdown>
-
-      <cv-dropdown
-          v-if="availableMetrics"
-          v-model.trim="formData.metric_id"
-          label="Data Metric"
-          :disabled="availableMetrics.length === 1"
-          class="mb-spacing-md"
-          @change="changeMetric"
-      >
-        <cv-dropdown-item
-            v-for="(g, index) in availableMetrics"
-            :key="index"
-            :value="String(g.id)"
-        >
-          {{ g.label }}
-        </cv-dropdown-item>
-      </cv-dropdown>
-      <cv-toolbar>
-        <cv-overflow-menu class="bx--toolbar-action">
-          <template slot="trigger">
-            <Settings32 class="bx--overflow-menu__icon bx--toolbar-settings-icon"/>
-          </template>
-          <cv-toolbar-title title="View Mode"/>
-          <cv-toolbar-option>
-            <cv-radio-button
-                v-model="viewMode"
-                name="chart"
-                label="Chart"
-                value="chart"
-            />
-          </cv-toolbar-option>
-          <cv-toolbar-option>
-            <cv-radio-button
-                v-model="viewMode"
-                name="table"
-                label="Table"
-                value="table"
-            />
-          </cv-toolbar-option>
-        </cv-overflow-menu>
-      </cv-toolbar>
-    </template>
-  </div>
-</template>
-<script>
-import moment from 'moment'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'gage-chart-controls',
-  props: {
-    gaugeId: {
-      type: String,
-      required: true
-    },
-    metricId: {
-      type: Number,
-      required: true
-    },
-    gages: {
-      type: Array,
-      required: true,
-      default: ()=>[]
-    },
-    metrics: {
-      type: Array,
-      required: true,
-    }
-  },
-  data: () => ({
-    /**
-     * toggles the flow chart view or table view
-     * @values chart, table
-     * @todo need to make UI elements for this more noticable
-     *
-     */
-    viewMode: 'chart',
-    /**
-     * Values needed to make flow reading request
-     *
-     */
-    formData: {
-      gauge_id: '',
-      gauge_name: '',
-      metric_id: '2',
-      timeStart: null,
-      timeEnd: null,
-      resolution: null,
-      timeScale: 'week'
-    },
-    currentGage: null,
-  }),
-
-  computed: {
-    ...mapState({
-      loading: state => state.GageReadings.loading,
-      error: state => state.GageReadings.error,
-    }),
-    /**
-     * @description look through the readings response to find
-     * the metrics/units we have available, then show them as options
-     * in metrics dropdown
-     *
-     * ie. only cfs, or ft, or both or any
-     *
-     */
-    availableMetrics () {
-      if (this.currentGage && this.currentGage.gauge.updates) {
-        if (this.metrics) {
-          return this.currentGage.gauge.updates.map(m => (
-              {
-                id: m.metric.id,
-                label: m.metric.name === 'Flow' ? 'CFS' : m.metric.name
-              }))
-        }
-      }
-      return null
-    }
-  },
-  watch: {
-    /**
-     * @event viewModeChange tells $parent that the user has changed view mode
-     * @values chart, table
-     *
-     */
-    viewMode (mode) {
-      this.$emit('viewModeChange', mode)
-    },
-
-    gaugeId: {
-      immediate: true,
-      handler () {
-        this.formData.gauge_id = this.gaugeId
-        this.currentGage = this.gages?.find(x=>x?.gauge?.id == this.gaugeId);
-        this.fetchReadings()
-      }
-    },
-    metricId: {
-      immediate: true,
-      handler () {
-        this.formData.metric_id = String(this.metricId)
-        this.fetchReadings()
-
-      }
-    }
-
-  },
-  methods: {
-    /**
-     * @returns {number} the starting point for the chart xaxis formatted by moment
-     * @event timescaleChange sends date format required by chartjs and moment so flow chart knows to rerender
-     * @todo Unsure about how/why resolution calculated this way.
-     *
-     */
-    setTimeScale () {
-      let start
-      switch (this.formData.timeScale) {
-        case 'year':
-          this.$emit('timescaleChange', 'MMM YYYY')
-          this.formData.resolution = 60 * 60 * 48
-          this.formData.timeScale = 'year'
-          start = moment()
-              .subtract(1, 'year')
-              .unix()
-          break
-        case 'month':
-          this.$emit('timescaleChange', 'll')
-          this.formData.resolution = 60 * 60 * 24
-          this.formData.timeScale = 'month'
-          start = moment()
-              .subtract(1, 'month')
-              .unix()
-          break
-
-        case 'week':
-          this.$emit('timescaleChange', 'll')
-          this.formData.resolution = 60 * 60 * 6
-          this.formData.timeScale = 'week'
-          start = moment()
-              .subtract(1, 'week')
-              .unix()
-          break
-        case 'day':
-        default:
-          this.$emit('timescaleChange', 'h:mm a')
-          this.formData.timeScale = 'day'
-          this.formData.resolution = 1
-          start = moment()
-              .subtract(1, 'day')
-              .unix()
-          break
-      }
-      this.formData.timeStart = Math.floor(start)
-      this.formData.timeEnd = Math.floor(moment(new Date()).unix())
-    },
-
-
-    changeGauge()
-    {
-      if(this.gaugeId != this.formData.gauge_id)
-      {
-      this.$emit('gage-change', this.formData.gauge_id)
-
-      }
-
-
-    },
-
-    changeMetric()
-    {
-      if(this.metricId != this.formData.metric_id)
-      {
-
-        this.$emit('metric-change', this.formData.metric_id)
-
-      }
-    },
-
-    async fetchReadings () {
-      if (this.formData.gauge_id && this.formData.metric_id) {
-        await this.setTimeScale()
-        this.$store.dispatch(
-            'GageReadings/getProperty',
-            this.formData
-        )
-
-      }
-    }
-  },
-  beforeMount () {
-
-  }
-}
-</script>
diff --git a/src/app/views/river-detail/components/flow-tab/components/gage-link-modal/controllers/getGages.js b/src/app/views/river-detail/components/flow-tab/components/gage-link-modal/controllers/getGages.js
deleted file mode 100644
index 051c37e3..00000000
--- a/src/app/views/river-detail/components/flow-tab/components/gage-link-modal/controllers/getGages.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export function getGages() {
-  /* eslint-disable-next-line no-console */
-  console.log('get gages')
-}
diff --git a/src/app/views/river-detail/components/flow-tab/components/gage-link-modal/gage-link-modal.vue b/src/app/views/river-detail/components/flow-tab/components/gage-link-modal/gage-link-modal.vue
deleted file mode 100644
index f9b04457..00000000
--- a/src/app/views/river-detail/components/flow-tab/components/gage-link-modal/gage-link-modal.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div>
-    <cv-modal
-      ref="modalWrapper"
-      size="small"
-      :visible="modalVisible"
-      @primary-click="handleSubmit"
-      @secondary-click="close()"
-      @modal-shown="handleShow"
-      @modal-hidden="close()"
-    >
-      <template slot="label">
-        Label
-      </template>
-      <template slot="title">
-        Link Gage To Reach
-      </template>
-      <template slot="content">
-        <cv-combo-box
-          :auto-filter="false"
-          :auto-highlight="false"
-          :value="formSelectedGage"
-          :options="gageResults || []"
-        />
-      </template>
-      <template slot="secondary-button">
-        Cancel
-      </template>
-      <template slot="primary-button">
-        OK
-      </template>
-    </cv-modal>
-  </div>
-</template>
-<script>
-export default {
-  name: 'gage-link-modal',
-  data: () => ({
-    modalVisible: false,
-    formSelectedGage: '',
-    gageResults: null
-  }),
-  methods: {
-    open () {
-      this.modalVisible = true
-    },
-    close () {
-      this.modalVisible = false
-    },
-    handleSubmit () {
-      alert('handle submit')
-    },
-    handleCancel () {
-      alert('handle cancel')
-    },
-    handleShow () {
-      alert('handle show')
-    }
-  }
-}
-</script>
diff --git a/src/app/views/river-detail/components/flow-tab/components/gage-readings.vue b/src/app/views/river-detail/components/flow-tab/components/gage-readings.vue
deleted file mode 100644
index 4e4b5b1c..00000000
--- a/src/app/views/river-detail/components/flow-tab/components/gage-readings.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <section class="mt-3 mb-lg">
-    <div
-        v-if="!loading && data"
-        class="bx--data-table-container "
-
-    >
-      <table class="bx--data-table no-x-overflow scrollable">
-        <thead>
-        <tr>
-          <th>
-            Flow Rate
-          </th>
-          <th>
-            Date / Time
-          </th>
-          <th>
-            Data
-          </th>
-        </tr>
-        </thead>
-        <tbody class="gage-data-table">
-        <tr
-            v-for="(r, rowIndex) in readings"
-            :key="`${rowIndex}`"
-            :value="`${rowIndex}`"
-        >
-          <td v-text="`${ formatReading(r.reading) } ${metric.unit}`"/>
-          <td>{{ formatDate(r.updated) }}</td>
-          <td><span v-if="r.data" >{{ r.data}}</span></td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-    <utility-block
-        v-if="loading"
-        state="loading"
-    />
-    <utility-block
-        v-if="!loading && error"
-        state="error"
-    />
-  </section>
-</template>
-<script>
-import Moment from 'moment'
-import { mapState } from 'vuex'
-import UtilityBlock from '@/app/global/components/utility-block/utility-block'
-import { formatReadingWithFormat, getEmptyMetric } from '@/app/global/lib/gages'
-import { cloneDeep } from '@apollo/client/utilities'
-
-export default {
-  name: 'gage-readings',
-  components: {
-    UtilityBlock
-  },
-  props:
-      {
-        metrics:{type:Array, required:true, default:()=>[]}
-      },
-  data: () => ({
-    columns: ['Reading', 'Updated']
-  }),
-  computed: {
-    ...mapState({
-      data: state => state.GageReadings.data,
-      loading: state => state.GageReadings.loading,
-      error: state => state.GageReadings.error
-    }),
-    metric () {
-      return this.metrics?.find(m => m.id === this.data[0].metric.toString()) ?? getEmptyMetric()
-    },
-    readings(){
-      return cloneDeep(this.data ?? []).sort((a,b)=>b.updated-a.updated)
-    }
-
-  },
-  methods: {
-    formatReading (n) {
-
-      return formatReadingWithFormat(n, this.metric.format)
-    },
-    formatDate (date) {
-      return Moment.unix(date).format('llll')
-    }
-  },
-  created () {
-  }
-}
-</script>
-<style scoped lang="scss">
-
-.no-x-overflow
-{
-  overflow-x: hidden;
-}
-
-.scrollable {
-
-  tbody{
-    display: block;
-    height: 30rem;
-    overflow-x: hidden;
-    overflow-y: auto;
-    width: 100%;
-  }
-
-  thead tr{
-    display: block;
-  }
-}
-
-</style>
diff --git a/src/app/views/river-detail/components/flow-tab/components/gauge-readings.vue b/src/app/views/river-detail/components/flow-tab/components/gauge-readings.vue
new file mode 100644
index 00000000..d3f338db
--- /dev/null
+++ b/src/app/views/river-detail/components/flow-tab/components/gauge-readings.vue
@@ -0,0 +1,87 @@
+<template>
+  <section class="mt-3 mb-lg">
+    <div class="bx--data-table-container">
+      <table class="bx--data-table no-x-overflow scrollable">
+        <thead>
+        <tr>
+          <th>
+            Flow Rate
+          </th>
+          <th>
+            Date / Time
+          </th>
+          <th>
+            Data
+          </th>
+        </tr>
+        </thead>
+        <tbody class="gage-data-table">
+        <tr
+            v-for="(r, index) in reversedReadings"
+            :key="`${index}`"
+            :value="`${index}`"
+        >
+          <td v-text="`${r.value} ${metric}`"/>
+          <td>{{ formatDate(r) }}</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+<script>
+import moment from 'moment'
+
+export default {
+  name: 'gage-readings',
+  props: {
+    readings: {
+      type: Array,
+      required: true
+    },
+    metric: {
+      type: String,
+      required: true,
+      default: 'cfs'
+    }
+  },
+  data: () => ({
+    columns: ['Reading', 'Updated'],
+    reversedReadings: null
+  }),
+  methods: {
+    formatReading (reading) {
+      return `${reading.value} ${this.metric}`
+    },
+    formatDate (reading) {
+      return moment(reading.dateTime).format('MM/DD hh:mm a')
+    }
+  },
+  created () {
+    this.reversedReadings = this.readings.slice().reverse();
+  }
+}
+</script>
+<style scoped lang="scss">
+
+.no-x-overflow
+{
+  overflow-x: hidden;
+}
+
+.scrollable {
+
+  tbody{
+    display: block;
+    height: 30rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+  }
+
+  thead tr{
+    display: block;
+  }
+}
+
+</style>
diff --git a/src/app/views/river-detail/components/flow-tab/components/index.js b/src/app/views/river-detail/components/flow-tab/components/index.js
index a7fbceb3..43eb8186 100644
--- a/src/app/views/river-detail/components/flow-tab/components/index.js
+++ b/src/app/views/river-detail/components/flow-tab/components/index.js
@@ -1,8 +1,6 @@
-export { default as GageReadings } from './gage-readings.vue'
-export { default as GageChartControls } from './gage-chart-controls.vue'
+export { default as GaugeReadings } from './gauge-readings.vue'
 export { default as FlowChart } from './flow-chart/flow-chart.vue'
 export { default as LevelLegend } from './level-legend.vue'
 export { default as FlowStats } from './flow-stats/flow-stats.vue'
-export { default as GageLinkModal } from './gage-link-modal/gage-link-modal.vue'
 export {default as ReleasesTable} from "./releases-table.vue"
 export {default as ReleasesCalendar} from "./releases-calendar.vue"
diff --git a/src/app/views/river-detail/components/flow-tab/flow-tab.vue b/src/app/views/river-detail/components/flow-tab/flow-tab.vue
index b58d0991..ff56d79b 100644
--- a/src/app/views/river-detail/components/flow-tab/flow-tab.vue
+++ b/src/app/views/river-detail/components/flow-tab/flow-tab.vue
@@ -87,7 +87,7 @@
                           </div>
                         </div>
                         <div v-else>
-                          <gage-readings :metrics="metrics"/>
+                          <gauge-readings :readings="gauge.readings" :metric="gauge.requestedMetric" />
                         </div>
                       </template>
                       <template v-else>
@@ -150,6 +150,19 @@
                               stage (ft)
                             </cv-dropdown-item>
                           </cv-dropdown>
+
+                          <cv-radio-button
+                              v-model="viewMode"
+                              name="chart"
+                              label="Chart"
+                              value="chart"
+                          />
+                          <cv-radio-button
+                              v-model="viewMode"
+                              name="table"
+                              label="Table"
+                              value="table"
+                          />
                         </div>
 
                       </template>
@@ -190,7 +203,6 @@
         <releases-calendar @tableView="tableView"/>
       </template>
     </layout>
-    <gage-link-modal ref="gageLinkModal"/>
   </div>
 </template>
 
@@ -198,8 +210,7 @@
 import {
   FlowChart,
   FlowStats,
-  GageLinkModal,
-  GageReadings,
+  GaugeReadings,
   LevelLegend,
   ReleasesCalendar,
   ReleasesTable
@@ -218,9 +229,8 @@ const flowviewTable = 1
 export default {
   name: 'flow-tab',
   components: {
-    GageLinkModal,
     FlowChart,
-    GageReadings,
+    GaugeReadings,
     Layout,
     UtilityBlock,
     LevelLegend,
@@ -233,7 +243,6 @@ export default {
     activeGaugeIndex: 0,
     selectedTimespan: 'h:mm a',
     viewMode: 'chart',
-    activeMetricId: '',
     releaseView: 1,
     reachDetail: null, // TODO: pass this info in as a prop so it's only requested once in all components
     gaugeCorrelations: [],
@@ -242,9 +251,7 @@ export default {
   computed: {
     ...mapState({
       river: state => state.RiverDetail.data,
-      ranges: state => state.RiverGages.data?.ranges ?? [],
       editMode: state => state.Global.editMode,
-      metrics: state => state.RiverGages.data?.metrics ?? [],
     }),
     reachId () {
       return this.$route.params.id