diff --git a/assets/package-lock.json b/assets/package-lock.json
index 286692fd5cb18f7f9505a13136f860cb72a5a451..5abc04a35b81967e4fb48ce38b354efa5a29d503 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "waterdataui-assets",
-  "version": "0.36.0dev",
+  "version": "0.37.0dev",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/assets/src/scripts/d3-rendering/legend.js b/assets/src/scripts/d3-rendering/legend.js
index 86ecdaa5b0ba88cc613914e14aac0c17630906eb..ac178715da9ae55bb8e59894cc94fb3a4035eff2 100644
--- a/assets/src/scripts/d3-rendering/legend.js
+++ b/assets/src/scripts/d3-rendering/legend.js
@@ -5,18 +5,7 @@ const RECTANGLE_MARKER_WIDTH = 20;
 const RECTANGLE_MARKER_HEIGHT = 10;
 const LINE_MARKER_WIDTH = 20;
 const MARKER_GROUP_X_OFFSET = 15;
-const VERTICAL_ROW_OFFSET_PROVISIONAL_DATA_MESSAGE = 18;
-const VERTICAL_ROW_OFFSET = 38;
-
-const BACKING_RECTANGLE_WIDTH = 98;
-const BACKING_RECTANGLE_WIDTH_MOBILE = 73;
-const BACKING_RECTANGLE_HEIGHT = 23;
-const BACKING_RECTANGLE_HEIGHT_MOBILE = 17;
-const BACKING_RECTANGLE_ROUNDING_RADIUS = 2;
-const HORIZONTAL_START_PROVISIONAL_DATA_TEXT = 105;
-const HORIZONTAL_START_PROVISIONAL_DATA_TEXT_MOBILE = 75;
-const HORIZONTAL_OFFSET_TO_CENTER_TEXT_IN_BACKING_RECTANGLE = 8;
-const VERTICAL_OFFSET_FOR_BACKING_RECTANGLE_MOBILE = 5;
+const VERTICAL_ROW_OFFSET = 18;
 
 
 /**
@@ -41,32 +30,6 @@ export const drawSimpleLegend = function(div, {legendMarkerRows, layout}) {
             .attr('class', 'legend')
             .attr('transform', `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? layout.margin.left : 0}, 0)`);
 
-    legend.append('rect')
-        .attr('x', 0)
-        .attr('y', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? 0 : VERTICAL_OFFSET_FOR_BACKING_RECTANGLE_MOBILE)
-        .attr('width', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? BACKING_RECTANGLE_WIDTH :
-            BACKING_RECTANGLE_WIDTH_MOBILE)
-        .attr('height', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? BACKING_RECTANGLE_HEIGHT :
-            BACKING_RECTANGLE_HEIGHT_MOBILE)
-        .attr('fill', '#565c65')
-        .attr('rx', BACKING_RECTANGLE_ROUNDING_RADIUS);
-
-    legend.append('a')
-        .attr('xlink:href', '/provisional-data-statement')
-        .append('text')
-        .attr('x', HORIZONTAL_OFFSET_TO_CENTER_TEXT_IN_BACKING_RECTANGLE)
-        .attr('y', VERTICAL_ROW_OFFSET_PROVISIONAL_DATA_MESSAGE)
-        .append('tspan')
-        .text('IMPORTANT')
-        .style('fill', 'white')
-        .append('tspan').text('data may be provisional - ')
-        .style('fill', 'black')
-        .attr('x', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? HORIZONTAL_START_PROVISIONAL_DATA_TEXT :
-            HORIZONTAL_START_PROVISIONAL_DATA_TEXT_MOBILE)
-        .append('tspan')
-        .text('learn more')
-        .style('fill', '#0000EE');
-
     let yPosition = VERTICAL_ROW_OFFSET;
     legendMarkerRows.forEach((rowMarkers) => {
         let xPosition = 0;
diff --git a/assets/src/scripts/d3-rendering/legend.spec.js b/assets/src/scripts/d3-rendering/legend.spec.js
index e5f01a39764a18105d8d0e8c2c510918f38f768a..4f680e7a608885042c2f0477c77d714f98054ae2 100644
--- a/assets/src/scripts/d3-rendering/legend.spec.js
+++ b/assets/src/scripts/d3-rendering/legend.spec.js
@@ -65,8 +65,8 @@ describe('Legend module', () => {
 
             expect(container.select('svg').size()).toBe(1);
             expect(container.selectAll('line').size()).toBe(2);
-            expect(container.selectAll('rect').size()).toBe(2); // The 'provisional data message' adds a background rectangle that is always present in the legend, making the count one more than would be expected from the mock data
-            expect(container.selectAll('text').size()).toBe(5); // The 'provisional data message' is a text node that is always present in the legend, making the count one more than might be expected from the mock data
+            expect(container.selectAll('rect').size()).toBe(1);
+            expect(container.selectAll('text').size()).toBe(4);
         });
     });
 });
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 8c23fe1696ae8a8ef58bd0ef54f6fcba503a9a52..21ff71536543c4333d874b8e7eee03ee12b34758 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -145,10 +145,17 @@ export const attachToNode = function (store,
                     .call(drawTooltipCursorSlider, store)
                     .call(drawGraphBrush, store);
             }
+
             graphContainer.append('div')
                 .classed('ts-legend-controls-container', true)
                 .call(drawTimeSeriesLegend, store);
 
+            graphContainer.append('div')
+                .classed('provisional-data-statement', true)
+                .classed('usa-fieldset', true)
+                .html('<span class="usa-tag">Important</span> data may be provisional - ' +
+                    '<a href="/provisional-data-statement">learn more</a>');
+
             // Add UI interactive elements, data table  and the provisional data alert.
             if (!showOnlyGraph) {
                 nodeElem
@@ -156,7 +163,6 @@ export const attachToNode = function (store,
                     .call(drawDateRangeControls, store, siteno);
 
                 nodeElem.select('.ts-legend-controls-container')
-
                     .call(drawGraphControls, store);
                 nodeElem.select('#iv-data-table-container')
                     .call(drawDataTable, store);
diff --git a/assets/src/styles/pages/_monitoring-location.scss b/assets/src/styles/pages/_monitoring-location.scss
index 39560d3f88cf8d5dbcb18a09c1c00a4205734c18..770ac34d1ec8a1056455e2e43b6bf1698ea4a55e 100644
--- a/assets/src/styles/pages/_monitoring-location.scss
+++ b/assets/src/styles/pages/_monitoring-location.scss
@@ -12,7 +12,10 @@
   .social-share {
     float: right;
   }
+}
 
+.provisional-data-statement {
+  padding-bottom: 10px;
 }
 
 #dv-accordion {
@@ -44,4 +47,4 @@ table {
   display: inline-block;
   margin-left: 0;
   margin-top: 0;
-}
\ No newline at end of file
+}