diff --git a/app/front-end/src/features/editor/components/editorView/editorConfirmLeave.tsx b/app/front-end/src/features/editor/components/editorView/editorConfirmLeave.tsx
new file mode 100644
index 0000000..a128ef5
--- /dev/null
+++ b/app/front-end/src/features/editor/components/editorView/editorConfirmLeave.tsx
@@ -0,0 +1,83 @@
+import { FileTreeItemContextMenuStyledDialog } from '@/features/editor/components/fileTreeView/fileTreeItem';
+import { useStatusContext } from '@/hooks';
+import { Close as CloseIcon } from '@mui/icons-material';
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { useCallback } from 'react';
+
+interface EditorConfirmLeaveDialogProps {
+  onConfirm: () => void;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const EditorConfirmLeave: React.FC<EditorConfirmLeaveDialogProps> = ({ onConfirm, isOpen, onClose }) => {
+  const { unsavedStateUpdate } = useStatusContext();
+  const Theme = useTheme();
+
+  const handleConfirm = useCallback(() => {
+    unsavedStateUpdate(false);
+    onConfirm();
+    onClose();
+  }, [onConfirm, onClose, unsavedStateUpdate]);
+
+  return (
+    <FileTreeItemContextMenuStyledDialog open={isOpen} onClose={onClose}>
+      <Grid container spacing={2} justifyContent='center' alignItems='center'>
+        <Grid item xs={8}>
+          <DialogTitle sx={{ color: Theme.palette.primary.main, pl: '1.5rem', pt: '1.5rem', fontWeight: '700' }}>
+            Unsaved changes
+          </DialogTitle>
+        </Grid>
+        <Grid item xs={4}>
+          <Box display='flex' justifyContent='flex-end'>
+            <IconButton
+              aria-label='close'
+              onClick={onClose}
+              sx={{
+                color: Theme.palette.primary.main,
+                mt: '0.5rem',
+                mr: '1.5rem',
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Box>
+        </Grid>
+      </Grid>
+      <DialogContent sx={{ py: 0 }}>
+        <Typography sx={{ color: Theme.palette.text.primary, fontSize: '1rem', mb: '1rem' }}>
+          You have unsaved changes. If you continue, your <b>changes will be lost</b>. <br />
+          Do you wish to continue?
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>
+          <Typography sx={{ fontSize: '1rem', color: Theme.palette.text.secondary }}>Cancel</Typography>
+        </Button>
+        <Button
+          onClick={handleConfirm}
+          variant='outlined'
+          sx={{
+            borderColor: Theme.palette.primary.main,
+            ':hover': { borderColor: Theme.palette.primary.main, bgcolor: Theme.palette.secondary.main },
+            '& .MuiTouchRipple-root': {
+              color: Theme.palette.primary.main,
+            },
+          }}
+        >
+          Continue
+        </Button>
+      </DialogActions>
+    </FileTreeItemContextMenuStyledDialog>
+  );
+};
diff --git a/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx b/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx
index ad2eb32..da684c0 100644
--- a/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx
+++ b/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx
@@ -2,7 +2,7 @@ import { useStatusContext } from '@/hooks';
 import { socket } from '@/lib';
 import { Events } from '@/types';
 import { Done as DoneIcon, Error as ErrorIcon } from '@mui/icons-material';
-import { Box, Button, CircularProgress, useTheme } from '@mui/material';
+import { alpha, Box, Button, CircularProgress, Typography, useTheme } from '@mui/material';
 import {
   GridToolbarColumnsButton,
   GridToolbarContainer,
@@ -52,7 +52,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({ handleSave }) => {
   const [saveStatus, setSaveStatus] = useState(true);
 
   const Theme = useTheme();
-  const { blocked } = useStatusContext();
+  const { blocked, unsavedStateUpdate, unsaved } = useStatusContext();
 
   useEffect(() => {
     const handleWorkspaceFileSaveFeedback = (data: { status: 'success' | 'error' }) => {
@@ -73,10 +73,17 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({ handleSave }) => {
       <GridToolbarDensitySelector />
       {/* <GridToolbarExport /> */}
       <Box sx={{ flexGrow: 1 }} />
+      {unsaved && (
+        <Typography sx={{ fontSize: '0.9rem', color: alpha(Theme.palette.text.primary, 0.5), pr: '0.5rem' }}>
+          Changes not saved
+        </Typography>
+      )}
+
       <Button
         onClick={() => {
           setIsSaving(true);
           handleSave();
+          unsavedStateUpdate(false);
         }}
         disabled={blocked}
         startIcon={
diff --git a/app/front-end/src/features/editor/components/editorView/editorView.tsx b/app/front-end/src/features/editor/components/editorView/editorView.tsx
index 368ad4e..a419dfd 100644
--- a/app/front-end/src/features/editor/components/editorView/editorView.tsx
+++ b/app/front-end/src/features/editor/components/editorView/editorView.tsx
@@ -1,4 +1,9 @@
-import { EditorColumnMenu, EditorHeader, EditorToolbar } from '@/features/editor/components/editorView';
+import {
+  EditorColumnMenu,
+  EditorConfirmLeave,
+  EditorHeader,
+  EditorToolbar,
+} from '@/features/editor/components/editorView';
 import { useWorkspaceContext } from '@/features/editor/hooks';
 import { FileContentAggregationActions, FileDataRequestDTO, FileDataResponseDTO } from '@/features/editor/types';
 import { useSessionContext, useStatusContext } from '@/hooks';
@@ -57,7 +62,7 @@ export const EditorView: React.FC = () => {
 
   const { connected } = useSessionContext();
   const { file, fileContent, filePagination, fileStateUpdate } = useWorkspaceContext();
-  const { blocked, blockedStateUpdate } = useStatusContext();
+  const { blocked, blockedStateUpdate, unsaved, unsavedStateUpdate } = useStatusContext();
   const ref = useGridApiRef();
 
   const handleSave = async () => {
@@ -125,6 +130,10 @@ export const EditorView: React.FC = () => {
     }
   };
 
+  const onCellEditStart = () => {
+    unsavedStateUpdate(true);
+  };
+
   const getWorkspaceFile = useCallback(async () => {
     if (!file.id) {
       setFileContentResponse({ totalRows: 0, header: [], rows: [], page: 0 });
@@ -196,39 +205,85 @@ export const EditorView: React.FC = () => {
     );
   }, [fileContentResponse, fileContent.aggregations]);
 
+  // Browser tab close/refresh warning if there are unsaved changes effect
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (unsaved) event.preventDefault();
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [unsaved]);
+
+  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+  const [pendingModel, setPendingModel] = useState<{ page: number; pageSize: number } | null>(null);
+
+  const [paginationModel, setPaginationModel] = useState({
+    page: filePagination.page,
+    pageSize: filePagination.rowsPerPage,
+  });
+
+  const handleConfirm = () => {
+    if (pendingModel) {
+      fileStateUpdate(undefined, undefined, {
+        page: pendingModel.page,
+        rowsPerPage: pendingModel.pageSize,
+        totalRows: filePagination.totalRows,
+      });
+      setPaginationModel(pendingModel);
+      setPendingModel(null);
+    }
+    setIsConfirmDialogOpen(false);
+  };
+
+  const handleCancel = () => {
+    setPendingModel(null);
+    setIsConfirmDialogOpen(false);
+  };
+
   return (
-    <DataGrid
-      sx={{ height: '100%', border: 'none' }}
-      loading={blocked || isLoading}
-      rows={fileContent.rows}
-      columns={fileContent.columns}
-      pagination
-      paginationMode='server'
-      rowCount={filePagination.totalRows}
-      disableColumnSorting
-      initialState={{
-        pagination: {
-          paginationModel: { pageSize: filePagination.rowsPerPage, page: filePagination.page },
-        },
-      }}
-      disableColumnMenu={blocked}
-      pageSizeOptions={[25, 50, 100]}
-      onPaginationModelChange={(model) => {
-        fileStateUpdate(undefined, undefined, {
-          page: model.page,
-          rowsPerPage: model.pageSize,
-          totalRows: filePagination.totalRows,
-        });
-      }}
-      slots={{
-        toolbar: (props) => <EditorToolbar {...props} disabled={blocked || !file.id} handleSave={handleSave} />,
-        columnMenu: (props) => <EditorColumnMenu {...props} disabled={blocked} handleAggregation={handleAggregation} />,
-        pagination: (props) => <GridPagination disabled={blocked} {...props} />,
-      }}
-      slotProps={{
-        toolbar: {},
-      }}
-      apiRef={ref}
-    />
+    <>
+      <DataGrid
+        sx={{ height: '100%', border: 'none' }}
+        loading={blocked || isLoading}
+        rows={fileContent.rows}
+        columns={fileContent.columns}
+        pagination
+        paginationMode='server'
+        rowCount={filePagination.totalRows}
+        disableColumnSorting
+        pageSizeOptions={[25, 50, 100]}
+        paginationModel={paginationModel}
+        onPaginationModelChange={(model) => {
+          if (unsaved) {
+            setPendingModel(model);
+            setIsConfirmDialogOpen(true);
+          } else {
+            fileStateUpdate(undefined, undefined, {
+              page: model.page,
+              rowsPerPage: model.pageSize,
+              totalRows: filePagination.totalRows,
+            });
+            setPaginationModel(model);
+          }
+        }}
+        slots={{
+          toolbar: (props) => <EditorToolbar {...props} disabled={blocked || !file.id} handleSave={handleSave} />,
+          columnMenu: (props) => (
+            <EditorColumnMenu {...props} disabled={blocked} handleAggregation={handleAggregation} />
+          ),
+          pagination: (props) => <GridPagination disabled={blocked} {...props} />,
+        }}
+        slotProps={{
+          toolbar: {},
+        }}
+        apiRef={ref}
+        onCellEditStart={onCellEditStart}
+      />
+      <EditorConfirmLeave isOpen={isConfirmDialogOpen} onClose={handleCancel} onConfirm={handleConfirm} />
+    </>
   );
 };
diff --git a/app/front-end/src/features/editor/components/editorView/index.ts b/app/front-end/src/features/editor/components/editorView/index.ts
index 2841630..21b40b1 100644
--- a/app/front-end/src/features/editor/components/editorView/index.ts
+++ b/app/front-end/src/features/editor/components/editorView/index.ts
@@ -1,6 +1,7 @@
 export { EditorColumnMenu } from './editorColumnMenu';
 export { EditorColumnMenuAggregationItem } from './editorColumnMenuAggregationItem';
 export type { EditorColumnMenuAggregationItemProps } from './editorColumnMenuAggregationItem';
+export { EditorConfirmLeave } from './editorConfirmLeave';
 export { EditorHeader } from './editorHeader';
 export type { EditorHeaderProps } from './editorHeader';
 export { EditorToolbar } from './editorToolbar';
diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx
index 361ffe2..42ab2a9 100644
--- a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx
+++ b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx
@@ -1,3 +1,4 @@
+import { EditorConfirmLeave } from '@/features/editor/components/editorView';
 import { FileTreeItemContextMenu, FileTreeItemLabel } from '@/features/editor/components/fileTreeView/fileTreeItem';
 import { useWorkspaceContext } from '@/features/editor/hooks';
 import { FileTypes } from '@/features/editor/types';
@@ -136,7 +137,7 @@ export const FileTreeItem = React.forwardRef(function CustomTreeItem(
     icon = getIconFromFileType(item.fileType);
   }
 
-  const { fileStateUpdate, filesHistoryStateUpdate } = useWorkspaceContext();
+  const { fileStateUpdate, filesHistoryStateUpdate, file } = useWorkspaceContext();
   const { blocked } = useStatusContext();
   const [contextMenu, setContextMenu] = useState<(EventTarget & HTMLDivElement) | null>(null);
   const [contextMenuPosition, setContextMenuPosition] = useState<{ top: number; left: number }>({
@@ -166,6 +167,13 @@ export const FileTreeItem = React.forwardRef(function CustomTreeItem(
     setContextMenuPosition({ top: 0, left: 0 });
   };
 
+  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+  const { unsaved } = useStatusContext();
+  const handleConfirm = () => {
+    handleClick(item.id, item.label, item.fileType);
+    setIsConfirmDialogOpen(false);
+  };
+
   return (
     <TreeItem2Provider itemId={itemId}>
       <StyledFileTreeItemRoot {...getRootProps(other)}>
@@ -174,7 +182,11 @@ export const FileTreeItem = React.forwardRef(function CustomTreeItem(
             onClick: (event) => {
               if (!blocked) {
                 if (getContentProps().onClick) getContentProps().onClick(event);
-                handleClick(item.id, item.label, item.fileType);
+                if (unsaved) {
+                  if (item.fileType !== FileTypes.FOLDER && item.id !== file.id) setIsConfirmDialogOpen(true);
+                } else {
+                  handleClick(item.id, item.label, item.fileType);
+                }
               }
             },
 
@@ -204,6 +216,11 @@ export const FileTreeItem = React.forwardRef(function CustomTreeItem(
           onClose={handleCloseContextMenu}
         />
         {children && <TransitionComponent {...getGroupTransitionProps()} />}
+        <EditorConfirmLeave
+          isOpen={isConfirmDialogOpen}
+          onClose={() => setIsConfirmDialogOpen(false)}
+          onConfirm={handleConfirm}
+        />
       </StyledFileTreeItemRoot>
     </TreeItem2Provider>
   );
diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx
index 6ba3320..a91469e 100644
--- a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx
+++ b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx
@@ -1,3 +1,4 @@
+import { EditorConfirmLeave } from '@/features/editor/components/editorView';
 import {
   FileTreeItemContextMenuConfirmationDialog,
   FileTreeItemContextMenuFileImportDialog,
@@ -5,6 +6,7 @@ import {
 } from '@/features/editor/components/fileTreeView/fileTreeItem';
 import { useWorkspaceContext } from '@/features/editor/hooks';
 import { FileTreeItemContextMenuActions, FileTreeViewItemProps, FileTypes } from '@/features/editor/types';
+import { useStatusContext } from '@/hooks';
 import { axios, socket } from '@/lib';
 import { Endpoints, Events } from '@/types';
 import { getSID, getUUID } from '@/utils';
@@ -56,6 +58,7 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
   onClose,
 }) => {
   const { file, fileStateUpdate, filesHistoryStateUpdate } = useWorkspaceContext();
+  const { unsaved } = useStatusContext();
   const [newFileDialogOpen, setNewFileDialogOpen] = useState(false);
   const [newFolderDialogOpen, setNewFolderDialogOpen] = useState(false);
   const [fileImportDialogOpen, setFileImportDialogOpen] = useState(false);
@@ -63,6 +66,44 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const menuItems = [];
 
+  const [confirmAction, setConfirmAction] = useState<'rename' | 'export' | null>(null);
+  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+
+  const handleRenameClick = () => {
+    if (item.id === file.id && unsaved) {
+      setConfirmAction('rename');
+      setIsConfirmDialogOpen(true);
+    } else {
+      handleActionContextMenu('rename');
+    }
+  };
+
+  const handleExportClick = () => {
+    if (item.id === file.id && unsaved) {
+      setConfirmAction('export');
+      setIsConfirmDialogOpen(true);
+    } else {
+      handleActionContextMenu('export');
+    }
+  };
+
+  const handleRenameConfirm = () => {
+    handleActionContextMenu('rename');
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  };
+
+  const handleExportConfirm = () => {
+    handleActionContextMenu('export');
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  };
+
+  const handleConfirmDialogCancel = () => {
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  };
+
   if (item.fileType === undefined || item.fileType === FileTypes.FOLDER) {
     menuItems.push(
       <MenuItem key='newFile' onClick={() => handleActionContextMenu('newFile')}>
@@ -78,7 +119,7 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
     );
   } else {
     menuItems.push(
-      <MenuItem key='export' onClick={() => handleActionContextMenu('export')}>
+      <MenuItem key='export' onClick={handleExportClick}>
         Export...
       </MenuItem>,
       <Divider key='divider-export' />
@@ -91,7 +132,7 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
 
   if (item.fileType !== undefined) {
     menuItems.push(
-      <MenuItem key='rename' onClick={() => handleActionContextMenu('rename')}>
+      <MenuItem key='rename' onClick={handleRenameClick}>
         Rename...
       </MenuItem>,
       <MenuItem key='delete' onClick={() => handleActionContextMenu('delete')}>
@@ -242,6 +283,11 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
         onClose={() => setDeleteDialogOpen(false)}
         onConfirm={handleDeleteConfirm}
       />
+      <EditorConfirmLeave
+        isOpen={isConfirmDialogOpen}
+        onClose={handleConfirmDialogCancel}
+        onConfirm={confirmAction === 'rename' ? handleRenameConfirm : handleExportConfirm}
+      />
     </>
   );
 };
diff --git a/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx b/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx
index 5f0ad44..899eff1 100644
--- a/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx
+++ b/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx
@@ -1,8 +1,10 @@
+import { EditorConfirmLeave } from '@/features/editor/components/editorView';
 import { useWorkspaceContext } from '@/features/editor/hooks';
 import { FileModel } from '@/features/editor/types';
 import { useStatusContext } from '@/hooks';
 import { Close as CloseIcon } from '@mui/icons-material';
 import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material';
+import { useCallback, useState } from 'react';
 
 /**
  * `FilebarGroupItem` is a functional component that represents an individual item in the file bar group.
@@ -26,68 +28,111 @@ import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material';
 export const FilebarGroupItem: React.FC<FileModel> = (file) => {
   const Theme = useTheme();
   const Workspace = useWorkspaceContext();
-  const { blocked } = useStatusContext();
+  const { blocked, unsaved } = useStatusContext();
 
   const { id, label } = file;
 
+  const [confirmAction, setConfirmAction] = useState<'tab' | 'close' | null>(null);
+
+  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+
+  const handleTabConfirm = useCallback(() => {
+    Workspace.fileStateUpdate(file);
+    Workspace.filesHistoryStateUpdate(file);
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  }, [file, Workspace]);
+
+  const handleCloseConfirm = useCallback(() => {
+    Workspace.filesHistoryStateUpdate(undefined, file);
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  }, [file, Workspace]);
+
+  const handleTabClick = useCallback(() => {
+    if (!blocked) {
+      if (unsaved && Workspace.file.id !== id) {
+        setConfirmAction('tab');
+        setIsConfirmDialogOpen(true);
+      } else {
+        Workspace.fileStateUpdate(file);
+        Workspace.filesHistoryStateUpdate(file);
+      }
+    }
+  }, [blocked, unsaved, file, Workspace]);
+
+  const handleCloseIconClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (!blocked) {
+      if (unsaved && Workspace.file.id === id) {
+        setConfirmAction('close');
+        setIsConfirmDialogOpen(true);
+      } else {
+        Workspace.filesHistoryStateUpdate(undefined, file);
+      }
+    }
+  };
+
+  const handleConfirmDialogCancel = () => {
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  };
+
   return (
-    <Box
-      id={id}
-      sx={{
-        height: '100%',
-        pl: '1rem',
-        pr: '0.5rem',
-        bgcolor: Workspace.file.id === id ? Theme.palette.background.default : Theme.palette.action.selected,
-        borderRadius: '0rem',
-        ':hover': {
-          backgroundColor:
-            Workspace.file.id === id
-              ? Theme.palette.background.default
-              : blocked
-                ? Theme.palette.action.selected
-                : alpha(Theme.palette.background.default, 0.5),
-        },
-        cursor: blocked ? 'default' : 'pointer',
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: '0.5rem',
-      }}
-      onClick={() => {
-        // Update the workspace to the selected file
-        if (!blocked) {
-          Workspace.fileStateUpdate(file);
-          Workspace.filesHistoryStateUpdate(file);
-        }
-      }}
-    >
-      <Typography
+    <>
+      <Box
+        id={id}
         sx={{
-          fontSize: 12,
-          fontWeight: 'bold',
-          textTransform: 'none',
-          maxWidth: '10rem',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {label}
-      </Typography>
-      <IconButton
-        size='small'
-        disabled={blocked}
-        onClick={(event) => {
-          event.stopPropagation();
-        }}
-        onMouseDown={(event) => {
-          event.stopPropagation();
-          // Remove the file from the workspace
-          Workspace.filesHistoryStateUpdate(undefined, file);
+          height: '100%',
+          pl: '1rem',
+          pr: '0.5rem',
+          bgcolor: Workspace.file.id === id ? Theme.palette.background.default : Theme.palette.action.selected,
+          borderRadius: '0rem',
+          ':hover': {
+            backgroundColor:
+              Workspace.file.id === id
+                ? Theme.palette.background.default
+                : blocked
+                  ? Theme.palette.action.selected
+                  : alpha(Theme.palette.background.default, 0.5),
+          },
+          cursor: blocked ? 'default' : 'pointer',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: '0.5rem',
         }}
+        onClick={handleTabClick}
       >
-        <CloseIcon sx={{ fontSize: 12, color: Theme.palette.text.primary }} />
-      </IconButton>
-    </Box>
+        <Typography
+          sx={{
+            fontSize: 12,
+            fontWeight: 'bold',
+            textTransform: 'none',
+            maxWidth: '10rem',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {label}
+        </Typography>
+        <IconButton
+          size='small'
+          disabled={blocked}
+          onClick={(event) => {
+            event.stopPropagation();
+          }}
+          onMouseDown={handleCloseIconClick}
+        >
+          <CloseIcon sx={{ fontSize: 12, color: Theme.palette.text.primary }} />
+        </IconButton>
+      </Box>
+      <EditorConfirmLeave
+        isOpen={isConfirmDialogOpen}
+        onClose={handleConfirmDialogCancel}
+        onConfirm={confirmAction === 'tab' ? handleTabConfirm : handleCloseConfirm}
+      />
+    </>
   );
 };
diff --git a/app/front-end/src/stores/statusContextProvider.tsx b/app/front-end/src/stores/statusContextProvider.tsx
index 02c4607..c07898b 100644
--- a/app/front-end/src/stores/statusContextProvider.tsx
+++ b/app/front-end/src/stores/statusContextProvider.tsx
@@ -4,11 +4,15 @@ import React, { createContext, useEffect, useState } from 'react';
 export interface StatusContextProps {
   blocked: boolean;
   blockedStateUpdate: (blocked: boolean) => void;
+  unsaved: boolean;
+  unsavedStateUpdate: (isUnsaved: boolean) => void;
 }
 
 export const StatusContext = createContext<StatusContextProps>({
   blocked: false,
   blockedStateUpdate: () => {},
+  unsaved: false,
+  unsavedStateUpdate: () => {},
 });
 
 interface Props {
@@ -22,6 +26,12 @@ export const StatusContextProvider: React.FC<Props> = ({ children }) => {
     setBlocked(blocked);
   };
 
+  const [unsaved, setUnsaved] = useState<boolean>(false);
+
+  const unsavedStateUpdate = (isUnsaved: boolean) => {
+    setUnsaved(isUnsaved);
+  };
+
   const { connected } = useSessionContext();
 
   useEffect(() => {
@@ -36,6 +46,8 @@ export const StatusContextProvider: React.FC<Props> = ({ children }) => {
   const StatusContextValue: StatusContextProps = {
     blocked,
     blockedStateUpdate,
+    unsaved,
+    unsavedStateUpdate,
   };
 
   return <StatusContext.Provider value={StatusContextValue}>{children}</StatusContext.Provider>;