diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index b6b137453d..c35170ed1e 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -9,7 +9,8 @@ import {
   assignStarDotColors,
   showStar,
 } from 'utils/leaderboardPermissions';
-import MouseoverTextTotalTime from '../mouseoverText/mouseoverTextTotalTime';
+import MouseoverTextTotalTimeButton from '../mouseoverText/MouseoverTextTotalTimeButton';
+import MouseoverTextTotalTimeUpdater from '../mouseoverText/MouseoverTextTotalTimeUpdater';
 
 function useDeepEffect(effectFunc, deps) {
   const isFirst = useRef(true);
@@ -219,12 +220,10 @@ const LeaderBoard = ({
                     <span className="d-none d-sm-inline-block" title={mouseoverText}>Total Time </span>
                   </div>
                   {isOwner && (
-                    <MouseoverTextTotalTime onUpdate={handleMouseoverTextUpdate} />
+                    <MouseoverTextTotalTimeButton onUpdate={handleMouseoverTextUpdate} />
                   )}
                   {!isOwner && (
-                    <div style={{ visibility: 'hidden' }}>
-                      <MouseoverTextTotalTime onUpdate={handleMouseoverTextUpdate} />
-                    </div>
+                    <MouseoverTextTotalTimeUpdater onUpdate={handleMouseoverTextUpdate} />
                   )}
                 </div>
               </th>
diff --git a/src/components/mouseoverText/mouseoverTextTotalTime.jsx b/src/components/mouseoverText/MouseoverTextTotalTimeButton.jsx
similarity index 93%
rename from src/components/mouseoverText/mouseoverTextTotalTime.jsx
rename to src/components/mouseoverText/MouseoverTextTotalTimeButton.jsx
index b1e414ef02..d5370b0f2c 100644
--- a/src/components/mouseoverText/mouseoverTextTotalTime.jsx
+++ b/src/components/mouseoverText/MouseoverTextTotalTimeButton.jsx
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { getMouseoverText, createMouseoverText, updateMouseoverText } from '../../actions/mouseoverTextAction';
 
 
-function MouseoverTextTotalTime({
+function MouseoverTextTotalTimeButton({
     getMouseoverText,
     createMouseoverText,
     updateMouseoverText,
@@ -46,16 +46,13 @@ function MouseoverTextTotalTime({
         };
         if (text) {
             updateMouseoverText(mouseoverTextId, mouseoverText);
-            setModalOpen(false);
-            setText(newText);
-            onUpdate(newText);
         } else {
             //console.log('createMouseoverText is ' + mouseoverText.newMouseoverText);
             createMouseoverText(mouseoverText);
-            setModalOpen(false);
-            setText(newText);
-            onUpdate(newText);
         }
+        setModalOpen(false);
+        setText(newText);
+        onUpdate(newText);
     };
 
     const handleCancelSave = () => {
@@ -116,7 +113,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(updateMouseoverText(mouseoverTextId, mouseoverText)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(MouseoverTextTotalTime);
+export default connect(mapStateToProps, mapDispatchToProps)(MouseoverTextTotalTimeButton);
 
 
 
diff --git a/src/components/mouseoverText/MouseoverTextTotalTimeUpdater.jsx b/src/components/mouseoverText/MouseoverTextTotalTimeUpdater.jsx
new file mode 100644
index 0000000000..b543dcf97b
--- /dev/null
+++ b/src/components/mouseoverText/MouseoverTextTotalTimeUpdater.jsx
@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { getMouseoverText } from '../../actions/mouseoverTextAction';
+
+function MouseoverTextTotalTimeUpdater({ getMouseoverText, mouseoverText, onUpdate }) {
+    useEffect(() => {
+        getMouseoverText();
+    }, [getMouseoverText]);
+
+    useEffect(() => {
+        if (mouseoverText) {
+            onUpdate(mouseoverText); // Call the onUpdate function to pass the mouseoverText value to the parent component
+        }
+    }, [mouseoverText, onUpdate]);
+
+    return null;
+}
+
+const mapStateToProps = (state) => {
+    return {
+        mouseoverText: state?.mouseoverText?.[0]?.mouseoverText,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+    getMouseoverText: () => dispatch(getMouseoverText()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(MouseoverTextTotalTimeUpdater);