diff --git a/src/components/App.tsx b/src/components/App.tsx
index 27473bd..664e9cc 100755
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -13,6 +13,7 @@ import { useCODAPApi } from "../hooks/use-codap-api";
 import { dataTypeStore } from "../utils/noaaDataTypes";
 import { composeURL, formatData } from "../utils/noaaApiHelper";
 import { IDataType } from "../types";
+import { DataReturnWarning } from "./data-return-warning";
 
 import "./App.scss";
 
@@ -173,6 +174,7 @@ export const App = () => {
         <button className="get-data-button" disabled={isFetching} onClick={handleGetData}>Get Data</button>
       </div>
       {showModal === "info" && <InfoModal />}
+      {showModal === "data-return-warning" && <DataReturnWarning />}
     </div>
   );
 };
diff --git a/src/components/data-return-warning.scss b/src/components/data-return-warning.scss
new file mode 100644
index 0000000..4326d1b
--- /dev/null
+++ b/src/components/data-return-warning.scss
@@ -0,0 +1,61 @@
+$teal-dark: #177991;
+
+.data-return-warning-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.51);
+}
+
+.data-return-warning {
+  position: fixed;
+  top: 5px;
+  left: 15px;
+  width: 340px;
+  border-radius: 6px;
+  padding: 0;
+  background-color: #fff;
+  z-index: 10;
+
+  div:nth-child(1) {
+    width: 100%;
+    height: 25px;
+    border-radius: 6px 6px 0 0;
+    background-color: #ffbf00;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #000;
+    font-weight: bold;
+
+    svg {
+      position: absolute;
+      right: 6px;
+      cursor: pointer;
+    }
+  }
+  div:nth-child(2) {
+    padding: 10px;
+    text-align: left;
+  }
+  div:nth-child(3) {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    padding: 0 10px 10px 0;
+
+    button {
+      width: 82px;
+      height: 31px;
+      border-radius: 3px;
+      border: solid 1px #000;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/data-return-warning.tsx b/src/components/data-return-warning.tsx
new file mode 100644
index 0000000..84027f4
--- /dev/null
+++ b/src/components/data-return-warning.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { useStateContext } from "../hooks/use-state";
+import ExitIcon from "../assets/images/icon-exit.svg";
+
+import "./data-return-warning.scss";
+
+export const DataReturnWarning = () => {
+  const {setState} = useStateContext();
+
+  const handleCloseModal = () => {
+    setState(draft => {
+      draft.showModal = undefined;
+    });
+  };
+
+  return (
+    <>
+      <div className="data-return-warning-background" onClick={handleCloseModal} />
+      <div className="data-return-warning">
+        <div>
+          Data Return Warning <ExitIcon onClick={handleCloseModal} />
+        </div>
+        <div>
+          Your current date range is likely to return too many results, which may affect application performance.
+        </div>
+        <div>
+          <button onClick={handleCloseModal}>Close</button>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/date-range/date-range.tsx b/src/components/date-range/date-range.tsx
index bd575a2..0f6346e 100644
--- a/src/components/date-range/date-range.tsx
+++ b/src/components/date-range/date-range.tsx
@@ -4,7 +4,6 @@ import { useStateContext } from "../../hooks/use-state";
 import { DateSelector } from "./date-selector";
 import { Calendars } from "./calendars";
 import WarningIcon from "../../assets/icon-warning.svg";
-import ExitIcon from "../../assets/images/icon-exit.svg";
 import { defaultDates } from "../../constants";
 
 import "./date-range.scss";
@@ -15,7 +14,6 @@ export const DateRange = () => {
   const [selectedCalendar, setSelectedCalendar] = useState<string>(); // "start" | "end"
   const [showCalendars, setShowCalendars] = useState(false);
   const [showWarningIcon, setShowWarningIcon] = useState(false);
-  const [showWarningModal, setShowWarningModal] = useState(false);
   const frequencies = ["hourly", "daily", "monthly"] as IFrequency[];
 
   useEffect(() => {
@@ -77,13 +75,9 @@ export const DateRange = () => {
     setShowCalendars(false);
     setSelectedCalendar(undefined);
     if (showWarningIcon) {
-      setShowWarningModal(true);
-    }
-  };
-
-  const handleOuterModalClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    if (e.target === e.currentTarget) {
-      setShowWarningModal(false);
+      setState(draft => {
+        draft.showModal = "data-return-warning";
+      });
     }
   };
 
@@ -128,24 +122,6 @@ export const DateRange = () => {
           />
         }
       </div>
-      {
-        showWarningModal &&
-          <div className="warning-modal" onClick={handleOuterModalClick}>
-            <div className="warning-container">
-              <div className="warning-header">
-                <div className="warning-title">Data Return Warning</div>
-                <div className="warning-exit" onClick={() => setShowWarningModal(false)}><ExitIcon/></div>
-              </div>
-              <div className="warning-body">
-                Your current date range is likely to return too many results, which
-                may affect application performance.
-              </div>
-              <div className="warning-footer">
-                <button className="warning-button" onClick={() => setShowWarningModal(false)}>Close</button>
-              </div>
-            </div>
-          </div>
-        }
     </div>
   );
 };