diff --git a/assets/jsons/translations/en-EN.json b/assets/jsons/translations/en-EN.json
index 89ade0a1..31537be2 100644
--- a/assets/jsons/translations/en-EN.json
+++ b/assets/jsons/translations/en-EN.json
@@ -1,18 +1,43 @@
 {
-    "pages":{
-        "settings":{
-            "languages":{
-                "en-EN": "English, UK",
-                "en-US": "English, US",
-                "fr-FR": "Français",
-                "es-ES": "Español",
-                "translated":{
-                    "en-EN": "English, United Kingdom",
-                    "en-US": "English, USA",
-                    "fr-FR": "French",
-                    "es-ES": "Spanish"
-                }
+   "pages":{
+      "settings":{
+         "steam":{
+            "title":"Steam",
+            "description":"If you log out of Steam, you will have to log back in to download a new version of Beat Saber.",
+            "logout":"Log out"
+         },
+         "appearance":{
+            "title":"Appearance",
+            "description":"Choose the two main colours of BSManager.",
+            "reset":"Reset",
+            "sub-title":"Theme",
+            "themes":{
+               "dark":"Dark",
+               "light": "Light",
+               "os": "Sync with computer"
             }
-        }
-    }
+         },
+         "installation-folder":{
+            "title":"Installation folder",
+            "description":"Change the default folder for Beat Saber versions and other upcoming features.",
+            "choose-folder":"Choose folder"
+         },
+         "language":{
+            "title":"Language",
+        		"description":"Select a language.",
+            "languages":{
+               "en-EN": "English, UK",
+               "en-US": "English, US",
+               "fr-FR": "Français",
+               "es-ES": "Español",
+               "translated":{
+                  "en-EN": "English, United Kingdom",
+                  "en-US": "English, USA",
+                  "fr-FR": "French",
+                  "es-ES": "Spanish"
+               }
+            }
+         } 
+      }
+   }
 }
\ No newline at end of file
diff --git a/assets/jsons/translations/en-US.json b/assets/jsons/translations/en-US.json
index ab1f6aa0..6f5c4fd2 100644
--- a/assets/jsons/translations/en-US.json
+++ b/assets/jsons/translations/en-US.json
@@ -1,18 +1,43 @@
 {
-    "pages":{
-        "settings":{
-            "languages":{
-                "en-EN": "English, UK",
-                "en-US": "English, US",
-                "fr-FR": "Français",
-                "es-ES": "Español",
-                "translated":{
-                    "en-EN": "English, United Kingdom",
-                    "en-US": "English, United States",
-                    "fr-FR": "French",
-                    "es-ES": "Spanish"
-                }
+   "pages":{
+      "settings":{
+         "steam":{
+            "title":"Steam",
+            "description":"If you log out of Steam, you will have to log back in to download a new version of Beat Saber.",
+            "logout":"Log out"
+         },
+         "appearance":{
+            "title":"Appearance",
+            "description":"Choose the two main colors of BSManager.",
+            "reset":"Reset",
+            "sub-title":"Theme",
+            "themes":{
+               "dark":"Dark",
+               "light": "Light",
+               "os": "Sync with computer"
             }
-        }
-    }
+         },
+         "installation-folder":{
+            "title":"Installation folder",
+            "description":"Change the default folder for Beat Saber versions and other upcoming features.",
+            "choose-folder":"Choose folder"
+         },
+         "language":{
+            "title":"Language",
+        		"description":"Selects a language.",
+            "languages":{
+               "en-EN": "English, UK",
+               "en-US": "English, US",
+               "fr-FR": "Français",
+               "es-ES": "Español",
+               "translated":{
+                  "en-EN": "English, United Kingdom",
+                  "en-US": "English, United States",
+                  "fr-FR": "French",
+                  "es-ES": "Spanish"
+               }
+            }
+         }
+      }
+   }
 }
\ No newline at end of file
diff --git a/assets/jsons/translations/es-ES.json b/assets/jsons/translations/es-ES.json
index 4391c47b..b8340e17 100644
--- a/assets/jsons/translations/es-ES.json
+++ b/assets/jsons/translations/es-ES.json
@@ -1,18 +1,43 @@
 {
-    "pages":{
-        "settings":{
-            "languages":{
-                "en-EN": "English, UK",
-                "en-US": "English, US",
-                "fr-FR": "Français",
-                "es-ES": "Español",
-                "translated":{
-                    "en-EN": "Inglés, Reino Unido",
-                    "en-US": "Inglés, Estados Unidos",
-                    "fr-FR": "Francés",
-                    "es-ES": "Español"
-                }
+	"pages":{
+		"settings":{
+			"steam":{
+            "title":"Steam",
+            "description":"Si sales de Steam, tendrás que volver a entrar para descargar una nueva versión de Beat Saber.",
+            "logout":"Desconectar"
+         },
+         "appearance":{
+            "title":"Apariencia",
+            "description":"Elija los dos colores principales de BSManager.",
+            "reset":"Reiniciar",
+            "sub-title":"Tema",
+            "themes":{
+               "dark":"Oscuro",
+               "light": "Claro",
+               "os": "Sincronizar con ordenador"
             }
-        }
-    }
-}
\ No newline at end of file
+         },
+         "installation-folder":{
+            "title":"Carpeta de instalación",
+            "description":"Cambia la carpeta por defecto para las versiones de Beat Saber y otras características próximas.",
+            "choose-folder":"Elija la carpeta"
+         },
+    		"language":{
+        		"title":"Idioma",
+        		"description":"Selecciona un idioma.",
+        		"languages":{
+            	"en-EN": "English, UK",
+            	"en-US": "English, US",
+            	"fr-FR": "Français",
+            	"es-ES": "Español",
+            	"translated":{
+              		"en-EN": "Inglés, Reino Unido",
+              		"en-US": "Inglés, Estados Unidos",
+              		"fr-FR": "Francés",
+              		"es-ES": "Español"
+            	}
+        		}
+      	}
+    	}
+  	}
+}
diff --git a/assets/jsons/translations/fr-FR.json b/assets/jsons/translations/fr-FR.json
index fc928fee..f7044ebb 100644
--- a/assets/jsons/translations/fr-FR.json
+++ b/assets/jsons/translations/fr-FR.json
@@ -1,18 +1,43 @@
 {
-    "pages":{
-        "settings":{
-            "languages":{
-                "en-EN": "English, UK",
-                "en-US": "English, US",
-                "fr-FR": "Français",
-                "es-ES": "Español",
-                "translated":{
-                    "en-EN": "Anglais, Royaume-Uni",
-                    "en-US": "Anglais, États-Unis",
-                    "fr-FR": "Français",
-                    "es-ES": "Espagnol"
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
+   "pages":{
+      "settings":{
+         "steam":{
+         	"title":"Steam",
+         	"description":"Si tu te déconnectes de Steam, tu devras te reconnecter pour télécharger une nouvelle version de Beat Saber.",
+         	"logout":"Déconnexion"
+         },
+         "appearance":{
+         	"title":"Apparence",
+         	"description":"Choisi les deux couleurs principales de BSManager.",
+         	"reset":"Réinitialiser",
+         	"sub-title":"Thème",
+         	"themes":{
+             	"dark":"Sombre",
+             	"light": "Clair",
+             	"os": "Synchroniser avec l'ordinateur"
+           	}
+         },
+         "installation-folder":{
+         	"title":"Dossier d'installation",
+         	"description":"Change le dossier par défaut pour les versions de Beat Saber et d'autres fonctionnalités à venir.",
+         	"choose-folder":"Choisir un dossier"
+         },
+         "language":{
+         	"title":"Langage",
+         	"description":"Sélectionne un langage.",
+         	"languages":{
+             	"en-EN": "English, UK",
+             	"en-US": "English, US",
+             	"fr-FR": "Français",
+             	"es-ES": "Español",
+             	"translated":{
+                 	"en-EN": "Anglais, Royaume-Uni",
+                 	"en-US": "Anglais, États-Unis",
+                 	"fr-FR": "Français",
+                 	"es-ES": "Espagnol"
+             	}
+           	}
+         }
+      }
+   }
+}
diff --git a/src/renderer/components/settings/setting-container.component.tsx b/src/renderer/components/settings/setting-container.component.tsx
index 77f215d2..6cc41c30 100644
--- a/src/renderer/components/settings/setting-container.component.tsx
+++ b/src/renderer/components/settings/setting-container.component.tsx
@@ -1,11 +1,15 @@
 import { ReactNode } from "react";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function SettingContainer({className, title, minorTitle, description, children}: {className?: string, title?: string, minorTitle?: string, description?: string, children?: ReactNode}) {
+
+  const t = useTranslation();
+
   return (
     <div className={className || "relative mb-5"}>
-        { title && <h1 className="font-bold text-2xl mb-1 tracking-wide">{title}</h1> }
-        { minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-600 dark:text-gray-400">{minorTitle}</h2> }
-        { description && <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{description}</p> }
+        { title && <h1 className="font-bold text-2xl mb-1 tracking-wide">{t(title)}</h1> }
+        { minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-600 dark:text-gray-400">{t(minorTitle)}</h2> }
+        { description && <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{t(description)}</p> }
         { children }
     </div>
   )
diff --git a/src/renderer/components/settings/setting-radio-array.component.tsx b/src/renderer/components/settings/setting-radio-array.component.tsx
index 5fb76887..e8e6e086 100644
--- a/src/renderer/components/settings/setting-radio-array.component.tsx
+++ b/src/renderer/components/settings/setting-radio-array.component.tsx
@@ -1,8 +1,11 @@
 import { motion } from "framer-motion"
+import { useTranslation } from "renderer/hooks/use-translation.hook"
 import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"
 
 export function SettingRadioArray({items, selectedItem = items[0].id, onItemSelected}: {items: RadioItem[], selectedItem?: number, onItemSelected?: (id: number) => void}) {
 
+  const t = useTranslation();
+
   return (
     <div className="w-full">
         { items.map(i => (
@@ -11,11 +14,11 @@ export function SettingRadioArray({items, selectedItem = items[0].id, onItemSele
                     <div className="h-5 rounded-full aspect-square border-2 border-gray-800 dark:border-white p-[3px] mr-2">
                         <motion.span initial={{scale: 0}} animate={{scale: i.id === selectedItem ? 1 : 0}} className="h-full w-full block bg-gray-800 dark:bg-white rounded-full"/>
                     </div>
-                    <h2 className="font-extrabold">{i.text}</h2>
+                    <h2 className="font-extrabold">{t(i.text)}</h2>
                 </div>
                 {i.icon && (
                     <div className="flex items-center">
-                        {i.textIcon && <span className="text-sm">{i.textIcon}</span>}
+                        {i.textIcon && <span className="text-sm">{t(i.textIcon)}</span>}
                         <BsmIcon icon={i.icon} className="max-h-5 w-fit ml-2"/>
                     </div>
                 )}
diff --git a/src/renderer/components/shared/bsm-button.component.tsx b/src/renderer/components/shared/bsm-button.component.tsx
index 898b5f23..a43ed906 100644
--- a/src/renderer/components/shared/bsm-button.component.tsx
+++ b/src/renderer/components/shared/bsm-button.component.tsx
@@ -2,14 +2,18 @@ import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"
 import OutsideClickHandler from 'react-outside-click-handler';
 import React from "react";
 import { BsmImage } from "./bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function BsmButton({className, style, imgClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick}: {className?: string, style?: React.CSSProperties, imgClassName?: string, icon?: BsmIconType, image?: string, text?: string, type?: string, active?: boolean, withBar?: boolean, disabled?: boolean, onClickOutside?: (e: MouseEvent) => void, onClick?: (e: React.MouseEvent) => void}) {
+
+  const t = useTranslation();
+
   return (
     <OutsideClickHandler onOutsideClick={e => onClickOutside && onClickOutside(e)}>
       <div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${disabled && "brightness-75 cursor-not-allowed"}`} style={style}>
         { image && <BsmImage image={image} className={imgClassName}/> }
         { icon && <BsmIcon icon={icon} className="h-full w-full text-gray-800 dark:text-white"/> }
-        {text && (type === "submit" ? <button className="w-full h-full">{text}</button> : <span>{text}</span>)}
+        {text && (type === "submit" ? <button className="w-full h-full">{t(text)}</button> : <span>{t(text)}</span>)}
         { withBar && (
           <div className="absolute bottom-0 left-0 w-full h-1 bg-red-500">
             <div className="absolute top-0 left-0 h-full w-full bg-inherit brightness-50"/>
@@ -18,6 +22,6 @@ export function BsmButton({className, style, imgClassName, icon, image, text, ty
         )}
       </div>
     </OutsideClickHandler>
-    
+
   )
 }
diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx
index 433ac558..3d95a533 100644
--- a/src/renderer/pages/settings-page.component.tsx
+++ b/src/renderer/pages/settings-page.component.tsx
@@ -32,16 +32,15 @@ export function SettingsPage() {
   const firstColor = useObservable(configService.watch<string>("first-color"));
   const secondColor = useObservable(configService.watch<string>("second-color"));
   const sessionExist = useObservable(authService.sessionExist$);
-  const t = useTranslation();
 
   const themeItem: RadioItem[] = [
-    {id: 0, text: "Dark", value: "dark" as ThemeConfig},
-    {id: 1, text: "Light", value: "light" as ThemeConfig},
-    {id: 3, text: "Operating System", value: "os" as ThemeConfig}
+    {id: 0, text: "pages.settings.appearance.themes.dark", value: "dark" as ThemeConfig},
+    {id: 1, text: "pages.settings.appearance.themes.light", value: "light" as ThemeConfig},
+    {id: 3, text: "pages.settings.appearance.themes.os", value: "os" as ThemeConfig}
   ];
 
   const languagesItems: RadioItem[] = i18nService.getSupportedLanguages().map((l, index) => {
-    return {id: index, text: t(`pages.settings.languages.${l}`), value: l, textIcon:t(`pages.settings.languages.translated.${l}`), icon: `${l}-flag` as BsmIconType};
+    return {id: index, text: `pages.settings.language.languages.${l}`, value: l, textIcon:`pages.settings.language.languages.translated.${l}`, icon: `${l}-flag` as BsmIconType};
   }).sort((a, b) => a.text.localeCompare(b.text));
 
   const[themeIdSelected, setThemeIdSelected]= useState(themeItem.find(e => e.value === themeService.getTheme()).id);
@@ -106,33 +105,33 @@ export function SettingsPage() {
   return (
     <div className="w-full h-full flex justify-center overflow-y-scroll pb-12 scrollbar-thin scrollbar-thumb-neutral-900 text-gray-800 dark:text-gray-200">
 
-      <div className="w-fit max-w-full mt-10">
+      <div className="max-w-2xl w-full mt-10">
 
-        <SettingContainer title="Steam" description="If you logout of your Steam account, you must reconect for download a new BS instance">
-          <BsmButton onClick={deleteSteamSession} className={`bg-red-500 w-fit px-3 py-[2px] text-white rounded-md`} withBar={false} text="Logout of Steam" disabled={!sessionExist}/>
+        <SettingContainer title="pages.settings.steam.title" description="pages.settings.steam.description">
+          <BsmButton onClick={deleteSteamSession} className={`bg-red-500 w-fit px-3 py-[2px] text-white rounded-md`} withBar={false} text="pages.settings.steam.logout" disabled={!sessionExist}/>
         </SettingContainer>
 
-        <SettingContainer title="Appearance" description="Choose the two primary colors of BSManager">
+        <SettingContainer title="pages.settings.appearance.title" description="pages.settings.appearance.description">
           <div className="relative w-full h-8 bg-light-main-color-1 dark:bg-main-color-1 flex justify-center rounded-md py-1">
             <SettingColorChooser color={firstColor} onChange={setFirstColorSetting}/>
             <SettingColorChooser color={secondColor} onChange={setSecondColorSetting}/>
             <div className="absolute right-2 top-0 h-full flex items-center">
-              <BsmButton onClick={resetColors} className="px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="Reset" withBar={false}/>
+              <BsmButton onClick={resetColors} className="px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="pages.settings.appearance.reset" withBar={false}/>
             </div>
           </div>
-          <SettingContainer minorTitle="Theme" className="mt-3">
+          <SettingContainer minorTitle="pages.settings.appearance.sub-title" className="mt-3">
             <SettingRadioArray items={themeItem} selectedItem={themeIdSelected} onItemSelected={handleChangeTheme}/>
           </SettingContainer>
         </SettingContainer>
 
-        <SettingContainer title="Installation Folder" description="Change the default installation directory for Beat Saber instances, and other upcoming features.">
+        <SettingContainer title="pages.settings.installation-folder.title" description="pages.settings.installation-folder.description">
         <div className="relative flex items-center justify-between w-full h-8 bg-light-main-color-1 dark:bg-main-color-1 rounded-md pl-2 py-1">
           <span className="block text-ellipsis overflow-hidden min-w-0" title={installationFolder}>{installationFolder}</span>
-          <BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="Choose Folder" withBar={false}/>
+          <BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="pages.settings.installation-folder.choose-folder" withBar={false}/>
         </div>
         </SettingContainer>
 
-        <SettingContainer title="Language" description="Select a language">
+        <SettingContainer title="pages.settings.language.title" description="pages.settings.language.description">
           <SettingRadioArray items={languagesItems} selectedItem={languageSelected} onItemSelected={handleChangeLanguage}/>
         </SettingContainer>