diff --git a/src/common/component/NewVersion.js b/src/common/component/NewVersion.js
new file mode 100644
index 00000000..ebcddd08
--- /dev/null
+++ b/src/common/component/NewVersion.js
@@ -0,0 +1,33 @@
+// import React from 'react'
+import toast from "react-hot-toast";
+import styled from "styled-components";
+const Styled = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  strong {
+    white-space: nowrap;
+    font-weight: bold;
+    /* padding-right: 5px; */
+  }
+  .btns {
+    gap: 5px;
+    display: flex;
+  }
+`;
+import Button from "./styled/Button";
+export default function NewVersion({ id, handleUpdate }) {
+  return (
+    <Styled>
+      <strong>New Version</strong> Available
+      <div className="btns">
+        <Button className="mini main" onClick={handleUpdate}>
+          Update
+        </Button>
+        <Button className="mini cancel" onClick={() => toast.dismiss(id)}>
+          Dismiss
+        </Button>
+      </div>
+    </Styled>
+  );
+}
diff --git a/src/common/component/styled/Button.js b/src/common/component/styled/Button.js
index 5c4a9908..27716734 100644
--- a/src/common/component/styled/Button.js
+++ b/src/common/component/styled/Button.js
@@ -29,6 +29,11 @@ const StyledButton = styled.button`
     font-size: 14px;
     line-height: 20px;
   }
+  &.mini {
+    padding: 4px 10px;
+    font-size: 12px;
+    line-height: 18px;
+  }
   &.danger {
     border: none;
     background-color: #ef4444;
diff --git a/src/index.js b/src/index.js
index c8e4dce7..95d4dfca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 // import React from 'react';
 import ReactDOM from "react-dom/client";
-import { Toaster } from "react-hot-toast";
+import toast, { Toaster } from "react-hot-toast";
 import { Reset } from "styled-reset";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -9,6 +9,7 @@ import "animate.css";
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride";
 import ReduxRoutes from "./routes";
+import NewVersion from "./common/component/NewVersion";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <>
@@ -20,4 +21,19 @@ root.render(
     <MarkdownStyleOverride />
   </>
 );
-serviceWorkerRegistration.register();
+serviceWorkerRegistration.register({
+  // onSuccess: () => {
+  //   toast.success("Service Worker Installed");
+  // },
+  onUpdate: (reg) => {
+    const handleUpdate = () => {
+      reg.unregister().then(() => {
+        window.location.reload();
+      });
+    };
+    toast((t) => <NewVersion id={t.id} handleUpdate={handleUpdate} />, {
+      duration: Infinity,
+      position: "top-right",
+    });
+  },
+});