diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index 355e6579..d011b85f 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -67,7 +67,6 @@ export const NavBar: React.FC<NavBarProps> = ({
     setTab(newValue);
   };
 
-
   const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -116,6 +115,50 @@ export const NavBar: React.FC<NavBarProps> = ({
 
   return (
     <>
+      {isUpdateAvailable && (
+        <Snackbar
+          open={isUpdateAvailable}
+          onClose={() => setIsUpdateAvailable(false)}
+          message={
+            `New version ${latestVersion} available! Click "Upgrade" to update.`
+          }
+          action={
+            <>
+              <Button
+                color="primary"
+                size="small"
+                onClick={handleUpdateOpen}
+                style={{
+                  backgroundColor: '#ff00c3',
+                  color: 'white',
+                  fontWeight: 'bold',
+                  textTransform: 'none',
+                  marginRight: '8px',
+                  borderRadius: '5px',
+                }}
+              >
+                Upgrade
+              </Button>
+              <IconButton
+                size="small"
+                aria-label="close"
+                color="inherit"
+                onClick={() => setIsUpdateAvailable(false)}
+                style={{ color: 'black' }}
+              >
+                <Close />
+              </IconButton>
+            </>
+          }
+          ContentProps={{
+            sx: {
+              background: "white",
+              color: "black",
+            }
+          }}
+        />
+
+      )}
       <NavBarWrapper>
         <div style={{
           display: 'flex',