diff --git a/assets/jsons/translations/en-EN.json b/assets/jsons/translations/en-EN.json
index 89939718..6fa05732 100644
--- a/assets/jsons/translations/en-EN.json
+++ b/assets/jsons/translations/en-EN.json
@@ -1,9 +1,24 @@
 {
    "misc":{
       "download": "Download",
-      "verify": "Verify"
+      "verify": "Verify",
+      "launch": "Launch",
+      "mods": "Mods",
+      "maps": "Maps"
    },
    "pages":{
+      "version-viewer":{
+         "launch-mods":{
+            "oculus": "Oculus Mod",
+            "desktop": "Desktop Mod",
+            "debug": "Debug Mod"
+         },
+         "dropdown":{
+            "open-folder": "Open folder",
+            "verify-files": "Verify files",
+            "uninstall": "Uninstall"
+         }
+      },
       "available-versions":{
          "title": "Select a version"
       },
diff --git a/assets/jsons/translations/en-US.json b/assets/jsons/translations/en-US.json
index ba8bb60b..c36aad01 100644
--- a/assets/jsons/translations/en-US.json
+++ b/assets/jsons/translations/en-US.json
@@ -1,9 +1,24 @@
 {
    "misc":{
       "download": "Download",
-      "verify": "Verify"
+      "verify": "Verify",
+      "launch": "Launch",
+      "mods": "Mods",
+      "maps": "Maps"
    },
    "pages":{
+      "version-viewer":{
+         "launch-mods":{
+            "oculus": "Oculus Mod",
+            "desktop": "Desktop Mod",
+            "debug": "Debug Mod"
+         },
+         "dropdown":{
+            "open-folder": "Open folder",
+            "verify-files": "Verify files",
+            "uninstall": "Uninstall"
+         }
+      },
       "available-versions":{
          "title": "Select a version"
       },
diff --git a/assets/jsons/translations/es-ES.json b/assets/jsons/translations/es-ES.json
index 7b0d49fd..345c3911 100644
--- a/assets/jsons/translations/es-ES.json
+++ b/assets/jsons/translations/es-ES.json
@@ -1,9 +1,24 @@
 {
    "misc":{
       "download": "Descargar",
-      "verify": "Verificar"
+      "verify": "Verificar",
+      "launch": "Lanzar",
+      "mods": "Mods",
+      "maps": "Maps"
    },
 	"pages":{
+      "version-viewer":{
+         "launch-mods":{
+            "oculus": "Oculus Mod",
+            "desktop": "Desktop Mod",
+            "debug": "Debug Mod"
+         },
+         "dropdown":{
+            "open-folder": "Abrir la carpeta",
+            "verify-files": "Verificar los archivos",
+            "uninstall": "Desinstalar"
+         }
+      },
       "available-versions":{
          "title": "Seleccione una versión"
       },
diff --git a/assets/jsons/translations/fr-FR.json b/assets/jsons/translations/fr-FR.json
index 01a4eca0..72505cce 100644
--- a/assets/jsons/translations/fr-FR.json
+++ b/assets/jsons/translations/fr-FR.json
@@ -1,9 +1,24 @@
 {
    "misc":{
       "download": "Télécharger",
-      "verify": "Vérifier"
+      "verify": "Vérifier",
+      "launch": "Lancer",
+      "mods": "Modes",
+      "maps": "Maps"
    },
    "pages":{
+      "version-viewer":{
+         "launch-mods":{
+            "oculus": "Mode Oculus",
+            "desktop": "Mode Bureau",
+            "debug": "Mode Debug"
+         },
+         "dropdown":{
+            "open-folder": "Ouvrir le dossier",
+            "verify-files": "Vérifier les fichiers",
+            "uninstall": "Désinstaller"
+         }
+      },
       "available-versions":{
          "title": "Choisi une version"
       },
diff --git a/src/renderer/components/shared/bsm-dropdown-button.component.tsx b/src/renderer/components/shared/bsm-dropdown-button.component.tsx
index 5be8824d..67008b92 100644
--- a/src/renderer/components/shared/bsm-dropdown-button.component.tsx
+++ b/src/renderer/components/shared/bsm-dropdown-button.component.tsx
@@ -2,24 +2,26 @@ import { useState } from "react"
 import { BsmIconType } from "../svgs/bsm-icon.component"
 import { BsmButton } from "./bsm-button.component"
 import { BsmIcon } from "../svgs/bsm-icon.component"
+import { useTranslation } from "renderer/hooks/use-translation.hook"
 
 export interface DropDownItem {id: number, text: string, icon?: BsmIconType}
 
 export function BsmDropdownButton({className, items, align, onItemClick}: {className?: string, items?: DropDownItem[], align?: "left"|"right", onItemClick?: (id: number) => void}) {
 
-    const [expanded, setExpanded] = useState(false)
+   const [expanded, setExpanded] = useState(false)
+   const t = useTranslation()
 
-  return (
-    <div className={`${className}`}>
-        <BsmButton onClick={() => setExpanded(!expanded)} className='relative bg-light-main-color-2 dark:bg-main-color-2 z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black' icon="settings" active={expanded} onClickOutside={() => {setExpanded(false)}}/>
-        <div className={`pt-1 pb-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md overflow-hidden bg-light-main-color-2 dark:bg-main-color-2 text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-transform ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{transform: expanded ? "scale(1)" : "scale(0)"}}>
+   return (
+      <div className={`${className}`}>
+         <BsmButton onClick={() => setExpanded(!expanded)} className='relative bg-light-main-color-2 dark:bg-main-color-2 z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black' icon="settings" active={expanded} onClickOutside={() => {setExpanded(false)}}/>
+         <div className={`pt-1 pb-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md overflow-hidden bg-light-main-color-2 dark:bg-main-color-2 text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-transform ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{transform: expanded ? "scale(1)" : "scale(0)"}}>
             { items?.map(i => 
-                <div key={i.id} onClick={() => onItemClick(i.id)} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3">
-                    {i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1 text-gray-800 dark:text-white"></BsmIcon>}
-                    <span className="w-max">{i.text}</span>
-                </div>
+               <div key={i.id} onClick={() => onItemClick(i.id)} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3">
+                  {i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1 text-gray-800 dark:text-white"></BsmIcon>}
+                  <span className="w-max">{t(i.text)}</span>
+               </div>
             )}
-        </div>
-    </div>
+         </div>
+      </div>
   )
 }
diff --git a/src/renderer/components/shared/tab-nav-bar.component.tsx b/src/renderer/components/shared/tab-nav-bar.component.tsx
index d8d71e6e..92df42ae 100644
--- a/src/renderer/components/shared/tab-nav-bar.component.tsx
+++ b/src/renderer/components/shared/tab-nav-bar.component.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function TabNavBar(props: {tabsText: string[], onTabChange: Function, className?: string}) {
 
     const [currentTabIndex, setCurrentTabIndex] = useState(0);
     const tabsWrapper = useRef(null);
     const [tabsWidth, setTabsWidth] = useState(0);
+    const t = useTranslation();
 
     const selectYear = (tab: string) => {
         const newIndex = props.tabsText.indexOf(tab);
@@ -26,7 +28,7 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla
         </div>
         <div ref={tabsWrapper} className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
             { props.tabsText.map((y, index) => 
-                <span className="pr-4 pl-4 h-full inline-block bg-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
+                <span className="pr-4 pl-4 h-full inline-block bg-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{t(y)}</span>
             )}
         </div>
         
diff --git a/src/renderer/pages/version-viewer.component.tsx b/src/renderer/pages/version-viewer.component.tsx
index ff46f9e1..c53ae223 100644
--- a/src/renderer/pages/version-viewer.component.tsx
+++ b/src/renderer/pages/version-viewer.component.tsx
@@ -17,6 +17,7 @@ import DefautVersionImage from "../../../assets/images/default-version-img.jpg";
 import { NotificationService } from 'renderer/services/notification.service';
 import { BsDownloaderService } from 'renderer/services/bs-downloader.service';
 import { ProgressBarService } from 'renderer/services/progress-bar.service';
+import { useTranslation } from 'renderer/hooks/use-translation.hook';
 
 export function VersionViewer() {
 
@@ -60,7 +61,7 @@ export function VersionViewer() {
   }
 
   const dropDownActions = async (id: number) => {
-    if(id === 4){
+    if(id === 3){
       const modalCompleted = await modalService.openModal(ModalType.UNINSTALL, state)
       if(modalCompleted.exitCode === ModalExitCode.COMPLETED){
         bsUninstallerService.uninstall(state)
@@ -72,7 +73,7 @@ export function VersionViewer() {
         .catch((e) => {console.log("*** ", e)}) 
       }
     }
-    else if(id === 2){
+    else if(id === 1){
       window.electron.ipcRenderer.sendMessage("bs-version.open-folder", state);
     }
   }
@@ -108,16 +109,16 @@ export function VersionViewer() {
       <div className="relative flex items-center flex-col w-full h-full text-gray-200 backdrop-blur-lg">
         <BsmImage className='relative object-cover h-28' image={BSLogo}/>
         <h1 className='relative text-4xl font-bold italic -top-3'>{state.BSVersion}</h1>
-        <TabNavBar className='mt-3' tabsText={["Launch", "Maps", "Mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
+        <TabNavBar className='mt-3' tabsText={["misc.launch", "misc.maps", "misc.mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
         <div className='mt-2 w-full grow flex transition-transform duration-300 pt-5' style={{transform: `translate(${-(currentTabIndex * 100)}%, 0)`}}>
           <div className='w-full shrink-0 items-center relative flex flex-col justify-start -top-2'>
             <div className='grid grid-flow-col grid-cols-3 gap-6'>
-              <ToogleLunchMod icon='oculus' onClick={() => setMode(LaunchMods.OCULUS_MOD, !oculusMode)} active={oculusMode} text="OCULUS MOD"/>
-              <ToogleLunchMod icon='desktop' onClick={() => setMode(LaunchMods.DESKTOP_MOD, !desktopMode)} active={desktopMode} text="DESKTOP MOD"/>
-              <ToogleLunchMod icon='terminal' onClick={() => setMode(LaunchMods.DEBUG_MOD, !debugMode)} active={debugMode} text="DEBUG MOD"/>
+              <ToogleLunchMod icon='oculus' onClick={() => setMode(LaunchMods.OCULUS_MOD, !oculusMode)} active={oculusMode} text="pages.version-viewer.launch-mods.oculus"/>
+              <ToogleLunchMod icon='desktop' onClick={() => setMode(LaunchMods.DESKTOP_MOD, !desktopMode)} active={desktopMode} text="pages.version-viewer.launch-mods.desktop"/>
+              <ToogleLunchMod icon='terminal' onClick={() => setMode(LaunchMods.DEBUG_MOD, !debugMode)} active={debugMode} text="pages.version-viewer.launch-mods.debug"/>
             </div>
             <div className='grow flex justify-center items-center'>
-              <BsmButton onClick={launchBs} className='relative text-5xl text-gray-800 dark:text-gray-200 bg-light-main-color-2 dark:bg-main-color-2 font-bold tracking-wide pt-1 pb-3 px-7 rounded-lg shadow-md italic shadow-black active:scale-90 transition-transform' text='Launch'/>
+              <BsmButton onClick={launchBs} className='relative text-5xl text-gray-800 dark:text-gray-200 bg-light-main-color-2 dark:bg-main-color-2 font-bold tracking-wide pt-1 pb-3 px-7 rounded-lg shadow-md italic shadow-black active:scale-90 transition-transform' text="misc.launch"/>
             </div>
           </div>
           <div className='shrink-0 w-full h-full flex justify-center'>
@@ -135,22 +136,24 @@ export function VersionViewer() {
         </div>
       </div>
       <BsmDropdownButton className='absolute top-5 right-5 h-9 w-9' onItemClick={dropDownActions} items={[
-          {id: 1, text: "Add to favorites (wip)", icon:"favorite"},
-          {id: 2, text: "Open folder", icon: "folder"},
-          {id: 3, text: "Verify files (WIP)", icon: "folder"},
-          {id: 4, text: "Uninstall", icon:"trash"}
+          {id: 1, text: "pages.version-viewer.dropdown.open-folder", icon: "folder"},
+          {id: 2, text: "pages.version-viewer.dropdown.verify-files", icon: "folder"},
+          {id: 3, text: "pages.version-viewer.dropdown.uninstall", icon:"trash"}
         ]}/>
     </>
   )
 }
 
 function ToogleLunchMod(props: {onClick: Function, active: boolean, text: string, icon: BsmIconType}) {
+
+   const t = useTranslation();
+
   return (
     <div className={`relative rounded-full cursor-pointer group active:scale-95 transition-transform ${!props.active && "shadow-md shadow-black"}`} onClick={() => props.onClick()}>
       <div className={`absolute glow-on-hover rounded-full ${props.active && "opacity-100 blur-[2px]"}`}></div>
       <div className='w-full h-full pl-6 pr-6 flex justify-center items-center bg-light-main-color-2 dark:bg-main-color-2 p-3 rounded-full text-gray-800 dark:text-white group-hover:bg-light-main-color-1 dark:group-hover:bg-main-color-1'>
         <BsmIcon icon={props.icon} className='mr-1 h-7 text-gray-800 dark:text-white'/>
-        <span className='w-fit min-w-fit h-full text-lg font-bold uppercase tracking-wide italic'>{props.text}</span>
+        <span className='w-fit min-w-fit h-full text-lg font-bold uppercase tracking-wide italic'>{t(props.text)}</span>
       </div>
     </div>
   );