diff --git a/src/renderer/pages/available-versions-list.components.tsx b/src/renderer/pages/available-versions-list.components.tsx
index 89b92e1a..d519c9ea 100644
--- a/src/renderer/pages/available-versions-list.components.tsx
+++ b/src/renderer/pages/available-versions-list.components.tsx
@@ -9,6 +9,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { NotificationService } from "renderer/services/notification.service";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
+import { useObservable } from "renderer/hooks/use-observable.hook";
 
 export function AvailableVersionsList() {
 
@@ -27,6 +28,7 @@ export function AvailableVersionsList() {
   const versionManagerService: BSVersionManagerService = BSVersionManagerService.getInstance();
 
   const [versionSelected, setVersionSelected] = useState(null as BSVersion);
+  const progressBarVisible = useObservable(progressBarService.visible$);
   const t = useTranslation();
 
   const startDownload = () => {
@@ -59,7 +61,7 @@ export function AvailableVersionsList() {
       <AvailableVersionsSlider/>
 
       <AnimatePresence>
-        { versionSelected && !progressBarService.visible$.value && (
+        { versionSelected && !progressBarVisible && (
           <motion.div initial={{y:"150%"}} animate={{y:"0%"}} exit={{y:"150%"}} className="absolute bottom-5" onClick={startDownload}>
             <BsmButton text={versionManagerService.isVersionInstalled(versionSelected) ? "misc.verify" : "misc.download"} className="relative bg-light-main-color-2 text-gray-800 dark:text-gray-100 dark:bg-main-color-2 rounded-md text-3xl font-bold italic tracking-wide px-3 pb-2 pt-1 shadow-md shadow-black"/>
           </motion.div>