diff --git a/client/src/components/Canvas/CanvasComponents/AddWidgetMenu.jsx b/client/src/components/Canvas/CanvasComponents/AddWidgetMenu.jsx
deleted file mode 100644
index 0413971..0000000
--- a/client/src/components/Canvas/CanvasComponents/AddWidgetMenu.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { IoIosArrowBack } from "react-icons/io";
-import { Menu, Portal } from "@chakra-ui/react";
-import AlertLevel from "./AlertLevelWidget";
-
-export default function AddWidgetMenu({appendWidget}) {
-  return (
-    <Menu.Root>
-      <Menu.TriggerItem>
-        <IoIosArrowBack /> Add Widget
-      </Menu.TriggerItem>
-      <Portal>
-        <Menu.Positioner>
-          <Menu.Content>
-            <Menu.Item 
-              value="AlertLevel" 
-              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 4, 7)}  // width and height are passed through here for each widget
-            >
-              Alert Level
-            </Menu.Item>
-            <Menu.Item>
-              CO2
-            </Menu.Item>
-            <Menu.Item>
-              IVANS
-            </Menu.Item>
-            <Menu.Item>
-              Plume Heights
-            </Menu.Item>
-            <Menu.Item>
-              Alert Level Changes
-            </Menu.Item>
-          </Menu.Content>
-        </Menu.Positioner>
-      </Portal>
-    </Menu.Root>
-  )
-}
\ No newline at end of file
diff --git a/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx b/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx
new file mode 100644
index 0000000..f7e90cf
--- /dev/null
+++ b/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx
@@ -0,0 +1,33 @@
+import { Dialog, Portal, CloseButton, Button } from "@chakra-ui/react";
+
+export default function DialogPopup({dialog}) {
+  console.log("3. dialog popup")
+  return(
+    <Dialog.RootProvider value={dialog}>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Leave Your Changes Behind?</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              <p>
+                Click 'No' to go back and save your changes before navigating away from MyDashboard.
+              </p>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.ActionTrigger asChild>
+                <Button variant="outline">No</Button>
+              </Dialog.ActionTrigger>
+              <Button bg="tomato">Yes</Button>
+            </Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.RootProvider>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx
index 849cfc2..83c7c9e 100644
--- a/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx
+++ b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx
@@ -1,50 +1,36 @@
-import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
-import AlertLevel from './AlertLevelWidget'
-// import AddWidgetMenu from './AddWidgetMenu';
+import { Box, Menu, Portal } from '@chakra-ui/react'
+import WidgetMenu from './WidgetMenu';
 
 export default function FirstWidgetButton({ appendWidget }) {
-    return (
-        <Menu.Root positioning={{ placement: "bottom-middle" }} >
-            <Menu.Trigger asChild>
-                <Box
-                    p={6}
-                    m="auto"
-                    mt={6}
-                    align="center"
-                    textAlign="center"
-                    justify="center"
-                    width="400px"
-                    borderRadius="md" 
-                    boxShadow="md"
-                    border="2px dashed"
-                    borderColor="gray.300"
-                    bg="gray.50"
-                    cursor="pointer"
-                    _hover = {{
-                        bg: "gray.100",
-                        borderColor: "gray.400",
-                        boxShadow: "lg",
-                    }}
-                >
-                    Add First Widget
-                </Box>
-            </Menu.Trigger>
-            <Portal>
-                <Menu.Positioner>
-                    <Menu.Content>
-                        <Menu.Item 
-                            value="AlertLevel" 
-                            onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}
-                        >
-                            Alert Level
-                        </Menu.Item>
-                        <Menu.Item value="co2">CO2</Menu.Item>
-                        <Menu.Item value="ivans">IVANS</Menu.Item>
-                        <Menu.Item value="plume heights">Plume Heights</Menu.Item>
-                        <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
-                    </Menu.Content>
-                </Menu.Positioner>
-            </Portal>
-        </Menu.Root>
-    );
+  const triggerItem = (<>
+    <Menu.Trigger asChild>
+      <Box
+        p={6}
+        m="auto"
+        mt={6}
+        align="center"
+        textAlign="center"
+        justify="center"
+        width="400px"
+        borderRadius="md" 
+        boxShadow="md"
+        border="2px dashed"
+        borderColor="gray.300"
+        bg="gray.50"
+        cursor="pointer"
+        _hover = {{
+          bg: "gray.100",
+          borderColor: "gray.400",
+          boxShadow: "lg",
+        }}
+      >
+        Add Your First Widget
+      </Box>
+    </Menu.Trigger>
+  </>);
+  const positioning = { placement: "bottom-middle" };
+  const WidgetMenuProps = { appendWidget, triggerItem, positioning };
+  return (
+    <WidgetMenu {...WidgetMenuProps} />
+  );
 }
\ No newline at end of file
diff --git a/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx b/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx
index d51904b..b5772c2 100644
--- a/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx
+++ b/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx
@@ -1,9 +1,11 @@
 import { IconButton, Menu, Portal } from "@chakra-ui/react";
+import { IoIosArrowBack } from "react-icons/io";
 import { FiSettings } from "react-icons/fi";
-import AddWidgetMenu from "./AddWidgetMenu";
+import WidgetMenu from "./WidgetMenu";
 
 export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget}) {  
-  const addWidgetMenuProps = { appendWidget }
+  const triggerItem = (<> <Menu.TriggerItem> <IoIosArrowBack /> Add Widget</Menu.TriggerItem> </>);
+  const WidgetMenuProps = { appendWidget, triggerItem }
   return (
     <Menu.Root>
       <Menu.Trigger asChild >
@@ -14,7 +16,7 @@ export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget})
       <Portal>
         <Menu.Positioner>
           <Menu.Content>
-            <AddWidgetMenu {...addWidgetMenuProps}/>
+            <WidgetMenu {...WidgetMenuProps}/>
             <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
             <Menu.Item 
               onClick={onDeleteWidgets}
diff --git a/client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx b/client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx
new file mode 100644
index 0000000..179e0e6
--- /dev/null
+++ b/client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx
@@ -0,0 +1,26 @@
+import { Menu, Portal } from "@chakra-ui/react";
+import AlertLevel from "./AlertLevelWidget";
+
+export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
+  return (
+    <Menu.Root positioning={positioning}>
+      {triggerItem}
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content>
+            <Menu.Item 
+              value="AlertLevel" 
+              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
+            >
+              Alert Level
+            </Menu.Item>
+            <Menu.Item value="co2">CO2</Menu.Item>
+            <Menu.Item value="ivans">IVANS</Menu.Item>
+            <Menu.Item value="plume heights">Plume Heights</Menu.Item>
+            <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
+  )
+}
\ No newline at end of file
diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
index a8dc9d5..cd475fa 100644
--- a/client/src/components/Dashboard.jsx
+++ b/client/src/components/Dashboard.jsx
@@ -1,8 +1,9 @@
 import Header from './Header/Header.jsx';
 import Sidebar from './Sidebar/Sidebar.jsx';
 import Canvas from './Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Dialog } from '@chakra-ui/react';
+import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
 import { useState } from 'react';
+import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
 
 export default function Dashboard() {
   const recipe = useRecipe({ key: "dashboard" });
@@ -16,6 +17,7 @@ export default function Dashboard() {
   const [view, setView] = useState("mydashboard");
   const [layout, setLayout] = useState([]);
   const [widgetArray, setWidgetArray] = useState([]);
+  const dialog = useDialog();
 
   const beginEditIfNeeded = () => {
     if ( !isEditable ) {
@@ -43,12 +45,17 @@ export default function Dashboard() {
   
   // Prevent navigation while in Edit mode without saving or cancelling
   const handleViewChange = (nextView) => { 
+    console.log("1. handling view change")
     if (view === "mydashboard" && isEditable) {
-      const confirmed = window.confirm(
-        "You have unsaved changes. Discard them and continue?"
-      );
-      if (!confirmed) return; 
-      onCancel(); // Discards the layout
+      console.log("2. currently editing");
+      dialog.setOpen(true);
+      return;
+
+      // const confirmed = window.confirm(
+      //   "You have unsaved changes. Discard them and continue?"
+      // );
+      // if (!confirmed) return; 
+      // onCancel();
     }
     setView(nextView);
   };
@@ -63,6 +70,8 @@ export default function Dashboard() {
   const headerProps = { onChangeView: handleViewChange };
   
   return (
+    <> 
+      <DialogPopup dialog={dialog} />
       <Grid css={styles}
         templateRows="1fr 11fr"
         // templateColumns="1fr 20fr"
@@ -80,5 +89,6 @@ export default function Dashboard() {
           <Canvas {...canvasProps}/>
         </GridItem>
       </Grid>
+    </>
   );
 }
\ No newline at end of file