diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index 9280c4b..d94300e 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -16,7 +16,7 @@ export default function Canvas({ view, setView, layout, setLayout, onLayoutChang
 
     return (
         <Box height="100%" width="100%">
-            {/* {view === "widget" &&  */}
+            {/* Check if view is a tab inside the Canvas Header */}
             { DASHBOARD_VIEWS.includes(view) && (
                 <DashboardCanvas
                     view={ view }
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
index 1b5a3a0..70386aa 100644
--- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
@@ -86,8 +86,20 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
       // defaultValue="widget"
       value={ view }
       // onValueChange={ setView }
-      onValueChange={(e) => setView(e.value)}  
       // onValueChange={(value) => setView(value)}
+      // onValueChange={(e) => setView(e.value)}  
+      onValueChange={(e) => {
+        const nextView = e.value;
+
+        if (view === "widget" && isEditable && nextView !== "widget") {
+          const confirmed = window.confirm(
+            "You have unsaved changes. Do you wish to discard them and continue?"
+          );
+          if (!confirmed) return;
+          onCancel();
+        }
+        setView(nextView);
+      }}
     >
       <Flex 
         as="header"