diff --git a/src/ui.tsx b/src/ui.tsx
index 52fec794..6c62776f 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -22,6 +22,8 @@ import {
   generateClassName,
   WarningSnackbar,
   Popper,
+  AdvancedDialog,
+  Button,
 } from "@gliff-ai/style";
 import { Annotations } from "@/annotation";
 import { PositionAndSize } from "@/annotation/interfaces";
@@ -195,6 +197,15 @@ const styles = {
   },
 };
 
+const offlineButtonsGrid = {
+  display: "flex",
+  justifyContent: "space-between",
+};
+const warningContainer = {
+  marginTop: "5px",
+  marginBottom: "20px",
+};
+
 interface Props extends WithStyles<typeof styles> {
   slicesData?: ImageBitmap[][] | null;
   imageFileInfo?: ImageFileInfo;
@@ -205,6 +216,7 @@ interface Props extends WithStyles<typeof styles> {
   // setIsLoading is used, but in progress.tsx
   // eslint-disable-next-line react/no-unused-prop-types
   setIsLoading?: (isLoading: boolean) => void;
+  offline?: boolean;
   userAccess?: UserAccess;
   plugins?: PluginObject | null;
   launchPluginSettingsCallback?: (() => void) | null;
@@ -223,6 +235,7 @@ class UserInterface extends Component<Props, State> {
     saveAnnotationsCallback: null,
     showAppBar: true,
     setIsLoading: null,
+    offline: false,
     slicesData: null,
     imageFileInfo: undefined,
     userAccess: UserAccess.Collaborator,
@@ -248,6 +261,8 @@ class UserInterface extends Component<Props, State> {
 
   private keyListener: (event: KeyboardEvent) => boolean;
 
+  private saveTimeout: NodeJS.Timeout | undefined;
+
   // private leftCanvasRefs: { [name: string]: SplineCanvasClass };
   private leftCanvasRefs: {
     [name: string]:
@@ -311,6 +326,8 @@ class UserInterface extends Component<Props, State> {
     this.keyListener = keydownListener(this.isTyping);
     document.addEventListener("keydown", this.keyListener);
 
+    document.addEventListener("mousedown", this.autoSave);
+
     for (const event of events) {
       document.addEventListener(event, this.handleEvent);
     }
@@ -859,6 +876,17 @@ class UserInterface extends Component<Props, State> {
     this.annotationsObject.redo();
   };
 
+  autoSave = (): void => {
+    if (this.saveTimeout) {
+      clearTimeout(this.saveTimeout);
+    }
+
+    this.saveTimeout = setTimeout(() => {
+      this.saveAnnotations();
+      this.saveTimeout = undefined;
+    }, 5000);
+  };
+
   isTyping = (): boolean =>
     // Added to prevent single-key shortcuts that are also valid text input
     // to get triggered during text input.
@@ -1314,6 +1342,24 @@ class UserInterface extends Component<Props, State> {
                 !this.props.readonly
               }
             />
+            <AdvancedDialog
+              open={this.props.offline}
+              title="Connection Error"
+              warningDialog={true}
+            >
+              <Container sx={warningContainer}>
+                Please check your connection. Your unsaved changes will be lost
+                if we are unable to establish a connection.
+              </Container>
+              <Grid sx={offlineButtonsGrid}>
+                <Button color="secondary" variant="outlined">
+                  Exit without Saving
+                </Button>
+                <Button color="secondary" variant="contained">
+                  Retry Saving
+                </Button>
+              </Grid>
+            </AdvancedDialog>
           </ThemeProvider>
         </StyledEngineProvider>
       </StylesProvider>