diff --git a/assets/jsons/translations/en.json b/assets/jsons/translations/en.json
index 53a007da..03891104 100644
--- a/assets/jsons/translations/en.json
+++ b/assets/jsons/translations/en.json
@@ -67,6 +67,7 @@
             "mods": {
                 "loading-mods": "Loading mods...",
                 "no-internet": "No internet",
+                "mods-not-available": "No mods are available yet for this version of Beat Saber",
                 "buttons": {
                     "more-infos": "More info",
                     "install-or-update": "Install or update"
diff --git a/assets/jsons/translations/es.json b/assets/jsons/translations/es.json
index 2c377a00..13ebc28a 100644
--- a/assets/jsons/translations/es.json
+++ b/assets/jsons/translations/es.json
@@ -66,6 +66,7 @@
             "mods": {
                 "loading-mods": "Cargando mods...",
                 "no-internet": "Sin internet",
+                "mods-not-available": "Aún no hay mods disponibles para esta versión de Beat Saber",
                 "buttons": {
                     "more-infos": "Más información",
                     "install-or-update": "Instalar o actualizar"
diff --git a/assets/jsons/translations/fr.json b/assets/jsons/translations/fr.json
index 6af4f1cd..4e10fb25 100644
--- a/assets/jsons/translations/fr.json
+++ b/assets/jsons/translations/fr.json
@@ -66,6 +66,7 @@
             "mods": {
                 "loading-mods": "Chargement des mods...",
                 "no-internet": "Pas d'internet",
+                "mods-not-available": "Aucun mod n'est encore disponible pour cette version de Beat Saber",
                 "buttons": {
                     "more-infos": "Plus d'infos",
                     "install-or-update": "Installer ou mettre à jour"
diff --git a/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx b/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx
index 379a32ab..e3a04142 100644
--- a/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx
+++ b/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx
@@ -135,32 +135,49 @@ export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, on
         if(modsAvailable){
             setDownloadWidth(downloadRef?.current?.offsetWidth)
         }
-    }, [modsAvailable])
+    }, [modsAvailable]);
+
+    const renderContent = () => {
+        if(!isOnline){ return <ModStatus text="pages.version-viewer.mods.no-internet" image={BeatConflictImg}/> }
+        if(!modsAvailable){ return <ModStatus text="pages.version-viewer.mods.loading-mods" image={BeatWaitingImg} spin/> }
+        if(!modsAvailable.size){ return <ModStatus text="pages.version-viewer.mods.mods-not-available" image={BeatConflictImg}/> }
+        return (
+            <>
+                <div className="grow overflow-scroll w-full min-h-0 scrollbar-thin scrollbar-thumb-neutral-900 scrollbar-thumb-rounded-full">
+                    <ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo}/>
+                </div>
+                <div className="h-10 shrink-0 flex items-center justify-between px-3">
+                    <BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.more-infos" typeColor="cancel" withBar={false} disabled={!moreInfoMod} onClick={handleOpenMoreInfo} style={{width: downloadWith}}/>
+                    <div ref={downloadRef}>
+                        <BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.install-or-update" withBar={false} disabled={installing} typeColor="primary" onClick={installMods}/>
+                    </div>
+                </div>
+            </>
+        )
+    }
     
 
     return (
         <div ref={ref} className='shrink-0 w-full h-full px-8 pb-7 flex justify-center'>
             <div className='relative flex flex-col grow-0 bg-light-main-color-2 dark:bg-main-color-2 h-full w-full rounded-md shadow-black shadow-center overflow-hidden'>
-                {isOnline && modsAvailable ? (
-                    <>
-                        <div className="grow overflow-scroll w-full min-h-0 scrollbar-thin scrollbar-thumb-neutral-900 scrollbar-thumb-rounded-full">
-                            <ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo}/>
-                        </div>
-                        <div className="h-10 shrink-0 flex items-center justify-between px-3">
-                            <BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.more-infos" typeColor="cancel" withBar={false} disabled={!moreInfoMod} onClick={handleOpenMoreInfo} style={{width: downloadWith}}/>
-                            <div ref={downloadRef}>
-                                <BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.install-or-update" withBar={false} disabled={installing} typeColor="primary" onClick={installMods}/>
-                            </div>
-                        </div>
-                    </>
-                ) : (
-                    <div className="w-full h-full flex flex-col items-center justify-center text-gray-800 dark:text-gray-200">
-                        <img className={`w-32 h-32 ${isOnline && "spin-loading"}`} src={isOnline ? BeatWaitingImg : BeatConflictImg} alt=" "/>
-                        <span className="text-xl mt-3 h-0 italic">{t(isOnline ? "pages.version-viewer.mods.loading-mods" : "pages.version-viewer.mods.no-internet")}</span>
-                    </div>
-                )}
+                {renderContent()}
             </div>
         </div>
         
     )
 }
+
+
+
+function ModStatus({text, image, spin = false}: {text: string, image: string, spin?: boolean}) {
+
+    const t = useTranslation();
+
+    return (
+        <div className="w-full h-full flex flex-col items-center justify-center text-gray-800 dark:text-gray-200">
+            <img className={`w-32 h-32 ${spin ? "spin-loading": ""}`} src={image} alt=" "/>
+            <span className="text-xl mt-3 h-0 italic">{t(text)}</span>
+        </div>
+    )
+}
+