diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx
index 1b20b26f6..fbdce28c4 100644
--- a/web/src/components/Statusbar.tsx
+++ b/web/src/components/Statusbar.tsx
@@ -11,7 +11,7 @@ import { MdCircle } from "react-icons/md";
 import { Link } from "react-router-dom";
 
 export default function Statusbar() {
-  const { messages, addMessage, clearMessages } = useContext(
+  const { messages, addMessage, removeMessage, clearMessages } = useContext(
     StatusBarMessagesContext,
   )!;
 
@@ -47,17 +47,18 @@ export default function Statusbar() {
   useEffect(() => {
     if (reindexState) {
       if (reindexState.status == "indexing") {
-        clearMessages("embeddings-reindex");
         addMessage(
           "embeddings-reindex",
           `Reindexing embeddings (${Math.floor((reindexState.processed_objects / reindexState.total_objects) * 100)}% complete)`,
+          undefined,
+          "status",
         );
       }
       if (reindexState.status === "completed") {
-        clearMessages("embeddings-reindex");
+        removeMessage("embeddings-reindex", "status");
       }
     }
-  }, [reindexState, addMessage, clearMessages]);
+  }, [reindexState, addMessage, removeMessage]);
 
   return (
     <div className="absolute bottom-0 left-0 right-0 z-10 flex h-8 w-full items-center justify-between border-t border-secondary-highlight bg-background_alt px-4 dark:text-secondary-foreground">