diff --git a/src/app.js b/src/app.js
index fb5a61dd..2fd846ff 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { Map } from '@components/map';
-import ObservationDialog from "@components/map/observation-dialog";
+import ObservationDialog from "@components/dialog/observation-dialog";
 import { useLayers } from '@context';
 import { Sidebar } from '@components/sidebar';
 
diff --git a/src/utils/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js
similarity index 87%
rename from src/utils/base-floating-dialog.js
rename to src/components/dialog/base-floating-dialog.js
index 01f0c391..e17843d2 100644
--- a/src/utils/base-floating-dialog.js
+++ b/src/components/dialog/base-floating-dialog.js
@@ -56,14 +56,14 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
                     TransitionComponent={Transition}
                     disableEnforceFocus
                     style={{ pointerEvents: 'none' }}
-                    PaperProps={{ style: { pointerEvents: 'auto'} }}
-                    sx={{ '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
+                    PaperProps={{ sx: { width: 750,  height: 510, pointerEvents: 'auto'} }}
+                    sx={{ width: 750, height: 510, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
                 >
                     <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightblue', textAlign: 'center', fontSize: 14, height: 35, m: 0, p: 1 }} id="draggable-dialog-title"> { title } </DialogTitle>
 
-                    <DialogContent sx={{backgroundColor: 'white'}}>{ dialogObject }</DialogContent>
+                    <DialogContent sx={{backgroundColor: 'white', fontSize: 14, height: 375 }}>{ dialogObject }</DialogContent>
 
-                    <DialogActions sx={{backgroundColor: 'lightgray'}}><Button autoFocus onClick={handleClose}> Close </Button></DialogActions>
+                    <DialogActions sx={{backgroundColor: 'lightgray', height: 35, m: 0, p: 1}}><Button style={{fontSize: 14}} autoFocus onClick={handleClose}> Close </Button></DialogActions>
                 </Dialog>
         </Fragment>
     );
diff --git a/src/utils/observation-chart.js b/src/components/dialog/observation-chart.js
similarity index 71%
rename from src/utils/observation-chart.js
rename to src/components/dialog/observation-chart.js
index ec05fb39..313989aa 100644
--- a/src/utils/observation-chart.js
+++ b/src/components/dialog/observation-chart.js
@@ -83,14 +83,17 @@ export default function ObservationChart(dataUrl) {
     // render the chart.
     return (
         <Fragment>
-        <LineChart width={500} height={300} data={stationObs} margin={{  top: 0, right: 0, left: 0, bottom: 0 }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="time" />
-          <YAxis type="number" domain={['auto', 'auto']} />
-          <Tooltip />
-          <Legend />
-          <Line type="monotone" dataKey="Observations" stroke="#8884d8" strokeWidth={2} dot={false} isAnimationActive={false} />
-          <Line type="monotone" dataKey="NOAA Tidal Predictions" stroke="#82ca9d" strokeWidth={2} dot={false} isAnimationActive={false} />
-        </LineChart></Fragment>
+            <LineChart width={550} height={300} data={stationObs} margin={{  top: 0, right: 0, left: 0, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="time" />
+                <YAxis />
+                <Tooltip />
+                <Legend verticalAlign="top" height={20} />
+                <Line type="monotone" dataKey="Observations" stroke="gray" strokeWidth={2} dot={false} isAnimationActive={false} />
+                <Line type="monotone" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={2} dot={false} isAnimationActive={false} />
+                <Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} />
+                <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
+            </LineChart>
+        </Fragment>
     );
-};
\ No newline at end of file
+};
diff --git a/src/components/map/observation-dialog.js b/src/components/dialog/observation-dialog.js
similarity index 91%
rename from src/components/map/observation-dialog.js
rename to src/components/dialog/observation-dialog.js
index 648de8c2..a5db69f5 100644
--- a/src/components/map/observation-dialog.js
+++ b/src/components/dialog/observation-dialog.js
@@ -1,8 +1,8 @@
 import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
-import BaseFloatingDialog from "@utils/base-floating-dialog";
+import BaseFloatingDialog from "@dialog/base-floating-dialog";
 import {useLayers} from "@context";
-import ObservationChart from "@utils/observation-chart";
+import ObservationChart from "@dialog/observation-chart";
 
 // define the properties of this component
 ObservationDialog.propTypes = {
diff --git a/webpack.config.js b/webpack.config.js
index 5cddb928..89317a17 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -102,6 +102,7 @@ module.exports = {
       '@hooks': path.resolve(__dirname, 'src/hooks/'),
       '@images': path.resolve(__dirname, 'src/images/'),
       '@utils': path.resolve(__dirname, 'src/utils/'),
+      '@dialog': path.resolve(__dirname, 'src/components/dialog')
     }
   },