diff --git a/src/Views/gagepage.html b/src/Views/gagepage.html
index f445f019..d1a7ea97 100644
--- a/src/Views/gagepage.html
+++ b/src/Views/gagepage.html
@@ -280,58 +280,69 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                             &nbsp;<i class="fa fa-spinner fa-3x fa-spin loadingSpinner"></i>
                         </div>
                         <div class="well well-sm" style="background-color:#EBF0F5;" ng-if="vm.dischargeChartConfig">
-
-                            <input type="checkbox" ng-if="vm.formattedDischargePeakDates.length > 0" id="logScaleDischarge" name="logScaleDischarge" ng-model="vm.logScaleDischarge" ng-change="vm.toggleLogLinearDischarge()">
-                            <label for="logScaleDischarge" ng-if="vm.formattedDischargePeakDates.length > 0"> Log Scale</label>
-
-                            <input type="radio" ng-if="vm.error == false" id="ageData" name="toggleDischargeData" ng-model="vm.USGSMeasuredAgeQualityData" value="age" ng-change="vm.updateChart()"> 
-                            <label for="ageData" ng-if="vm.error == false">  Age</label>
-                
-                            <input type="radio" ng-if="vm.error == false" id="qualityData" name="USGSMeasuredAgeQualityData" ng-model="vm.USGSMeasuredAgeQualityData" value="quality" ng-change="vm.toggleDischargeData('quality')"> 
-                            <label for="qualityData" ng-if="vm.error == false"> Quality</label>
-
-                            <!-- Start Sliders -->
-                            <div class="slider-container">
-                                <div class="slider-wrapper">
-                                    <span class="slider-text">Plot USGS Measurements Between Months</span>
-                                    <rzslider class="rzSlider" rz-slider-model="vm.startMonth" rz-slider-high="vm.endMonth" rz-slider-options="vm.monthSliderOptions"></rzslider>
-                                    <span id="months2show"></span>
+                            <div class="stagedischarge-inputs-container" ng-if="vm.formattedDischargePeakDates.length > 0 || this.dischargeObj.length > 0 || this.measuredObj.length > 0">
+                                <!-- Begin Sliders -->
+                                <div class="slider-wrapper" ng-if="vm.error == false">
+                                    <span class="slider-text">Plot USGS Measurements <br>Between Months</span>
+                                    <rzslider class="gageplot-slider" rz-slider-model="vm.startMonth" rz-slider-high="vm.endMonth" rz-slider-options="vm.monthSliderOptions"></rzslider>
+                                    <span id="months2show" style="margin-bottom: 10px; width: 70px"></span>
                                 </div>
-                                <div class="slider-wrapper">
-                                    <span class="slider-text">Plot USGS Measurements Between Years</span>
-                                    <rzslider class="rzSlider" rz-slider-model="vm.startYear" rz-slider-high="vm.endYear" rz-slider-options="vm.yearSliderOptions"></rzslider>
-                                    <span id="years2show"></span>
+                                <div class="slider-wrapper" ng-if="vm.error == false">
+                                    <span class="slider-text">Plot USGS Measurements <br>Between Years</span>
+                                    <rzslider class="gageplot-slider" rz-slider-model="vm.startYear" rz-slider-high="vm.endYear" rz-slider-options="vm.yearSliderOptions"></rzslider>
+                                    <span id="years2show" style="margin-bottom: 10px; margin-left: 20px; width: 70px;"></span>
                                 </div>
-                            </div>
-                            
-                            <!-- End Sliders -->
+                                <!--End Sliders -->
 
-                            <!-- Start Legend -->
-                            <div ng-show="vm.USGSMeasuredAgeQualityData === 'age'" class="ageQualityLegend" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
+                                <!--Begin Plot Options (log checkbox, age and quality radios)-->
+                                <div class="age-quality-container">
+                                    <br style="line-height: 25px" />
+                                    <input type="checkbox" ng-if="vm.formattedDischargePeakDates.length > 0" id="logScaleDischarge" name="logScaleDischarge" ng-model="vm.logScaleDischarge" ng-change="vm.toggleLogLinearDischarge()" >
+                                    <label for="logScaleDischarge" ng-if="vm.formattedDischargePeakDates.length > 0"> Log Scale</label><br>
+                                    <input type="radio" ng-if="vm.error == false" id="ageData" name="toggleDischargeData" ng-model="vm.USGSMeasuredAgeQualityData" value="age" ng-change="vm.updateChart()" > 
+                                    <label for="ageData" ng-if="vm.error == false">  Age</label>
+                        
+                                    <input type="radio" ng-if="vm.error == false" id="qualityData" name="USGSMeasuredAgeQualityData" ng-model="vm.USGSMeasuredAgeQualityData" value="quality" ng-change="vm.toggleDischargeData('quality')" > 
+                                    <label for="qualityData" ng-if="vm.error == false"> Quality</label>
+                                </div>
+                                <!--End Plot Options -->
+        
+                                <!-- Start Legend -->
+                                <div class="ageQualityLegend" ng-if="vm.error == false">
+                                    <div ng-show="vm.USGSMeasuredAgeQualityData === 'age'">
+                                        <span style="color: #2D3146BF; float: left;  padding-bottom: 15px; font-size: 15px;">Age:</span>
+                                    </div>
+                                    <div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'">
+                                        <span style="color: #2D3146BF; float: left; padding-bottom: 15px; font-size: 15px;">Quality:</span>
+                                    </div>
+                                <div ng-show="vm.USGSMeasuredAgeQualityData === 'age'"  style="clear:left; width: 230px;" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
+                                    <div class="ageQualityLegend-item">
+                                        <span style="color: red;">Most Recent Measurement</span>
+                                </div>
                                 <div class="ageQualityLegend-item">
-                                    <span style="color: red;">Most Recent Measurement</span>
-                            </div>
-                            <div class="ageQualityLegend-item">
-                                <span style="color: orange;">Measurements in the Last Year</span>
-                            </div>
-                            <div class="ageQualityLegend-item">
-                                <span style="color: #0000cdcc;">Newer -&nbsp</span><span style="color: #0000cd4d;">Older Measurements</span>
+                                    <span style="color: orange;">Measurements in the Last Year</span>
                                 </div>
-                            </div>
-                            
-                            <div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'" class="ageQualityLegend" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
                                 <div class="ageQualityLegend-item">
-                                    <span style="color:#2ED017;">Excellent - Good</span>
-                            </div>
-                            <div class="ageQualityLegend-item">
-                                <span style="color:#E7F317;">Fair</span>
-                            </div>
-                            <div class="ageQualityLegend-item">
-                                <span style="color: #FFA200;">Poor</span>
-                            </div>
+                                    <span style="color: #0000cdcc;">Newer -&nbsp</span><span style="color: #0000cd4d;">Older Measurements</span>
+                                    </div>
+                                </div>
+                                
+                                <div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'"  style="clear:left; width: 130px;" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
+                                    <div class="ageQualityLegend-item">
+                                        <span style="color:#2ED017;">Excellent - Good</span>
+                                </div>
+                                <div class="ageQualityLegend-item">
+                                    <span style="color:#E7F317;">Fair</span>
+                                </div>
+                                <div class="ageQualityLegend-item">
+                                    <span style="color: #FFA200;">Poor</span>
+                                </div>
+                                </div>
+                                </div>
+                                <!--End Legend -->
                             </div>
-                            <!-- End Legend -->
 
+                            
                             <highchart id="chart3" config="vm.dischargeChartConfig"></highchart>
                             <div class="data-sources">
                                 Data: 
diff --git a/src/config.js b/src/config.js
index 755c6a84..f4040ed1 100644
--- a/src/config.js
+++ b/src/config.js
@@ -47,7 +47,7 @@ var StreamStats;
         'StreamStats.Services',
         'StreamStats.Controllers',
         'WiM.Services', 'WiM.Event', 'wim_angular', 'rzModule', 'nvd3', 'daterangepicker',
-        'angularjs-dropdown-multiselect', 
+        'angularjs-dropdown-multiselect',
         'ngSanitize',
         'highcharts-ng'
     ])
diff --git a/src/css/main.css b/src/css/main.css
index 32a1d83d..5ec895c7 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1100,7 +1100,7 @@ div.leaflet-top > .elevation {
 	    }
 
         .ageQualityLegend {
-            position: absolute;
+            position: flex;
             bottom: 220px;
             left: 680px;
             background-color: white;
@@ -1110,12 +1110,30 @@ div.leaflet-top > .elevation {
             font-size: 13px;
             font-weight: bold;
             z-index: 100;
-          }
-          
-          .ageQualityLegend-item {
+            margin-left: -10px;
+            margin-right: 20px;
+            margin-top: 10px;
+            margin-bottom: 10px
+        }
+        
+        .ageQualityLegend-item {
             display: flex;
             align-items: center;
-          }
+        }
+
+        .age-quality-container {
+            width: 20%;
+            margin-top: 10px;
+            margin-right: 20px;
+            margin-left: -35px;
+            padding: 0 0%;
+        }
+
+        .age-quality-wrapper {
+            justify-content: left;
+            float: left
+
+        }
 
 
     /*
@@ -1568,23 +1586,63 @@ Batch processor modal
     padding: 0 0 0 3px !important;
 }
 
-.slider-container {
+.stagedischarge-inputs-container {
     display: flex;
-    justify-content: space-between;
-    width: 100%;
-    padding: 0 20%;
+    width: 80%;
+    padding: 0 0%;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-left: 60px
 }
 
 .slider-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 30%;
+    width: 20%;
+    margin-right: 50px;
+}
+.gageplot-slider .rz-pointer {
+    top: -22px;
+    z-index: 3;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    background-color: #0db9f0;
+    -webkit-border-radius: 16px;
+    -moz-border-radius: 16px;
+    border-radius: 5;
+}
+
+.gageplot-slider .rz-pointer.rz-active:after {
+    background-color: #0db9f0;
+}
+
+.gageplot-slider .rz-bubble {
+    bottom: -15px;
+    padding: 1px 3px;
+    color: #55637d;
+    cursor: default;
+}
+
+.gageplot-slider .rz-pointer:after {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 8px;
+    height: 8px;
+    background: #0db9f0;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    content: '';
+}
+
+.gageplot-slider .rz-pointer:hover:after {
+    background-color: #0db9f0;
 }
 
 .slider-text {
-    font-size: 14px;
+    font-size: 13px;
     white-space: nowrap;
+    color: #2D3146BF;
 }
 
 #months2show, #years2show {