diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index f8f0a98c..0a94ef78 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,8 +1,5 @@
 {
   "permissions": {
-    "allow": [
-      "Bash(perl -i -pe:*)",
-      "Bash(bun run:*)"
-    ]
+    "allow": ["Bash(perl -i -pe:*)", "Bash(bun run:*)"]
   }
 }
diff --git a/src/components/Elements/AddModal/AddModal.jsx b/src/components/Elements/AddModal/AddModal.jsx
index d506d7a5..5bf506f5 100644
--- a/src/components/Elements/AddModal/AddModal.jsx
+++ b/src/components/Elements/AddModal/AddModal.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 
 import { useState, memo, useEffect } from 'react';
 import { MdAddLink, MdClose } from 'react-icons/md';
@@ -10,6 +10,7 @@ import { IconService } from 'utils/quicklinks';
 import './AddModal.scss';
 
 function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
+  const t = useT();
   const [name, setName] = useState(edit ? editData.name : '');
   const [url, setUrl] = useState(edit ? editData.url : '');
   const [icon, setIcon] = useState(edit ? editData.icon : '');
@@ -102,11 +103,9 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
     <div className="addLinkModal" onKeyDown={handleKeyDown}>
       <div className="shareHeader">
         <span className="title">
-          {edit
-            ? variables.getMessage('widgets.quicklinks.edit')
-            : variables.getMessage('widgets.quicklinks.new')}
+          {edit ? t('widgets.quicklinks.edit') : t('widgets.quicklinks.new')}
         </span>
-        <Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
+        <Tooltip title={t('modals.welcome.buttons.close')}>
           <div className="close" onClick={() => closeModal()}>
             <MdClose />
           </div>
@@ -116,12 +115,10 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
         <div className="addLinkModal-row">
           <div className="addLinkModal-field">
             <div className="addLinkModal-labelRow">
-              <label className="addLinkModal-label">
-                {variables.getMessage('widgets.quicklinks.name')}
-              </label>
+              <label className="addLinkModal-label">{t('widgets.quicklinks.name')}</label>
               {suggestedName && !name && (
                 <span className="addLinkModal-suggestedText">
-                  {variables.getMessage('widgets.quicklinks.suggested', { name: suggestedName })}
+                  {t('widgets.quicklinks.suggested', { name: suggestedName })}
                 </span>
               )}
             </div>
@@ -130,12 +127,12 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
               name="quicklink_modal_name"
               noSetting={true}
               onChange={(value) => setName(value)}
-              placeholder={suggestedName || variables.getMessage('widgets.quicklinks.name_placeholder')}
+              placeholder={suggestedName || t('widgets.quicklinks.name_placeholder')}
             />
           </div>
           <div className="addLinkModal-field">
             <label className="addLinkModal-label">
-              {variables.getMessage('widgets.quicklinks.url')}
+              {t('widgets.quicklinks.url')}
               <span className="addLinkModal-required">*</span>
             </label>
             <Text
@@ -149,23 +146,23 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
                 }
                 setUrl(finalValue);
               }}
-              placeholder={variables.getMessage('widgets.quicklinks.url_placeholder')}
+              placeholder={t('widgets.quicklinks.url_placeholder')}
             />
           </div>
         </div>
 
         <div className="addLinkModal-dropdownWrapper">
           <Dropdown
-            label={variables.getMessage('widgets.quicklinks.icon_type_label')}
+            label={t('widgets.quicklinks.icon_type_label')}
             name="quicklink_modal_iconType"
             noSetting={true}
             onChange={(value) => setIconType(value)}
             items={[
-              { value: 'auto', text: variables.getMessage('widgets.quicklinks.icon_type_auto') },
-              { value: 'custom_url', text: variables.getMessage('widgets.quicklinks.icon_type_custom_url') },
-              { value: 'custom_upload', text: variables.getMessage('widgets.quicklinks.icon_type_upload') },
-              { value: 'emoji', text: variables.getMessage('widgets.quicklinks.icon_type_emoji') },
-              { value: 'letter', text: variables.getMessage('widgets.quicklinks.icon_type_letter') },
+              { value: 'auto', text: t('widgets.quicklinks.icon_type_auto') },
+              { value: 'custom_url', text: t('widgets.quicklinks.icon_type_custom_url') },
+              { value: 'custom_upload', text: t('widgets.quicklinks.icon_type_upload') },
+              { value: 'emoji', text: t('widgets.quicklinks.icon_type_emoji') },
+              { value: 'letter', text: t('widgets.quicklinks.icon_type_letter') },
             ]}
           />
         </div>
@@ -177,7 +174,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
               name="quicklink_modal_icon_url"
               noSetting={true}
               onChange={(value) => setIcon(value)}
-              placeholder={variables.getMessage('widgets.quicklinks.icon_url_placeholder')}
+              placeholder={t('widgets.quicklinks.icon_url_placeholder')}
             />
           </div>
         )}
@@ -192,7 +189,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
             {iconPreview && (
               <img
                 src={iconPreview}
-                alt={variables.getMessage('common.alt_text.preview')}
+                alt={t('common.alt_text.preview')}
                 style={{ width: '40px', height: '40px', marginTop: '8px', borderRadius: '4px' }}
               />
             )}
@@ -224,9 +221,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
           onClick={handleSubmit}
           icon={<MdAddLink />}
           label={
-            edit
-              ? variables.getMessage('modals.main.settings.sections.quicklinks.edit')
-              : variables.getMessage('widgets.quicklinks.add')
+            edit ? t('modals.main.settings.sections.quicklinks.edit') : t('widgets.quicklinks.add')
           }
         />
       </div>
diff --git a/src/components/Elements/MainModal/Main.jsx b/src/components/Elements/MainModal/Main.jsx
index f0c3a0a5..93b5da2d 100644
--- a/src/components/Elements/MainModal/Main.jsx
+++ b/src/components/Elements/MainModal/Main.jsx
@@ -1,5 +1,5 @@
 import { Suspense, lazy, useState, memo, useEffect } from 'react';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 
 import './scss/index.scss';
 import ModalLoader from './components/ModalLoader';
@@ -18,6 +18,7 @@ const TAB_COMPONENTS = {
 };
 
 function MainModal({ modalClose, deepLinkData }) {
+  const t = useT();
   const initialTab = deepLinkData?.tab || TAB_TYPES.SETTINGS;
   const [currentTab, setCurrentTab] = useState(initialTab);
   const [currentSection, setCurrentSection] = useState('');
@@ -141,11 +142,11 @@ function MainModal({ modalClose, deepLinkData }) {
     setCurrentSubSection(null);
     if (currentTab === TAB_TYPES.DISCOVER) {
       const sectionMap = {
-        [variables.getMessage('modals.main.marketplace.all')]: 'all',
-        [variables.getMessage('modals.main.marketplace.photo_packs')]: 'photo_packs',
-        [variables.getMessage('modals.main.marketplace.quote_packs')]: 'quote_packs',
-        [variables.getMessage('modals.main.marketplace.preset_settings')]: 'preset_settings',
-        [variables.getMessage('modals.main.marketplace.collections')]: 'collections',
+        [t('modals.main.marketplace.all')]: 'all',
+        [t('modals.main.marketplace.photo_packs')]: 'photo_packs',
+        [t('modals.main.marketplace.quote_packs')]: 'quote_packs',
+        [t('modals.main.marketplace.preset_settings')]: 'preset_settings',
+        [t('modals.main.marketplace.collections')]: 'collections',
       };
       const sectionKey = sectionMap[section];
       if (sectionKey) {
diff --git a/src/components/Elements/MainModal/components/ModalLoader.jsx b/src/components/Elements/MainModal/components/ModalLoader.jsx
index 7241ff03..a01ea51e 100644
--- a/src/components/Elements/MainModal/components/ModalLoader.jsx
+++ b/src/components/Elements/MainModal/components/ModalLoader.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import SidebarSkeleton from './SidebarSkeleton';
 
 const ModalLoader = ({ currentTab }) => (
@@ -11,7 +11,7 @@ const ModalLoader = ({ currentTab }) => (
         <div className="emptyMessage">
           <div className="loaderHolder">
             <div id="loader"></div>
-            <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
+            <span className="subtitle">{t('modals.main.loading')}</span>
           </div>
         </div>
       </div>
diff --git a/src/components/Elements/MainModal/components/ModalTopBar.jsx b/src/components/Elements/MainModal/components/ModalTopBar.jsx
index f24c3910..e281a90e 100644
--- a/src/components/Elements/MainModal/components/ModalTopBar.jsx
+++ b/src/components/Elements/MainModal/components/ModalTopBar.jsx
@@ -131,8 +131,7 @@ function ModalTopBar({
                     if (typeParam) {
                       updateHash(`#discover/${typeParam}`);
                     }
-                  }
-                  else if (href.includes('/collections')) {
+                  } else if (href.includes('/collections')) {
                     updateHash('#discover/collections');
                   } else if (href.includes('/collection/')) {
                     const collectionId = href.split('/collection/')[1]?.split('?')[0];
@@ -143,8 +142,7 @@ function ModalTopBar({
                     updateHash(`#discover/${categoryKey}`);
                   } else if (href === '/marketplace' || href === '/marketplace/') {
                     updateHash('#discover/all');
-                  }
-                  else {
+                  } else {
                     const stepsBack = relevantCrumbs.length - index - 1;
                     for (let i = 0; i < stepsBack; i++) {
                       window.history.back();
diff --git a/src/components/Elements/MainModal/components/ReminderInfo.jsx b/src/components/Elements/MainModal/components/ReminderInfo.jsx
index f652173b..0d210804 100644
--- a/src/components/Elements/MainModal/components/ReminderInfo.jsx
+++ b/src/components/Elements/MainModal/components/ReminderInfo.jsx
@@ -1,7 +1,8 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { MdRefresh, MdClose } from 'react-icons/md';
 
 const ReminderInfo = ({ isVisible, onHide }) => {
+  const t = useT();
   if (!isVisible) {
     return null;
   }
@@ -9,17 +10,15 @@ const ReminderInfo = ({ isVisible, onHide }) => {
   return (
     <div className="reminder-info">
       <div className="shareHeader">
-        <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
+        <span className="title">{t('modals.main.settings.reminder.title')}</span>
         <span className="closeModal" onClick={onHide}>
           <MdClose />
         </span>
       </div>
-      <span className="subtitle">
-        {variables.getMessage('modals.main.settings.reminder.message')}
-      </span>
+      <span className="subtitle">{t('modals.main.settings.reminder.message')}</span>
       <button onClick={() => window.location.reload()}>
         <MdRefresh />
-        {variables.getMessage('modals.main.error_boundary.refresh')}
+        {t('modals.main.error_boundary.refresh')}
       </button>
     </div>
   );
diff --git a/src/components/Elements/MainModal/constants/tabConfig.js b/src/components/Elements/MainModal/constants/tabConfig.js
index 547cbc2a..6ca36c83 100644
--- a/src/components/Elements/MainModal/constants/tabConfig.js
+++ b/src/components/Elements/MainModal/constants/tabConfig.js
@@ -1,3 +1,4 @@
+import variables from 'config/variables';
 import {
   MdTune,
   MdBookmarks,
diff --git a/src/components/Elements/ResetModal/ResetModal.jsx b/src/components/Elements/ResetModal/ResetModal.jsx
index bdeeb816..56005698 100644
--- a/src/components/Elements/ResetModal/ResetModal.jsx
+++ b/src/components/Elements/ResetModal/ResetModal.jsx
@@ -1,10 +1,12 @@
 import { memo } from 'react';
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { MdClose, MdRestartAlt } from 'react-icons/md';
 import { setDefaultSettings } from 'utils/settings';
 import { Tooltip, Button } from 'components/Elements';
 
 function ResetModal({ modalClose }) {
+  const t = useT();
   const reset = () => {
     variables.stats.postEvent('setting', 'Reset');
     setDefaultSettings('reset');
@@ -15,34 +17,32 @@ function ResetModal({ modalClose }) {
     <div className="smallModal">
       <div className="shareHeader">
         <span className="title">
-          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')}
+          {t('modals.main.settings.sections.advanced.reset_modal.title')}
         </span>
-        <Tooltip
-          title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={t('modals.main.settings.sections.advanced.reset_modal.cancel')}>
           <div className="close" onClick={modalClose}>
             <MdClose />
           </div>
         </Tooltip>
       </div>
       <span className="title">
-        {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.question')}
+        {t('modals.main.settings.sections.advanced.reset_modal.question')}
       </span>
       <span className="subtitle">
-        {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.information')}
+        {t('modals.main.settings.sections.advanced.reset_modal.information')}
       </span>
       <div className="resetFooter">
         <Button
           type="secondary"
           onClick={modalClose}
           icon={<MdClose />}
-          label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+          label={t('modals.main.settings.sections.advanced.reset_modal.cancel')}
         />
         <Button
           type="settings"
           onClick={() => reset()}
           icon={<MdRestartAlt />}
-          label={variables.getMessage('modals.main.settings.buttons.reset')}
+          label={t('modals.main.settings.buttons.reset')}
         />
       </div>
     </div>
diff --git a/src/components/Elements/ShareModal/ShareModal.jsx b/src/components/Elements/ShareModal/ShareModal.jsx
index 94f270ce..e2c2fdb7 100644
--- a/src/components/Elements/ShareModal/ShareModal.jsx
+++ b/src/components/Elements/ShareModal/ShareModal.jsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { MdClose, MdEmail, MdContentCopy } from 'react-icons/md';
 import { FaFacebookF } from 'react-icons/fa';
 import { AiFillWechat } from 'react-icons/ai';
@@ -12,37 +12,34 @@ import { Button } from 'components/Elements';
 import './sharemodal.scss';
 
 function ShareModal({ modalClose, data }) {
+  const t = useT();
   if (data.startsWith('https://cdn.')) {
     data = {
       url: data,
-      name: variables.getMessage('modals.share.item_type.image'),
+      name: t('modals.share.item_type.image'),
     };
   } else if (data.startsWith('"')) {
     data = {
       url: data,
-      name: variables.getMessage('modals.share.item_type.quote'),
+      name: t('modals.share.item_type.quote'),
     };
   } else {
     data = {
       url: data,
-      name: variables.getMessage('modals.share.item_type.marketplace_item'),
+      name: t('modals.share.item_type.marketplace_item'),
     };
   }
 
   const copyLink = () => {
     navigator.clipboard.writeText(data.url);
-    toast(
-      data.startsWith('"')
-        ? variables.getMessage('toasts.quote')
-        : variables.getMessage('toasts.link_copied'),
-    );
+    toast(data.startsWith('"') ? t('toasts.quote') : t('toasts.link_copied'));
   };
 
   return (
     <div className="smallModal">
       <div className="shareHeader">
-        <span className="title">{variables.getMessage('widgets.quote.share')}</span>
-        <Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
+        <span className="title">{t('widgets.quote.share')}</span>
+        <Tooltip title={t('modals.welcome.buttons.close')}>
           <div className="close" onClick={modalClose}>
             <MdClose />
           </div>
@@ -53,13 +50,13 @@ function ShareModal({ modalClose, data }) {
           onClick={() =>
             window
               .open(
-                `https://x.com/intent/tweet?text=${variables.getMessage('modals.share.twitter_message', { name: data.name })}: ${data.url}`,
+                `https://x.com/intent/tweet?text=${t('modals.share.twitter_message', { name: data.name })}: ${data.url}`,
                 '_blank',
               )
               .focus()
           }
           icon={<SiX />}
-          tooltipTitle={variables.getMessage('modals.share.social.twitter')}
+          tooltipTitle={t('modals.share.social.twitter')}
           type="icon"
         />
         <Button
@@ -69,20 +66,20 @@ function ShareModal({ modalClose, data }) {
               .focus()
           }
           icon={<FaFacebookF />}
-          tooltipTitle={variables.getMessage('modals.share.social.facebook')}
+          tooltipTitle={t('modals.share.social.facebook')}
           type="icon"
         />
         <Button
           onClick={() =>
             window
               .open(
-                `mailto:email@example.com?subject=${encodeURIComponent(variables.getMessage('modals.share.email_subject'))}&body=${encodeURIComponent(variables.getMessage('modals.share.email_body', { name: data.name, url: data.url }))}`,
+                `mailto:email@example.com?subject=${encodeURIComponent(t('modals.share.email_subject'))}&body=${encodeURIComponent(t('modals.share.email_body', { name: data.name, url: data.url }))}`,
                 '_blank',
               )
               .focus()
           }
           icon={<MdEmail />}
-          tooltipTitle={variables.getMessage('modals.share.social.email')}
+          tooltipTitle={t('modals.share.social.email')}
           type="icon"
         />
         <Button
@@ -95,7 +92,7 @@ function ShareModal({ modalClose, data }) {
               .focus()
           }
           icon={<AiFillWechat />}
-          tooltipTitle={variables.getMessage('modals.share.social.wechat')}
+          tooltipTitle={t('modals.share.social.wechat')}
           type="icon"
         />
         <Button
@@ -105,7 +102,7 @@ function ShareModal({ modalClose, data }) {
               .focus()
           }
           icon={<SiTencentqq />}
-          tooltipTitle={variables.getMessage('modals.share.social.qq')}
+          tooltipTitle={t('modals.share.social.qq')}
           type="icon"
         />
       </div>
@@ -114,7 +111,7 @@ function ShareModal({ modalClose, data }) {
         <Button
           onClick={() => copyLink()}
           icon={<MdContentCopy />}
-          tooltipTitle={variables.getMessage('modals.share.copy_link')}
+          tooltipTitle={t('modals.share.copy_link')}
           type="icon"
         />
       </div>
diff --git a/src/components/Form/Settings/Dropdown/Dropdown.jsx b/src/components/Form/Settings/Dropdown/Dropdown.jsx
index 73fc0028..7ef3dead 100644
--- a/src/components/Form/Settings/Dropdown/Dropdown.jsx
+++ b/src/components/Form/Settings/Dropdown/Dropdown.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { memo, useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
@@ -33,6 +34,7 @@ const Dropdown = memo((props) => {
 
   useEffect(() => {
     const handleClickOutside = (event) => {
+      const t = useT();
       if (
         containerRef.current &&
         !containerRef.current.contains(event.target) &&
@@ -155,7 +157,7 @@ const Dropdown = memo((props) => {
 
   const onChange = useCallback(
     (newValue) => {
-      if (newValue === variables.getMessage('modals.main.loading')) {
+      if (newValue === t('modals.main.loading')) {
         return;
       }
 
@@ -238,7 +240,7 @@ const Dropdown = memo((props) => {
       e?.stopPropagation();
       const defaultValue = props.default || props.items[0]?.value;
       onChange(defaultValue);
-      toast(variables.getMessage('toasts.reset'));
+      toast(t('toasts.reset'));
     },
     [onChange, props.default, props.items],
   );
@@ -281,7 +283,7 @@ const Dropdown = memo((props) => {
           <label className="dropdown-label">{label}</label>
           <span className="dropdown-reset" onClick={resetItem}>
             <MdRefresh />
-            {variables.getMessage('modals.main.settings.buttons.reset')}
+            {t('modals.main.settings.buttons.reset')}
           </span>
         </div>
       )}
@@ -369,7 +371,7 @@ const Dropdown = memo((props) => {
                     {item.value === defaultValue && (
                       <span className="dropdown-option-default">
                         {' '}
-                        ({variables.getMessage('modals.main.settings.buttons.default')})
+                        ({t('modals.main.settings.buttons.default')})
                       </span>
                     )}
                   </span>
diff --git a/src/components/Form/Settings/FileUpload/FileUpload.jsx b/src/components/Form/Settings/FileUpload/FileUpload.jsx
index 11571285..e9f54dbc 100644
--- a/src/components/Form/Settings/FileUpload/FileUpload.jsx
+++ b/src/components/Form/Settings/FileUpload/FileUpload.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { memo, useEffect } from 'react';
 import { toast } from 'react-toastify';
 import { compressAccurately, filetoDataURL } from 'image-conversion';
@@ -12,6 +12,7 @@ const FileUpload = memo(({ id, type, accept, loadFunction, multiple }) => {
     }
 
     const handleChange = (e) => {
+      const t = useT();
       const files = Array.from(e.target.files);
 
       if (type === 'settings') {
@@ -36,7 +37,7 @@ const FileUpload = memo(({ id, type, accept, loadFunction, multiple }) => {
           files.forEach((file, index) => {
             if (videoCheck(file.type) === true) {
               if (settingsSize + file.size > 4850000) {
-                return toast(variables.getMessage('toasts.no_storage'));
+                return toast(t('toasts.no_storage'));
               }
 
               return loadFunction(file, index);
@@ -47,7 +48,7 @@ const FileUpload = memo(({ id, type, accept, loadFunction, multiple }) => {
               accuracy: 0.9,
             }).then(async (res) => {
               if (settingsSize + res.size > 4850000) {
-                return toast(variables.getMessage('toasts.no_storage'));
+                return toast(t('toasts.no_storage'));
               }
 
               loadFunction(
diff --git a/src/components/Form/Settings/LocationSearch/LocationSearch.jsx b/src/components/Form/Settings/LocationSearch/LocationSearch.jsx
index 080eb2dd..2b27160a 100644
--- a/src/components/Form/Settings/LocationSearch/LocationSearch.jsx
+++ b/src/components/Form/Settings/LocationSearch/LocationSearch.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { memo, useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
@@ -51,6 +52,7 @@ const LocationSearch = memo((props) => {
 
   useEffect(() => {
     const handleClickOutside = (event) => {
+      const t = useT();
       if (
         containerRef.current &&
         !containerRef.current.contains(event.target) &&
@@ -219,7 +221,7 @@ const LocationSearch = memo((props) => {
   );
 
   const handleAutoLocation = useCallback(() => {
-    setSearchQuery(variables.getMessage('modals.main.loading'));
+    setSearchQuery(t('modals.main.loading'));
     setSuggestions([]);
 
     navigator.geolocation.getCurrentPosition(
@@ -334,7 +336,7 @@ const LocationSearch = memo((props) => {
           <label className="location-search-label">{label}</label>
           <span className="location-search-auto" onClick={handleAutoLocation}>
             <MdMyLocation />
-            {variables.getMessage('modals.main.settings.sections.weather.auto')}
+            {t('modals.main.settings.sections.weather.auto')}
           </span>
         </div>
       )}
@@ -408,12 +410,10 @@ const LocationSearch = memo((props) => {
                 </div>
               ))
             ) : searchQuery.length >= 2 && !loading ? (
-              <div className="location-search-empty">
-                {variables.getMessage('widgets.weather.not_found')}
-              </div>
+              <div className="location-search-empty">{t('widgets.weather.not_found')}</div>
             ) : searchQuery.length < 2 && searchQuery.length > 0 ? (
               <div className="location-search-empty">
-                {variables.getMessage('modals.main.settings.sections.weather.location')}...
+                {t('modals.main.settings.sections.weather.location')}...
               </div>
             ) : null}
           </div>,
diff --git a/src/components/Form/Settings/Slider/Slider.jsx b/src/components/Form/Settings/Slider/Slider.jsx
index 32a89474..cc21be78 100644
--- a/src/components/Form/Settings/Slider/Slider.jsx
+++ b/src/components/Form/Settings/Slider/Slider.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { memo, useState, useCallback, useRef } from 'react';
 import { toast } from 'react-toastify';
 import { MdRefresh } from 'react-icons/md';
@@ -53,6 +53,7 @@ const SliderComponent = memo((props) => {
     const startTime = performance.now();
 
     const animate = (currentTime) => {
+      const t = useT();
       const elapsed = currentTime - startTime;
       const progress = Math.min(elapsed / duration, 1);
 
@@ -75,7 +76,7 @@ const SliderComponent = memo((props) => {
     };
 
     animationRef.current = requestAnimationFrame(animate);
-    toast(variables.getMessage('toasts.reset'));
+    toast(t('toasts.reset'));
   }, [value, props]);
 
   const handleMouseMove = useCallback(
@@ -111,7 +112,7 @@ const SliderComponent = memo((props) => {
         <span className="slider-value">{Number(value)}</span>
         <span className="slider-reset" onClick={resetItem}>
           <MdRefresh />
-          {variables.getMessage('modals.main.settings.buttons.reset')}
+          {t('modals.main.settings.buttons.reset')}
         </span>
       </div>
       <div className="slider-wrapper" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
diff --git a/src/components/Form/Settings/Text/Text.jsx b/src/components/Form/Settings/Text/Text.jsx
index 86113c2a..08b38984 100644
--- a/src/components/Form/Settings/Text/Text.jsx
+++ b/src/components/Form/Settings/Text/Text.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { memo, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { MdRefresh } from 'react-icons/md';
@@ -8,6 +8,7 @@ import EventBus from 'utils/eventbus';
 import './Text.scss';
 
 const Text = memo((props) => {
+  const t = useT();
   const {
     name,
     upperCaseFirst,
@@ -55,7 +56,7 @@ const Text = memo((props) => {
         value: defaultValue || '',
       },
     });
-    toast(variables.getMessage('toasts.reset'));
+    toast(t('toasts.reset'));
   }, [handleChange, defaultValue]);
 
   return (
@@ -67,7 +68,7 @@ const Text = memo((props) => {
               <label className="text-field-label">{title}</label>
               <span className="text-field-reset" onClick={resetItem}>
                 <MdRefresh />
-                {variables.getMessage('modals.main.settings.buttons.reset')}
+                {t('modals.main.settings.buttons.reset')}
               </span>
             </div>
           )}
@@ -86,7 +87,7 @@ const Text = memo((props) => {
               <label className="text-field-label">{title}</label>
               <span className="text-field-reset" onClick={resetItem}>
                 <MdRefresh />
-                {variables.getMessage('modals.main.settings.buttons.reset')}
+                {t('modals.main.settings.buttons.reset')}
               </span>
             </div>
           )}
diff --git a/src/components/Layout/Settings/Header/Header.jsx b/src/components/Layout/Settings/Header/Header.jsx
index bad40688..f0805176 100644
--- a/src/components/Layout/Settings/Header/Header.jsx
+++ b/src/components/Layout/Settings/Header/Header.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { useState, useEffect } from 'react';
 import {
@@ -14,6 +15,7 @@ export const CustomActions = ({ children }) => {
 };
 
 function Header(props) {
+  const t = useT();
   const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true');
 
   useEffect(() => {
@@ -62,7 +64,7 @@ function Header(props) {
           window.open(variables.constants.BUG_REPORT + props.title.split(' ').join('+'), '_blank')
         }
         icon={<MdFlag />}
-        label={variables.getMessage('modals.main.settings.sections.header.report_issue')}
+        label={t('modals.main.settings.sections.header.report_issue')}
       />
     );
   };
diff --git a/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx b/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
index 1b0bfa21..cb2e5af7 100644
--- a/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
+++ b/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import Slider from '../../../Form/Settings/Slider/Slider';
 
 import values from 'utils/data/slider_values.json';
 import EventBus from 'utils/eventbus';
 
 const PreferencesWrapper = ({ children, ...props }) => {
+  const t = useT();
   const [shown, setShown] = useState(localStorage.getItem(props.setting) === 'true');
 
   EventBus.on('toggle', (setting) => {
@@ -20,10 +21,8 @@ const PreferencesWrapper = ({ children, ...props }) => {
       {props.zoomSetting && (
         <Row>
           <Content
-            title={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.widget_zoom',
-            )}
-            subtitle={variables.getMessage('modals.main.settings.sections.header.size')}
+            title={t('modals.main.settings.sections.appearance.accessibility.widget_zoom')}
+            subtitle={t('modals.main.settings.sections.header.size')}
           />
           <Action>
             <Slider
diff --git a/src/features/background/api/backgroundLoader.js b/src/features/background/api/backgroundLoader.js
index 63a7c68c..5439fb8d 100644
--- a/src/features/background/api/backgroundLoader.js
+++ b/src/features/background/api/backgroundLoader.js
@@ -89,7 +89,9 @@ async function getAPIBackground(isOffline) {
     data = await fetchAPIImageData();
   }
 
-  if (!data) {return getOfflineImage('api');}
+  if (!data) {
+    return getOfflineImage('api');
+  }
 
   try {
     localStorage.setItem('currentBackground', JSON.stringify(data));
diff --git a/src/features/background/api/photoPackAPI.js b/src/features/background/api/photoPackAPI.js
index 2e4640ee..0eb63707 100644
--- a/src/features/background/api/photoPackAPI.js
+++ b/src/features/background/api/photoPackAPI.js
@@ -49,7 +49,9 @@ const responseParser = {
     return {
       photographer: info.photo?.owner?.realname || info.photo?.owner?.username || 'Unknown',
       location: info.photo?.title?._content || photo.title || 'Unknown',
-      url: { default: `https://live.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}_b.jpg` },
+      url: {
+        default: `https://live.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}_b.jpg`,
+      },
       blur_hash: null,
       colour: null,
       photo_page: `https://www.flickr.com/photos/${photo.owner}/${photo.id}/`,
@@ -121,12 +123,12 @@ export async function fetchFromProvider(packId, pack, settings) {
           params.append('tags', settings[`photoPack_${packId}_tags`] || 'landscape');
           const license = settings[`photoPack_${packId}_license`] || 'all';
           const licenseMap = {
-            'all': '1,2,3,4,5,6,7,8,9,10',
-            'cc_by': '4',
-            'cc_by_sa': '5',
-            'cc_by_nc': '2',
-            'cc_by_nd': '6',
-            'cc0': '9,10',
+            all: '1,2,3,4,5,6,7,8,9,10',
+            cc_by: '4',
+            cc_by_sa: '5',
+            cc_by_nc: '2',
+            cc_by_nd: '6',
+            cc0: '9,10',
           };
           params.append('license', licenseMap[license] || licenseMap['all']);
           params.append('sort', 'interestingness-desc');
@@ -164,7 +166,6 @@ export async function fetchFromProvider(packId, pack, settings) {
 
     const parser = responseParser[pack.api_provider] || responseParser.default;
     return await parser(data, params, apiKey ? atob(apiKey) : null);
-
   } catch (error) {
     console.error(`Fetch from ${pack.api_provider} failed:`, error);
     return null;
@@ -258,9 +259,7 @@ export async function checkAndRefreshAPIPacks() {
       : DEFAULT_CACHE_REFRESH_INTERVAL;
 
     const needsRefresh =
-      !cached ||
-      Date.now() - cached.last_fetched > refreshInterval ||
-      cached.photos.length < 3;
+      !cached || Date.now() - cached.last_fetched > refreshInterval || cached.photos.length < 3;
 
     if (needsRefresh) {
       refreshAPIPackCache(packId).catch((error) => {
diff --git a/src/features/background/components/BackgroundImage.jsx b/src/features/background/components/BackgroundImage.jsx
index 71a52fc0..9484c4e4 100644
--- a/src/features/background/components/BackgroundImage.jsx
+++ b/src/features/background/components/BackgroundImage.jsx
@@ -1,6 +1,6 @@
 import { memo, useState, useEffect } from 'react';
+import { useT } from 'contexts';
 import PhotoInformation from './PhotoInformation';
-import variables from 'config/variables';
 import { updateHash } from 'utils/deepLinking';
 import EventBus from 'utils/eventbus';
 import { getAllBackgrounds } from 'utils/customBackgroundDB';
@@ -9,6 +9,7 @@ import { getAllBackgrounds } from 'utils/customBackgroundDB';
  * BackgroundImage component for rendering image backgrounds
  */
 function BackgroundImage({ photoInfo, currentAPI, url }) {
+  const t = useT();
   const isCustomType = localStorage.getItem('backgroundType') === 'custom';
   const [customBackgrounds, setCustomBackgrounds] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -55,10 +56,10 @@ function BackgroundImage({ photoInfo, currentAPI, url }) {
           }}
         >
           <h2 style={{ margin: '0 0 10px 0', fontSize: '20px' }}>
-            {variables.getMessage('widgets.background.no_images_title') || 'No Custom Images'}
+            {t('widgets.background.no_images_title') || 'No Custom Images'}
           </h2>
           <p style={{ margin: '0 0 15px 0', fontSize: '14px', opacity: 0.9 }}>
-            {variables.getMessage('widgets.background.no_images_description') ||
+            {t('widgets.background.no_images_description') ||
               'Please add custom images in the Background settings'}
           </p>
           <button
@@ -81,7 +82,7 @@ function BackgroundImage({ photoInfo, currentAPI, url }) {
               e.target.style.background = 'rgba(255, 255, 255, 0.2)';
             }}
           >
-            {variables.getMessage('widgets.background.add_images_button') || 'Add Images'}
+            {t('widgets.background.add_images_button') || 'Add Images'}
           </button>
         </div>
       )}
diff --git a/src/features/background/components/ExcludeModal.jsx b/src/features/background/components/ExcludeModal.jsx
index f7a921db..8f7dc728 100644
--- a/src/features/background/components/ExcludeModal.jsx
+++ b/src/features/background/components/ExcludeModal.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { memo } from 'react';
 import EventBus from 'utils/eventbus';
 import { Tooltip, Button } from 'components/Elements';
@@ -6,6 +6,7 @@ import { Tooltip, Button } from 'components/Elements';
 import { MdClose, MdDone } from 'react-icons/md';
 
 function ExcludeModal({ modalClose, info }) {
+  const t = useT();
   const excludeImage = async () => {
     let backgroundExclude = JSON.parse(localStorage.getItem('backgroundExclude'));
     backgroundExclude.push(info.pun);
@@ -19,31 +20,29 @@ function ExcludeModal({ modalClose, info }) {
     <div className="smallModal">
       <div className="shareHeader">
         <span className="title">
-          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')}
+          {t('modals.main.settings.sections.advanced.reset_modal.title')}
         </span>
-        <Tooltip
-          title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={t('modals.main.settings.sections.advanced.reset_modal.cancel')}>
           <div className="close" onClick={modalClose}>
             <MdClose />
           </div>
         </Tooltip>
       </div>
       <span className="subtitle">
-        {variables.getMessage('widgets.background.exclude_confirm', { category: info.category })}
+        {t('widgets.background.exclude_confirm', { category: info.category })}
       </span>
       <div className="resetFooter">
         <Button
           type="secondary"
           onClick={modalClose}
           icon={<MdClose />}
-          label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+          label={t('modals.main.settings.sections.advanced.reset_modal.cancel')}
         />
         <Button
           type="settings"
           onClick={() => excludeImage()}
           icon={<MdDone />}
-          label={variables.getMessage('widgets.background.confirm')}
+          label={t('widgets.background.confirm')}
         />
       </div>
     </div>
diff --git a/src/features/background/components/Favourite.jsx b/src/features/background/components/Favourite.jsx
index f8c43d95..4566d553 100644
--- a/src/features/background/components/Favourite.jsx
+++ b/src/features/background/components/Favourite.jsx
@@ -1,8 +1,10 @@
 import variables from 'config/variables';
+import { useT } from 'contexts';
 import { memo, useState, useCallback, useEffect, useRef } from 'react';
 import { MdStar, MdStarBorder } from 'react-icons/md';
 
 const Favourite = memo(({ tooltipText, credit, offline, pun }) => {
+  const t = useT();
   const getInitialButton = () => {
     return localStorage.getItem('favourite') ? 'favourited' : 'unfavourited';
   };
@@ -14,7 +16,7 @@ const Favourite = memo(({ tooltipText, credit, offline, pun }) => {
     if (localStorage.getItem('favourite')) {
       localStorage.removeItem('favourite');
       setFavourited('unfavourited');
-      tooltipText(variables.getMessage('widgets.quote.favourite'));
+      tooltipText(t('widgets.quote.favourite'));
       variables.stats.postEvent('feature', 'Background favourite');
     } else {
       const type = localStorage.getItem('backgroundType');
@@ -78,7 +80,7 @@ const Favourite = memo(({ tooltipText, credit, offline, pun }) => {
       }
 
       setFavourited('favourited');
-      tooltipText(variables.getMessage('widgets.quote.unfavourite'));
+      tooltipText(t('widgets.quote.unfavourite'));
       variables.stats.postEvent('feature', 'Background unfavourite');
     }
   }, [tooltipText, credit, offline, pun]);
@@ -87,8 +89,8 @@ const Favourite = memo(({ tooltipText, credit, offline, pun }) => {
     if (tooltipText) {
       tooltipText(
         localStorage.getItem('favourite')
-          ? variables.getMessage('widgets.quote.unfavourite')
-          : variables.getMessage('widgets.quote.favourite'),
+          ? t('widgets.quote.unfavourite')
+          : t('widgets.quote.favourite'),
       );
     }
   }, [tooltipText]);
diff --git a/src/features/background/components/PhotoInformation.jsx b/src/features/background/components/PhotoInformation.jsx
index 96e2721c..896642a9 100644
--- a/src/features/background/components/PhotoInformation.jsx
+++ b/src/features/background/components/PhotoInformation.jsx
@@ -134,7 +134,12 @@ function PhotoInformation({ info, url, api }) {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <img className="locationMap" src={tile} alt={t('common.alt_text.location')} draggable={false} />
+        <img
+          className="locationMap"
+          src={tile}
+          alt={t('common.alt_text.location')}
+          draggable={false}
+        />
       </a>
     );
   };
@@ -250,11 +255,9 @@ function PhotoInformation({ info, url, api }) {
       try {
         setPhotoMap(true);
         setMapIcon(false);
-      } catch {
-      }
+      } catch {}
     };
-  } catch {
-  }
+  } catch {}
 
   const widgetStyle = localStorage.getItem('widgetStyle');
 
diff --git a/src/features/background/hooks/useBackgroundEvents.js b/src/features/background/hooks/useBackgroundEvents.js
index 00508fd4..4c34981f 100644
--- a/src/features/background/hooks/useBackgroundEvents.js
+++ b/src/features/background/hooks/useBackgroundEvents.js
@@ -16,12 +16,16 @@ export function useBackgroundEvents(backgroundData, refreshBackground) {
 
       if (!isEnabled) {
         element?.style.setProperty('display', 'none');
-        if (!backgroundData.photoInfo?.hidden) {photoInfo?.style.setProperty('display', 'none');}
+        if (!backgroundData.photoInfo?.hidden) {
+          photoInfo?.style.setProperty('display', 'none');
+        }
         return;
       }
 
       element?.style.setProperty('display', 'block');
-      if (!backgroundData.photoInfo?.hidden) {photoInfo?.style.setProperty('display', 'flex');}
+      if (!backgroundData.photoInfo?.hidden) {
+        photoInfo?.style.setProperty('display', 'flex');
+      }
 
       const type = localStorage.getItem('backgroundType');
       const needsRefresh =
@@ -35,14 +39,18 @@ export function useBackgroundEvents(backgroundData, refreshBackground) {
             backgroundData.photoInfo.pun,
           ));
 
-      if (needsRefresh) {refreshBackground();}
+      if (needsRefresh) {
+        refreshBackground();
+      }
     };
 
     const applyFilters = () => {
       if (backgroundData.video) {
         const filter = getBackgroundFilterStyle();
         const element = document.getElementById('backgroundVideo');
-        if (element) {element.style.webkitFilter = filter;}
+        if (element) {
+          element.style.webkitFilter = filter;
+        }
       } else {
         const overlayElement = document.getElementById('backgroundFilterOverlay');
         if (overlayElement) {
diff --git a/src/features/background/hooks/useBackgroundLoader.js b/src/features/background/hooks/useBackgroundLoader.js
index ea6bf126..eba327de 100644
--- a/src/features/background/hooks/useBackgroundLoader.js
+++ b/src/features/background/hooks/useBackgroundLoader.js
@@ -9,7 +9,9 @@ export function useBackgroundLoader(updateBackground, resetBackground) {
   const isLoadingRef = useRef(false);
 
   const loadBackground = useCallback(async () => {
-    if (isLoadingRef.current) {return;}
+    if (isLoadingRef.current) {
+      return;
+    }
     isLoadingRef.current = true;
 
     try {
diff --git a/src/features/background/hooks/useBackgroundRenderer.js b/src/features/background/hooks/useBackgroundRenderer.js
index 796ab17e..1914e0da 100644
--- a/src/features/background/hooks/useBackgroundRenderer.js
+++ b/src/features/background/hooks/useBackgroundRenderer.js
@@ -13,10 +13,14 @@ export function useBackgroundRenderer(backgroundData) {
   const abortControllerRef = useRef(null);
 
   useEffect(() => {
-    if (backgroundData.video) {return;}
+    if (backgroundData.video) {
+      return;
+    }
 
     const element = document.getElementById('backgroundImage');
-    if (!element) {return;}
+    if (!element) {
+      return;
+    }
 
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
diff --git a/src/features/background/options/BackgroundOptions.jsx b/src/features/background/options/BackgroundOptions.jsx
index ec6b2469..281af5a9 100644
--- a/src/features/background/options/BackgroundOptions.jsx
+++ b/src/features/background/options/BackgroundOptions.jsx
@@ -1,4 +1,5 @@
 import variables from 'config/variables';
+import { useT } from 'contexts';
 import { memo, useState, useEffect, useCallback, useRef } from 'react';
 import { MdSource, MdOutlineAutoAwesome } from 'react-icons/md';
 import { toast } from 'react-toastify';
@@ -21,6 +22,7 @@ import NavigationCard from './sections/NavigationCard';
 import { getBackgroundOptionItems } from './optionTypes';
 
 const BackgroundOptions = memo(({ currentSubSection, onSubSectionChange, sectionName }) => {
+  const t = useT();
   const [backgroundType, setBackgroundType] = useState(
     localStorage.getItem('backgroundType') || 'api',
   );
@@ -29,9 +31,9 @@ const BackgroundOptions = memo(({ currentSubSection, onSubSectionChange, section
   );
   const [backgroundCategories, setBackgroundCategories] = useState(() => {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
-      return [variables.getMessage('modals.update.offline.title')];
+      return [t('modals.update.offline.title')];
     }
-    return [variables.getMessage('modals.main.loading')];
+    return [t('modals.main.loading')];
   });
   const [backgroundCategoriesOG, setBackgroundCategoriesOG] = useState([]);
   const [backgroundAPI, setBackgroundAPI] = useState(
@@ -134,7 +136,7 @@ const BackgroundOptions = memo(({ currentSubSection, onSubSectionChange, section
 
   const handlePhotoPackUninstall = (type, name) => {
     uninstall(type, name);
-    toast(variables.getMessage('toasts.uninstalled'));
+    toast(t('toasts.uninstalled'));
     variables.stats.postEvent('marketplace-item', `${name} uninstalled`);
     setInstalledPhotoPacks(getInstalledPhotoPacks());
     window.dispatchEvent(new window.Event('installedAddonsChanged'));
@@ -204,10 +206,8 @@ const BackgroundOptions = memo(({ currentSubSection, onSubSectionChange, section
     if (currentSubSection === 'effects') {
       return (
         <Header
-          title={variables.getMessage('modals.main.settings.sections.background.title')}
-          secondaryTitle={variables.getMessage(
-            'modals.main.settings.sections.background.effects.title',
-          )}
+          title={t('modals.main.settings.sections.background.title')}
+          secondaryTitle={t('modals.main.settings.sections.background.effects.title')}
           goBack={() => onSubSectionChange(null, sectionName)}
         />
       );
@@ -216,10 +216,8 @@ const BackgroundOptions = memo(({ currentSubSection, onSubSectionChange, section
     if (currentSubSection === 'source') {
       return (
         <Header
-          title={variables.getMessage('modals.main.settings.sections.background.title')}
-          secondaryTitle={variables.getMessage(
-            'modals.main.settings.sections.background.source.title',
-          )}
+          title={t('modals.main.settings.sections.background.title')}
+          secondaryTitle={t('modals.main.settings.sections.background.source.title')}
           goBack={() => onSubSectionChange(null, sectionName)}
         />
       );
@@ -227,7 +225,7 @@ const BackgroundOptions = memo(({ currentSubSection, onSubSectionChange, section
 
     return (
       <Header
-        title={variables.getMessage('modals.main.settings.sections.background.title')}
+        title={t('modals.main.settings.sections.background.title')}
         setting="background"
         category="background"
         element="#backgroundImage"
@@ -243,14 +241,12 @@ const BackgroundOptions = memo(({ currentSubSection, onSubSectionChange, section
         <>
           <NavigationCard
             icon={MdSource}
-            title={variables.getMessage('modals.main.settings.sections.background.source.title')}
-            subtitle={variables.getMessage(
-              'modals.main.settings.sections.background.source.subtitle',
-            )}
+            title={t('modals.main.settings.sections.background.source.title')}
+            subtitle={t('modals.main.settings.sections.background.source.subtitle')}
             onClick={() => onSubSectionChange('source', sectionName)}
             action={
               <Dropdown
-                label={variables.getMessage('modals.main.settings.sections.background.type.title')}
+                label={t('modals.main.settings.sections.background.type.title')}
                 name="backgroundType"
                 onChange={(value) => {
                   clearQueuesOnSettingChange('backgroundType');
@@ -268,10 +264,8 @@ const BackgroundOptions = memo(({ currentSubSection, onSubSectionChange, section
           {showEffects && (
             <NavigationCard
               icon={MdOutlineAutoAwesome}
-              title={variables.getMessage('modals.main.settings.sections.background.effects.title')}
-              subtitle={variables.getMessage(
-                'modals.main.settings.sections.background.effects.subtitle',
-              )}
+              title={t('modals.main.settings.sections.background.effects.title')}
+              subtitle={t('modals.main.settings.sections.background.effects.subtitle')}
               onClick={() => onSubSectionChange('effects', sectionName)}
             />
           )}
diff --git a/src/features/background/options/Colour.jsx b/src/features/background/options/Colour.jsx
index a48a200f..6bbbb373 100644
--- a/src/features/background/options/Colour.jsx
+++ b/src/features/background/options/Colour.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { useState } from 'react';
 import ColorPicker from 'react-best-gradient-color-picker';
 import { toast } from 'react-toastify';
@@ -9,6 +9,7 @@ import EventBus from 'utils/eventbus';
 import '../scss/_colourpicker.scss';
 
 const ColourOptions = () => {
+  const t = useT();
   const [colour, setColour] = useState(
     localStorage.getItem('customBackgroundColour') || 'rgba(0, 0, 0, 100)',
   );
@@ -22,17 +23,13 @@ const ColourOptions = () => {
   const resetColour = () => {
     setColour('rgba(0, 0, 0, 0)');
     localStorage.setItem('customBackgroundColour', 'rgba(0, 0, 0, 100)');
-    toast(variables.getMessage('toasts.reset'));
+    toast(t('toasts.reset'));
     EventBus.emit('refresh', 'background');
   };
 
   return (
     <Row final={true}>
-      <Content
-        title={variables.getMessage(
-          'modals.main.settings.sections.background.source.custom_colour',
-        )}
-      />
+      <Content title={t('modals.main.settings.sections.background.source.custom_colour')} />
       <Action>
         <ColorPicker
           value={colour}
@@ -48,7 +45,7 @@ const ColourOptions = () => {
         <div className="colourReset">
           <span className="link" onClick={() => resetColour()}>
             <MdRefresh />
-            {variables.getMessage('modals.main.settings.buttons.reset')}
+            {t('modals.main.settings.buttons.reset')}
           </span>
         </div>
       </Action>
diff --git a/src/features/background/options/Custom.jsx b/src/features/background/options/Custom.jsx
index 329bf028..ff4bbab2 100644
--- a/src/features/background/options/Custom.jsx
+++ b/src/features/background/options/Custom.jsx
@@ -1,4 +1,5 @@
 import variables from 'config/variables';
+import { useT } from 'contexts';
 import { memo, useRef, useState, useEffect, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import {
@@ -46,6 +47,7 @@ import CustomURLModal from './CustomURLModal';
 import FolderTaggingModal from './FolderTaggingModal';
 
 const CustomSettings = memo(() => {
+  const t = useT();
   const [customBackground, setCustomBackground] = useState([]);
   const [customURLModal, setCustomURLModal] = useState(false);
   const [folderTaggingModal, setFolderTaggingModal] = useState(false);
@@ -107,7 +109,7 @@ const CustomSettings = memo(() => {
         });
       } catch (error) {
         console.error('Error loading backgrounds:', error);
-        toast(variables.getMessage('toasts.error'));
+        toast(t('toasts.error'));
       } finally {
         setLoading(false);
       }
@@ -147,7 +149,7 @@ const CustomSettings = memo(() => {
         }
       } catch (error) {
         console.error('Error saving background:', error);
-        toast(variables.getMessage('toasts.error'));
+        toast(t('toasts.error'));
       }
     },
     [],
@@ -258,7 +260,7 @@ const CustomSettings = memo(() => {
         setUploadProgress({ current: i + 1, total: files.length });
       } catch (error) {
         if (error.message === 'no_storage') {
-          toast(variables.getMessage('toasts.no_storage'));
+          toast(t('toasts.no_storage'));
           break;
         }
         errors.push(files[i].name);
@@ -266,7 +268,7 @@ const CustomSettings = memo(() => {
     }
 
     if (errors.length > 0) {
-      toast(variables.getMessage('toasts.error') + `: ${errors.join(', ')}`);
+      toast(t('toasts.error') + `: ${errors.join(', ')}`);
     }
 
     EventBus.emit('refresh', 'background');
@@ -302,7 +304,7 @@ const CustomSettings = memo(() => {
       EventBus.emit('refresh', 'background');
     } catch (error) {
       console.error('Error modifying background:', error);
-      toast(variables.getMessage('toasts.error'));
+      toast(t('toasts.error'));
     }
   }, []);
 
@@ -326,10 +328,10 @@ const CustomSettings = memo(() => {
       }
 
       EventBus.emit('refresh', 'background');
-      toast(variables.getMessage('toasts.deleted'));
+      toast(t('toasts.deleted'));
     } catch (error) {
       console.error('Error batch deleting:', error);
-      toast(variables.getMessage('toasts.error'));
+      toast(t('toasts.error'));
     }
   };
 
@@ -358,7 +360,7 @@ const CustomSettings = memo(() => {
       const urlRegex =
         /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._~#=]{1,256}\.[a-zA-Z0-9()]{1,63}\b([-a-zA-Z0-9()!@:%_.~#?&=]*)/;
       if (urlRegex.test(e) === false) {
-        return setUrlError(variables.getMessage('widgets.quicklinks.url_error'));
+        return setUrlError(t('widgets.quicklinks.url_error'));
       }
 
       setCustomURLModal(false);
@@ -391,14 +393,11 @@ const CustomSettings = memo(() => {
         setCustomBackground(backgrounds);
       } catch (error) {
         console.error('Error adding URL:', error);
-        toast(variables.getMessage('toasts.error'));
+        toast(t('toasts.error'));
       }
 
       try {
-        localStorage.setItem(
-          'customBackground',
-          JSON.stringify(backgrounds.map((bg) => bg.url)),
-        );
+        localStorage.setItem('customBackground', JSON.stringify(backgrounds.map((bg) => bg.url)));
       } catch (_quotaError) {
         localStorage.setItem('customBackgroundCount', backgrounds.length.toString());
       }
@@ -518,7 +517,7 @@ const CustomSettings = memo(() => {
       <div className="photosEmpty">
         <div className="loaderHolder">
           <div id="loader"></div>
-          <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
+          <span className="subtitle">{t('modals.main.loading')}</span>
         </div>
       </div>
     );
@@ -530,7 +529,7 @@ const CustomSettings = memo(() => {
         <div className="loaderHolder">
           <div id="loader"></div>
           <span className="subtitle">
-            {variables.getMessage('modals.main.settings.sections.background.source.uploading', {
+            {t('modals.main.settings.sections.background.source.uploading', {
               current: uploadProgress.current,
               total: uploadProgress.total,
             })}
@@ -564,14 +563,10 @@ const CustomSettings = memo(() => {
             <MdAddPhotoAlternate />
             <div>
               <span className="title">
-                {variables.getMessage(
-                  'modals.main.settings.sections.background.source.custom_title',
-                )}
+                {t('modals.main.settings.sections.background.source.custom_title')}
               </span>
               <span className="subtitle">
-                {variables.getMessage(
-                  'modals.main.settings.sections.background.source.custom_description',
-                )}
+                {t('modals.main.settings.sections.background.source.custom_description')}
               </span>
             </div>
           </div>
@@ -580,7 +575,7 @@ const CustomSettings = memo(() => {
               type="settings"
               onClick={uploadCustomBackground}
               icon={<MdOutlineFileUpload />}
-              label={variables.getMessage('modals.main.settings.sections.background.source.upload')}
+              label={t('modals.main.settings.sections.background.source.upload')}
             />
           </div>
         </div>
@@ -593,7 +588,11 @@ const CustomSettings = memo(() => {
                 {' '}
                 · {formatBytes(storageUsed)} / {formatBytes(availableStorageLimit)}
                 {storagePercent > 80 && navigator.storage && navigator.storage.persist && (
-                  <Tooltip title={variables.getMessage('modals.main.settings.sections.background.source.persistent_storage_tooltip')}>
+                  <Tooltip
+                    title={t(
+                      'modals.main.settings.sections.background.source.persistent_storage_tooltip',
+                    )}
+                  >
                     <button
                       className="request-storage-link"
                       onClick={async () => {
@@ -601,11 +600,15 @@ const CustomSettings = memo(() => {
                           const isPersisted = await navigator.storage.persist();
                           if (isPersisted) {
                             toast(
-                              variables.getMessage('modals.main.settings.sections.background.source.persistent_storage_granted'),
+                              t(
+                                'modals.main.settings.sections.background.source.persistent_storage_granted',
+                              ),
                             );
                           } else {
                             toast(
-                              variables.getMessage('modals.main.settings.sections.background.source.persistent_storage_denied'),
+                              t(
+                                'modals.main.settings.sections.background.source.persistent_storage_denied',
+                              ),
                             );
                           }
                         } catch (error) {
@@ -666,39 +669,27 @@ const CustomSettings = memo(() => {
               items={[
                 {
                   value: 'date_desc',
-                  text: variables.getMessage(
-                    'modals.main.settings.sections.background.source.sort.date_newest',
-                  ),
+                  text: t('modals.main.settings.sections.background.source.sort.date_newest'),
                 },
                 {
                   value: 'date_asc',
-                  text: variables.getMessage(
-                    'modals.main.settings.sections.background.source.sort.date_oldest',
-                  ),
+                  text: t('modals.main.settings.sections.background.source.sort.date_oldest'),
                 },
                 {
                   value: 'name_asc',
-                  text: variables.getMessage(
-                    'modals.main.settings.sections.background.source.sort.name_asc',
-                  ),
+                  text: t('modals.main.settings.sections.background.source.sort.name_asc'),
                 },
                 {
                   value: 'name_desc',
-                  text: variables.getMessage(
-                    'modals.main.settings.sections.background.source.sort.name_desc',
-                  ),
+                  text: t('modals.main.settings.sections.background.source.sort.name_desc'),
                 },
                 {
                   value: 'size_asc',
-                  text: variables.getMessage(
-                    'modals.main.settings.sections.background.source.sort.size_small',
-                  ),
+                  text: t('modals.main.settings.sections.background.source.sort.size_small'),
                 },
                 {
                   value: 'size_desc',
-                  text: variables.getMessage(
-                    'modals.main.settings.sections.background.source.sort.size_large',
-                  ),
+                  text: t('modals.main.settings.sections.background.source.sort.size_large'),
                 },
               ]}
             />
@@ -850,11 +841,7 @@ const CustomSettings = memo(() => {
                         {bg.folder && <span className="detail folder-tag">{bg.folder}</span>}
                       </div>
                     </div>
-                    <Tooltip
-                      title={variables.getMessage(
-                        'modals.main.settings.sections.background.source.remove',
-                      )}
-                    >
+                    <Tooltip title={t('modals.main.settings.sections.background.source.remove')}>
                       <button
                         className="delete-button"
                         onClick={() => modifyCustomBackground('remove', originalIndex)}
@@ -871,12 +858,10 @@ const CustomSettings = memo(() => {
               <div className="emptyNewMessage">
                 <MdAddPhotoAlternate />
                 <span className="title">
-                  {variables.getMessage(
-                    'modals.main.settings.sections.background.source.drop_to_upload',
-                  )}
+                  {t('modals.main.settings.sections.background.source.drop_to_upload')}
                 </span>
                 <span className="subtitle">
-                  {variables.getMessage('modals.main.settings.sections.background.source.formats', {
+                  {t('modals.main.settings.sections.background.source.formats', {
                     list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
                   })}
                 </span>
@@ -884,9 +869,7 @@ const CustomSettings = memo(() => {
                   type="settings"
                   onClick={uploadCustomBackground}
                   icon={<MdFolder />}
-                  label={variables.getMessage(
-                    'modals.main.settings.sections.background.source.select',
-                  )}
+                  label={t('modals.main.settings.sections.background.source.select')}
                 />
               </div>
             </div>
@@ -907,15 +890,11 @@ const CustomSettings = memo(() => {
         <>
           <Checkbox
             name="backgroundVideoLoop"
-            text={variables.getMessage(
-              'modals.main.settings.sections.background.source.loop_video',
-            )}
+            text={t('modals.main.settings.sections.background.source.loop_video')}
           />
           <Checkbox
             name="backgroundVideoMute"
-            text={variables.getMessage(
-              'modals.main.settings.sections.background.source.mute_video',
-            )}
+            text={t('modals.main.settings.sections.background.source.mute_video')}
           />
         </>
       )}
@@ -967,7 +946,7 @@ const CustomSettings = memo(() => {
         <div className="smallModal">
           <div className="shareHeader">
             <span className="title">
-              {variables.getMessage('modals.main.settings.sections.background.source.storage_info')}
+              {t('modals.main.settings.sections.background.source.storage_info')}
             </span>
             <button className="closeModal" onClick={() => setStorageQuotaModal(false)}>
               <MdCancel />
@@ -975,9 +954,7 @@ const CustomSettings = memo(() => {
           </div>
           <div style={{ padding: '20px' }}>
             <p className="subtitle">
-              {variables.getMessage(
-                'modals.main.settings.sections.background.source.storage_description',
-              )}
+              {t('modals.main.settings.sections.background.source.storage_description')}
             </p>
             <div style={{ marginTop: '20px' }}>
               <p className="subtitle" style={{ fontWeight: '600', marginBottom: '8px' }}>
@@ -1005,7 +982,7 @@ const CustomSettings = memo(() => {
             <Button
               type="settings"
               onClick={() => setStorageQuotaModal(false)}
-              label={variables.getMessage('modals.main.settings.buttons.close')}
+              label={t('modals.main.settings.buttons.close')}
             />
           </div>
         </div>
diff --git a/src/features/background/options/CustomURLModal.jsx b/src/features/background/options/CustomURLModal.jsx
index 842cd7d5..a8eea6f2 100644
--- a/src/features/background/options/CustomURLModal.jsx
+++ b/src/features/background/options/CustomURLModal.jsx
@@ -1,20 +1,19 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { useState, memo } from 'react';
 import { MdClose, MdOutlineAddLink } from 'react-icons/md';
 import { Tooltip, Button } from 'components/Elements';
 
 function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
+  const t = useT();
   const [url, setURL] = useState();
 
   return (
     <div className="smallModal">
       <div className="shareHeader">
         <span className="title">
-          {variables.getMessage('modals.main.settings.sections.background.source.add_url')}
+          {t('modals.main.settings.sections.background.source.add_url')}
         </span>
-        <Tooltip
-          title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={t('modals.main.settings.sections.advanced.reset_modal.cancel')}>
           <div className="close" onClick={modalCloseOnly}>
             <MdClose />
           </div>
@@ -31,13 +30,13 @@ function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
           type="secondary"
           onClick={modalCloseOnly}
           icon={<MdClose />}
-          label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+          label={t('modals.main.settings.sections.advanced.reset_modal.cancel')}
         />
         <Button
           type="settings"
           onClick={() => modalClose(url)}
           icon={<MdOutlineAddLink />}
-          label={variables.getMessage('modals.main.settings.sections.background.source.add_url')}
+          label={t('modals.main.settings.sections.background.source.add_url')}
         />
       </div>
     </div>
diff --git a/src/features/background/options/FolderTaggingModal.jsx b/src/features/background/options/FolderTaggingModal.jsx
index 7019318a..40cdd7b7 100644
--- a/src/features/background/options/FolderTaggingModal.jsx
+++ b/src/features/background/options/FolderTaggingModal.jsx
@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { MdClose } from 'react-icons/md';
 import { Button } from 'components/Elements';
 
 const FolderTaggingModal = ({ files, onConfirm, onCancel }) => {
+  const t = useT();
   const [folderName, setFolderName] = useState('');
 
   const handleConfirm = () => {
@@ -14,7 +15,7 @@ const FolderTaggingModal = ({ files, onConfirm, onCancel }) => {
     <div className="smallModal">
       <div className="shareHeader">
         <span className="title">
-          {variables.getMessage('modals.main.settings.sections.background.source.tag_images')}
+          {t('modals.main.settings.sections.background.source.tag_images')}
         </span>
         <button className="closeModal" onClick={onCancel}>
           <MdClose />
@@ -22,19 +23,15 @@ const FolderTaggingModal = ({ files, onConfirm, onCancel }) => {
       </div>
       <div className="taggingModalContent">
         <p className="subtitle">
-          {variables.getMessage('modals.main.settings.sections.background.source.tag_description', {
+          {t('modals.main.settings.sections.background.source.tag_description', {
             count: files.length,
           })}
         </p>
         <div className="taggingInput">
-          <label>
-            {variables.getMessage('modals.main.settings.sections.background.source.folder_name')}
-          </label>
+          <label>{t('modals.main.settings.sections.background.source.folder_name')}</label>
           <input
             type="text"
-            placeholder={variables.getMessage(
-              'modals.main.settings.sections.background.source.folder_placeholder',
-            )}
+            placeholder={t('modals.main.settings.sections.background.source.folder_placeholder')}
             value={folderName}
             onChange={(e) => setFolderName(e.target.value)}
             onKeyPress={(e) => {
@@ -50,12 +47,12 @@ const FolderTaggingModal = ({ files, onConfirm, onCancel }) => {
         <Button
           type="settings"
           onClick={onCancel}
-          label={variables.getMessage('modals.main.settings.buttons.cancel')}
+          label={t('modals.main.settings.buttons.cancel')}
         />
         <Button
           type="settings"
           onClick={handleConfirm}
-          label={variables.getMessage('modals.main.settings.buttons.continue')}
+          label={t('modals.main.settings.buttons.continue')}
         />
       </div>
     </div>
diff --git a/src/features/background/options/sections/APISettings.jsx b/src/features/background/options/sections/APISettings.jsx
index 124baa64..40637737 100644
--- a/src/features/background/options/sections/APISettings.jsx
+++ b/src/features/background/options/sections/APISettings.jsx
@@ -1,38 +1,39 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { Dropdown, Radio, Text, ChipSelect } from 'components/Form/Settings';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import { APIQualityOptions } from '../optionTypes';
 import { clearQueuesOnSettingChange } from 'utils/queueOperations';
 
 const APISettings = ({ backgroundAPI, backgroundCategories, onUpdateAPI }) => {
+  const t = useT();
   return (
     <>
       <Row final={backgroundAPI === 'mue'}>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.background.api')}
-          subtitle={variables.getMessage('modals.main.settings.sections.background.api_subtitle')}
+          title={t('modals.main.settings.sections.background.api')}
+          subtitle={t('modals.main.settings.sections.background.api_subtitle')}
         />
         <Action>
-          {backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
+          {backgroundCategories[0] === t('modals.main.loading') ? (
             <>
               <Dropdown
-                label={variables.getMessage('modals.main.settings.sections.background.category')}
+                label={t('modals.main.settings.sections.background.category')}
                 name="apiCategories"
                 items={[
                   {
                     value: 'loading',
-                    text: variables.getMessage('modals.main.loading'),
+                    text: t('modals.main.loading'),
                   },
                   {
                     value: 'loading',
-                    text: variables.getMessage('modals.main.loading'),
+                    text: t('modals.main.loading'),
                   },
                 ]}
               />
             </>
           ) : (
             <ChipSelect
-              label={variables.getMessage('modals.main.settings.sections.background.categories')}
+              label={t('modals.main.settings.sections.background.categories')}
               options={backgroundCategories}
               name="apiCategories"
               onChange={() => {
@@ -41,9 +42,7 @@ const APISettings = ({ backgroundAPI, backgroundCategories, onUpdateAPI }) => {
             />
           )}
           <Dropdown
-            label={variables.getMessage(
-              'modals.main.settings.sections.background.source.quality.title',
-            )}
+            label={t('modals.main.settings.sections.background.source.quality.title')}
             name="apiQuality"
             element=".other"
             items={APIQualityOptions}
@@ -52,14 +51,14 @@ const APISettings = ({ backgroundAPI, backgroundCategories, onUpdateAPI }) => {
             }}
           />
           <Radio
-            title={variables.getMessage('modals.main.settings.sections.background.source.api_title')}
+            title={t('modals.main.settings.sections.background.source.api_title')}
             options={[
               {
-                name: variables.getMessage('modals.main.settings.sections.background.source.api_mue'),
+                name: t('modals.main.settings.sections.background.source.api_mue'),
                 value: 'mue',
               },
               {
-                name: variables.getMessage('modals.main.settings.sections.background.source.api_unsplash'),
+                name: t('modals.main.settings.sections.background.source.api_unsplash'),
                 value: 'unsplash',
               },
             ]}
@@ -73,18 +72,16 @@ const APISettings = ({ backgroundAPI, backgroundCategories, onUpdateAPI }) => {
       {backgroundAPI === 'unsplash' && (
         <Row final={true}>
           <Content
-            title={variables.getMessage('modals.main.settings.sections.background.unsplash.title')}
-            subtitle={variables.getMessage(
-              'modals.main.settings.sections.background.unsplash.subtitle',
-            )}
+            title={t('modals.main.settings.sections.background.unsplash.title')}
+            subtitle={t('modals.main.settings.sections.background.unsplash.subtitle')}
           />
           <Action>
             <Text
-              title={variables.getMessage('modals.main.settings.sections.background.unsplash.id')}
-              subtitle={variables.getMessage(
-                'modals.main.settings.sections.background.unsplash.id_subtitle',
+              title={t('modals.main.settings.sections.background.unsplash.id')}
+              subtitle={t('modals.main.settings.sections.background.unsplash.id_subtitle')}
+              placeholder={t(
+                'modals.main.settings.sections.background.source.collection_placeholder',
               )}
-              placeholder={variables.getMessage('modals.main.settings.sections.background.source.collection_placeholder')}
               name="unsplashCollections"
               category="background"
               element="#backgroundImage"
diff --git a/src/features/background/options/sections/DisplaySettings.jsx b/src/features/background/options/sections/DisplaySettings.jsx
index f814489a..d34254d2 100644
--- a/src/features/background/options/sections/DisplaySettings.jsx
+++ b/src/features/background/options/sections/DisplaySettings.jsx
@@ -1,23 +1,22 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { Checkbox, Dropdown } from 'components/Form/Settings';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import { FREQUENCY_OPTIONS } from 'utils/frequencyManager';
 import { clearQueuesOnSettingChange } from 'utils/queueOperations';
 
 const DisplaySettings = ({ usingImage }) => {
+  const t = useT();
   return (
     <>
       <Row>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.background.frequency.title')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.background.frequency.subtitle',
-          )}
+          title={t('modals.main.settings.sections.background.frequency.title')}
+          subtitle={t('modals.main.settings.sections.background.frequency.subtitle')}
         />
         <Action>
           <Dropdown
             name="backgroundFrequency"
-            label={variables.getMessage('modals.main.settings.sections.background.frequency.title')}
+            label={t('modals.main.settings.sections.background.frequency.title')}
             onChange={(value) => {
               localStorage.setItem('backgroundStartTime', Date.now());
               const oldValue = localStorage.getItem('backgroundFrequency');
@@ -32,35 +31,31 @@ const DisplaySettings = ({ usingImage }) => {
             }}
             items={FREQUENCY_OPTIONS.map((opt) => ({
               value: opt.value,
-              text: variables.getMessage(opt.text),
+              text: t(opt.text),
             }))}
           />
         </Action>
       </Row>
       <Row final={true}>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.background.display')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.background.display_subtitle',
-          )}
+          title={t('modals.main.settings.sections.background.display')}
+          subtitle={t('modals.main.settings.sections.background.display_subtitle')}
         />
         <Action>
           <Checkbox
             name="bgtransition"
-            text={variables.getMessage('modals.main.settings.sections.background.transition')}
+            text={t('modals.main.settings.sections.background.transition')}
             element=".other"
             disabled={!usingImage}
           />
           <Checkbox
             name="photoInformation"
-            text={variables.getMessage(
-              'modals.main.settings.sections.background.photo_information',
-            )}
+            text={t('modals.main.settings.sections.background.photo_information')}
             element=".other"
           />
           <Checkbox
             name="photoMap"
-            text={variables.getMessage('modals.main.settings.sections.background.show_map')}
+            text={t('modals.main.settings.sections.background.show_map')}
             element=".other"
             disabled={!usingImage}
           />
diff --git a/src/features/background/options/sections/EffectsSettings.jsx b/src/features/background/options/sections/EffectsSettings.jsx
index 430c06e0..41ea68db 100644
--- a/src/features/background/options/sections/EffectsSettings.jsx
+++ b/src/features/background/options/sections/EffectsSettings.jsx
@@ -1,19 +1,20 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { Dropdown, Slider } from 'components/Form/Settings';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import values from 'utils/data/slider_values.json';
 import { backgroundImageEffects } from '../optionTypes';
 
 const EffectsSettings = ({ backgroundFilter, onFilterChange }) => {
+  const t = useT();
   return (
     <Row final={true}>
       <Content
-        title={variables.getMessage('modals.main.settings.sections.background.effects.title')}
-        subtitle={variables.getMessage('modals.main.settings.sections.background.effects.subtitle')}
+        title={t('modals.main.settings.sections.background.effects.title')}
+        subtitle={t('modals.main.settings.sections.background.effects.subtitle')}
       />
       <Action>
         <Slider
-          title={variables.getMessage('modals.main.settings.sections.background.effects.blur')}
+          title={t('modals.main.settings.sections.background.effects.blur')}
           name="blur"
           min="0"
           max="100"
@@ -24,9 +25,7 @@ const EffectsSettings = ({ backgroundFilter, onFilterChange }) => {
           element="#backgroundImage"
         />
         <Slider
-          title={variables.getMessage(
-            'modals.main.settings.sections.background.effects.brightness',
-          )}
+          title={t('modals.main.settings.sections.background.effects.brightness')}
           name="brightness"
           min="0"
           max="100"
@@ -37,9 +36,7 @@ const EffectsSettings = ({ backgroundFilter, onFilterChange }) => {
           element="#backgroundImage"
         />
         <Dropdown
-          label={variables.getMessage(
-            'modals.main.settings.sections.background.effects.filters.title',
-          )}
+          label={t('modals.main.settings.sections.background.effects.filters.title')}
           name="backgroundFilter"
           onChange={onFilterChange}
           category="backgroundeffect"
@@ -48,9 +45,7 @@ const EffectsSettings = ({ backgroundFilter, onFilterChange }) => {
         />
         {backgroundFilter !== 'none' && (
           <Slider
-            title={variables.getMessage(
-              'modals.main.settings.sections.background.effects.filters.amount',
-            )}
+            title={t('modals.main.settings.sections.background.effects.filters.amount')}
             name="backgroundFilterAmount"
             min="0"
             max="100"
diff --git a/src/features/background/options/sections/SourceSection.jsx b/src/features/background/options/sections/SourceSection.jsx
index bb546710..95cbad14 100644
--- a/src/features/background/options/sections/SourceSection.jsx
+++ b/src/features/background/options/sections/SourceSection.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { MdExplore } from 'react-icons/md';
 import { Dropdown } from 'components/Form/Settings';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
@@ -16,6 +16,7 @@ const SourceSection = ({
   onGoToPhotoPacks,
   onToggle,
 }) => {
+  const t = useT();
   const showInstalledPhotoPacks =
     backgroundType === 'photo_pack' && marketplaceEnabled && installedPhotoPacks.length > 0;
 
@@ -28,14 +29,12 @@ const SourceSection = ({
         }
       >
         <Content
-          title={variables.getMessage('modals.main.settings.sections.background.source.title')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.background.source.subtitle',
-          )}
+          title={t('modals.main.settings.sections.background.source.title')}
+          subtitle={t('modals.main.settings.sections.background.source.subtitle')}
         />
         <Action>
           <Dropdown
-            label={variables.getMessage('modals.main.settings.sections.background.type.title')}
+            label={t('modals.main.settings.sections.background.type.title')}
             name="backgroundType"
             onChange={onTypeChange}
             category="background"
@@ -48,13 +47,16 @@ const SourceSection = ({
         <>
           <Row final={true}>
             <Content
-              title={variables.getMessage(
-                'modals.main.settings.sections.background.installed_packs_title',
-              )}
-              subtitle={`${installedPhotoPacks.length} ${installedPhotoPacks.length === 1 ? variables.getMessage('modals.main.settings.sections.background.source.pack_count.singular') : variables.getMessage('modals.main.settings.sections.background.source.pack_count.plural')} • ${totalPhotoCount} ${totalPhotoCount === 1 ? variables.getMessage('modals.main.settings.sections.background.source.photo_count.singular') : variables.getMessage('modals.main.settings.sections.background.source.photo_count.plural')}`}
+              title={t('modals.main.settings.sections.background.installed_packs_title')}
+              subtitle={`${installedPhotoPacks.length} ${installedPhotoPacks.length === 1 ? t('modals.main.settings.sections.background.source.pack_count.singular') : t('modals.main.settings.sections.background.source.pack_count.plural')} • ${totalPhotoCount} ${totalPhotoCount === 1 ? t('modals.main.settings.sections.background.source.photo_count.singular') : t('modals.main.settings.sections.background.source.photo_count.plural')}`}
             />
             <Action>
-              <Button type="settings" onClick={onGoToPhotoPacks} icon={<MdExplore />} label={variables.getMessage('modals.main.settings.sections.background.source.get_more')} />
+              <Button
+                type="settings"
+                onClick={onGoToPhotoPacks}
+                icon={<MdExplore />}
+                label={t('modals.main.settings.sections.background.source.get_more')}
+              />
             </Action>
           </Row>
           <Items
diff --git a/src/features/greeting/options/GreetingOptions.jsx b/src/features/greeting/options/GreetingOptions.jsx
index 54d729ce..bb0c57d0 100644
--- a/src/features/greeting/options/GreetingOptions.jsx
+++ b/src/features/greeting/options/GreetingOptions.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { useState } from 'react';
 
 import {
@@ -19,6 +19,7 @@ import defaultEvents from '../events.json';
 import { MdEventNote, MdAdd, MdCancel, MdRefresh } from 'react-icons/md';
 
 const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName }) => {
+  const t = useT();
   const [customEvents, setCustomEvents] = useState(
     JSON.parse(localStorage.getItem('customEvents')) || [],
   );
@@ -70,7 +71,7 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
     localStorage.setItem('customEvents', JSON.stringify(defaultEvents));
 
     setCustomEvents(defaultEvents);
-    toast(variables.getMessage('toasts.reset'));
+    toast(t('toasts.reset'));
   };
 
   const updateEvent = (index, updatedEvent) => {
@@ -89,20 +90,16 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
     return (
       <Row final={true}>
         <Content
-          title={variables.getMessage('modals.main.settings.additional_settings')}
-          subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)}
+          title={t('modals.main.settings.additional_settings')}
+          subtitle={t(`${GREETING_SECTION}.additional`)}
         />
         <Action>
           <Checkbox
             name="defaultGreetingMessage"
-            text={variables.getMessage(`${GREETING_SECTION}.default`)}
-            category="greeting"
-          />
-          <Text
-            title={variables.getMessage(`${GREETING_SECTION}.name`)}
-            name="greetingName"
+            text={t(`${GREETING_SECTION}.default`)}
             category="greeting"
           />
+          <Text title={t(`${GREETING_SECTION}.name`)} name="greetingName" category="greeting" />
         </Action>
       </Row>
     );
@@ -112,15 +109,13 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
     return (
       <Row>
         <Content
-          title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.greeting.birthday_subtitle',
-          )}
+          title={t(`${GREETING_SECTION}.birthday`)}
+          subtitle={t('modals.main.settings.sections.greeting.birthday_subtitle')}
         />
         <Action>
           <Switch
             name="birthdayenabled"
-            text={variables.getMessage('modals.main.settings.enabled')}
+            text={t('modals.main.settings.enabled')}
             category="greeting"
             onChange={(value) => {
               setEnableBirthday(value ? 'preferences' : 'preferencesInactive');
@@ -129,12 +124,10 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
           <div className={enableBirthday}>
             <Checkbox
               name="birthdayage"
-              text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)}
+              text={t(`${GREETING_SECTION}.birthday_age`)}
               category="greeting"
             />
-            <p style={{ marginRight: 'auto' }}>
-              {variables.getMessage(`${GREETING_SECTION}.birthday_date`)}
-            </p>
+            <p style={{ marginRight: 'auto' }}>{t(`${GREETING_SECTION}.birthday_date`)}</p>
             <DatePicker
               value={birthday}
               onChange={(newDate) => {
@@ -152,20 +145,20 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
     return (
       <div className={enableCustomEvents}>
         <Row final={true}>
-          <Content title={variables.getMessage(`${GREETING_SECTION}.custom`)} />
+          <Content title={t(`${GREETING_SECTION}.custom`)} />
           <Action>
             <div className="headerActions">
               <Button
                 type="settings"
                 onClick={resetEvents}
                 icon={<MdRefresh />}
-                label={variables.getMessage('modals.main.settings.buttons.reset')}
+                label={t('modals.main.settings.buttons.reset')}
               />
               <Button
                 type="settings"
                 onClick={addEvent}
                 icon={<MdAdd />}
-                label={variables.getMessage('widgets.quicklinks.add')}
+                label={t('widgets.quicklinks.add')}
               />
             </div>
           </Action>
@@ -178,14 +171,12 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
                   <MdEventNote />
                 </div>
                 <div className="messageText">
-                  <span className="subtitle">
-                    {variables.getMessage(`${GREETING_SECTION}.event_name`)}
-                  </span>
+                  <span className="subtitle">{t(`${GREETING_SECTION}.event_name`)}</span>
                   <input
                     type="text"
                     className="text-field-input event-name-input"
                     value={event.name}
-                    placeholder={variables.getMessage(`${GREETING_SECTION}.event_name`)}
+                    placeholder={t(`${GREETING_SECTION}.event_name`)}
                     onChange={(e) => {
                       const updatedEvent = { ...event, name: e.target.value };
                       updateEvent(index, updatedEvent);
@@ -211,7 +202,7 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
                     type="settings"
                     onClick={() => removeEvent(index)}
                     icon={<MdCancel />}
-                    label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+                    label={t('modals.main.marketplace.product.buttons.remove')}
                   />
                 </div>
               </div>
@@ -222,15 +213,13 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
           <div className="photosEmpty">
             <div className="emptyNewMessage">
               <MdEventNote />
-              <span className="title">{variables.getMessage(`${GREETING_SECTION}.no_events`)}</span>
-              <span className="subtitle">
-                {variables.getMessage(`${GREETING_SECTION}.no_events_description`)}
-              </span>
+              <span className="title">{t(`${GREETING_SECTION}.no_events`)}</span>
+              <span className="subtitle">{t(`${GREETING_SECTION}.no_events_description`)}</span>
               <Button
                 type="settings"
                 onClick={addEvent}
                 icon={<MdAdd />}
-                label={variables.getMessage(`${GREETING_SECTION}.add_event`)}
+                label={t(`${GREETING_SECTION}.add_event`)}
               />
             </div>
           </div>
@@ -245,8 +234,8 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
   if (isEventsSection) {
     header = (
       <Header
-        title={variables.getMessage(`${GREETING_SECTION}.title`)}
-        secondaryTitle={variables.getMessage(`${GREETING_SECTION}.events.title`)}
+        title={t(`${GREETING_SECTION}.title`)}
+        secondaryTitle={t(`${GREETING_SECTION}.events.title`)}
         goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
       />
@@ -254,7 +243,7 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
   } else {
     header = (
       <Header
-        title={variables.getMessage(`${GREETING_SECTION}.title`)}
+        title={t(`${GREETING_SECTION}.title`)}
         setting="greeting"
         category="greeting"
         element=".greeting"
@@ -271,13 +260,13 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
         <>
           <Row>
             <Content
-              title={variables.getMessage(`${GREETING_SECTION}.events`)}
-              subtitle={variables.getMessage(`${GREETING_SECTION}.enable_events`)}
+              title={t(`${GREETING_SECTION}.events`)}
+              subtitle={t(`${GREETING_SECTION}.enable_events`)}
             />
             <Action>
               <Checkbox
                 name="events"
-                text={variables.getMessage(`${GREETING_SECTION}.events`)}
+                text={t(`${GREETING_SECTION}.events`)}
                 category="greeting"
                 onChange={(value) => {
                   setEnableCustomEvents(value ? 'preferences' : 'preferencesInactive');
@@ -297,8 +286,8 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
         >
           <AdditionalOptions />
           <Section
-            title={variables.getMessage(`${GREETING_SECTION}.events`)}
-            subtitle={variables.getMessage(`${GREETING_SECTION}.events_description`)}
+            title={t(`${GREETING_SECTION}.events`)}
+            subtitle={t(`${GREETING_SECTION}.events_description`)}
             onClick={() => onSubSectionChange('events', sectionName)}
             icon={<MdEventNote />}
           />
diff --git a/src/features/helpers/preview/Preview.jsx b/src/features/helpers/preview/Preview.jsx
index 75672751..db0bbe72 100644
--- a/src/features/helpers/preview/Preview.jsx
+++ b/src/features/helpers/preview/Preview.jsx
@@ -1,15 +1,14 @@
 import { memo } from 'react';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import './preview.scss';
 
 function Preview(props) {
+  const t = useT();
   return (
     <div className="preview-mode">
-      <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
-      <span className="subtitle">{variables.getMessage('modals.welcome.preview.description')}</span>
-      <button onClick={() => props.setup()}>
-        {variables.getMessage('modals.welcome.preview.continue')}
-      </button>
+      <span className="title">{t('modals.main.settings.reminder.title')}</span>
+      <span className="subtitle">{t('modals.welcome.preview.description')}</span>
+      <button onClick={() => props.setup()}>{t('modals.welcome.preview.continue')}</button>
     </div>
   );
 }
diff --git a/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx b/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx
index 110a8a49..297b15a1 100644
--- a/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx
+++ b/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx
@@ -1,8 +1,10 @@
 import { memo } from 'react';
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { getProxiedImageUrl } from 'utils/marketplace';
 
 function Lightbox({ modalClose, img }) {
+  const t = useT();
   variables.stats.postEvent('modal', 'Opened lightbox');
 
   return (
@@ -14,7 +16,7 @@ function Lightbox({ modalClose, img }) {
         src={getProxiedImageUrl(img)}
         className="lightboximg"
         draggable={false}
-        alt={variables.getMessage('common.alt_text.screenshot')}
+        alt={t('common.alt_text.screenshot')}
       />
     </>
   );
diff --git a/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx b/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx
index c6e0de37..8057ebb8 100644
--- a/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx
+++ b/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx
@@ -1,22 +1,21 @@
 import { memo } from 'react';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { MdClose } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
 
 function SideloadFailedModal({ modalClose, reason }) {
+  const t = useT();
   return (
     <div className="smallModal">
       <div className="shareHeader">
-        <span className="title">{variables.getMessage('modals.main.error_boundary.title')}</span>
-        <Tooltip
-          title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-        >
+        <span className="title">{t('modals.main.error_boundary.title')}</span>
+        <Tooltip title={t('modals.main.settings.sections.advanced.reset_modal.cancel')}>
           <div className="close" onClick={modalClose}>
             <MdClose />
           </div>
         </Tooltip>
       </div>
-      <span>{variables.getMessage('modals.main.addons.sideload.failed')}</span>
+      <span>{t('modals.main.addons.sideload.failed')}</span>
       <span className="subtitle">{reason}</span>
     </div>
   );
diff --git a/src/features/marketplace/components/Items/Items.jsx b/src/features/marketplace/components/Items/Items.jsx
index 33a34b8d..c6dd6570 100644
--- a/src/features/marketplace/components/Items/Items.jsx
+++ b/src/features/marketplace/components/Items/Items.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import React, { memo, useState, useMemo } from 'react';
 import { MdCheckCircle, MdOutlineUploadFile, MdClose, MdSettings } from 'react-icons/md';
 import placeholderIcon from 'assets/icons/marketplace-placeholder.png';
@@ -12,6 +12,7 @@ import { getProxiedImageUrl } from 'utils/marketplace';
 import ItemSettingsModal from '../Modals/ItemSettingsModal';
 
 function filterItems(item, filter, categoryFilter) {
+  const t = useT();
   const lowerCaseFilter = filter.toLowerCase();
   const textMatch =
     item.name?.toLowerCase().includes(lowerCaseFilter) ||
@@ -140,9 +141,7 @@ function ItemCard({
                 width: '52px',
                 height: '32px',
                 borderRadius: '16px',
-                backgroundColor: enabled
-                  ? 'var(--linkColor, #ff5c25)'
-                  : 'rgba(128, 128, 128, 0.3)',
+                backgroundColor: enabled ? 'var(--linkColor, #ff5c25)' : 'rgba(128, 128, 128, 0.3)',
                 position: 'relative',
                 transition: 'background-color 0.2s',
                 cursor: 'pointer',
@@ -168,7 +167,7 @@ function ItemCard({
       )}
       {isSideloaded && (
         <Tooltip
-          title={variables.getMessage('modals.main.addons.sideload.title')}
+          title={t('modals.main.addons.sideload.title')}
           style={{ position: 'absolute', top: '12px', right: isAdded ? '48px' : '12px', zIndex: 2 }}
         >
           <div className="item-sideload-badge">
@@ -201,7 +200,7 @@ function ItemCard({
         <span className="card-title">{item.display_name || item.name}</span>
         {!isCurator ? (
           <span className="card-subtitle">
-            {variables.getMessage('modals.main.marketplace.by', { author: item.author })}
+            {t('modals.main.marketplace.by', { author: item.author })}
           </span>
         ) : (
           ''
@@ -211,9 +210,7 @@ function ItemCard({
           <div className="card-chips">
             {item.type && (
               <span className="card-type">
-                {variables.getMessage(
-                  'modals.main.marketplace.' + getTypeTranslationKey(item.type),
-                )}
+                {t('modals.main.marketplace.' + getTypeTranslationKey(item.type))}
               </span>
             )}
             {item.in_collections && item.in_collections.length > 0 && !onCollection && !isAdded && (
@@ -316,12 +313,12 @@ function Items({
             ))}
           </div>
           <Dropdown
-            label={variables.getMessage('modals.main.addons.sort.title')}
+            label={t('modals.main.addons.sort.title')}
             name="sortMarketplace"
             onChange={(value) => handleSortChange(value)}
             items={[
-              { value: 'a-z', text: variables.getMessage('modals.main.addons.sort.a_z') },
-              { value: 'z-a', text: variables.getMessage('modals.main.addons.sort.z_a') },
+              { value: 'a-z', text: t('modals.main.addons.sort.a_z') },
+              { value: 'z-a', text: t('modals.main.addons.sort.z_a') },
             ]}
           />
         </div>
diff --git a/src/features/marketplace/components/Modals/ItemSettingsModal.jsx b/src/features/marketplace/components/Modals/ItemSettingsModal.jsx
index 73a080e4..12d99f98 100644
--- a/src/features/marketplace/components/Modals/ItemSettingsModal.jsx
+++ b/src/features/marketplace/components/Modals/ItemSettingsModal.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import Modal from 'react-modal';
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import EventBus from 'utils/eventbus';
 import { Dropdown, Switch, Slider, ChipSelect } from 'components/Form/Settings';
@@ -146,9 +147,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
               placeholder={field.placeholder || ''}
               className="itemSettings-field-input"
             />
-                        {field.help_text && (
-              <p className="itemSettings-field-description">{field.help_text}</p>
-            )}
+            {field.help_text && <p className="itemSettings-field-description">{field.help_text}</p>}
           </div>
         );
 
@@ -222,7 +221,11 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
             </span>
           </div>
         </div>
-        <button className="itemSettings-close" onClick={onClose} aria-label={variables.getMessage('common.actions.close')}>
+        <button
+          className="itemSettings-close"
+          onClick={onClose}
+          aria-label={t('common.actions.close')}
+        >
           <MdClose />
         </button>
       </div>
@@ -250,7 +253,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
                 <Button
                   onClick={handleManualRefresh}
                   icon={<MdRefresh />}
-                  label={variables.getMessage(
+                  label={t(
                     'modals.main.settings.sections.background.photo_pack_settings.refresh_photos',
                   )}
                   disabled={refreshing || validationErrors.length > 0}
@@ -265,9 +268,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
             <div className="itemSettings-info-item">
               <span className="label">Type</span>
               <span className="value">
-                {variables.getMessage(
-                  'modals.main.marketplace.' + getTypeTranslationKey(pack.type),
-                )}
+                {t('modals.main.marketplace.' + getTypeTranslationKey(pack.type))}
               </span>
             </div>
             {pack.description && (
@@ -290,6 +291,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
 };
 
 function getTypeTranslationKey(type) {
+  const t = useT();
   const typeMap = {
     photos: 'photo_packs',
     quotes: 'quote_packs',
diff --git a/src/features/marketplace/components/Modals/ItemSettingsModal.scss b/src/features/marketplace/components/Modals/ItemSettingsModal.scss
index 3f5c9fe5..ae32a022 100644
--- a/src/features/marketplace/components/Modals/ItemSettingsModal.scss
+++ b/src/features/marketplace/components/Modals/ItemSettingsModal.scss
@@ -184,13 +184,13 @@
     border-radius: t($borderRadius);
     color: t($color);
     &:hover,
-      &:focus {
-        border-color: t($color);
-      }
+    &:focus {
+      border-color: t($color);
+    }
 
-      &::placeholder {
-        color: t($subColor);
-      }
+    &::placeholder {
+      color: t($subColor);
+    }
   }
 }
 
diff --git a/src/features/marketplace/components/hooks/useMarketplaceInstall.js b/src/features/marketplace/components/hooks/useMarketplaceInstall.js
index 2ab2ec3a..dec6e6cf 100644
--- a/src/features/marketplace/components/hooks/useMarketplaceInstall.js
+++ b/src/features/marketplace/components/hooks/useMarketplaceInstall.js
@@ -1,11 +1,13 @@
 import { useState, useRef } from 'react';
 import { toast } from 'react-toastify';
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { install, uninstall } from 'utils/marketplace';
 
 const API_V2_BASE = `${variables.constants.API_URL}/marketplace`;
 
 export const useMarketplaceInstall = () => {
+  const t = useT();
   const [busy, setBusy] = useState(false);
   const controllerRef = useRef(new AbortController());
 
@@ -14,7 +16,7 @@ export const useMarketplaceInstall = () => {
     const isNewInstall = !installed.some((item) => item.id === data.id || item.name === data.name);
 
     install(type, data);
-    toast(variables.getMessage('toasts.installed'));
+    toast(t('toasts.installed'));
     variables.stats.postEvent('marketplace-item', `${data.display_name || data.name} installed`);
     variables.stats.postEvent('marketplace', 'Install');
     window.dispatchEvent(new Event('installedAddonsChanged'));
@@ -22,7 +24,7 @@ export const useMarketplaceInstall = () => {
 
   const uninstallItem = (type, name) => {
     uninstall(type, name);
-    toast(variables.getMessage('toasts.uninstalled'));
+    toast(t('toasts.uninstalled'));
     variables.stats.postEvent('marketplace-item', `${name} uninstalled`);
     variables.stats.postEvent('marketplace', 'Uninstall');
     window.dispatchEvent(new Event('installedAddonsChanged'));
@@ -52,13 +54,13 @@ export const useMarketplaceInstall = () => {
         variables.stats.postEvent('marketplace', 'Install');
       }
 
-      toast(variables.getMessage('toasts.installed'));
+      toast(t('toasts.installed'));
       window.dispatchEvent(new Event('installedAddonsChanged'));
       window.location.reload();
     } catch (error) {
       if (!controllerRef.current.signal.aborted) {
         console.error('Failed to install collection:', error);
-        toast(variables.getMessage('toasts.error'));
+        toast(t('toasts.error'));
       }
     } finally {
       setBusy(false);
diff --git a/src/features/marketplace/views/Added.jsx b/src/features/marketplace/views/Added.jsx
index c4bcca7b..5b65e70f 100644
--- a/src/features/marketplace/views/Added.jsx
+++ b/src/features/marketplace/views/Added.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { memo, useState, useEffect, useCallback } from 'react';
 import {
@@ -21,6 +22,7 @@ import { install, uninstall } from 'utils/marketplace';
 import { updateHash } from 'utils/deepLinking';
 
 const Added = memo(() => {
+  const t = useT();
   const [installed, setInstalled] = useState(JSON.parse(localStorage.getItem('installed')));
   const [showFailed, setShowFailed] = useState(false);
   const [failedReason, setFailedReason] = useState('');
@@ -29,13 +31,13 @@ const Added = memo(() => {
   const installAddon = useCallback((input) => {
     let failedReasonText = '';
     if (!input.name) {
-      failedReasonText = variables.getMessage('modals.main.addons.sideload.errors.no_name');
+      failedReasonText = t('modals.main.addons.sideload.errors.no_name');
     } else if (!input.author) {
-      failedReasonText = variables.getMessage('modals.main.addons.sideload.errors.no_author');
+      failedReasonText = t('modals.main.addons.sideload.errors.no_author');
     } else if (!input.type) {
-      failedReasonText = variables.getMessage('modals.main.addons.sideload.errors.no_type');
+      failedReasonText = t('modals.main.addons.sideload.errors.no_type');
     } else if (!input.version) {
-      failedReasonText = variables.getMessage('modals.main.addons.sideload.errors.no_version');
+      failedReasonText = t('modals.main.addons.sideload.errors.no_version');
     } else if (
       input.type === 'photos' &&
       (!input.photos ||
@@ -45,12 +47,12 @@ const Added = memo(() => {
         !input.photos[0].photographer ||
         !input.photos[0].location)
     ) {
-      failedReasonText = variables.getMessage('modals.main.addons.sideload.errors.invalid_photos');
+      failedReasonText = t('modals.main.addons.sideload.errors.invalid_photos');
     } else if (
       input.type === 'quotes' &&
       (!input.quotes || !input.quotes.length || !input.quotes[0].quote || !input.quotes[0].author)
     ) {
-      failedReasonText = variables.getMessage('modals.main.addons.sideload.errors.invalid_quotes');
+      failedReasonText = t('modals.main.addons.sideload.errors.invalid_quotes');
     }
 
     if (failedReasonText !== '') {
@@ -60,7 +62,7 @@ const Added = memo(() => {
     }
 
     install(input.type, input, true, false);
-    toast(variables.getMessage('toasts.installed'));
+    toast(t('toasts.installed'));
     variables.stats.postEvent('marketplace', 'Sideload');
     setInstalled(JSON.parse(localStorage.getItem('installed')));
     window.dispatchEvent(new window.Event('installedAddonsChanged'));
@@ -72,7 +74,7 @@ const Added = memo(() => {
         type="settings"
         onClick={() => document.getElementById('file-input').click()}
         icon={<MdSendTimeExtension />}
-        label={variables.getMessage('modals.main.addons.sideload.title')}
+        label={t('modals.main.addons.sideload.title')}
       />
     );
   }, []);
@@ -138,9 +140,9 @@ const Added = memo(() => {
     });
 
     if (updates > 0) {
-      toast(variables.getMessage('modals.main.addons.updates_available', { amount: updates }));
+      toast(t('modals.main.addons.updates_available', { amount: updates }));
     } else {
-      toast(variables.getMessage('modals.main.addons.no_updates'));
+      toast(t('modals.main.addons.no_updates'));
     }
   }, [installed]);
 
@@ -152,22 +154,20 @@ const Added = memo(() => {
     } catch {}
 
     localStorage.setItem('installed', JSON.stringify([]));
-    toast(variables.getMessage('toasts.uninstalled_all'));
+    toast(t('toasts.uninstalled_all'));
     setInstalled([]);
     window.dispatchEvent(new window.Event('installedAddonsChanged'));
   }, [installed]);
 
   const handleUninstall = useCallback((type, name) => {
     uninstall(type, name);
-    toast(variables.getMessage('toasts.uninstalled'));
+    toast(t('toasts.uninstalled'));
     setInstalled(JSON.parse(localStorage.getItem('installed')));
     window.dispatchEvent(new window.Event('installedAddonsChanged'));
   }, []);
 
   const handleTogglePack = useCallback((packId, newState) => {
-    const message = newState
-      ? variables.getMessage('toasts.enabled')
-      : variables.getMessage('toasts.disabled');
+    const message = newState ? t('toasts.enabled') : t('toasts.disabled');
     toast(message);
   }, []);
 
@@ -210,22 +210,20 @@ const Added = memo(() => {
   if (installed.length === 0) {
     return (
       <>
-        <Header title={variables.getMessage('modals.main.navbar.addons')} report={false}>
+        <Header title={t('modals.main.navbar.addons')} report={false}>
           <CustomActions>{getSideloadButton()}</CustomActions>
         </Header>
         {sideLoadBackendElements()}
         <div className="emptyItems">
           <div className="emptyNewMessage">
             <MdOutlineExtensionOff />
-            <span className="title">{variables.getMessage('modals.main.addons.empty.title')}</span>
-            <span className="subtitle">
-              {variables.getMessage('modals.main.addons.empty.description')}
-            </span>
+            <span className="title">{t('modals.main.addons.empty.title')}</span>
+            <span className="subtitle">{t('modals.main.addons.empty.description')}</span>
             <Button
               type="collection"
               onClick={goToDiscover}
               icon={<MdExplore />}
-              label={variables.getMessage('modals.main.marketplace.addons.get_some')}
+              label={t('modals.main.marketplace.addons.get_some')}
             />
           </div>
         </div>
@@ -235,7 +233,7 @@ const Added = memo(() => {
 
   return (
     <>
-      <Header title={variables.getMessage('modals.main.addons.added')} report={false}>
+      <Header title={t('modals.main.addons.added')} report={false}>
         <CustomActions>
           {getSideloadButton()}
           {sideLoadBackendElements()}
@@ -243,13 +241,13 @@ const Added = memo(() => {
             type="settings"
             onClick={updateCheck}
             icon={<MdUpdate />}
-            label={variables.getMessage('modals.main.addons.check_updates')}
+            label={t('modals.main.addons.check_updates')}
           />
           <Button
             type="settings"
             onClick={removeAll}
             icon={<MdOutlineExtensionOff />}
-            label={variables.getMessage('modals.main.marketplace.addons.remove_all')}
+            label={t('modals.main.marketplace.addons.remove_all')}
           />
         </CustomActions>
       </Header>
@@ -263,27 +261,30 @@ const Added = memo(() => {
         }}
       >
         <Dropdown
-          label={variables.getMessage('modals.main.addons.sort.title')}
+          label={t('modals.main.addons.sort.title')}
           name="sortAddons"
           onChange={(value) => sortAddons(value)}
           items={[
-            { value: 'newest', text: variables.getMessage('modals.main.addons.sort.newest') },
-            { value: 'a-z', text: variables.getMessage('modals.main.addons.sort.a_z') },
-            { value: 'recently-updated', text: variables.getMessage('modals.main.marketplace.addons.recently_updated') },
+            { value: 'newest', text: t('modals.main.addons.sort.newest') },
+            { value: 'a-z', text: t('modals.main.addons.sort.a_z') },
+            {
+              value: 'recently-updated',
+              text: t('modals.main.marketplace.addons.recently_updated'),
+            },
           ]}
         />
         <div className="view-toggle-buttons">
           <button
             className={`view-toggle-btn ${viewType === 'grid' ? 'active' : ''}`}
             onClick={() => toggleViewType('grid')}
-            aria-label={variables.getMessage('common.view_mode.grid')}
+            aria-label={t('common.view_mode.grid')}
           >
             <MdViewModule />
           </button>
           <button
             className={`view-toggle-btn ${viewType === 'list' ? 'active' : ''}`}
             onClick={() => toggleViewType('list')}
-            aria-label={variables.getMessage('common.view_mode.list')}
+            aria-label={t('common.view_mode.list')}
           >
             <MdViewList />
           </button>
diff --git a/src/features/message/options/MessageOptions.jsx b/src/features/message/options/MessageOptions.jsx
index fbad7f00..417348ea 100644
--- a/src/features/message/options/MessageOptions.jsx
+++ b/src/features/message/options/MessageOptions.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { useState } from 'react';
 import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
 import { toast } from 'react-toastify';
@@ -9,12 +9,13 @@ import { Button } from 'components/Elements';
 import EventBus from 'utils/eventbus';
 
 const MessageOptions = () => {
+  const t = useT();
   const [messages, setMessages] = useState(JSON.parse(localStorage.getItem('messages')) || []);
 
   const reset = () => {
     localStorage.setItem('messages', '[]');
     setMessages([]);
-    toast(variables.getMessage('toasts.reset'));
+    toast(t('toasts.reset'));
     EventBus.emit('refresh', 'message');
   };
 
@@ -47,7 +48,7 @@ const MessageOptions = () => {
   return (
     <>
       <Header
-        title={variables.getMessage(`${MESSAGE_SECTION}.title`)}
+        title={t(`${MESSAGE_SECTION}.title`)}
         setting="message"
         category="message"
         element=".message"
@@ -61,13 +62,13 @@ const MessageOptions = () => {
         zoomSetting="zoomMessage"
       >
         <Row final={true}>
-          <Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
+          <Content title={t(`${MESSAGE_SECTION}.messages`)} />
           <Action>
             <Button
               type="settings"
               onClick={() => modifyMessage('add')}
               icon={<MdAdd />}
-              label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
+              label={t(`${MESSAGE_SECTION}.add`)}
             />
           </Action>
         </Row>
@@ -79,14 +80,10 @@ const MessageOptions = () => {
                   <MdOutlineTextsms />
                 </div>
                 <div className="messageText">
-                  <span className="subtitle">
-                    {variables.getMessage(`${MESSAGE_SECTION}.title`)}
-                  </span>
+                  <span className="subtitle">{t(`${MESSAGE_SECTION}.title`)}</span>
                   <Textarea
                     value={messages[index]}
-                    placeholder={variables.getMessage(
-                      'modals.main.settings.sections.message.content',
-                    )}
+                    placeholder={t('modals.main.settings.sections.message.content')}
                     onChange={(e) => message(e, true, index)}
                     minRows={2}
                   />
@@ -98,7 +95,7 @@ const MessageOptions = () => {
                     type="settings"
                     onClick={() => modifyMessage('remove', index)}
                     icon={<MdCancel />}
-                    label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+                    label={t('modals.main.marketplace.product.buttons.remove')}
                   />
                 </div>
               </div>
@@ -109,17 +106,13 @@ const MessageOptions = () => {
           <div className="photosEmpty">
             <div className="emptyNewMessage">
               <MdOutlineTextsms />
-              <span className="title">
-                {variables.getMessage(`${MESSAGE_SECTION}.no_messages`)}
-              </span>
-              <span className="subtitle">
-                {variables.getMessage(`${MESSAGE_SECTION}.add_some`)}
-              </span>
+              <span className="title">{t(`${MESSAGE_SECTION}.no_messages`)}</span>
+              <span className="subtitle">{t(`${MESSAGE_SECTION}.add_some`)}</span>
               <Button
                 type="settings"
                 onClick={() => modifyMessage('add')}
                 icon={<MdAdd />}
-                label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
+                label={t(`${MESSAGE_SECTION}.add`)}
               />
             </div>
           </div>
diff --git a/src/features/misc/components/AddWidgetModal.jsx b/src/features/misc/components/AddWidgetModal.jsx
index 58135901..51a0ebcc 100644
--- a/src/features/misc/components/AddWidgetModal.jsx
+++ b/src/features/misc/components/AddWidgetModal.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { useState, memo } from 'react';
 import { MdWidgets, MdClose, MdCheck } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
@@ -6,6 +6,7 @@ import { Button } from 'components/Elements';
 import 'components/Form/Settings/Checkbox/Checkbox.scss';
 
 function AddWidgetModal({ urlError, addWidget, closeModal, edit, editData, editWidget }) {
+  const t = useT();
   const [name, setName] = useState(edit ? editData.name : '');
   const [url, setUrl] = useState(edit ? editData.url : '');
   const [position, setPosition] = useState(edit ? editData.position : 'center');
@@ -16,10 +17,10 @@ function AddWidgetModal({ urlError, addWidget, closeModal, edit, editData, editW
       <div className="shareHeader">
         <span className="title">
           {edit
-            ? variables.getMessage('modals.main.settings.sections.advanced.custom_widget.edit')
-            : variables.getMessage('modals.main.settings.sections.advanced.custom_widget.new')}
+            ? t('modals.main.settings.sections.advanced.custom_widget.edit')
+            : t('modals.main.settings.sections.advanced.custom_widget.new')}
         </span>
-        <Tooltip title={variables.getMessage('modals.main.settings.buttons.close')}>
+        <Tooltip title={t('modals.main.settings.buttons.close')}>
           <div className="close" onClick={() => closeModal()}>
             <MdClose />
           </div>
@@ -30,9 +31,7 @@ function AddWidgetModal({ urlError, addWidget, closeModal, edit, editData, editW
           <input
             type="text"
             className="text-field-input"
-            placeholder={variables.getMessage(
-              'modals.main.settings.sections.advanced.custom_widget.name',
-            )}
+            placeholder={t('modals.main.settings.sections.advanced.custom_widget.name')}
             value={name}
             onChange={(e) => setName(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
           />
@@ -41,9 +40,7 @@ function AddWidgetModal({ urlError, addWidget, closeModal, edit, editData, editW
           <input
             type="text"
             className="text-field-input"
-            placeholder={variables.getMessage(
-              'modals.main.settings.sections.advanced.custom_widget.url',
-            )}
+            placeholder={t('modals.main.settings.sections.advanced.custom_widget.url')}
             value={url}
             onChange={(e) => setUrl(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
           />
@@ -55,38 +52,26 @@ function AddWidgetModal({ urlError, addWidget, closeModal, edit, editData, editW
             onChange={(e) => setPosition(e.target.value)}
           >
             <option value="center">
-              {variables.getMessage(
-                'modals.main.settings.sections.advanced.custom_widget.positions.center',
-              )}
+              {t('modals.main.settings.sections.advanced.custom_widget.positions.center')}
             </option>
             <option value="top-left">
-              {variables.getMessage(
-                'modals.main.settings.sections.advanced.custom_widget.positions.top_left',
-              )}
+              {t('modals.main.settings.sections.advanced.custom_widget.positions.top_left')}
             </option>
             <option value="top-right">
-              {variables.getMessage(
-                'modals.main.settings.sections.advanced.custom_widget.positions.top_right',
-              )}
+              {t('modals.main.settings.sections.advanced.custom_widget.positions.top_right')}
             </option>
             <option value="bottom-left">
-              {variables.getMessage(
-                'modals.main.settings.sections.advanced.custom_widget.positions.bottom_left',
-              )}
+              {t('modals.main.settings.sections.advanced.custom_widget.positions.bottom_left')}
             </option>
             <option value="bottom-right">
-              {variables.getMessage(
-                'modals.main.settings.sections.advanced.custom_widget.positions.bottom_right',
-              )}
+              {t('modals.main.settings.sections.advanced.custom_widget.positions.bottom_right')}
             </option>
           </select>
         </div>
         <div className="text-field" style={{ gridColumn: 'span 2' }}>
           <div className="checkbox-wrapper">
             <span className="checkbox-label">
-              {variables.getMessage(
-                'modals.main.settings.sections.advanced.custom_widget.render_above',
-              )}
+              {t('modals.main.settings.sections.advanced.custom_widget.render_above')}
             </span>
             <input
               type="checkbox"
@@ -94,9 +79,7 @@ function AddWidgetModal({ urlError, addWidget, closeModal, edit, editData, editW
               checked={renderAbove}
               onChange={(e) => setRenderAbove(e.target.checked)}
               className="checkbox-input"
-              aria-label={variables.getMessage(
-                'modals.main.settings.sections.advanced.custom_widget.render_above',
-              )}
+              aria-label={t('modals.main.settings.sections.advanced.custom_widget.render_above')}
             />
             <div className={`checkbox-box ${renderAbove ? 'checked' : ''}`}>
               {renderAbove && <MdCheck />}
@@ -111,16 +94,14 @@ function AddWidgetModal({ urlError, addWidget, closeModal, edit, editData, editW
             type="settings"
             onClick={() => editWidget(editData, name, url, position, renderAbove)}
             icon={<MdWidgets />}
-            label={variables.getMessage(
-              'modals.main.settings.sections.advanced.custom_widget.edit_button',
-            )}
+            label={t('modals.main.settings.sections.advanced.custom_widget.edit_button')}
           />
         ) : (
           <Button
             type="settings"
             onClick={() => addWidget(name, url, position, renderAbove)}
             icon={<MdWidgets />}
-            label={variables.getMessage('modals.main.settings.sections.advanced.custom_widget.add')}
+            label={t('modals.main.settings.sections.advanced.custom_widget.add')}
           />
         )}
       </div>
diff --git a/src/features/misc/components/SortableWidgetItem.jsx b/src/features/misc/components/SortableWidgetItem.jsx
index ba1c219a..d72eaccb 100644
--- a/src/features/misc/components/SortableWidgetItem.jsx
+++ b/src/features/misc/components/SortableWidgetItem.jsx
@@ -10,7 +10,10 @@ export const SortableWidgetItem = ({ value, startEditWidget, deleteWidget }) =>
   const getPositionLabel = (position) => {
     const positionKey = position?.replace('-', '_');
     const translationKey = `modals.main.settings.sections.advanced.custom_widget.positions.${positionKey}`;
-    return t(translationKey) || t('modals.main.settings.sections.advanced.custom_widget.positions.top_right');
+    return (
+      t(translationKey) ||
+      t('modals.main.settings.sections.advanced.custom_widget.positions.top_right')
+    );
   };
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: value.key,
diff --git a/src/features/misc/sections/About.jsx b/src/features/misc/sections/About.jsx
index 69a3f9cc..6bc84342 100644
--- a/src/features/misc/sections/About.jsx
+++ b/src/features/misc/sections/About.jsx
@@ -8,8 +8,6 @@ import { BiDonateHeart } from 'react-icons/bi';
 import { Tooltip, Button } from 'components/Elements';
 import other_contributors from 'utils/data/other_contributors.json';
 
-import { useT } from 'contexts/TranslationContext';
-
 class About extends PureComponent {
   constructor() {
     super();
@@ -19,8 +17,8 @@ class About extends PureComponent {
       other_contributors: [],
       photographers: [],
       curators: [],
-      update: variables.getMessage('modals.main.settings.sections.about.version.checking_update'),
-      loading: variables.getMessage('modals.main.loading'),
+      update: t('modals.main.settings.sections.about.version.checking_update'),
+      loading: t('modals.main.loading'),
     };
     this.controller = new AbortController();
   }
@@ -76,10 +74,8 @@ class About extends PureComponent {
       }
 
       return this.setState({
-        update: variables.getMessage('modals.main.settings.sections.about.version.error.title'),
-        loading: variables.getMessage(
-          'modals.main.settings.sections.about.version.error.description',
-        ),
+        update: t('modals.main.settings.sections.about.version.error.title'),
+        loading: t('modals.main.settings.sections.about.version.error.description'),
       });
     }
 
@@ -93,12 +89,12 @@ class About extends PureComponent {
 
     const newVersion = versionData[0].tag_name;
 
-    let update = variables.getMessage('modals.main.settings.sections.about.version.no_update');
+    let update = t('modals.main.settings.sections.about.version.no_update');
     if (
       Number(variables.constants.VERSION.replaceAll('.', '')) <
       Number(newVersion.replaceAll('.', ''))
     ) {
-      update = `${variables.getMessage(
+      update = `${t(
         'modals.main.settings.sections.about.version.update_available',
       )}: ${newVersion}`;
     }
@@ -118,8 +114,8 @@ class About extends PureComponent {
   componentDidMount() {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       this.setState({
-        update: variables.getMessage('modals.main.marketplace.offline.description'),
-        loading: variables.getMessage('modals.main.marketplace.offline.description'),
+        update: t('modals.main.marketplace.offline.description'),
+        loading: t('modals.main.marketplace.offline.description'),
       });
       return;
     }
@@ -141,21 +137,21 @@ class About extends PureComponent {
               draggable={false}
               className="aboutLogo"
               src={'src/assets/icons/mue_about.png'}
-              alt={variables.getMessage('common.alt_text.logo')}
+              alt={t('common.alt_text.logo')}
             />
             <div className="aboutText">
-              <span className="title">{variables.getMessage('branding.name')}</span>
+              <span className="title">{t('branding.name')}</span>
               <span className="subtitle">
-                {variables.getMessage('modals.main.settings.sections.about.version.title')}{' '}
+                {t('modals.main.settings.sections.about.version.title')}{' '}
                 {variables.constants.VERSION}
               </span>
               <span className="subtitle">({this.state.update})</span>
             </div>
             <div>
               <span className="subtitle">
-                {variables.getMessage('modals.main.settings.sections.about.copyright', {
+                {t('modals.main.settings.sections.about.copyright', {
                   startYear: 2018,
-                  currentYear: new Date().getFullYear()
+                  currentYear: new Date().getFullYear(),
                 })}{' '}
                 <a
                   className="link"
@@ -173,7 +169,7 @@ class About extends PureComponent {
                 </a>
               </span>
             </div>
-            <span className="subtitle">{variables.getMessage('modals.main.settings.sections.about.license')}</span>
+            <span className="subtitle">{t('modals.main.settings.sections.about.license')}</span>
             <span className="subtitle">
               <a
                 href={variables.constants.PRIVACY_URL}
@@ -181,7 +177,7 @@ class About extends PureComponent {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                {variables.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
+                {t('modals.welcome.sections.privacy.links.privacy_policy')}
               </a>
             </span>
           </div>
@@ -189,47 +185,45 @@ class About extends PureComponent {
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
           <span className="title" style={{ marginBottom: '1em' }}>
-            {variables.getMessage('modals.main.settings.sections.about.contact_us')}
+            {t('modals.main.settings.sections.about.contact_us')}
           </span>
           <div className="aboutContact">
             <Button
               type="linkButton"
               href="https://muetab.com/contact"
               icon={<MdContactPage />}
-              label={variables.getMessage('modals.main.settings.sections.about.form_button')}
+              label={t('modals.main.settings.sections.about.form_button')}
             />
             <Button
               type="linkIconButton"
               href={'mailto:' + variables.constants.EMAIL}
               icon={<MdEmail />}
-              tooltipTitle={variables.getMessage('modals.main.settings.sections.about.social.email')}
+              tooltipTitle={t('modals.main.settings.sections.about.social.email')}
             />
             <Button
               type="linkIconButton"
               href={'https://x.com/' + variables.constants.TWITTER_HANDLE}
               icon={<SiX />}
-              tooltipTitle={variables.getMessage('modals.main.settings.sections.about.social.twitter')}
+              tooltipTitle={t('modals.main.settings.sections.about.social.twitter')}
             />
             <Button
               type="linkIconButton"
               href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
               icon={<FaDiscord />}
-              tooltipTitle={variables.getMessage('modals.main.settings.sections.about.social.discord')}
+              tooltipTitle={t('modals.main.settings.sections.about.social.discord')}
             />
           </div>
         </div>
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
-          <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.support_mue')}
-          </span>
-          <p>{variables.getMessage('modals.main.settings.sections.about.support_subtitle')}</p>
+          <span className="title">{t('modals.main.settings.sections.about.support_mue')}</span>
+          <p>{t('modals.main.settings.sections.about.support_subtitle')}</p>
           <div className="aboutContact">
             <Button
               type="linkButton"
               href={'https://github.com/sponsors/' + variables.constants.ORG_NAME}
               icon={<BiDonateHeart />}
-              label={variables.getMessage('modals.main.settings.sections.about.support_donate')}
+              label={t('modals.main.settings.sections.about.support_donate')}
             />
           </div>
         </div>
@@ -239,7 +233,7 @@ class About extends PureComponent {
           style={{ flexFlow: 'column', alignItems: 'flex-start', minHeight: '70px' }}
         >
           <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.resources_used.title')}
+            {t('modals.main.settings.sections.about.resources_used.title')}
           </span>
           <span className="subtitle">
             <a
@@ -259,14 +253,12 @@ class About extends PureComponent {
             >
               Unsplash
             </a>{' '}
-            ({variables.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
+            ({t('modals.main.settings.sections.about.resources_used.bg_images')})
           </span>
         </div>
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
-          <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.contributors')}
-          </span>
+          <span className="title">{t('modals.main.settings.sections.about.contributors')}</span>
           <p>{this.state.loading}</p>
           <div className="contributorImages">
             {this.state.contributors.map(({ login, id }) => (
@@ -294,18 +286,12 @@ class About extends PureComponent {
         </div>
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
-          <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.supporters')}
-          </span>
+          <span className="title">{t('modals.main.settings.sections.about.supporters')}</span>
           <p>{this.state.loading}</p>
           <div className="contributorImages">
             {this.state.sponsors.map(({ handle, avatar }) => {
               if (handle === 'empty') {
-                return (
-                  <p key="empty">
-                    {variables.getMessage('modals.main.settings.sections.about.no_supporters')}
-                  </p>
-                );
+                return <p key="empty">{t('modals.main.settings.sections.about.no_supporters')}</p>;
               }
 
               return (
@@ -326,15 +312,13 @@ class About extends PureComponent {
           className="settingsRow"
           style={{ flexFlow: 'column', alignItems: 'flex-start', minHeight: '10px' }}
         >
-          <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.photographers')}
-          </span>
+          <span className="title">{t('modals.main.settings.sections.about.photographers')}</span>
           {this.state.loading ? <p>{this.state.loading}</p> : <></>}
           <ul>
             {this.state.photographers.map(({ name, count }) => (
               <li key={name} className="subtitle-photographers">
                 {name}
-                <span> ({variables.getMessage('modals.main.settings.sections.about.image_count', { count })})</span>
+                <span> ({t('modals.main.settings.sections.about.image_count', { count })})</span>
               </li>
             ))}
           </ul>
@@ -348,9 +332,7 @@ class About extends PureComponent {
             borderBottom: '0',
           }}
         >
-          <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.curators')}
-          </span>
+          <span className="title">{t('modals.main.settings.sections.about.curators')}</span>
           {this.state.loading ? <p>{this.state.loading}</p> : <></>}
           <ul>
             {this.state.curators.map((name) => (
diff --git a/src/features/misc/sections/Advanced.jsx b/src/features/misc/sections/Advanced.jsx
index 50ea896c..ba885c18 100644
--- a/src/features/misc/sections/Advanced.jsx
+++ b/src/features/misc/sections/Advanced.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { useState } from 'react';
 import Modal from 'react-modal';
 import {
@@ -28,6 +28,7 @@ import { isValidUrl } from 'utils/links';
 import EventBus from 'utils/eventbus';
 
 function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName }) {
+  const t = useT();
   const [resetModal, setResetModal] = useState(false);
   const [widgets, setWidgets] = useState(JSON.parse(localStorage.getItem('customWidgets') || '[]'));
   const [showAddWidgetModal, setShowAddWidgetModal] = useState(false);
@@ -40,24 +41,24 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
     return localStorage.getItem('welcomePreview') !== 'true' ? (
       <Row final={true}>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.advanced.data')}
-          subtitle={variables.getMessage('modals.main.settings.sections.advanced.data_description')}
+          title={t('modals.main.settings.sections.advanced.data')}
+          subtitle={t('modals.main.settings.sections.advanced.data_description')}
         />
         <div className="resetDataButtonsLayout">
           <Button
             onClick={() => setResetModal(true)}
             icon={<ResetIcon />}
-            label={variables.getMessage('modals.main.settings.buttons.reset')}
+            label={t('modals.main.settings.buttons.reset')}
           />
           <Button
             onClick={() => exportSettings()}
             icon={<ExportIcon />}
-            label={variables.getMessage('modals.main.settings.buttons.export')}
+            label={t('modals.main.settings.buttons.export')}
           />
           <Button
             onClick={() => document.getElementById('file-input').click()}
             icon={<ImportIcon />}
-            label={variables.getMessage('modals.main.settings.buttons.import')}
+            label={t('modals.main.settings.buttons.import')}
           />
         </div>
         <FileUpload
@@ -74,14 +75,10 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
             <MdError />
 
             <span className="title">
-              {variables.getMessage(
-                'modals.main.settings.sections.advanced.preview_data_disabled.title',
-              )}
+              {t('modals.main.settings.sections.advanced.preview_data_disabled.title')}
             </span>
             <span className="subtitle">
-              {variables.getMessage(
-                'modals.main.settings.sections.advanced.preview_data_disabled.description',
-              )}
+              {t('modals.main.settings.sections.advanced.preview_data_disabled.description')}
             </span>
           </div>
         </div>
@@ -93,10 +90,8 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
     return (
       <Row final={true}>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.advanced.custom_css_subtitle',
-          )}
+          title={t('modals.main.settings.sections.advanced.custom_css')}
+          subtitle={t('modals.main.settings.sections.advanced.custom_css_subtitle')}
         />
         <Action>
           <Text name="customcss" textarea={true} category="other" customcss={true} />
@@ -134,7 +129,7 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
     }
 
     if (url.length <= 0 || isValidUrl(url) === false) {
-      setWidgetUrlError(variables.getMessage('widgets.quicklinks.url_error'));
+      setWidgetUrlError(t('widgets.quicklinks.url_error'));
       return;
     }
 
@@ -211,21 +206,15 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
       <>
         <Row>
           <Content
-            title={variables.getMessage(
-              'modals.main.settings.sections.advanced.custom_widget.title',
-            )}
-            subtitle={variables.getMessage(
-              'modals.main.settings.sections.advanced.custom_widget.subtitle',
-            )}
+            title={t('modals.main.settings.sections.advanced.custom_widget.title')}
+            subtitle={t('modals.main.settings.sections.advanced.custom_widget.subtitle')}
           />
           <Action>
             <Button
               type="settings"
               onClick={() => setShowAddWidgetModal(true)}
               icon={<MdWidgets />}
-              label={variables.getMessage(
-                'modals.main.settings.sections.advanced.custom_widget.add',
-              )}
+              label={t('modals.main.settings.sections.advanced.custom_widget.add')}
             />
           </Action>
         </Row>
@@ -234,22 +223,16 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
             <div className="emptyNewMessage">
               <MdWidgets />
               <span className="title">
-                {variables.getMessage(
-                  'modals.main.settings.sections.advanced.custom_widget.no_widgets',
-                )}
+                {t('modals.main.settings.sections.advanced.custom_widget.no_widgets')}
               </span>
               <span className="subtitle">
-                {variables.getMessage(
-                  'modals.main.settings.sections.advanced.custom_widget.add_some',
-                )}
+                {t('modals.main.settings.sections.advanced.custom_widget.add_some')}
               </span>
               <Button
                 type="settings"
                 onClick={() => setShowAddWidgetModal(true)}
                 icon={<MdWidgets />}
-                label={variables.getMessage(
-                  'modals.main.settings.sections.advanced.custom_widget.add',
-                )}
+                label={t('modals.main.settings.sections.advanced.custom_widget.add')}
               />
             </div>
           </div>
@@ -277,8 +260,8 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
   if (isDataSection) {
     header = (
       <Header
-        title={variables.getMessage(`${ADVANCED_SECTION}.title`)}
-        secondaryTitle={variables.getMessage(`${ADVANCED_SECTION}.data`)}
+        title={t(`${ADVANCED_SECTION}.title`)}
+        secondaryTitle={t(`${ADVANCED_SECTION}.data`)}
         goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
       />
@@ -286,8 +269,8 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
   } else if (isCustomCSSSection) {
     header = (
       <Header
-        title={variables.getMessage(`${ADVANCED_SECTION}.title`)}
-        secondaryTitle={variables.getMessage(`${ADVANCED_SECTION}.custom_css`)}
+        title={t(`${ADVANCED_SECTION}.title`)}
+        secondaryTitle={t(`${ADVANCED_SECTION}.custom_css`)}
         goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
       />
@@ -295,14 +278,14 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
   } else if (isCustomWidgetSection) {
     header = (
       <Header
-        title={variables.getMessage(`${ADVANCED_SECTION}.title`)}
-        secondaryTitle={variables.getMessage(`${ADVANCED_SECTION}.custom_widget.title`)}
+        title={t(`${ADVANCED_SECTION}.title`)}
+        secondaryTitle={t(`${ADVANCED_SECTION}.custom_widget.title`)}
         goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
       />
     );
   } else {
-    header = <Header title={variables.getMessage(`${ADVANCED_SECTION}.title`)} report={false} />;
+    header = <Header title={t(`${ADVANCED_SECTION}.title`)} report={false} />;
   }
 
   return (
@@ -355,29 +338,27 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
       ) : (
         <>
           <Section
-            title={variables.getMessage(`${ADVANCED_SECTION}.data`)}
-            subtitle={variables.getMessage(`${ADVANCED_SECTION}.data_subtitle`)}
+            title={t(`${ADVANCED_SECTION}.data`)}
+            subtitle={t(`${ADVANCED_SECTION}.data_subtitle`)}
             onClick={() => onSubSectionChange('data', sectionName)}
             icon={<MdDataUsage />}
           />
           <Section
-            title={variables.getMessage(`${ADVANCED_SECTION}.custom_css`)}
-            subtitle={variables.getMessage(`${ADVANCED_SECTION}.custom_css_subtitle`)}
+            title={t(`${ADVANCED_SECTION}.custom_css`)}
+            subtitle={t(`${ADVANCED_SECTION}.custom_css_subtitle`)}
             onClick={() => onSubSectionChange('customcss', sectionName)}
             icon={<MdCode />}
           />
           <Section
-            title={variables.getMessage(`${ADVANCED_SECTION}.custom_widget.title`)}
-            subtitle={variables.getMessage(`${ADVANCED_SECTION}.custom_widget.subtitle`)}
+            title={t(`${ADVANCED_SECTION}.custom_widget.title`)}
+            subtitle={t(`${ADVANCED_SECTION}.custom_widget.subtitle`)}
             onClick={() => onSubSectionChange('customwidget', sectionName)}
             icon={<MdWidgets />}
           />
           <Row>
             <Content
-              title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
-              subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.offline_subtitle',
-              )}
+              title={t('modals.main.settings.sections.advanced.offline_mode')}
+              subtitle={t('modals.main.settings.sections.advanced.offline_subtitle')}
             />
             <Action>
               <Switch name="offlineMode" element=".other" />
@@ -386,12 +367,8 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
 
           <Row>
             <Content
-              title={variables.getMessage(
-                'modals.main.settings.sections.advanced.marketplace_img_proxy',
-              )}
-              subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.marketplace_img_proxy_subtitle',
-              )}
+              title={t('modals.main.settings.sections.advanced.marketplace_img_proxy')}
+              subtitle={t('modals.main.settings.sections.advanced.marketplace_img_proxy_subtitle')}
             />
             <Action>
               <Switch
@@ -407,10 +384,8 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
 
           <Row>
             <Content
-              title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
-              subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.timezone.subtitle',
-              )}
+              title={t('modals.main.settings.sections.advanced.timezone.title')}
+              subtitle={t('modals.main.settings.sections.advanced.timezone.subtitle')}
             />
             <Action>
               <Dropdown
@@ -420,9 +395,7 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
                 items={[
                   {
                     value: 'auto',
-                    text: variables.getMessage(
-                      'modals.main.settings.sections.advanced.timezone.automatic',
-                    ),
+                    text: t('modals.main.settings.sections.advanced.timezone.automatic'),
                   },
                   ...time_zones.map((timezone) => ({ value: timezone, text: timezone })),
                 ]}
@@ -431,26 +404,22 @@ function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName })
           </Row>
           <Row>
             <Content
-              title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
-              subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.tab_name_subtitle',
-              )}
+              title={t('modals.main.settings.sections.advanced.tab_name')}
+              subtitle={t('modals.main.settings.sections.advanced.tab_name_subtitle')}
             />
             <Action>
-              <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
+              <Text name="tabName" default={t('tabname')} category="other" />
             </Action>
           </Row>
           <Row final={true}>
             <Content
-              title={variables.getMessage('modals.main.settings.sections.experimental.title')}
-              subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.experimental_warning',
-              )}
+              title={t('modals.main.settings.sections.experimental.title')}
+              subtitle={t('modals.main.settings.sections.advanced.experimental_warning')}
             />
             <Action>
               <Switch
                 name="experimental"
-                text={variables.getMessage('modals.main.settings.enabled')}
+                text={t('modals.main.settings.enabled')}
                 element=".other"
               />
             </Action>
diff --git a/src/features/misc/sections/Appearance.jsx b/src/features/misc/sections/Appearance.jsx
index 156a6c14..a2f01fd4 100644
--- a/src/features/misc/sections/Appearance.jsx
+++ b/src/features/misc/sections/Appearance.jsx
@@ -1,6 +1,6 @@
 import { memo, useState } from 'react';
 
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import googleFonts from 'config/googleFonts.json';
 
 import { Checkbox, Dropdown, Radio, Slider, Text } from 'components/Form/Settings';
@@ -11,29 +11,28 @@ import { MdAccessibility } from 'react-icons/md';
 import values from 'utils/data/slider_values.json';
 
 function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName }) {
+  const t = useT();
   const ThemeSelection = () => {
     return (
       <Row>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.theme.description',
-          )}
+          title={t('modals.main.settings.sections.appearance.theme.title')}
+          subtitle={t('modals.main.settings.sections.appearance.theme.description')}
         />
         <Action>
           <Radio
             name="theme"
             options={[
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'),
+                name: t('modals.main.settings.sections.appearance.theme.auto'),
                 value: 'auto',
               },
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.theme.light'),
+                name: t('modals.main.settings.sections.appearance.theme.light'),
                 value: 'light',
               },
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'),
+                name: t('modals.main.settings.sections.appearance.theme.dark'),
                 value: 'dark',
               },
             ]}
@@ -49,14 +48,12 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
     return (
       <Row>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.appearance.font.title')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.font.description',
-          )}
+          title={t('modals.main.settings.sections.appearance.font.title')}
+          subtitle={t('modals.main.settings.sections.appearance.font.description')}
         />
         <Action>
           <Dropdown
-            label={variables.getMessage('modals.main.settings.sections.appearance.font.custom')}
+            label={t('modals.main.settings.sections.appearance.font.custom')}
             name="font"
             category="other"
             searchable={true}
@@ -67,70 +64,60 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
           />
           {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
           <Dropdown
-            label={variables.getMessage(
-              'modals.main.settings.sections.appearance.font.weight.title',
-            )}
+            label={t('modals.main.settings.sections.appearance.font.weight.title')}
             name="fontweight"
             category="other"
             items={[
               {
                 value: '400',
-                text: variables.getMessage(fontWeight + '.normal'),
+                text: t(fontWeight + '.normal'),
               },
               {
                 value: '100',
-                text: variables.getMessage(fontWeight + '.thin'),
+                text: t(fontWeight + '.thin'),
               },
               {
                 value: '200',
-                text: variables.getMessage(fontWeight + '.extra_light'),
+                text: t(fontWeight + '.extra_light'),
               },
               {
                 value: '300',
-                text: variables.getMessage(fontWeight + '.light'),
+                text: t(fontWeight + '.light'),
               },
               {
                 value: '500',
-                text: variables.getMessage(fontWeight + '.medium'),
+                text: t(fontWeight + '.medium'),
               },
               {
                 value: '600',
-                text: variables.getMessage(fontWeight + '.semi_bold'),
+                text: t(fontWeight + '.semi_bold'),
               },
               {
                 value: '700',
-                text: variables.getMessage(fontWeight + '.bold'),
+                text: t(fontWeight + '.bold'),
               },
               {
                 value: '800',
-                text: variables.getMessage(fontWeight + '.extra_bold'),
+                text: t(fontWeight + '.extra_bold'),
               },
             ]}
           />
           <Dropdown
-            label={variables.getMessage(
-              'modals.main.settings.sections.appearance.font.style.title',
-            )}
+            label={t('modals.main.settings.sections.appearance.font.style.title')}
             name="fontstyle"
             category="other"
             items={[
               {
                 value: 'normal',
-                text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.font.style.normal',
-                ),
+                text: t('modals.main.settings.sections.appearance.font.style.normal'),
               },
               {
                 value: 'italic',
-                text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.font.style.italic',
-                ),
+                text: t('modals.main.settings.sections.appearance.font.style.italic'),
               },
               {
                 value: 'oblique',
-                text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.font.style.oblique',
-                ),
+                text: t('modals.main.settings.sections.appearance.font.style.oblique'),
               },
             ]}
           />
@@ -143,10 +130,8 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
     return (
       <Row final={true}>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.style.description',
-          )}
+          title={t('modals.main.settings.sections.appearance.style.title')}
+          subtitle={t('modals.main.settings.sections.appearance.style.description')}
         />
         <Action>
           <Radio
@@ -154,11 +139,11 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
             element=".other"
             options={[
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.style.legacy'),
+                name: t('modals.main.settings.sections.appearance.style.legacy'),
                 value: 'legacy',
               },
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.style.new'),
+                name: t('modals.main.settings.sections.appearance.style.new'),
                 value: 'new',
               },
             ]}
@@ -173,64 +158,43 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
     return (
       <Row final={true}>
         <Content
-          title={variables.getMessage(
-            'modals.main.settings.sections.appearance.accessibility.title',
-          )}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.accessibility.description',
-          )}
+          title={t('modals.main.settings.sections.appearance.accessibility.title')}
+          subtitle={t('modals.main.settings.sections.appearance.accessibility.description')}
         />
         <Action>
           <Dropdown
-            label={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.text_shadow.title',
-            )}
+            label={t('modals.main.settings.sections.appearance.accessibility.text_shadow.title')}
             name="textBorder"
             category="other"
             items={[
               {
                 value: 'new',
-                text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
-                ),
+                text: t('modals.main.settings.sections.appearance.accessibility.text_shadow.new'),
               },
               {
                 value: 'true',
-                text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
-                ),
+                text: t('modals.main.settings.sections.appearance.accessibility.text_shadow.old'),
               },
               {
                 value: 'none',
-                text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
-                ),
+                text: t('modals.main.settings.sections.appearance.accessibility.text_shadow.none'),
               },
             ]}
           />
           <Checkbox
-            text={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.animations',
-            )}
+            text={t('modals.main.settings.sections.appearance.accessibility.animations')}
             name="animations"
             category="other"
           />
           <Slider
-            title={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.toast_duration',
-            )}
+            title={t('modals.main.settings.sections.appearance.accessibility.toast_duration')}
             name="toastDisplayTime"
             default="2500"
             step="100"
             min="500"
             max="5000"
             marks={values.toast}
-            display={
-              ' ' +
-              variables.getMessage(
-                'modals.main.settings.sections.appearance.accessibility.milliseconds',
-              )
-            }
+            display={' ' + t('modals.main.settings.sections.appearance.accessibility.milliseconds')}
           />
         </Action>
       </Row>
@@ -243,21 +207,14 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
   if (isAccessibilitySection) {
     header = (
       <Header
-        title={variables.getMessage('modals.main.settings.sections.appearance.title')}
-        secondaryTitle={variables.getMessage(
-          'modals.main.settings.sections.appearance.accessibility.title',
-        )}
+        title={t('modals.main.settings.sections.appearance.title')}
+        secondaryTitle={t('modals.main.settings.sections.appearance.accessibility.title')}
         goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
       />
     );
   } else {
-    header = (
-      <Header
-        title={variables.getMessage('modals.main.settings.sections.appearance.title')}
-        report={false}
-      />
-    );
+    header = <Header title={t('modals.main.settings.sections.appearance.title')} report={false} />;
   }
   return (
     <>
@@ -267,12 +224,8 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
       ) : (
         <>
           <Section
-            title={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.title',
-            )}
-            subtitle={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.description',
-            )}
+            title={t('modals.main.settings.sections.appearance.accessibility.title')}
+            subtitle={t('modals.main.settings.sections.appearance.accessibility.description')}
             icon={<MdAccessibility />}
             onClick={() => onSubSectionChange('accessibility', sectionName)}
           />
diff --git a/src/features/misc/sections/Changelog.jsx b/src/features/misc/sections/Changelog.jsx
index 115e81f3..a4cd899b 100644
--- a/src/features/misc/sections/Changelog.jsx
+++ b/src/features/misc/sections/Changelog.jsx
@@ -1,8 +1,10 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { useState, useRef } from 'react';
 import { MdOutlineWifiOff } from 'react-icons/md';
 
 const Changelog = () => {
+  const t = useT();
   const [loading, setLoading] = useState(true);
   const iframeRef = useRef(null);
 
@@ -40,10 +42,8 @@ const Changelog = () => {
       <div className="emptyItems">
         <div className="emptyMessage">
           <MdOutlineWifiOff />
-          <h1>{variables.getMessage('modals.main.marketplace.offline.title')}</h1>
-          <p className="description">
-            {variables.getMessage('modals.main.marketplace.offline.description')}
-          </p>
+          <h1>{t('modals.main.marketplace.offline.title')}</h1>
+          <p className="description">{t('modals.main.marketplace.offline.description')}</p>
         </div>
       </div>
     );
@@ -63,7 +63,7 @@ const Changelog = () => {
           }}
         >
           <div id="loader"></div>
-          <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
+          <span className="subtitle">{t('modals.main.loading')}</span>
         </div>
       )}
       <iframe
@@ -80,7 +80,7 @@ const Changelog = () => {
           opacity: loading ? 0 : 1,
           transition: 'opacity 0.2s ease-in-out',
         }}
-        title={variables.getMessage('modals.main.settings.sections.changelog.iframe_title')}
+        title={t('modals.main.settings.sections.changelog.iframe_title')}
       />
     </div>
   );
diff --git a/src/features/misc/sections/Experimental.jsx b/src/features/misc/sections/Experimental.jsx
index 2c41c5f9..c4884e71 100644
--- a/src/features/misc/sections/Experimental.jsx
+++ b/src/features/misc/sections/Experimental.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { useState, memo } from 'react';
 import { Checkbox, Slider } from 'components/Form/Settings';
 import { Button } from 'components/Elements';
@@ -10,25 +10,24 @@ import values from 'utils/data/slider_values.json';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 
 function ExperimentalOptions() {
+  const t = useT();
   const [eventType, setEventType] = useState();
   const [eventName, setEventName] = useState();
 
   return (
     <>
-      <span className="mainTitle">
-        {variables.getMessage('modals.main.settings.sections.experimental.title')}
-      </span>
-      <span className="subtitle">
-        {variables.getMessage('modals.main.settings.sections.experimental.warning')}
-      </span>
+      <span className="mainTitle">{t('modals.main.settings.sections.experimental.title')}</span>
+      <span className="subtitle">{t('modals.main.settings.sections.experimental.warning')}</span>
       <Row>
-        <Content
-          title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
-        />
+        <Content title={t('modals.main.settings.sections.experimental.developer')} />
         <Action>
-          <Checkbox name="debug" text={variables.getMessage('modals.main.settings.sections.experimental.debug_hotkey')} element=".other" />
+          <Checkbox
+            name="debug"
+            text={t('modals.main.settings.sections.experimental.debug_hotkey')}
+            element=".other"
+          />
           <Slider
-            title={variables.getMessage('modals.main.settings.sections.experimental.debug_timeout')}
+            title={t('modals.main.settings.sections.experimental.debug_timeout')}
             name="debugtimeout"
             min="0"
             max="5000"
@@ -37,9 +36,13 @@ function ExperimentalOptions() {
             marks={values.experimental}
             element=".other"
           />
-          <p style={{ textAlign: 'left', width: '100%' }}>{variables.getMessage('modals.main.settings.sections.experimental.send_event')}</p>
+          <p style={{ textAlign: 'left', width: '100%' }}>
+            {t('modals.main.settings.sections.experimental.send_event')}
+          </p>
           <div className="text-field">
-            <label className="text-field-label">{variables.getMessage('modals.main.settings.sections.experimental.event_type')}</label>
+            <label className="text-field-label">
+              {t('modals.main.settings.sections.experimental.event_type')}
+            </label>
             <input
               type="text"
               className="text-field-input"
@@ -49,7 +52,9 @@ function ExperimentalOptions() {
             />
           </div>
           <div className="text-field">
-            <label className="text-field-label">{variables.getMessage('modals.main.settings.sections.experimental.event_name')}</label>
+            <label className="text-field-label">
+              {t('modals.main.settings.sections.experimental.event_name')}
+            </label>
             <input
               type="text"
               className="text-field-input"
@@ -61,24 +66,30 @@ function ExperimentalOptions() {
           <Button
             type="settings"
             onClick={() => EventBus.emit(eventType, eventName)}
-            label={variables.getMessage('common.actions.send')}
+            label={t('common.actions.send')}
           />
           <Button
             type="settings"
-            onClick={() => toast(variables.getMessage('modals.main.settings.sections.experimental.toast_success'))}
-            label={variables.getMessage('modals.main.settings.sections.experimental.normal_toast')}
+            onClick={() => toast(t('modals.main.settings.sections.experimental.toast_success'))}
+            label={t('modals.main.settings.sections.experimental.normal_toast')}
           />
           <Button
             type="settings"
-            onClick={() => toast.success(variables.getMessage('modals.main.settings.sections.experimental.toast_success'))}
-            label={variables.getMessage('modals.main.settings.sections.experimental.achievement_toast')}
+            onClick={() =>
+              toast.success(t('modals.main.settings.sections.experimental.toast_success'))
+            }
+            label={t('modals.main.settings.sections.experimental.achievement_toast')}
           />
         </Action>
       </Row>
       <Row final={true}>
-        <Content title={variables.getMessage('modals.main.settings.sections.experimental.data_section')} />
+        <Content title={t('modals.main.settings.sections.experimental.data_section')} />
         <Action>
-          <Button type="settings" onClick={() => localStorage.clear()} label={variables.getMessage('modals.main.settings.sections.experimental.clear_localstorage')} />
+          <Button
+            type="settings"
+            onClick={() => localStorage.clear()}
+            label={t('modals.main.settings.sections.experimental.clear_localstorage')}
+          />
         </Action>
       </Row>
     </>
diff --git a/src/features/misc/sections/Overview.jsx b/src/features/misc/sections/Overview.jsx
index 9fe15278..e51a2d63 100644
--- a/src/features/misc/sections/Overview.jsx
+++ b/src/features/misc/sections/Overview.jsx
@@ -18,6 +18,7 @@ import {
 import { CSS } from '@dnd-kit/utilities';
 import { toast } from 'react-toastify';
 
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import Greeting from './overview_skeletons/Greeting';
 import Clock from './overview_skeletons/Clock';
@@ -29,15 +30,16 @@ import Message from './overview_skeletons/Message';
 import EventBus from 'utils/eventbus';
 
 const widget_name = {
-  greeting: variables.getMessage('modals.main.settings.sections.greeting.title'),
-  time: variables.getMessage('modals.main.settings.sections.time.title'),
-  quicklinks: variables.getMessage('modals.main.settings.sections.quicklinks.title'),
-  quote: variables.getMessage('modals.main.settings.sections.quote.title'),
-  date: variables.getMessage('modals.main.settings.sections.date.title'),
-  message: variables.getMessage('modals.main.settings.sections.message.title'),
+  greeting: t('modals.main.settings.sections.greeting.title'),
+  time: t('modals.main.settings.sections.time.title'),
+  quicklinks: t('modals.main.settings.sections.quicklinks.title'),
+  quote: t('modals.main.settings.sections.quote.title'),
+  date: t('modals.main.settings.sections.date.title'),
+  message: t('modals.main.settings.sections.message.title'),
 };
 
 const SortableItem = ({ id }) => {
+  const t = useT();
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
 
   const style = { transform: CSS.Transform.toString(transform), transition };
@@ -93,7 +95,7 @@ const Overview = () => {
     const defaultOrder = ['greeting', 'time', 'quicklinks', 'quote', 'date', 'message'];
     localStorage.setItem('order', JSON.stringify(defaultOrder));
     setItems(defaultOrder);
-    toast(variables.getMessage('toasts.reset'));
+    toast(t('toasts.reset'));
   };
 
   const enabled = (setting) => {
@@ -153,12 +155,10 @@ const Overview = () => {
 
   return (
     <>
-      <span className="mainTitle">
-        {variables.getMessage('modals.main.settings.sections.order.title')}
-      </span>
+      <span className="mainTitle">{t('modals.main.settings.sections.order.title')}</span>
       <div className="overviewGrid">
         <div>
-          <span className="title">{variables.getMessage('modals.welcome.buttons.preview')}</span>
+          <span className="title">{t('modals.welcome.buttons.preview')}</span>
           <div className="tabPreview">
             <div className="previewItem" style={{ maxWidth: '50%' }}>
               {items.map((value, index) => {
@@ -175,9 +175,7 @@ const Overview = () => {
           </div>
         </div>
         <div>
-          <span className="title">
-            {variables.getMessage('modals.main.settings.sections.order.title')}
-          </span>
+          <span className="title">{t('modals.main.settings.sections.order.title')}</span>
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
diff --git a/src/features/misc/views/Discover.jsx b/src/features/misc/views/Discover.jsx
index 50711f03..8ee17bf9 100644
--- a/src/features/misc/views/Discover.jsx
+++ b/src/features/misc/views/Discover.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { MARKETPLACE_URL } from 'config/constants';
 import { memo, useEffect, useRef, useState } from 'react';
@@ -9,6 +10,7 @@ import { useMarketplaceInstall } from 'features/marketplace/components/hooks/use
 import Lightbox from 'features/marketplace/components/Elements/Lightbox/Lightbox';
 
 function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
+  const t = useT();
   const iframeRef = useRef(null);
   const [loading, setLoading] = useState(true);
   const [showLightbox, setShowLightbox] = useState(false);
@@ -255,10 +257,8 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
       <div className="emptyItems">
         <div className="emptyMessage">
           <MdOutlineWifiOff />
-          <h1>{variables.getMessage('modals.main.marketplace.offline.title')}</h1>
-          <p className="description">
-            {variables.getMessage('modals.main.marketplace.offline.description')}
-          </p>
+          <h1>{t('modals.main.marketplace.offline.title')}</h1>
+          <p className="description">{t('modals.main.marketplace.offline.description')}</p>
         </div>
       </div>
     );
@@ -288,7 +288,7 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
           }}
         >
           <div id="loader"></div>
-          <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
+          <span className="subtitle">{t('modals.main.loading')}</span>
         </div>
       )}
       <iframe
@@ -321,7 +321,7 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
           opacity: loading ? 0 : 1,
           transition: 'opacity 0.2s ease-in-out',
         }}
-        title={variables.getMessage('modals.main.marketplace.title')}
+        title={t('modals.main.marketplace.title')}
       />
     </div>
   );
@@ -344,7 +344,7 @@ function Discover(props) {
       onSectionChange={props.onSectionChange}
     >
       {sections.map(({ label, name }) => (
-        <div key={name} label={variables.getMessage(label)} name={name}>
+        <div key={name} label={t(label)} name={name}>
           <DiscoverContent
             category={name}
             onBreadcrumbsChange={props.onBreadcrumbsChange}
diff --git a/src/features/misc/views/Library.jsx b/src/features/misc/views/Library.jsx
index f30c05e9..141d07e1 100644
--- a/src/features/misc/views/Library.jsx
+++ b/src/features/misc/views/Library.jsx
@@ -1,10 +1,11 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { memo } from 'react';
 import Tabs from 'components/Elements/MainModal/backend/Tabs';
 
 import Added from '../../marketplace/views/Added';
 
 function Library(props) {
+  const t = useT();
   return (
     <Tabs
       changeTab={(type) => props.changeTab(type)}
@@ -12,10 +13,10 @@ function Library(props) {
       currentTab={props.currentTab}
       onSectionChange={props.onSectionChange}
     >
-      <div label={variables.getMessage('modals.main.addons.added')} name="added">
+      <div label={t('modals.main.addons.added')} name="added">
         <Added />
       </div>
-      <div label={variables.getMessage('modals.main.addons.create.title')} name="create"></div>
+      <div label={t('modals.main.addons.create.title')} name="create"></div>
     </Tabs>
   );
 }
diff --git a/src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx b/src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx
index 9ed368d1..ed3ae275 100644
--- a/src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx
+++ b/src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx
@@ -1,9 +1,10 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 
 import { MdEdit, MdCancel } from 'react-icons/md';
 import { Button } from 'components/Elements';
 
 const QuickLink = ({ item, deleteLink, startEditLink }) => {
+  const t = useT();
   let target,
     rel = null;
   if (localStorage.getItem('quicklinksnewtab') === 'true') {
@@ -56,13 +57,13 @@ const QuickLink = ({ item, deleteLink, startEditLink }) => {
             type="settings"
             onClick={() => startEditLink(item)}
             icon={<MdEdit />}
-            label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+            label={t('modals.main.settings.sections.quicklinks.edit')}
           />
           <Button
             type="settings"
             onClick={(e) => deleteLink(item.key, e)}
             icon={<MdCancel />}
-            label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+            label={t('modals.main.marketplace.product.buttons.remove')}
           />
         </div>
       </div>
diff --git a/src/features/navbar/components/Apps.jsx b/src/features/navbar/components/Apps.jsx
index 7b6b3238..27081c48 100644
--- a/src/features/navbar/components/Apps.jsx
+++ b/src/features/navbar/components/Apps.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { memo, useState, useEffect } from 'react';
 
@@ -29,8 +30,7 @@ const Apps = ({ appsRef, floatRef, position, xPosition, yPosition }) => {
         setApps(JSON.parse(localStorage.getItem('applinks')));
         try {
           setZoom();
-        } catch {
-        }
+        } catch {}
       }
     };
 
@@ -77,7 +77,7 @@ const Apps = ({ appsRef, floatRef, position, xPosition, yPosition }) => {
           <div className="flexTodo">
             <div className="topBarNotes" style={{ display: 'flex' }}>
               <MdOutlineApps />
-              <span>{variables.getMessage('widgets.navbar.apps.title')}</span>
+              <span>{t('widgets.navbar.apps.title')}</span>
             </div>
           </div>
           {appsInfo.length > 0 ? (
@@ -115,6 +115,7 @@ const Apps = ({ appsRef, floatRef, position, xPosition, yPosition }) => {
 };
 
 function AppsWrapper() {
+  const t = useT();
   const [reference, setReference] = useState(null);
 
   const { x, y, refs, strategy } = useFloating({
diff --git a/src/features/quicklinks/QuickLinks.jsx b/src/features/quicklinks/QuickLinks.jsx
index cbbdde0e..74c5e48c 100644
--- a/src/features/quicklinks/QuickLinks.jsx
+++ b/src/features/quicklinks/QuickLinks.jsx
@@ -16,7 +16,9 @@ const QuickLinks = memo(() => {
 
   // widget zoom
   const setZoom = useCallback((element) => {
-    if (!element) {return;}
+    if (!element) {
+      return;
+    }
 
     const zoom = localStorage.getItem('zoomQuicklinks') || 100;
     const style = localStorage.getItem('quickLinksStyle') || 'card';
diff --git a/src/features/quicklinks/options/QuickLink.jsx b/src/features/quicklinks/options/QuickLink.jsx
index e9adceac..0236b704 100644
--- a/src/features/quicklinks/options/QuickLink.jsx
+++ b/src/features/quicklinks/options/QuickLink.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 
 import { MdEdit, MdCancel, MdDragHandle } from 'react-icons/md';
 import { Button } from 'components/Elements';
@@ -16,6 +16,7 @@ const QuickLink = ({
   isDragOver = false,
   isDragging = false,
 }) => {
+  const t = useT();
   let target,
     rel = null;
   if (localStorage.getItem('quicklinksnewtab') === 'true') {
@@ -72,13 +73,13 @@ const QuickLink = ({
             type="settings"
             onClick={() => startEditLink(item)}
             icon={<MdEdit />}
-            label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+            label={t('modals.main.settings.sections.quicklinks.edit')}
           />
           <Button
             type="settings"
             onClick={(e) => deleteLink(item.key, e)}
             icon={<MdCancel />}
-            label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+            label={t('modals.main.marketplace.product.buttons.remove')}
           />
         </div>
       </div>
diff --git a/src/features/quicklinks/options/QuickLinksOptions.jsx b/src/features/quicklinks/options/QuickLinksOptions.jsx
index 865859b6..e93b842e 100644
--- a/src/features/quicklinks/options/QuickLinksOptions.jsx
+++ b/src/features/quicklinks/options/QuickLinksOptions.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { useState, useEffect, useRef } from 'react';
 import {
@@ -9,7 +10,14 @@ import {
   MdOutlineFolderOpen,
 } from 'react-icons/md';
 import { arrayMove } from '@dnd-kit/sortable';
-import { Header, Row, Content, Action, PreferencesWrapper, Section } from 'components/Layout/Settings';
+import {
+  Header,
+  Row,
+  Content,
+  Action,
+  PreferencesWrapper,
+  Section,
+} from 'components/Layout/Settings';
 import { Checkbox, Dropdown } from 'components/Form/Settings';
 import { Button } from 'components/Elements';
 import Modal from 'react-modal';
@@ -23,6 +31,7 @@ import EventBus from 'utils/eventbus';
 import { getTitleFromUrl, isValidUrl } from 'utils/links';
 
 const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName }) => {
+  const t = useT();
   const [items, setItems] = useState(readQuicklinks());
   const [showAddModal, setShowAddModal] = useState(false);
   const [urlError, setUrlError] = useState('');
@@ -35,7 +44,9 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
   const silenceEventRef = useRef(false);
 
   const setContainerDisplay = (enabled) => {
-    if (!quicklinksContainer || !quicklinksContainer.current) {return;}
+    if (!quicklinksContainer || !quicklinksContainer.current) {
+      return;
+    }
     const el = quicklinksContainer.current;
     el.classList.toggle('disabled', !enabled);
     if (!enabled) {
@@ -68,12 +79,12 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
     }
 
     if (url.length <= 0 || isValidUrl(url) === false) {
-      setUrlError(variables.getMessage('widgets.quicklinks.url_error'));
+      setUrlError(t('widgets.quicklinks.url_error'));
       return;
     }
 
     if (iconType === 'custom_url' && icon.length > 0 && isValidUrl(icon) === false) {
-      setIconError(variables.getMessage('widgets.quicklinks.url_error'));
+      setIconError(t('widgets.quicklinks.url_error'));
       return;
     }
 
@@ -219,24 +230,24 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
       <>
         <Row>
           <Content
-            title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
-            subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.styling_description`)}
+            title={t(`${QUICKLINKS_SECTION}.styling`)}
+            subtitle={t(`${QUICKLINKS_SECTION}.styling_description`)}
           />
           <Action>
             <Dropdown
-              label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
+              label={t(`${QUICKLINKS_SECTION}.style`)}
               name="quickLinksStyle"
               category="quicklinks"
               items={[
-                { value: 'card', text: variables.getMessage(`${QUICKLINKS_SECTION}.layout_card`) },
-                { value: 'icon', text: variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`) },
+                { value: 'card', text: t(`${QUICKLINKS_SECTION}.layout_card`) },
+                { value: 'icon', text: t(`${QUICKLINKS_SECTION}.options.icon`) },
                 {
                   value: 'text_only',
-                  text: variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`),
+                  text: t(`${QUICKLINKS_SECTION}.options.text_only`),
                 },
                 {
                   value: 'metro',
-                  text: variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`),
+                  text: t(`${QUICKLINKS_SECTION}.options.metro`),
                 },
               ]}
             />
@@ -244,26 +255,29 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
         </Row>
 
         <Row>
-          <Content title={variables.getMessage(`${QUICKLINKS_SECTION}.layout`)} subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.layout_description`)} />
+          <Content
+            title={t(`${QUICKLINKS_SECTION}.layout`)}
+            subtitle={t(`${QUICKLINKS_SECTION}.layout_description`)}
+          />
           <Action>
             <Dropdown
-              label={variables.getMessage(`${QUICKLINKS_SECTION}.layout_mode`)}
+              label={t(`${QUICKLINKS_SECTION}.layout_mode`)}
               name="quicklinks_layoutMode"
               category="quicklinks"
               onChange={(value) => handleLayoutChange('layoutMode', value)}
               items={[
-                { value: 'flex', text: variables.getMessage(`${QUICKLINKS_SECTION}.layout_flex`) },
-                { value: 'grid', text: variables.getMessage(`${QUICKLINKS_SECTION}.layout_grid`) },
-                { value: 'compact', text: variables.getMessage(`${QUICKLINKS_SECTION}.layout_compact`) },
+                { value: 'flex', text: t(`${QUICKLINKS_SECTION}.layout_flex`) },
+                { value: 'grid', text: t(`${QUICKLINKS_SECTION}.layout_grid`) },
+                { value: 'compact', text: t(`${QUICKLINKS_SECTION}.layout_compact`) },
               ]}
             />
             <Dropdown
-              label={variables.getMessage(`${QUICKLINKS_SECTION}.grid_columns`)}
+              label={t(`${QUICKLINKS_SECTION}.grid_columns`)}
               name="quicklinks_gridColumns"
               category="quicklinks"
               onChange={(value) => handleLayoutChange('gridColumns', value)}
               items={[
-                { value: 'auto', text: variables.getMessage(`${QUICKLINKS_SECTION}.grid_columns_auto`) },
+                { value: 'auto', text: t(`${QUICKLINKS_SECTION}.grid_columns_auto`) },
                 { value: '2', text: '2' },
                 { value: '3', text: '3' },
                 { value: '4', text: '4' },
@@ -272,12 +286,12 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
               ]}
             />
             <Dropdown
-              label={variables.getMessage(`${QUICKLINKS_SECTION}.grid_rows`)}
+              label={t(`${QUICKLINKS_SECTION}.grid_rows`)}
               name="quicklinks_gridRows"
               category="quicklinks"
               onChange={(value) => handleLayoutChange('gridRows', value)}
               items={[
-                { value: 'auto', text: variables.getMessage(`${QUICKLINKS_SECTION}.grid_columns_auto`) },
+                { value: 'auto', text: t(`${QUICKLINKS_SECTION}.grid_columns_auto`) },
                 { value: '2', text: '2' },
                 { value: '3', text: '3' },
                 { value: '4', text: '4' },
@@ -292,18 +306,18 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
   const DisplaySection = () => (
     <Row>
       <Content
-        title={variables.getMessage('modals.main.settings.additional_settings')}
-        subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
+        title={t('modals.main.settings.additional_settings')}
+        subtitle={t(`${QUICKLINKS_SECTION}.additional`)}
       />
       <Action>
         <Checkbox
           name="quicklinksnewtab"
-          text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
+          text={t(`${QUICKLINKS_SECTION}.open_new`)}
           category="quicklinks"
         />
         <Checkbox
           name="quicklinkstooltip"
-          text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
+          text={t(`${QUICKLINKS_SECTION}.tooltip`)}
           category="quicklinks"
         />
       </Action>
@@ -321,11 +335,14 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
 
     return (
       <Row>
-        <Content title={variables.getMessage(`${QUICKLINKS_SECTION}.grouping`)} subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.grouping_description`)} />
+        <Content
+          title={t(`${QUICKLINKS_SECTION}.grouping`)}
+          subtitle={t(`${QUICKLINKS_SECTION}.grouping_description`)}
+        />
         <Action>
           <Checkbox
             name="quicklinks_groupingEnabled"
-            text={variables.getMessage(`${QUICKLINKS_SECTION}.enable_grouping`)}
+            text={t(`${QUICKLINKS_SECTION}.enable_grouping`)}
             category="quicklinks"
             onChange={handleGroupingToggle}
           />
@@ -346,7 +363,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
 
     const handleSync = async () => {
       setSyncing(true);
-      setSyncStatus(variables.getMessage(`${QUICKLINKS_SECTION}.syncing`));
+      setSyncStatus(t(`${QUICKLINKS_SECTION}.syncing`));
       try {
         const config = JSON.parse(localStorage.getItem('quicklinks_config') || '{}');
         if (!config.bookmarkSyncEnabled) {
@@ -358,7 +375,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
         if (!hasPermission) {
           const granted = await BookmarkService.requestPermissions();
           if (!granted) {
-            setSyncStatus(variables.getMessage(`${QUICKLINKS_SECTION}.permission_denied`));
+            setSyncStatus(t(`${QUICKLINKS_SECTION}.permission_denied`));
             setSyncing(false);
             return;
           }
@@ -366,15 +383,15 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
 
         const result = await BookmarkService.syncBookmarks();
         setSyncStatus(
-          variables.getMessage(`${QUICKLINKS_SECTION}.sync_success`, {
+          t(`${QUICKLINKS_SECTION}.sync_success`, {
             imported: result.imported,
             updated: result.updated,
-            removed: result.removed
+            removed: result.removed,
           }),
         );
         EventBus.emit('refresh', 'quicklinks');
       } catch (e) {
-        setSyncStatus(variables.getMessage(`${QUICKLINKS_SECTION}.sync_error`, { message: e.message }));
+        setSyncStatus(t(`${QUICKLINKS_SECTION}.sync_error`, { message: e.message }));
       }
       setSyncing(false);
     };
@@ -383,13 +400,13 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
       <>
         <Row>
           <Content
-            title={variables.getMessage(`${QUICKLINKS_SECTION}.bookmark_sync_title`)}
-            subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.bookmark_sync_subtitle`)}
+            title={t(`${QUICKLINKS_SECTION}.bookmark_sync_title`)}
+            subtitle={t(`${QUICKLINKS_SECTION}.bookmark_sync_subtitle`)}
           />
           <Action>
             <Checkbox
               name="quicklinks_bookmarkSyncEnabled"
-              text={variables.getMessage(`${QUICKLINKS_SECTION}.enable_bookmark_sync`)}
+              text={t(`${QUICKLINKS_SECTION}.enable_bookmark_sync`)}
               category="quicklinks"
               onChange={handleSyncToggle}
             />
@@ -397,15 +414,15 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
         </Row>
         <Row>
           <Content
-            title={variables.getMessage(`${QUICKLINKS_SECTION}.manual_sync_title`)}
-            subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.manual_sync_subtitle`)}
+            title={t(`${QUICKLINKS_SECTION}.manual_sync_title`)}
+            subtitle={t(`${QUICKLINKS_SECTION}.manual_sync_subtitle`)}
           />
           <Action>
             <Button
               type="settings"
               onClick={handleSync}
               icon={<MdSync />}
-              label={variables.getMessage(`${QUICKLINKS_SECTION}.sync_bookmarks_button`)}
+              label={t(`${QUICKLINKS_SECTION}.sync_bookmarks_button`)}
               disabled={syncing}
             />
             {syncStatus && <p style={{ marginTop: '8px', fontSize: '14px' }}>{syncStatus}</p>}
@@ -419,7 +436,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
     if (currentSubSection === 'appearance') {
       return (
         <Header
-          title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
+          title={t(`${QUICKLINKS_SECTION}.title`)}
           secondaryTitle="Appearance"
           goBack={() => onSubSectionChange(null, sectionName)}
           zoomSetting="zoomQuicklinks"
@@ -430,7 +447,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
     if (currentSubSection === 'display') {
       return (
         <Header
-          title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
+          title={t(`${QUICKLINKS_SECTION}.title`)}
           secondaryTitle="Display"
           goBack={() => onSubSectionChange(null, sectionName)}
         />
@@ -440,7 +457,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
     if (currentSubSection === 'organization') {
       return (
         <Header
-          title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
+          title={t(`${QUICKLINKS_SECTION}.title`)}
           secondaryTitle="Organization"
           goBack={() => onSubSectionChange(null, sectionName)}
         />
@@ -450,7 +467,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
     if (currentSubSection === 'sync') {
       return (
         <Header
-          title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
+          title={t(`${QUICKLINKS_SECTION}.title`)}
           secondaryTitle="Bookmark Sync"
           goBack={() => onSubSectionChange(null, sectionName)}
         />
@@ -459,7 +476,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
 
     return (
       <Header
-        title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
+        title={t(`${QUICKLINKS_SECTION}.title`)}
         setting="quicklinksenabled"
         category="quicklinks"
         element=".quicklinks-container"
@@ -480,29 +497,29 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
             visibilityToggle={true}
           >
             <Section
-              title={variables.getMessage(`${QUICKLINKS_SECTION}.appearance_title`)}
-              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.appearance_subtitle`)}
+              title={t(`${QUICKLINKS_SECTION}.appearance_title`)}
+              subtitle={t(`${QUICKLINKS_SECTION}.appearance_subtitle`)}
               icon={<MdOutlineStyle />}
               onClick={() => onSubSectionChange('appearance', sectionName)}
             />
 
             <Section
-              title={variables.getMessage(`${QUICKLINKS_SECTION}.display_title`)}
-              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.display_subtitle`)}
+              title={t(`${QUICKLINKS_SECTION}.display_title`)}
+              subtitle={t(`${QUICKLINKS_SECTION}.display_subtitle`)}
               icon={<MdOutlineVisibility />}
               onClick={() => onSubSectionChange('display', sectionName)}
             />
 
             <Section
-              title={variables.getMessage(`${QUICKLINKS_SECTION}.organization_title`)}
-              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.organization_subtitle`)}
+              title={t(`${QUICKLINKS_SECTION}.organization_title`)}
+              subtitle={t(`${QUICKLINKS_SECTION}.organization_subtitle`)}
               icon={<MdOutlineFolderOpen />}
               onClick={() => onSubSectionChange('organization', sectionName)}
             />
 
             <Section
-              title={variables.getMessage(`${QUICKLINKS_SECTION}.bookmark_sync_section_title`)}
-              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.bookmark_sync_section_subtitle`)}
+              title={t(`${QUICKLINKS_SECTION}.bookmark_sync_section_title`)}
+              subtitle={t(`${QUICKLINKS_SECTION}.bookmark_sync_section_subtitle`)}
               icon={<MdSync />}
               onClick={() => onSubSectionChange('sync', sectionName)}
             />
@@ -559,13 +576,13 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
             visibilityToggle={false}
           >
             <Row final={true}>
-              <Content title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} />
+              <Content title={t(`${QUICKLINKS_SECTION}.title`)} />
               <Action>
                 <Button
                   type="settings"
                   onClick={() => enabled && setShowAddModal(true)}
                   icon={<MdAddLink />}
-                  label={variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
+                  label={t(`${QUICKLINKS_SECTION}.add_link`)}
                   disabled={!enabled}
                 />
               </Action>
@@ -575,17 +592,15 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
               <div className="photosEmpty">
                 <div className="emptyNewMessage">
                   <MdLinkOff />
-                  <span className="title">
-                    {variables.getMessage(`${QUICKLINKS_SECTION}.no_quicklinks`)}
-                  </span>
+                  <span className="title">{t(`${QUICKLINKS_SECTION}.no_quicklinks`)}</span>
                   <span className="subtitle">
-                    {variables.getMessage('modals.main.settings.sections.message.add_some')}
+                    {t('modals.main.settings.sections.message.add_some')}
                   </span>
                   <Button
                     type="settings"
                     onClick={() => setShowAddModal(true)}
                     icon={<MdAddLink />}
-                    label={variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
+                    label={t(`${QUICKLINKS_SECTION}.add_link`)}
                   />
                 </div>
               </div>
diff --git a/src/features/quicklinks/quicklinks.scss b/src/features/quicklinks/quicklinks.scss
index 9ef67f36..107a2322 100644
--- a/src/features/quicklinks/quicklinks.scss
+++ b/src/features/quicklinks/quicklinks.scss
@@ -427,7 +427,6 @@ button.quicklinks {
 }
 
 .quickLinksCard {
-
   text-decoration: none;
   display: flex;
   flex-direction: column;
@@ -484,7 +483,6 @@ button.quicklinks {
 
     text-shadow: 0 0 10px rgb(0 0 0 / 30%);
 
-
     @include themed {
       color: t($color);
     }
diff --git a/src/features/quote/Quote.jsx b/src/features/quote/Quote.jsx
index 7cab6f5d..9377be0a 100644
--- a/src/features/quote/Quote.jsx
+++ b/src/features/quote/Quote.jsx
@@ -28,9 +28,7 @@ export default function Quote() {
   const [authorDetails, setAuthorDetails] = useState(
     localStorage.getItem('authorDetails') === 'true',
   );
-  const [legacyStyle, setLegacyStyle] = useState(
-    localStorage.getItem('widgetStyle') === 'legacy',
-  );
+  const [legacyStyle, setLegacyStyle] = useState(localStorage.getItem('widgetStyle') === 'legacy');
 
   const isFavourited = useMemo(() => {
     const favQuote = localStorage.getItem('favouriteQuote');
diff --git a/src/features/quote/hooks/useQuoteActions.js b/src/features/quote/hooks/useQuoteActions.js
index ea88ef60..e38f83c7 100644
--- a/src/features/quote/hooks/useQuoteActions.js
+++ b/src/features/quote/hooks/useQuoteActions.js
@@ -1,15 +1,17 @@
 import { useCallback } from 'react';
 import { toast } from 'react-toastify';
+import { useT } from 'contexts';
 import variables from 'config/variables';
 
 /**
  * Custom hook for quote actions (copy, favourite, share)
  */
 export function useQuoteActions(quoteData) {
+  const t = useT();
   const copyQuote = useCallback(() => {
     variables.stats.postEvent('feature', 'Quote copied');
     navigator.clipboard.writeText(`${quoteData.quote} - ${quoteData.author}`);
-    toast(variables.getMessage('toasts.quote'));
+    toast(t('toasts.quote'));
   }, [quoteData.quote, quoteData.author]);
 
   const toggleFavourite = useCallback(() => {
diff --git a/src/features/quote/hooks/useQuoteLoader.js b/src/features/quote/hooks/useQuoteLoader.js
index 452edfde..d11b1b01 100644
--- a/src/features/quote/hooks/useQuoteLoader.js
+++ b/src/features/quote/hooks/useQuoteLoader.js
@@ -245,8 +245,7 @@ export function useQuoteLoader(updateQuote) {
           const cachedQuote = JSON.parse(cached);
           updateQuote(cachedQuote);
           return;
-        } catch {
-        }
+        } catch {}
       }
     }
 
diff --git a/src/features/quote/options/QuoteOptions.jsx b/src/features/quote/options/QuoteOptions.jsx
index d0c0f1a1..00e8f79b 100644
--- a/src/features/quote/options/QuoteOptions.jsx
+++ b/src/features/quote/options/QuoteOptions.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import React, { useState, useEffect } from 'react';
 import { MdCancel, MdAdd, MdSource, MdOutlineFormatQuote, MdExplore } from 'react-icons/md';
@@ -20,6 +21,7 @@ import { updateHash } from 'utils/deepLinking';
 import './QuoteOptions.scss';
 
 const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) => {
+  const t = useT();
   const getCustom = () => {
     let data = JSON.parse(localStorage.getItem('customQuote'));
     if (data === null) {
@@ -83,23 +85,15 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
     return (
       <Row>
         <Content
-          title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
-          subtitle={variables.getMessage('modals.main.settings.sections.quote.buttons.subtitle')}
+          title={t(`${QUOTE_SECTION}.buttons.title`)}
+          subtitle={t('modals.main.settings.sections.quote.buttons.subtitle')}
         />
         <Action>
-          <Checkbox
-            name="copyButton"
-            text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
-            category="quote"
-          />
-          <Checkbox
-            name="quoteShareButton"
-            text={variables.getMessage('widgets.quote.share')}
-            category="quote"
-          />
+          <Checkbox name="copyButton" text={t(`${QUOTE_SECTION}.buttons.copy`)} category="quote" />
+          <Checkbox name="quoteShareButton" text={t('widgets.quote.share')} category="quote" />
           <Checkbox
             name="favouriteQuoteEnabled"
-            text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
+            text={t(`${QUOTE_SECTION}.buttons.favourite`)}
             category="quote"
           />
         </Action>
@@ -111,15 +105,15 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
     return (
       <Dropdown
         name="quoteType"
-        label={variables.getMessage('modals.main.settings.sections.background.type.title')}
+        label={t('modals.main.settings.sections.background.type.title')}
         onChange={(value) => setQuoteType(value)}
         category="quote"
         items={[
           localStorage.getItem('quote_packs') && {
             value: 'quote_pack',
-            text: variables.getMessage('modals.main.marketplace.title'),
+            text: t('modals.main.marketplace.title'),
           },
-          { value: 'custom', text: variables.getMessage(`${QUOTE_SECTION}.custom`) },
+          { value: 'custom', text: t(`${QUOTE_SECTION}.custom`) },
         ]}
       />
     );
@@ -129,13 +123,13 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
     return (
       <Row>
         <Content
-          title={variables.getMessage(`${QUOTE_SECTION}.frequency.title`)}
-          subtitle={variables.getMessage(`${QUOTE_SECTION}.frequency.subtitle`)}
+          title={t(`${QUOTE_SECTION}.frequency.title`)}
+          subtitle={t(`${QUOTE_SECTION}.frequency.subtitle`)}
         />
         <Action>
           <Dropdown
             name="quoteFrequency"
-            label={variables.getMessage(`${QUOTE_SECTION}.frequency.title`)}
+            label={t(`${QUOTE_SECTION}.frequency.title`)}
             onChange={(value) => {
               localStorage.setItem('quoteStartTime', Date.now());
               const oldValue = localStorage.getItem('quoteFrequency');
@@ -150,7 +144,7 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
             }}
             items={FREQUENCY_OPTIONS.map((opt) => ({
               value: opt.value,
-              text: variables.getMessage(opt.text),
+              text: t(opt.text),
             }))}
           />
         </Action>
@@ -162,24 +156,24 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
     return (
       <Row final={true}>
         <Content
-          title={variables.getMessage('modals.main.settings.additional_settings')}
-          subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
+          title={t('modals.main.settings.additional_settings')}
+          subtitle={t(`${QUOTE_SECTION}.additional`)}
         />
         <Action>
           <Checkbox
             name="authorDetails"
-            text={variables.getMessage(`${QUOTE_SECTION}.author_details`)}
+            text={t(`${QUOTE_SECTION}.author_details`)}
             element=".other"
           />
           <Checkbox
             name="authorLink"
-            text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
+            text={t(`${QUOTE_SECTION}.author_link`)}
             element=".other"
             disabled={localStorage.getItem('authorDetails') === 'false'}
           />
           <Checkbox
             name="authorImg"
-            text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
+            text={t(`${QUOTE_SECTION}.author_img`)}
             element=".other"
             disabled={localStorage.getItem('authorDetails') === 'false'}
           />
@@ -221,13 +215,13 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
     if (installedQuotePacks.length === 1) {
       const remainingPack = installedQuotePacks[0];
       if (remainingPack.id === DEFAULT_PACK_ID || remainingPack.name === name) {
-        toast(variables.getMessage('toasts.quote_pack_only_one'));
+        toast(t('toasts.quote_pack_only_one'));
         return;
       }
     }
 
     uninstall(type, name);
-    toast(variables.getMessage('toasts.uninstalled'));
+    toast(t('toasts.uninstalled'));
     variables.stats.postEvent('marketplace-item', `${name} uninstalled`);
     variables.stats.postEvent('marketplace', 'Uninstall');
     setInstalledQuotePacks(getInstalledQuotePacks());
@@ -262,15 +256,15 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
       <>
         <Row final={true}>
           <Content
-            title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
-            subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
+            title={t(`${QUOTE_SECTION}.custom`)}
+            subtitle={t(`${QUOTE_SECTION}.custom_subtitle`)}
           />
           <Action>
             <Button
               type="settings"
               onClick={() => modifyCustomQuote('add')}
               icon={<MdAdd />}
-              label={variables.getMessage(`${QUOTE_SECTION}.add`)}
+              label={t(`${QUOTE_SECTION}.add`)}
             />
           </Action>
         </Row>
@@ -283,14 +277,12 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
                   <div className="quoteHeader">
                     <span className="quoteLabel">
                       <MdOutlineFormatQuote className="quoteLabelIcon" />
-                      {variables.getMessage('modals.main.settings.sections.quote.title')}
+                      {t('modals.main.settings.sections.quote.title')}
                     </span>
                     <button
                       className="quoteRemoveBtn"
                       onClick={() => modifyCustomQuote('remove', index)}
-                      aria-label={variables.getMessage(
-                        'modals.main.marketplace.product.buttons.remove',
-                      )}
+                      aria-label={t('modals.main.marketplace.product.buttons.remove')}
                     >
                       <MdCancel />
                     </button>
@@ -298,9 +290,7 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
                   <div className="quoteInputGroup">
                     <Textarea
                       value={quote.quote}
-                      placeholder={variables.getMessage(
-                        'modals.main.settings.sections.quote.title',
-                      )}
+                      placeholder={t('modals.main.settings.sections.quote.title')}
                       onChange={(e) => handleCustomQuote(e, true, index, 'quote')}
                       minRows={3}
                       className="quoteTextarea"
@@ -308,15 +298,13 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
                   </div>
                   <div className="quoteInputGroup">
                     <label className="quoteLabel">
-                      {variables.getMessage('modals.main.settings.sections.quote.author')}
+                      {t('modals.main.settings.sections.quote.author')}
                     </label>
                     <input
                       type="text"
                       className="authorInput"
                       value={quote.author}
-                      placeholder={variables.getMessage(
-                        'modals.main.settings.sections.quote.author',
-                      )}
+                      placeholder={t('modals.main.settings.sections.quote.author')}
                       onChange={(e) => handleCustomQuote(e, true, index, 'author')}
                     />
                   </div>
@@ -327,15 +315,15 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
         ) : (
           <div className="customQuoteEmpty">
             <MdOutlineFormatQuote className="emptyIcon" />
-            <span className="emptyTitle">{variables.getMessage(`${QUOTE_SECTION}.no_quotes`)}</span>
+            <span className="emptyTitle">{t(`${QUOTE_SECTION}.no_quotes`)}</span>
             <span className="emptySubtitle">
-              {variables.getMessage('modals.main.settings.sections.message.add_some')}
+              {t('modals.main.settings.sections.message.add_some')}
             </span>
             <Button
               type="settings"
               onClick={() => modifyCustomQuote('add')}
               icon={<MdAdd />}
-              label={variables.getMessage(`${QUOTE_SECTION}.add`)}
+              label={t(`${QUOTE_SECTION}.add`)}
             />
           </div>
         )}
@@ -347,9 +335,7 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
       <>
         <Row final={true}>
           <Content
-            title={variables.getMessage(
-              'modals.main.settings.sections.quote.installed_packs_title',
-            )}
+            title={t('modals.main.settings.sections.quote.installed_packs_title')}
             subtitle={`${installedQuotePacks.length} ${installedQuotePacks.length === 1 ? 'pack' : 'packs'} • ${totalQuotes} ${totalQuotes === 1 ? 'quote' : 'quotes'}`}
           />
           <Action>
@@ -357,7 +343,7 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
               type="settings"
               onClick={goToQuotePacks}
               icon={<MdExplore />}
-              label={variables.getMessage('modals.main.settings.sections.quote.get_more')}
+              label={t('modals.main.settings.sections.quote.get_more')}
             />
           </Action>
         </Row>
@@ -383,16 +369,14 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
     <>
       {isSourceSection ? (
         <Header
-          title={variables.getMessage(`${QUOTE_SECTION}.title`)}
-          secondaryTitle={variables.getMessage(
-            'modals.main.settings.sections.background.source.title',
-          )}
+          title={t(`${QUOTE_SECTION}.title`)}
+          secondaryTitle={t('modals.main.settings.sections.background.source.title')}
           goBack={() => onSubSectionChange(null, sectionName)}
           report={false}
         />
       ) : (
         <Header
-          title={variables.getMessage(`${QUOTE_SECTION}.title`)}
+          title={t(`${QUOTE_SECTION}.title`)}
           setting="quote"
           category="quote"
           element=".quotediv"
@@ -403,8 +387,8 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
       {isSourceSection && (
         <Row final={true}>
           <Content
-            title={variables.getMessage('modals.main.settings.sections.background.source.title')}
-            subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
+            title={t('modals.main.settings.sections.background.source.title')}
+            subtitle={t(`${QUOTE_SECTION}.source_subtitle`)}
           />
           <Action>
             <SourceDropdown />
@@ -420,8 +404,8 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
         >
           <Section
             icon={<MdSource />}
-            title={variables.getMessage('modals.main.settings.sections.background.source.title')}
-            subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
+            title={t('modals.main.settings.sections.background.source.title')}
+            subtitle={t(`${QUOTE_SECTION}.source_subtitle`)}
             onClick={() => onSubSectionChange('source', sectionName)}
           >
             <SourceDropdown />
diff --git a/src/features/search/Search.jsx b/src/features/search/Search.jsx
index 6c5007e1..dc81df98 100644
--- a/src/features/search/Search.jsx
+++ b/src/features/search/Search.jsx
@@ -119,7 +119,11 @@ function Search() {
         <form onSubmit={searchButton} className="searchBar">
           <div className={classList}>
             <Tooltip title={t('widgets.search')}>
-              <button className="navbarButton" onClick={searchButton} aria-label={t('common.search_label')}>
+              <button
+                className="navbarButton"
+                onClick={searchButton}
+                aria-label={t('common.search_label')}
+              >
                 <MdSearch />
               </button>
             </Tooltip>
diff --git a/src/features/search/options/SearchOptions.jsx b/src/features/search/options/SearchOptions.jsx
index 3ff28578..5e0d74f6 100644
--- a/src/features/search/options/SearchOptions.jsx
+++ b/src/features/search/options/SearchOptions.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { MdOutlineWarning } from 'react-icons/md';
 
 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
@@ -9,12 +9,13 @@ import EventBus from 'utils/eventbus';
 const SEARCH_SECTION = 'modals.main.settings.sections.search';
 
 const ChromePolicyWarning = () => {
+  const t = useT();
   return (
     <div className="itemWarning" style={{ marginBottom: '20px' }}>
       <MdOutlineWarning />
       <div className="text">
         <span className="header">Search Engine Selection Removed</span>
-        <span>{variables.getMessage(`${SEARCH_SECTION}.chrome_policy_warning`)}</span>
+        <span>{t(`${SEARCH_SECTION}.chrome_policy_warning`)}</span>
       </div>
     </div>
   );
@@ -24,21 +25,21 @@ const AdditionalOptions = () => {
   return (
     <Row final={true}>
       <Content
-        title={variables.getMessage('modals.main.settings.additional_settings')}
-        subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
+        title={t('modals.main.settings.additional_settings')}
+        subtitle={t(`${SEARCH_SECTION}.additional`)}
       />
       <Action>
         {/* not supported on firefox */}
         {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
           <Checkbox
             name="voiceSearch"
-            text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
+            text={t(`${SEARCH_SECTION}.voice_search`)}
             category="search"
           />
         ) : null}
         <Checkbox
           name="searchFocus"
-          text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
+          text={t(`${SEARCH_SECTION}.focus`)}
           category="search"
           element=".other"
         />
@@ -51,7 +52,7 @@ const SearchOptions = () => {
   return (
     <>
       <Header
-        title={variables.getMessage(`${SEARCH_SECTION}.title`)}
+        title={t(`${SEARCH_SECTION}.title`)}
         setting="searchBar"
         category="widgets"
         visibilityToggle={true}
diff --git a/src/features/stats/options/ClearModal.jsx b/src/features/stats/options/ClearModal.jsx
index 79234c04..7ad9b6ea 100644
--- a/src/features/stats/options/ClearModal.jsx
+++ b/src/features/stats/options/ClearModal.jsx
@@ -1,41 +1,38 @@
 import { memo } from 'react';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { MdClose, MdRestartAlt } from 'react-icons/md';
 import { Tooltip, Button } from 'components/Elements';
 
 function ClearModal({ modalClose, resetStats }) {
+  const t = useT();
   return (
     <div className="smallModal">
       <div className="shareHeader">
         <span className="title">
-          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')}
+          {t('modals.main.settings.sections.advanced.reset_modal.title')}
         </span>
-        <Tooltip
-          title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={t('modals.main.settings.sections.advanced.reset_modal.cancel')}>
           <div className="close" onClick={modalClose}>
             <MdClose />
           </div>
         </Tooltip>
       </div>
-      <span className="title">
-        {variables.getMessage('modals.main.settings.sections.stats.clear_modal.question')}
-      </span>
+      <span className="title">{t('modals.main.settings.sections.stats.clear_modal.question')}</span>
       <span className="subtitle">
-        {variables.getMessage('modals.main.settings.sections.stats.clear_modal.information')}
+        {t('modals.main.settings.sections.stats.clear_modal.information')}
       </span>
       <div className="resetFooter">
         <Button
           type="secondary"
           onClick={modalClose}
           icon={<MdClose />}
-          label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+          label={t('modals.main.settings.sections.advanced.reset_modal.cancel')}
         />
         <Button
           type="settings"
           onClick={() => resetStats()}
           icon={<MdRestartAlt />}
-          label={variables.getMessage('modals.main.settings.buttons.reset')}
+          label={t('modals.main.settings.buttons.reset')}
         />
       </div>
     </div>
diff --git a/src/features/stats/options/StatsOptions.jsx b/src/features/stats/options/StatsOptions.jsx
index 9b93c921..dc50548f 100644
--- a/src/features/stats/options/StatsOptions.jsx
+++ b/src/features/stats/options/StatsOptions.jsx
@@ -17,7 +17,7 @@ import { ClearModal } from './ClearModal';
 
 import { saveFile } from 'utils/saveFile';
 import { formatNumber } from 'utils/formatNumber';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import {
   getLocalisedAchievementData,
   achievements as initialAchievements,
@@ -25,6 +25,7 @@ import {
 } from 'features/stats/api/achievements';
 
 const Stats = () => {
+  const t = useT();
   const isPreviewMode = localStorage.getItem('welcomePreview') === 'true';
   const [stats, setStats] = useState(() => JSON.parse(localStorage.getItem('statsData')) || {});
   const [achievements, setAchievements] = useState(initialAchievements);
@@ -50,7 +51,7 @@ const Stats = () => {
     setStats(emptyStats);
     setAchievements(checkAchievements(emptyStats));
     setClearmodal(false);
-    toast(variables.getMessage('toasts.stats_reset'));
+    toast(t('toasts.stats_reset'));
   };
 
   const downloadStats = () => {
@@ -91,20 +92,16 @@ const Stats = () => {
   if (isPreviewMode) {
     return (
       <>
-        <Header title={variables.getMessage(`${STATS_SECTION}.title`)} report={false} />
+        <Header title={t(`${STATS_SECTION}.title`)} report={false} />
         <div className="emptyItems">
           <div className="emptyMessage">
             <div className="loaderHolder">
               <MdError />
               <span className="title">
-                {variables.getMessage(
-                  'modals.main.settings.sections.advanced.preview_data_disabled.title',
-                )}
+                {t('modals.main.settings.sections.advanced.preview_data_disabled.title')}
               </span>
               <span className="subtitle">
-                {variables.getMessage(
-                  'modals.main.settings.sections.advanced.preview_data_disabled.description',
-                )}
+                {t('modals.main.settings.sections.advanced.preview_data_disabled.description')}
               </span>
             </div>
           </div>
@@ -115,19 +112,19 @@ const Stats = () => {
 
   return (
     <>
-      <Header title={variables.getMessage(`${STATS_SECTION}.title`)} report={false}>
+      <Header title={t(`${STATS_SECTION}.title`)} report={false}>
         <CustomActions>
           <Button
             type="settings"
             onClick={downloadStats}
             icon={<MdDownload />}
-            label={variables.getMessage('widgets.background.download')}
+            label={t('widgets.background.download')}
           />
           <Button
             type="settings"
             onClick={() => setClearmodal(true)}
             icon={<MdRestartAlt />}
-            label={variables.getMessage('modals.main.settings.buttons.reset')}
+            label={t('modals.main.settings.buttons.reset')}
           />
         </CustomActions>
       </Header>
@@ -148,40 +145,40 @@ const Stats = () => {
           </div>
           <div className="statGrid">
             <StatsElement
-              title={variables.getMessage(`${STATS_SECTION}.sections.tabs_opened`)}
+              title={t(`${STATS_SECTION}.sections.tabs_opened`)}
               value={stats['tabs-opened'] || 0}
             />
             <StatsElement
-              title={variables.getMessage(`${STATS_SECTION}.sections.backgrounds_favourited`)}
+              title={t(`${STATS_SECTION}.sections.backgrounds_favourited`)}
               value={stats['background-favourite'] || 0}
             />
             <StatsElement
-              title={variables.getMessage(`${STATS_SECTION}.sections.backgrounds_downloaded`)}
+              title={t(`${STATS_SECTION}.sections.backgrounds_downloaded`)}
               value={stats.feature ? stats.feature['background-download'] || 0 : 0}
             />
             <StatsElement
-              title={variables.getMessage(`${STATS_SECTION}.sections.quotes_favourited`)}
+              title={t(`${STATS_SECTION}.sections.quotes_favourited`)}
               value={stats.feature ? stats.feature['quoted-favourite'] || 0 : 0}
             />
             <StatsElement
-              title={variables.getMessage(`${STATS_SECTION}.sections.quicklinks_added`)}
+              title={t(`${STATS_SECTION}.sections.quicklinks_added`)}
               value={stats.feature ? stats.feature['quicklink-add'] || 0 : 0}
             />
             <StatsElement
-              title={variables.getMessage(`${STATS_SECTION}.sections.settings_changed`)}
+              title={t(`${STATS_SECTION}.sections.settings_changed`)}
               value={stats.setting ? Object.keys(stats.setting).length : 0}
             />
             <StatsElement
-              title={variables.getMessage(`${STATS_SECTION}.sections.addons_installed`)}
+              title={t(`${STATS_SECTION}.sections.addons_installed`)}
               value={stats.marketplace?.install?.length || 0}
             />
           </div>
         </div>
         <div className="statSection leftPanel">
-          <span className="title">{variables.getMessage(`${STATS_SECTION}.achievements`)}</span>
+          <span className="title">{t(`${STATS_SECTION}.achievements`)}</span>
           <br />
           <span className="subtitle">
-            {variables.getMessage(`${STATS_SECTION}.unlocked`, {
+            {t(`${STATS_SECTION}.unlocked`, {
               count: `${getUnlockedCount}/${achievements.length}`,
             })}
           </span>
@@ -201,7 +198,7 @@ const Stats = () => {
               }
             })}
           </div>
-          <span className="title">{variables.getMessage(`${STATS_SECTION}.locked`)}</span>
+          <span className="title">{t(`${STATS_SECTION}.locked`)}</span>
           <div className="achievementsGrid preferencesInactive">
             {achievements.map((achievement, index) => {
               if (!achievement.achieved) {
diff --git a/src/features/time/Date.jsx b/src/features/time/Date.jsx
index 2c2fc436..ce306089 100644
--- a/src/features/time/Date.jsx
+++ b/src/features/time/Date.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { useState, useEffect, useRef } from 'react';
 
@@ -7,6 +8,7 @@ import EventBus from 'utils/eventbus';
 import './date.scss';
 
 const DateWidget = () => {
+  const t = useT();
   const [date, setDate] = useState('');
   const [weekNumber, setWeekNumber] = useState(null);
   const [display, setDisplay] = useState('block');
@@ -29,7 +31,7 @@ const DateWidget = () => {
       dateToday.setMonth(0, 1 + ((4 - dateToday.getDay() + 7) % 7));
     }
 
-    const weekLabel = variables.getMessage('widgets.date.week');
+    const weekLabel = t('widgets.date.week');
     const weekNum = 1 + Math.ceil((firstThursday - dateToday) / 604800000);
     const weekText = weekLabel.includes('{number}')
       ? weekLabel.replace('{number}', weekNum)
diff --git a/src/features/time/options/DateOptions.jsx b/src/features/time/options/DateOptions.jsx
index fe28c0a3..000f6564 100644
--- a/src/features/time/options/DateOptions.jsx
+++ b/src/features/time/options/DateOptions.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { useState } from 'react';
 
 import { Header } from 'components/Layout/Settings';
@@ -7,13 +7,14 @@ import { Checkbox, Dropdown } from 'components/Form/Settings';
 import { Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
 
 function DateOptions() {
+  const t = useT();
   const [dateType, setDateType] = useState(localStorage.getItem('dateType') || 'long');
   const dateFormats = ['DMY', 'MDY', 'YMD'];
 
   const longSettings = (
     <>
       <Dropdown
-        label={variables.getMessage('modals.main.settings.sections.date.long_format')}
+        label={t('modals.main.settings.sections.date.long_format')}
         name="longFormat"
         category="date"
         items={dateFormats.map((format) => {
@@ -25,12 +26,12 @@ function DateOptions() {
       />
       <Checkbox
         name="dayofweek"
-        text={variables.getMessage('modals.main.settings.sections.date.day_of_week')}
+        text={t('modals.main.settings.sections.date.day_of_week')}
         category="date"
       />
       <Checkbox
         name="datenth"
-        text={variables.getMessage('modals.main.settings.sections.date.datenth')}
+        text={t('modals.main.settings.sections.date.datenth')}
         category="date"
       />
     </>
@@ -39,7 +40,7 @@ function DateOptions() {
   const shortSettings = (
     <>
       <Dropdown
-        label={variables.getMessage('modals.main.settings.sections.date.short_format')}
+        label={t('modals.main.settings.sections.date.short_format')}
         name="dateFormat"
         category="date"
         items={dateFormats.map((format) => {
@@ -51,27 +52,25 @@ function DateOptions() {
       />
 
       <Dropdown
-        label={variables.getMessage('modals.main.settings.sections.date.short_separator.title')}
+        label={t('modals.main.settings.sections.date.short_separator.title')}
         name="shortFormat"
         category="date"
         items={[
           {
             value: 'dash',
-            text: variables.getMessage('modals.main.settings.sections.date.short_separator.dash'),
+            text: t('modals.main.settings.sections.date.short_separator.dash'),
           },
           {
             value: 'dots',
-            text: variables.getMessage('modals.main.settings.sections.date.short_separator.dots'),
+            text: t('modals.main.settings.sections.date.short_separator.dots'),
           },
           {
             value: 'gaps',
-            text: variables.getMessage('modals.main.settings.sections.date.short_separator.gaps'),
+            text: t('modals.main.settings.sections.date.short_separator.gaps'),
           },
           {
             value: 'slashes',
-            text: variables.getMessage(
-              'modals.main.settings.sections.date.short_separator.slashes',
-            ),
+            text: t('modals.main.settings.sections.date.short_separator.slashes'),
           },
         ]}
       />
@@ -81,7 +80,7 @@ function DateOptions() {
   return (
     <>
       <Header
-        title={variables.getMessage('modals.main.settings.sections.date.title')}
+        title={t('modals.main.settings.sections.date.title')}
         setting="date"
         category="date"
         element=".date"
@@ -96,8 +95,8 @@ function DateOptions() {
       >
         <Row>
           <Content
-            title={variables.getMessage('modals.main.settings.sections.time.type')}
-            subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
+            title={t('modals.main.settings.sections.time.type')}
+            subtitle={t('modals.main.settings.sections.date.type.subtitle')}
           />
           <Action>
             <Dropdown
@@ -110,11 +109,11 @@ function DateOptions() {
               items={[
                 {
                   value: 'long',
-                  text: variables.getMessage('modals.main.settings.sections.date.type.long'),
+                  text: t('modals.main.settings.sections.date.type.long'),
                 },
                 {
                   value: 'short',
-                  text: variables.getMessage('modals.main.settings.sections.date.type.short'),
+                  text: t('modals.main.settings.sections.date.type.short'),
                 },
               ]}
             />
@@ -124,21 +123,21 @@ function DateOptions() {
           <Content
             title={
               dateType === 'long'
-                ? variables.getMessage('modals.main.settings.sections.date.type.long')
-                : variables.getMessage('modals.main.settings.sections.date.type.short')
+                ? t('modals.main.settings.sections.date.type.long')
+                : t('modals.main.settings.sections.date.type.short')
             }
-            subtitle={variables.getMessage('modals.main.settings.sections.date.type_settings')}
+            subtitle={t('modals.main.settings.sections.date.type_settings')}
           />
           <Action>
             {dateType === 'long' ? longSettings : shortSettings}
             <Checkbox
               name="weeknumber"
-              text={variables.getMessage('modals.main.settings.sections.date.week_number')}
+              text={t('modals.main.settings.sections.date.week_number')}
               category="date"
             />
             <Checkbox
               name="datezero"
-              text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
+              text={t('modals.main.settings.sections.time.digital.zero')}
               category="date"
             />
           </Action>
diff --git a/src/features/time/options/TimeOptions.jsx b/src/features/time/options/TimeOptions.jsx
index 3a1282b8..b4e1be17 100644
--- a/src/features/time/options/TimeOptions.jsx
+++ b/src/features/time/options/TimeOptions.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import React, { useState } from 'react';
 
 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
@@ -7,6 +7,7 @@ import { Checkbox, Dropdown, Radio } from 'components/Form/Settings';
 import { MdRefresh } from 'react-icons/md';
 
 const TimeOptions = () => {
+  const t = useT();
   const [timeType, setTimeType] = useState(localStorage.getItem('timeType') || 'digital');
   const [hourColour, setHourColour] = useState(localStorage.getItem('hourColour') || '#ffffff');
   const [minuteColour, setMinuteColour] = useState(
@@ -32,25 +33,22 @@ const TimeOptions = () => {
   const WidgetType = () => {
     return (
       <Row final={timeType === 'percentageComplete'}>
-        <Content
-          title={variables.getMessage(`${TIME_SECTION}.type`)}
-          subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
-        />
+        <Content title={t(`${TIME_SECTION}.type`)} subtitle={t(`${TIME_SECTION}.type_subtitle`)} />
         <Action>
           <Dropdown
             name="timeType"
             onChange={(value) => setTimeType(value)}
             category="clock"
             items={[
-              { value: 'digital', text: variables.getMessage(`${TIME_SECTION}.digital.title`) },
-              { value: 'analogue', text: variables.getMessage(`${TIME_SECTION}.analogue.title`) },
+              { value: 'digital', text: t(`${TIME_SECTION}.digital.title`) },
+              { value: 'analogue', text: t(`${TIME_SECTION}.analogue.title`) },
               {
                 value: 'percentageComplete',
-                text: variables.getMessage(`${TIME_SECTION}.percentage_complete`),
+                text: t(`${TIME_SECTION}.percentage_complete`),
               },
               {
                 value: 'verticalClock',
-                text: variables.getMessage(`${TIME_SECTION}.vertical_clock.title`),
+                text: t(`${TIME_SECTION}.vertical_clock.title`),
               },
             ]}
           />
@@ -62,35 +60,27 @@ const TimeOptions = () => {
   const digitalSettings = (
     <Row final={true}>
       <Content
-        title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
-        subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
+        title={t(`${TIME_SECTION}.digital.title`)}
+        subtitle={t(`${TIME_SECTION}.digital.subtitle`)}
       />
       <Action>
         <Radio
           name="timeformat"
           options={[
             {
-              name: variables.getMessage(`${TIME_SECTION}.digital.twentyfourhour`),
+              name: t(`${TIME_SECTION}.digital.twentyfourhour`),
               value: 'twentyfourhour',
             },
             {
-              name: variables.getMessage(`${TIME_SECTION}.digital.twelvehour`),
+              name: t(`${TIME_SECTION}.digital.twelvehour`),
               value: 'twelvehour',
             },
           ]}
           smallTitle={true}
           category="clock"
         />
-        <Checkbox
-          name="seconds"
-          text={variables.getMessage(`${TIME_SECTION}.digital.seconds`)}
-          category="clock"
-        />
-        <Checkbox
-          name="zero"
-          text={variables.getMessage(`${TIME_SECTION}.digital.zero`)}
-          category="clock"
-        />
+        <Checkbox name="seconds" text={t(`${TIME_SECTION}.digital.seconds`)} category="clock" />
+        <Checkbox name="zero" text={t(`${TIME_SECTION}.digital.zero`)} category="clock" />
       </Action>
     </Row>
   );
@@ -98,38 +88,34 @@ const TimeOptions = () => {
   const analogSettings = (
     <Row final={true}>
       <Content
-        title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
-        subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
+        title={t(`${TIME_SECTION}.analogue.title`)}
+        subtitle={t(`${TIME_SECTION}.analogue.subtitle`)}
       />
       <Action>
         <Checkbox
           name="secondHand"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
+          text={t(`${TIME_SECTION}.analogue.second_hand`)}
           category="clock"
         />
         <Checkbox
           name="minuteHand"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.minute_hand`)}
-          category="clock"
-        />
-        <Checkbox
-          name="hourHand"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.hour_hand`)}
+          text={t(`${TIME_SECTION}.analogue.minute_hand`)}
           category="clock"
         />
+        <Checkbox name="hourHand" text={t(`${TIME_SECTION}.analogue.hour_hand`)} category="clock" />
         <Checkbox
           name="hourMarks"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.hour_marks`)}
+          text={t(`${TIME_SECTION}.analogue.hour_marks`)}
           category="clock"
         />
         <Checkbox
           name="minuteMarks"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.minute_marks`)}
+          text={t(`${TIME_SECTION}.analogue.minute_marks`)}
           category="clock"
         />
         <Checkbox
           name="roundClock"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
+          text={t(`${TIME_SECTION}.analogue.round_clock`)}
           category="clock"
         />
       </Action>
@@ -140,9 +126,7 @@ const TimeOptions = () => {
     <>
       <Row>
         <Content
-          title={variables.getMessage(
-            'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
-          )}
+          title={t('modals.main.settings.sections.time.vertical_clock.change_hour_colour')}
         />
         <Action>
           <div className="colourInput">
@@ -159,15 +143,13 @@ const TimeOptions = () => {
           </div>
           <span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}>
             <MdRefresh />
-            {variables.getMessage('modals.main.settings.buttons.reset')}
+            {t('modals.main.settings.buttons.reset')}
           </span>
         </Action>
       </Row>
       <Row>
         <Content
-          title={variables.getMessage(
-            'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
-          )}
+          title={t('modals.main.settings.sections.time.vertical_clock.change_minute_colour')}
         />
         <Action>
           <div className="colourInput">
@@ -184,15 +166,13 @@ const TimeOptions = () => {
           </div>
           <span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}>
             <MdRefresh />
-            {variables.getMessage('modals.main.settings.buttons.reset')}
+            {t('modals.main.settings.buttons.reset')}
           </span>
         </Action>
       </Row>
       <Row>
         <Content
-          title={variables.getMessage(
-            'modals.main.settings.sections.time.vertical_clock.change_second_colour',
-          )}
+          title={t('modals.main.settings.sections.time.vertical_clock.change_second_colour')}
         />
         <Action>
           <div className="colourInput">
@@ -209,7 +189,7 @@ const TimeOptions = () => {
           </div>
           <span className="link" onClick={() => localStorage.setItem('secondColour', '#ffffff')}>
             <MdRefresh />
-            {variables.getMessage('modals.main.settings.buttons.reset')}
+            {t('modals.main.settings.buttons.reset')}
           </span>
         </Action>
       </Row>
@@ -234,7 +214,7 @@ const TimeOptions = () => {
   return (
     <>
       <Header
-        title={variables.getMessage(`${TIME_SECTION}.title`)}
+        title={t(`${TIME_SECTION}.title`)}
         setting="time"
         category="clock"
         element=".clock-container"
diff --git a/src/features/weather/Weather.jsx b/src/features/weather/Weather.jsx
index d016df4a..e417d057 100644
--- a/src/features/weather/Weather.jsx
+++ b/src/features/weather/Weather.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { memo, useState, useEffect, useCallback } from 'react';
 import { formatNumber } from 'utils/formatNumber';
 
@@ -13,6 +13,7 @@ import { getWeather } from './api/getWeather.js';
 import './weather.scss';
 
 const WeatherWidget = memo(() => {
+  const t = useT();
   const [location, setLocation] = useState(() => {
     const stored = localStorage.getItem('location');
     if (!stored) return 'London';
@@ -22,8 +23,7 @@ const WeatherWidget = memo(() => {
       if (parsed && typeof parsed === 'object') {
         return parsed;
       }
-    } catch {
-    }
+    } catch {}
     return stored;
   });
   const [done, setDone] = useState(false);
@@ -97,7 +97,7 @@ const WeatherWidget = memo(() => {
         {weatherType >= 2 && (
           <div className="extra-info">
             <span>
-              {variables.getMessage('widgets.weather.feels_like', {
+              {t('widgets.weather.feels_like', {
                 amount: `${formatNumber(weatherData.weather.feels_like)}${weatherData.temp_text}`,
               })}
             </span>
@@ -105,9 +105,7 @@ const WeatherWidget = memo(() => {
           </div>
         )}
       </div>
-      {weatherType >= 3 && (
-        <Expanded weatherType={weatherType} state={weatherData} variables={variables} />
-      )}
+      {weatherType >= 3 && <Expanded weatherType={weatherType} state={weatherData} />}
     </div>
   );
 });
diff --git a/src/features/weather/components/Expanded.jsx b/src/features/weather/components/Expanded.jsx
index 16309f8b..488a6a3f 100644
--- a/src/features/weather/components/Expanded.jsx
+++ b/src/features/weather/components/Expanded.jsx
@@ -1,4 +1,5 @@
 import { memo, useMemo } from 'react';
+import { useT } from 'contexts';
 
 import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
 import { MdDisabledVisible } from 'react-icons/md';
@@ -47,7 +48,8 @@ const weatherTypes = {
   },
 };
 
-function Expanded({ state: { weather, icon }, weatherType, variables }) {
+function Expanded({ state: { weather, icon }, weatherType }) {
+  const t = useT();
   const enabled = useMemo(() => {
     return (setting) => {
       return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
@@ -58,7 +60,7 @@ function Expanded({ state: { weather, icon }, weatherType, variables }) {
     const { icon: Icon, key, unit, title, extra } = weatherTypes[type];
     return (
       enabled(type) && (
-        <Tooltip title={variables.getMessage(title)} placement="left">
+        <Tooltip title={t(title)} placement="left">
           <span>
             <Icon className="weatherIcon" name={icon} />
             {`${weather[key]} ${unit || ''}`}
@@ -79,9 +81,7 @@ function Expanded({ state: { weather, icon }, weatherType, variables }) {
     anyTooltipEnabled && (
       <div className="weatherExpandedInfo">
         {weatherType >= 3 && (
-          <span className="subtitle">
-            {variables.getMessage('widgets.weather.extra_information')}
-          </span>
+          <span className="subtitle">{t('widgets.weather.extra_information')}</span>
         )}
         <div className="weatherExpandedInfoItems">
           {Object.keys(weatherTypes).map((type) => (
diff --git a/src/features/weather/options/WeatherOptions.jsx b/src/features/weather/options/WeatherOptions.jsx
index 5e1529a7..3b3937e9 100644
--- a/src/features/weather/options/WeatherOptions.jsx
+++ b/src/features/weather/options/WeatherOptions.jsx
@@ -1,7 +1,7 @@
 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
 import { useLocalStorageState } from 'utils/useLocalStorageState';
 import { Radio, Dropdown, Checkbox, LocationSearch } from 'components/Form/Settings';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 
 const useWeatherSettings = () => {
   const [windSpeed, setWindSpeed] = useLocalStorageState('windspeed', 'true');
@@ -13,24 +13,25 @@ const useWeatherSettings = () => {
 };
 
 const WeatherOptions = () => {
+  const t = useT();
   const { windSpeed, setWindSpeed } = useWeatherSettings();
   const [weatherType, setWeatherType] = useLocalStorageState('weatherType', '1');
   const WEATHER_SECTION = 'modals.main.settings.sections.weather';
 
   const WidgetType = () => (
     <Row>
-      <Content title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)} />
+      <Content title={t(`${WEATHER_SECTION}.widget_type`)} />
       <Action>
         <Dropdown
-          label={variables.getMessage('modals.main.settings.sections.time.type')}
+          label={t('modals.main.settings.sections.time.type')}
           name="weatherType"
           category="weather"
           onChange={(value) => setWeatherType(value)}
           items={[
-            { value: '1', text: variables.getMessage(`${WEATHER_SECTION}.options.basic`) },
-            { value: '2', text: variables.getMessage(`${WEATHER_SECTION}.options.standard`) },
-            { value: '3', text: variables.getMessage(`${WEATHER_SECTION}.options.expanded`) },
-            { value: '4', text: variables.getMessage(`${WEATHER_SECTION}.options.custom`) },
+            { value: '1', text: t(`${WEATHER_SECTION}.options.basic`) },
+            { value: '2', text: t(`${WEATHER_SECTION}.options.standard`) },
+            { value: '3', text: t(`${WEATHER_SECTION}.options.expanded`) },
+            { value: '4', text: t(`${WEATHER_SECTION}.options.custom`) },
           ]}
         />
       </Action>
@@ -39,10 +40,10 @@ const WeatherOptions = () => {
 
   const LocationSetting = () => (
     <Row>
-      <Content title={variables.getMessage(`${WEATHER_SECTION}.location`)} />
+      <Content title={t(`${WEATHER_SECTION}.location`)} />
       <Action>
         <LocationSearch
-          label={variables.getMessage(`${WEATHER_SECTION}.location`)}
+          label={t(`${WEATHER_SECTION}.location`)}
           name="location"
           category="weather"
           placeholder="London"
@@ -53,21 +54,21 @@ const WeatherOptions = () => {
 
   const TemperatureFormat = () => (
     <Row final={weatherType !== '4'}>
-      <Content title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)} />
+      <Content title={t(`${WEATHER_SECTION}.temp_format.title`)} />
       <Action>
         <Radio
           name="tempformat"
           options={[
             {
-              name: `${variables.getMessage(`${WEATHER_SECTION}.temp_format.celsius`)} (°C)`,
+              name: `${t(`${WEATHER_SECTION}.temp_format.celsius`)} (°C)`,
               value: 'celsius',
             },
             {
-              name: `${variables.getMessage(`${WEATHER_SECTION}.temp_format.fahrenheit`)} (°F)`,
+              name: `${t(`${WEATHER_SECTION}.temp_format.fahrenheit`)} (°F)`,
               value: 'fahrenheit',
             },
             {
-              name: `${variables.getMessage(`${WEATHER_SECTION}.temp_format.kelvin`)} (K)`,
+              name: `${t(`${WEATHER_SECTION}.temp_format.kelvin`)} (K)`,
               value: 'kelvin',
             },
           ]}
@@ -110,13 +111,13 @@ const WeatherOptions = () => {
 
     return (
       <Row final={true}>
-        <Content title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)} />
+        <Content title={t(`${WEATHER_SECTION}.custom_settings`)} />
         <Action>
           {weatherOptions.map((item) => (
             <Checkbox
               key={item.name}
               name={item.name}
-              text={variables.getMessage(item.textKey)}
+              text={t(item.textKey)}
               category="weather"
               onChange={item.onChange}
               disabled={item.disabled}
@@ -130,7 +131,7 @@ const WeatherOptions = () => {
   return (
     <>
       <Header
-        title={variables.getMessage(`${WEATHER_SECTION}.title`)}
+        title={t(`${WEATHER_SECTION}.title`)}
         setting="weatherEnabled"
         category="widgets"
         zoomSetting="zoomWeather"
diff --git a/src/features/welcome/Welcome.jsx b/src/features/welcome/Welcome.jsx
index d72c9b6d..61d22c25 100644
--- a/src/features/welcome/Welcome.jsx
+++ b/src/features/welcome/Welcome.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-icons/md';
 
 import EventBus from 'utils/eventbus';
@@ -21,8 +21,9 @@ import {
 } from './components/Sections';
 
 function WelcomeModal({ modalClose, modalSkip }) {
+  const t = useT();
   const [currentTab, setCurrentTab] = useState(0);
-  const [buttonText, setButtonText] = useState(variables.getMessage('modals.welcome.buttons.next'));
+  const [buttonText, setButtonText] = useState(t('modals.welcome.buttons.next'));
   const [importedSettings, setImportedSettings] = useState([]);
   const finalTab = 6;
 
@@ -33,8 +34,8 @@ function WelcomeModal({ modalClose, modalSkip }) {
       setCurrentTab(tab);
       setButtonText(
         tab !== finalTab + 1
-          ? variables.getMessage('modals.welcome.buttons.next')
-          : variables.getMessage('modals.welcome.buttons.finish'),
+          ? t('modals.welcome.buttons.next')
+          : t('modals.welcome.buttons.finish'),
       );
     }
   }, [finalTab]);
@@ -42,9 +43,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
   const updateTabAndButtonText = (newTab) => {
     setCurrentTab(newTab);
     setButtonText(
-      newTab !== finalTab
-        ? variables.getMessage('modals.welcome.buttons.next')
-        : variables.getMessage('modals.welcome.buttons.finish'),
+      newTab !== finalTab ? t('modals.welcome.buttons.next') : t('modals.welcome.buttons.finish'),
     );
 
     localStorage.setItem('bgtransition', true);
@@ -56,7 +55,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
   };
 
   const nextTab = () => {
-    if (buttonText === variables.getMessage('modals.welcome.buttons.finish')) {
+    if (buttonText === t('modals.welcome.buttons.finish')) {
       modalClose();
       return;
     }
@@ -75,14 +74,14 @@ function WelcomeModal({ modalClose, modalSkip }) {
             type="settings"
             onClick={() => prevTab()}
             icon={<MdArrowBackIosNew />}
-            label={variables.getMessage('modals.welcome.buttons.previous')}
+            label={t('modals.welcome.buttons.previous')}
           />
         ) : (
           <Button
             type="settings"
             onClick={() => modalSkip()}
             icon={<MdOutlinePreview />}
-            label={variables.getMessage('modals.welcome.buttons.preview')}
+            label={t('modals.welcome.buttons.preview')}
           />
         )}
         <Button
diff --git a/src/features/welcome/components/Sections/Final.jsx b/src/features/welcome/components/Sections/Final.jsx
index bf917ee9..301ea0fe 100644
--- a/src/features/welcome/components/Sections/Final.jsx
+++ b/src/features/welcome/components/Sections/Final.jsx
@@ -1,36 +1,33 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import languages from '@/i18n/languages.json';
 import { Header, Content } from '../Layout';
 
 function Final(props) {
+  const t = useT();
   return (
     <Content>
       <Header
-        title={variables.getMessage('modals.welcome.sections.final.title')}
-        subtitle={variables.getMessage('modals.welcome.sections.final.description')}
+        title={t('modals.welcome.sections.final.title')}
+        subtitle={t('modals.welcome.sections.final.description')}
       />
-      <span className="title">{variables.getMessage('modals.welcome.sections.final.changes')}</span>
-      <span className="subtitle">
-        {variables.getMessage('modals.welcome.sections.final.changes_description')}
-      </span>
+      <span className="title">{t('modals.welcome.sections.final.changes')}</span>
+      <span className="subtitle">{t('modals.welcome.sections.final.changes_description')}</span>
       <div className="themesToggleArea themesToggleAreaWelcome">
         <div className="toggle" onClick={() => props.switchTab(1)}>
           <span>
-            {variables.getMessage('modals.main.settings.sections.language.title')}:{' '}
+            {t('modals.main.settings.sections.language.title')}:{' '}
             {languages.find((i) => i.value === localStorage.getItem('language')).name}
           </span>
         </div>
         <div className="toggle" onClick={() => props.switchTab(3)}>
           <span>
-            {variables.getMessage('modals.main.settings.sections.appearance.theme.title')}:{' '}
-            {variables.getMessage(
-              'modals.main.settings.sections.appearance.theme.' + localStorage.getItem('theme'),
-            )}
+            {t('modals.main.settings.sections.appearance.theme.title')}:{' '}
+            {t('modals.main.settings.sections.appearance.theme.' + localStorage.getItem('theme'))}
           </span>
         </div>
         {props.importedSettings.length !== 0 && (
           <div className="toggle" onClick={() => props.switchTab(2)}>
-            {variables.getMessage('modals.welcome.sections.final.imported', {
+            {t('modals.welcome.sections.final.imported', {
               amount: props.importedSettings.length,
             })}{' '}
           </div>
diff --git a/src/features/welcome/components/Sections/ImportSettings.jsx b/src/features/welcome/components/Sections/ImportSettings.jsx
index 314b7263..6645216b 100644
--- a/src/features/welcome/components/Sections/ImportSettings.jsx
+++ b/src/features/welcome/components/Sections/ImportSettings.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { FileUpload } from 'components/Form/Settings';
 import { MdCloudUpload } from 'react-icons/md';
 import { importSettings as importSettingsFunction } from 'utils/settings';
@@ -6,6 +6,7 @@ import { Header, Content } from '../Layout';
 import default_settings from 'utils/data/default_settings.json';
 
 function ImportSettings(props) {
+  const t = useT();
   const importSettings = (e) => {
     importSettingsFunction(e, true);
 
@@ -42,12 +43,12 @@ function ImportSettings(props) {
   return (
     <Content>
       <Header
-        title={variables.getMessage('modals.welcome.sections.settings.title')}
-        subtitle={variables.getMessage('modals.welcome.sections.settings.description')}
+        title={t('modals.welcome.sections.settings.title')}
+        subtitle={t('modals.welcome.sections.settings.description')}
       />
       <button className="upload" onClick={() => document.getElementById('file-input').click()}>
         <MdCloudUpload />
-        <span>{variables.getMessage('modals.main.settings.buttons.import')}</span>
+        <span>{t('modals.main.settings.buttons.import')}</span>
       </button>
       <FileUpload
         id="file-input"
@@ -55,10 +56,8 @@ function ImportSettings(props) {
         type="settings"
         loadFunction={(e) => importSettings(e)}
       />
-      <span className="title">{variables.getMessage('modals.welcome.tip')}</span>
-      <span className="subtitle">
-        {variables.getMessage('modals.welcome.sections.settings.tip')}
-      </span>
+      <span className="title">{t('modals.welcome.tip')}</span>
+      <span className="subtitle">{t('modals.welcome.sections.settings.tip')}</span>
     </Content>
   );
 }
diff --git a/src/features/welcome/components/Sections/Intro.jsx b/src/features/welcome/components/Sections/Intro.jsx
index 78c2f77e..5e43f1c3 100644
--- a/src/features/welcome/components/Sections/Intro.jsx
+++ b/src/features/welcome/components/Sections/Intro.jsx
@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { useState, useEffect, useCallback } from 'react';
 
@@ -10,6 +11,7 @@ const GITHUB_LINK =
   'https://github.com/' + variables.constants.ORG_NAME + '/' + variables.constants.REPO_NAME;
 
 function WelcomeNotice({ config }) {
+  const t = useT();
   const { icon: Icon, title, subtitle, link } = config;
   return (
     <div className="welcomeNotice">
@@ -23,7 +25,7 @@ function WelcomeNotice({ config }) {
       {link && (
         <a href={link} target="_blank" rel="noopener noreferrer">
           <MdOpenInNew />
-          {variables.getMessage('modals.welcome.sections.intro.notices.github_open')}
+          {t('modals.welcome.sections.intro.notices.github_open')}
         </a>
       )}
     </div>
@@ -55,32 +57,28 @@ function Intro() {
 
   return (
     <Content>
-      <Header title={variables.getMessage('modals.welcome.sections.intro.title')} />
+      <Header title={t('modals.welcome.sections.intro.title')} />
       {ShareYourMue}
       <WelcomeNotice
         config={{
           icon: MdOutlineWavingHand,
-          title: variables.getMessage('modals.welcome.sections.intro.title'),
-          subtitle: variables.getMessage('modals.welcome.sections.intro.description'),
+          title: t('modals.welcome.sections.intro.title'),
+          subtitle: t('modals.welcome.sections.intro.description'),
         }}
       />
       <WelcomeNotice
         config={{
           icon: FaDiscord,
-          title: variables.getMessage('modals.welcome.sections.intro.notices.discord_title'),
-          subtitle: variables.getMessage(
-            'modals.welcome.sections.intro.notices.discord_description',
-          ),
+          title: t('modals.welcome.sections.intro.notices.discord_title'),
+          subtitle: t('modals.welcome.sections.intro.notices.discord_description'),
           link: DISCORD_LINK,
         }}
       />
       <WelcomeNotice
         config={{
           icon: FaGithub,
-          title: variables.getMessage('modals.welcome.sections.intro.notices.github_title'),
-          subtitle: variables.getMessage(
-            'modals.welcome.sections.intro.notices.github_description',
-          ),
+          title: t('modals.welcome.sections.intro.notices.github_title'),
+          subtitle: t('modals.welcome.sections.intro.notices.github_description'),
           link: GITHUB_LINK,
         }}
       />
diff --git a/src/features/welcome/components/Sections/PrivacyOptions.jsx b/src/features/welcome/components/Sections/PrivacyOptions.jsx
index 154eb493..d2d2b823 100644
--- a/src/features/welcome/components/Sections/PrivacyOptions.jsx
+++ b/src/features/welcome/components/Sections/PrivacyOptions.jsx
@@ -1,18 +1,20 @@
+import { useT } from 'contexts';
 import variables from 'config/variables';
 import { MdOutlineOpenInNew } from 'react-icons/md';
 import { Checkbox } from 'components/Form/Settings';
 import { Header, Content } from '../Layout';
 
 function OfflineMode() {
+  const t = useT();
   return (
     <>
       <Checkbox
         name="offlineMode"
-        text={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
+        text={t('modals.main.settings.sections.advanced.offline_mode')}
         element=".other"
       />
       <span className="subtitle">
-        {variables.getMessage('modals.welcome.sections.privacy.offline_mode_description')}
+        {t('modals.welcome.sections.privacy.offline_mode_description')}
       </span>
     </>
   );
@@ -21,16 +23,14 @@ function OfflineMode() {
 function Links() {
   return (
     <>
-      <span className="title">
-        {variables.getMessage('modals.welcome.sections.privacy.links.title')}
-      </span>
+      <span className="title">{t('modals.welcome.sections.privacy.links.title')}</span>
       <a
         className="link"
         href={variables.constants.PRIVACY_URL}
         target="_blank"
         rel="noopener noreferrer"
       >
-        {variables.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
+        {t('modals.welcome.sections.privacy.links.privacy_policy')}
         <MdOutlineOpenInNew />
       </a>
 
@@ -40,7 +40,7 @@ function Links() {
         target="_blank"
         rel="noopener noreferrer"
       >
-        {variables.getMessage('modals.welcome.sections.privacy.links.source_code')}
+        {t('modals.welcome.sections.privacy.links.source_code')}
         <MdOutlineOpenInNew />
       </a>
     </>
@@ -51,8 +51,8 @@ function PrivacyOptions() {
   return (
     <Content>
       <Header
-        title={variables.getMessage('modals.welcome.sections.privacy.title')}
-        subtitle={variables.getMessage('modals.welcome.sections.privacy.description')}
+        title={t('modals.welcome.sections.privacy.title')}
+        subtitle={t('modals.welcome.sections.privacy.description')}
       />
       <OfflineMode />
       <Links />
diff --git a/src/features/welcome/components/Sections/StyleSelection.jsx b/src/features/welcome/components/Sections/StyleSelection.jsx
index cff82af0..ea59afca 100644
--- a/src/features/welcome/components/Sections/StyleSelection.jsx
+++ b/src/features/welcome/components/Sections/StyleSelection.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { MdArchive, MdOutlineWhatshot } from 'react-icons/md';
 import { useState } from 'react';
 import { Header, Content } from '../Layout';
@@ -9,6 +9,7 @@ const STYLES = {
 };
 
 const StyleSelection = () => {
+  const t = useT();
   const widgetStyle = localStorage.getItem('widgetStyle') || STYLES.NEW;
   const [style, setStyle] = useState(widgetStyle);
 
@@ -21,20 +22,20 @@ const StyleSelection = () => {
     [STYLES.LEGACY]: {
       className: style === STYLES.LEGACY ? 'toggle legacyStyle active' : 'toggle legacyStyle',
       icon: <MdArchive />,
-      text: variables.getMessage('modals.welcome.sections.style.legacy'),
+      text: t('modals.welcome.sections.style.legacy'),
     },
     [STYLES.NEW]: {
       className: style === STYLES.NEW ? 'toggle newStyle active' : 'toggle newStyle',
       icon: <MdOutlineWhatshot />,
-      text: variables.getMessage('modals.welcome.sections.style.modern'),
+      text: t('modals.welcome.sections.style.modern'),
     },
   };
 
   return (
     <Content>
       <Header
-        title={variables.getMessage('modals.welcome.sections.style.title')}
-        subtitle={variables.getMessage('modals.welcome.sections.style.description')}
+        title={t('modals.welcome.sections.style.title')}
+        subtitle={t('modals.welcome.sections.style.description')}
       />
       <div className="themesToggleArea">
         <div className="options">
diff --git a/src/features/welcome/components/Sections/ThemeSelection.jsx b/src/features/welcome/components/Sections/ThemeSelection.jsx
index b5d68671..03afa15a 100644
--- a/src/features/welcome/components/Sections/ThemeSelection.jsx
+++ b/src/features/welcome/components/Sections/ThemeSelection.jsx
@@ -1,4 +1,4 @@
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import { useState } from 'react';
 import { MdAutoAwesome, MdLightMode, MdDarkMode } from 'react-icons/md';
 import { loadSettings } from 'utils/settings';
@@ -11,6 +11,7 @@ const THEMES = {
 };
 
 function ThemeSelection() {
+  const t = useT();
   const currentTheme = localStorage.getItem('theme') || THEMES.AUTO;
   const [theme, setTheme] = useState(currentTheme);
 
@@ -24,25 +25,25 @@ function ThemeSelection() {
     [THEMES.AUTO]: {
       className: theme === THEMES.AUTO ? 'toggle auto active' : 'toggle auto',
       icon: <MdAutoAwesome />,
-      text: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'),
+      text: t('modals.main.settings.sections.appearance.theme.auto'),
     },
     [THEMES.LIGHT]: {
       className: theme === THEMES.LIGHT ? 'toggle lightTheme active' : 'toggle lightTheme',
       icon: <MdLightMode />,
-      text: variables.getMessage('modals.main.settings.sections.appearance.theme.light'),
+      text: t('modals.main.settings.sections.appearance.theme.light'),
     },
     [THEMES.DARK]: {
       className: theme === THEMES.DARK ? 'toggle darkTheme active' : 'toggle darkTheme',
       icon: <MdDarkMode />,
-      text: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'),
+      text: t('modals.main.settings.sections.appearance.theme.dark'),
     },
   };
 
   return (
     <Content>
       <Header
-        title={variables.getMessage('modals.welcome.sections.theme.title')}
-        subtitle={variables.getMessage('modals.welcome.sections.theme.description')}
+        title={t('modals.welcome.sections.theme.title')}
+        subtitle={t('modals.welcome.sections.theme.description')}
       />
       <div className="themesToggleArea">
         <div
@@ -63,8 +64,8 @@ function ThemeSelection() {
             ))}
         </div>
       </div>
-      <span className="title">{variables.getMessage('modals.welcome.tip')}</span>
-      <span className="subtitle">{variables.getMessage('modals.welcome.sections.theme.tip')}</span>
+      <span className="title">{t('modals.welcome.tip')}</span>
+      <span className="subtitle">{t('modals.welcome.sections.theme.tip')}</span>
     </Content>
   );
 }
diff --git a/src/i18n/locales/ar.json b/src/i18n/locales/ar.json
index f67fa7a0..35702f27 100644
--- a/src/i18n/locales/ar.json
+++ b/src/i18n/locales/ar.json
@@ -864,4 +864,4 @@
     "link_copied": "تم نسخ الرابط",
     "stats_reset": "تم إعادة تعيين الإحصائيات"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/arz.json b/src/i18n/locales/arz.json
index 996fc71c..e7d12a43 100644
--- a/src/i18n/locales/arz.json
+++ b/src/i18n/locales/arz.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/az.json b/src/i18n/locales/az.json
index bf20540f..b5d2b702 100644
--- a/src/i18n/locales/az.json
+++ b/src/i18n/locales/az.json
@@ -864,4 +864,4 @@
     "link_copied": "Keçid kopyalandı",
     "stats_reset": "Statistikalar sıfırlandı"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/azb.json b/src/i18n/locales/azb.json
index 9954a41c..3e01e431 100644
--- a/src/i18n/locales/azb.json
+++ b/src/i18n/locales/azb.json
@@ -864,4 +864,4 @@
     "link_copied": "Link kopyalandı",
     "stats_reset": "Statistikalar sıfırlandı"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/bn.json b/src/i18n/locales/bn.json
index 3c09a6e4..974729ca 100644
--- a/src/i18n/locales/bn.json
+++ b/src/i18n/locales/bn.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/de_DE.json b/src/i18n/locales/de_DE.json
index 813e79d1..b07a54c9 100644
--- a/src/i18n/locales/de_DE.json
+++ b/src/i18n/locales/de_DE.json
@@ -864,4 +864,4 @@
     "link_copied": "Link kopiert",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/el.json b/src/i18n/locales/el.json
index d8244526..da2d9164 100644
--- a/src/i18n/locales/el.json
+++ b/src/i18n/locales/el.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/en_GB.json b/src/i18n/locales/en_GB.json
index e6401638..7c335d51 100644
--- a/src/i18n/locales/en_GB.json
+++ b/src/i18n/locales/en_GB.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/en_US.json b/src/i18n/locales/en_US.json
index 0b7c12bc..6b206f6b 100644
--- a/src/i18n/locales/en_US.json
+++ b/src/i18n/locales/en_US.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index a963a637..1f0cf532 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -864,4 +864,4 @@
     "link_copied": "Enlace copiado",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/es_419.json b/src/i18n/locales/es_419.json
index e1044829..077de949 100644
--- a/src/i18n/locales/es_419.json
+++ b/src/i18n/locales/es_419.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/et.json b/src/i18n/locales/et.json
index 8e079c12..c14e27e4 100644
--- a/src/i18n/locales/et.json
+++ b/src/i18n/locales/et.json
@@ -864,4 +864,4 @@
     "link_copied": "Link kopeeritud",
     "stats_reset": "Statistika lähtestatud"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/fa.json b/src/i18n/locales/fa.json
index e2359e6f..1ee0715c 100644
--- a/src/i18n/locales/fa.json
+++ b/src/i18n/locales/fa.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "ریست امار"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 980ab387..ec93a8c8 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -864,4 +864,4 @@
     "link_copied": "Lien copié",
     "stats_reset": "Statistiques réinitialisées"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/hu.json b/src/i18n/locales/hu.json
index 2943b340..7cc448a0 100644
--- a/src/i18n/locales/hu.json
+++ b/src/i18n/locales/hu.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/id_ID.json b/src/i18n/locales/id_ID.json
index 2ee2a6b0..96948d5e 100644
--- a/src/i18n/locales/id_ID.json
+++ b/src/i18n/locales/id_ID.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index 043b9eef..45ee2314 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/lt.json b/src/i18n/locales/lt.json
index b4bf20e0..016d218d 100644
--- a/src/i18n/locales/lt.json
+++ b/src/i18n/locales/lt.json
@@ -864,4 +864,4 @@
     "link_copied": "Nuoroda nukopijuota",
     "stats_reset": "Statistika atstatyta"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/lv.json b/src/i18n/locales/lv.json
index 5ac412ac..82c9ee12 100644
--- a/src/i18n/locales/lv.json
+++ b/src/i18n/locales/lv.json
@@ -864,4 +864,4 @@
     "link_copied": "Saite nokopēta",
     "stats_reset": "Statistika atiestatīta"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/nl.json b/src/i18n/locales/nl.json
index 4302d1f9..ae88c501 100644
--- a/src/i18n/locales/nl.json
+++ b/src/i18n/locales/nl.json
@@ -864,4 +864,4 @@
     "link_copied": "Link gekopieerd",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/no.json b/src/i18n/locales/no.json
index 9d4954a2..c812f3d7 100644
--- a/src/i18n/locales/no.json
+++ b/src/i18n/locales/no.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/peo.json b/src/i18n/locales/peo.json
index 8aeab6f5..0744f8f2 100644
--- a/src/i18n/locales/peo.json
+++ b/src/i18n/locales/peo.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json
index 9d02dcc9..f375261f 100644
--- a/src/i18n/locales/pt.json
+++ b/src/i18n/locales/pt.json
@@ -864,4 +864,4 @@
     "link_copied": "Ligação copiada",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/pt_BR.json b/src/i18n/locales/pt_BR.json
index fc9002f0..41e0d158 100644
--- a/src/i18n/locales/pt_BR.json
+++ b/src/i18n/locales/pt_BR.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copiado",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 2d1460c1..dfc3ca7e 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -864,4 +864,4 @@
     "link_copied": "Ссылка скопирована",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/sl.json b/src/i18n/locales/sl.json
index 12910ea0..85a281ae 100644
--- a/src/i18n/locales/sl.json
+++ b/src/i18n/locales/sl.json
@@ -864,4 +864,4 @@
     "link_copied": "Povezava kopirana",
     "stats_reset": "Statistika ponastavljena"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/sv.json b/src/i18n/locales/sv.json
index f6e200bd..6fa8fbdd 100644
--- a/src/i18n/locales/sv.json
+++ b/src/i18n/locales/sv.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/ta.json b/src/i18n/locales/ta.json
index 1bf15715..913281f8 100644
--- a/src/i18n/locales/ta.json
+++ b/src/i18n/locales/ta.json
@@ -864,4 +864,4 @@
     "link_copied": "இணைப்பு நகலெடுக்கப்பட்டது",
     "stats_reset": "புள்ளிவிவரங்கள் மீட்டமைக்கப்படுகின்றன"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/tr_TR.json b/src/i18n/locales/tr_TR.json
index 9d55958b..ce7dda60 100644
--- a/src/i18n/locales/tr_TR.json
+++ b/src/i18n/locales/tr_TR.json
@@ -864,4 +864,4 @@
     "link_copied": "Bağlantı kopyalandı",
     "stats_reset": "İstatistikler sıfırlandı"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/uk.json b/src/i18n/locales/uk.json
index eda02a12..8cd0110d 100644
--- a/src/i18n/locales/uk.json
+++ b/src/i18n/locales/uk.json
@@ -864,4 +864,4 @@
     "link_copied": "Посилання скопійовано",
     "stats_reset": "Статистику скинуто"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/vi.json b/src/i18n/locales/vi.json
index dc6f35b5..3aaf8f66 100644
--- a/src/i18n/locales/vi.json
+++ b/src/i18n/locales/vi.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/zh_CN.json b/src/i18n/locales/zh_CN.json
index 96e68f6c..8a73f917 100644
--- a/src/i18n/locales/zh_CN.json
+++ b/src/i18n/locales/zh_CN.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/zh_Hant.json b/src/i18n/locales/zh_Hant.json
index 5c2fb464..6555e486 100644
--- a/src/i18n/locales/zh_Hant.json
+++ b/src/i18n/locales/zh_Hant.json
@@ -864,4 +864,4 @@
     "link_copied": "Link copied",
     "stats_reset": "Stats reset"
   }
-}
\ No newline at end of file
+}
diff --git a/src/index.jsx b/src/index.jsx
index 94a1339c..8d7a4c7f 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,10 +1,10 @@
 import { createRoot } from 'react-dom/client';
+import variables from 'config/variables';
 
 import * as Sentry from '@sentry/react';
 
 import App from './App';
 import ErrorBoundary from './ErrorBoundary';
-import variables from './config/variables';
 import { migrateAPIUsersToPhotoPacks } from './utils/migrations';
 
 import './scss/index.scss';
@@ -17,8 +17,7 @@ variables.language = initTranslations(languagecode);
 variables.languagecode = languagecode;
 document.documentElement.lang = languagecode.replace('_', '-');
 
-variables.getMessage = (text, optional) =>
-  variables.language.getMessage(variables.languagecode, text, optional || {});
+window.t = (text, optional) => variables.language.getMessage(variables.languagecode, text, optional || {});
 
 migrateAPIUsersToPhotoPacks();
 
diff --git a/src/utils/deepLinking.js b/src/utils/deepLinking.js
index cfc85962..7b16c649 100644
--- a/src/utils/deepLinking.js
+++ b/src/utils/deepLinking.js
@@ -42,8 +42,7 @@ export const parseDeepLink = (hash = window.location.hash) => {
   if (result.tab === 'settings') {
     if (result.subSection && !result.itemId) {
       result.itemId = null;
-    }
-    else if (!result.subSection) {
+    } else if (!result.subSection) {
       result.subSection = null;
     }
   }
@@ -56,15 +55,13 @@ export const parseDeepLink = (hash = window.location.hash) => {
       } else {
         result.itemId = null;
       }
-    }
-    else if (['preset_settings', 'photo_packs', 'quote_packs', 'all'].includes(result.section)) {
+    } else if (['preset_settings', 'photo_packs', 'quote_packs', 'all'].includes(result.section)) {
       result.category = result.section;
       if (result.subSection) {
         result.itemId = result.subSection;
         result.subSection = null;
       }
-    }
-    else if (result.section && !result.subSection) {
+    } else if (result.section && !result.subSection) {
       result.itemId = result.section;
       result.section = null;
     }
@@ -91,17 +88,13 @@ export const createDeepLink = (tab, options = {}) => {
   if (tab === 'discover') {
     if (options.collection && options.itemId && options.fromCollection) {
       hash += `/collection/${options.collection}/${options.itemId}`;
-    }
-    else if (options.collection) {
+    } else if (options.collection) {
       hash += `/collection/${options.collection}`;
-    }
-    else if (options.itemId && options.category) {
+    } else if (options.itemId && options.category) {
       hash += `/${options.category}/${options.itemId}`;
-    }
-    else if (options.itemId) {
+    } else if (options.itemId) {
       hash += `/${options.itemId}`;
-    }
-    else if (options.category) {
+    } else if (options.category) {
       hash += `/${options.category}`;
     }
   } else if (options.section) {
diff --git a/src/utils/settings/load.js b/src/utils/settings/load.js
index b40ee2d1..eaf11f69 100644
--- a/src/utils/settings/load.js
+++ b/src/utils/settings/load.js
@@ -32,8 +32,7 @@ export function loadSettings(hotreload) {
     custom.forEach((element) => {
       try {
         document.head.removeChild(document.getElementById(element));
-      } catch (e) {
-      }
+      } catch (e) {}
     });
   }
 
@@ -52,16 +51,14 @@ export function loadSettings(hotreload) {
     elements.forEach((element) => {
       try {
         document.querySelector('.' + element).classList.add('textBorder');
-      } catch (e) {
-      }
+      } catch (e) {}
     });
   } else {
     const elements = ['greeting', 'clock', 'quote', 'quoteauthor', 'date'];
     elements.forEach((element) => {
       try {
         document.querySelector('.' + element).classList.remove('textBorder');
-      } catch (e) {
-      }
+      } catch (e) {}
     });
   }
 
diff --git a/src/utils/wikidata/wikidataAuthorFetcher.js b/src/utils/wikidata/wikidataAuthorFetcher.js
index 130066c8..3992aefe 100644
--- a/src/utils/wikidata/wikidataAuthorFetcher.js
+++ b/src/utils/wikidata/wikidataAuthorFetcher.js
@@ -126,12 +126,12 @@ async function extractOccupations(claims, language) {
   }
 
   try {
-    const occupations = claims.P106
-      .filter((claim) => claim.mainsnak?.datavalue?.value?.id)
-      .map((claim) => ({
+    const occupations = claims.P106.filter((claim) => claim.mainsnak?.datavalue?.value?.id).map(
+      (claim) => ({
         id: claim.mainsnak.datavalue.value.id,
         rank: claim.rank || 'normal', // 'preferred', 'normal', 'deprecated'
-      }));
+      }),
+    );
 
     if (occupations.length === 0) {
       return null;