From c23eaf1630dfd59f9c1c02adf582808f1e33e493 Mon Sep 17 00:00:00 2001
From: Tiffany Yeung <tiffanynwyeung@gmail.com>
Date: Fri, 8 Nov 2024 23:12:49 -0800
Subject: [PATCH] chore: swap translated strings notation from template literal
 to function style (#2535)

* [SRO] swap from template literal to function notation for affected SRO pages & components

* [GO] swap notation for artifact-related pages & components

* [GO] swap notation for character-related pages & components

* [GO] swap notation for weapon-related pages & components

* [GO] swap notation for main teams page and related components

* [GO] swap notation for teams page, character display

* [GO] swap notation for teams page, tabs

* [GO] swap notation for teams, team settings

* [GO] swap notation for home & settings page

* [GO] swap notation for components
---
 libs/gi/page-artifacts/src/DupModal.tsx       |  6 +-
 libs/gi/page-artifacts/src/index.tsx          | 10 +++-
 libs/gi/page-characters/src/index.tsx         |  4 +-
 libs/gi/page-home/src/InventoryCard.tsx       | 14 ++---
 libs/gi/page-home/src/QuickLinksCard.tsx      | 16 ++---
 libs/gi/page-home/src/TeamCard.tsx            | 24 ++++----
 libs/gi/page-home/src/VidGuideCard.tsx        |  4 +-
 libs/gi/page-home/src/index.tsx               |  4 +-
 libs/gi/page-settings/src/SillyCard.tsx       |  6 +-
 libs/gi/page-team/src/BuildDropdown.tsx       |  6 +-
 libs/gi/page-team/src/CharProfileCard.tsx     |  2 +-
 .../page-team/src/CharProfileCharEditor.tsx   |  2 +-
 .../CharacterDisplay/Build/BuildEquipped.tsx  |  8 +--
 .../src/CharacterDisplay/Build/BuildReal.tsx  | 10 ++--
 .../src/CharacterDisplay/Build/BuildTc.tsx    |  8 +--
 .../src/CharacterDisplay/CompareBtn.tsx       | 18 +++---
 .../src/CharacterDisplay/Content.tsx          |  8 +--
 .../CustomMultiTargetCard.tsx                 | 19 +++---
 .../CustomMultiTargetImportBtn.tsx            | 16 ++---
 .../CustomMultiTarget/MTargetEditor.tsx       | 14 +++--
 .../CustomMultiTarget/index.tsx               |  8 ++-
 .../src/CharacterDisplay/FormulaModal.tsx     |  2 +-
 .../LoadoutSettingElement.tsx                 | 14 ++---
 .../src/CharacterDisplay/StatModal.tsx        |  8 +--
 .../Components/ArtifactSetConfig.tsx          | 34 ++++++-----
 .../TabOptimize/Components/BonusStatsCard.tsx |  6 +-
 .../Components/ChartCard/CustomTooltip.tsx    |  2 +-
 .../Components/ChartCard/index.tsx            | 18 +++---
 .../TabOptimize/Components/ExcludeArt.tsx     | 22 ++++---
 .../Components/MainStatSelectionCard.tsx      |  4 +-
 .../TabOptimize/Components/StatFilterCard.tsx |  8 +--
 .../Components/TargetSelectorModal.tsx        |  2 +-
 .../TabOptimize/Components/UseEquipped.tsx    |  6 +-
 .../TabOptimize/Components/UseTeammateArt.tsx |  6 +-
 .../Tabs/TabOptimize/index.tsx                | 60 ++++++++++---------
 .../Tabs/TabOverview/EquipmentSection.tsx     |  4 +-
 .../src/CharacterDisplay/Tabs/TabTalent.tsx   |  2 +-
 .../ArtifactAllSubstatEditor.tsx              | 10 ++--
 .../ArtifactSubCard/ArtifactSubstatEditor.tsx |  2 +-
 .../Tabs/TabTheorycraft/index.tsx             |  4 +-
 .../Tabs/TabUpgradeOpt/LevelFilter.tsx        |  8 +--
 .../TabUpgradeOpt/UpgradeOptChartCard.tsx     | 24 ++++----
 .../Tabs/TabUpgradeOpt/index.tsx              |  4 +-
 libs/gi/page-team/src/LoadoutDropdown.tsx     | 20 +++----
 .../page-team/src/TeamCharacterSelector.tsx   | 10 ++--
 .../src/TeamSetting/ResonanceDisplay.tsx      |  2 +-
 .../src/TeamSetting/TeamComponents.tsx        |  4 +-
 .../src/TeamSetting/TeamExportModal.tsx       | 19 +++---
 libs/gi/page-team/src/TeamSetting/index.tsx   | 12 ++--
 libs/gi/page-team/src/index.tsx               |  4 +-
 libs/gi/page-teams/src/index.tsx              | 20 +++----
 libs/gi/page-weapons/src/WeaponFilter.tsx     |  8 +--
 libs/gi/ui/src/components/EnemyEditor.tsx     |  8 +--
 libs/gi/ui/src/components/HitModeEditor.tsx   |  4 +-
 .../src/components/artifact/ArtifactCard.tsx  | 16 +++--
 .../artifact/ArtifactFilterDisplay.tsx        |  6 +-
 .../artifact/ArtifactLevelSlider.tsx          |  2 +-
 .../artifact/ArtifactRarityDropdown.tsx       |  4 +-
 .../artifact/ArtifactSlotDropdown.tsx         |  2 +-
 .../components/artifact/ArtifactSwapModal.tsx |  6 +-
 .../gi/ui/src/components/artifact/RVSlide.tsx |  2 +-
 .../artifact/SetInclusionButton.tsx           |  8 ++-
 .../artifact/editor/SubstatInput.tsx          | 17 +++---
 .../editor/UploadExplainationModal.tsx        |  2 +-
 .../src/components/artifact/editor/index.tsx  | 46 ++++++++------
 libs/gi/ui/src/components/build/BuildCard.tsx | 10 ++--
 .../src/components/build/BuildDisplayItem.tsx | 28 +++++----
 .../src/components/build/EquipBuildModal.tsx  | 10 ++--
 .../character/CharacterMultiAutocomplete.tsx  |  2 +-
 .../src/components/character/EquippedGrid.tsx | 12 ++--
 .../character/LocationAutocomplete.tsx        |  2 +-
 .../LocationFilterMultiAutocomplete.tsx       |  2 +-
 .../card/CharacterCardEquipmentRow.tsx        |  2 +-
 .../character/card/CharacterCardStats.tsx     |  2 +-
 .../components/character/editor/Content.tsx   |  2 +-
 .../character/editor/LoadoutCard.tsx          |  2 +-
 .../character/editor/LoadoutEditor.tsx        | 24 ++++----
 .../character/editor/LoadoutHeaderContent.tsx |  8 +--
 .../character/editor/RemoveLoadout.tsx        | 20 +++----
 .../src/components/database/DatabaseCard.tsx  | 16 ++---
 .../ui/src/components/database/UploadCard.tsx | 20 +++----
 .../ui/src/components/team/TeamDelModal.tsx   |  6 +-
 .../ui/src/components/weapon/WeaponCard.tsx   |  2 +-
 .../src/components/weapon/WeaponSwapModal.tsx |  2 +-
 .../src/Optimize/GeneratedBuildsDisplay.tsx   | 16 ++---
 .../page-team/src/Optimize/StatFilterCard.tsx |  8 +--
 .../page-team/src/TeamCharacterSelector.tsx   |  8 +--
 .../Relic/RelicEditor/RelicRarityDropdown.tsx |  4 +-
 .../ui/src/Relic/RelicEditor/SubstatInput.tsx | 16 ++---
 libs/sr/ui/src/Settings/DatabaseCard.tsx      | 20 +++----
 libs/sr/ui/src/Settings/UploadCard.tsx        | 14 ++---
 91 files changed, 503 insertions(+), 434 deletions(-)

diff --git a/libs/gi/page-artifacts/src/DupModal.tsx b/libs/gi/page-artifacts/src/DupModal.tsx
index 4faf747fa2..9e631b2aaf 100644
--- a/libs/gi/page-artifacts/src/DupModal.tsx
+++ b/libs/gi/page-artifacts/src/DupModal.tsx
@@ -38,7 +38,7 @@ export default function DupModal({
               alignItems="center"
             >
               <DifferenceIcon sx={{ verticalAlign: 'text-top', mr: 1 }} />
-              {t`showDup`}
+              {t('showDup')}
             </Typography>
           }
           action={
@@ -111,7 +111,9 @@ function DupContent({
         </CardThemed>
       ))}
       {!dupList.length && (
-        <Alert variant="filled" severity="success">{t`noDupAlert`}</Alert>
+        <Alert variant="filled" severity="success">
+          {t('noDupAlert')}
+        </Alert>
       )}
     </Stack>
   )
diff --git a/libs/gi/page-artifacts/src/index.tsx b/libs/gi/page-artifacts/src/index.tsx
index 3b5caf8367..cb76fac7a4 100644
--- a/libs/gi/page-artifacts/src/index.tsx
+++ b/libs/gi/page-artifacts/src/index.tsx
@@ -139,7 +139,7 @@ export default function PageArtifact() {
       </Suspense>
       <InfoComponent
         pageKey="artifactPage"
-        modalTitle={t`info.title`}
+        modalTitle={t('info.title')}
         text={t('tipsOfTheDay', { returnObjects: true }) as string[]}
       >
         <ArtifactInfoDisplay />
@@ -176,7 +176,9 @@ export default function PageArtifact() {
             onClick={() => setArtifactIdToEdit('new')}
             color="info"
             startIcon={<AddIcon />}
-          >{t`addNew`}</Button>
+          >
+            {t('addNew')}
+          </Button>
         </Grid>
         <Grid item xs={1}>
           <Button
@@ -184,7 +186,9 @@ export default function PageArtifact() {
             onClick={onShowDup}
             color="info"
             startIcon={<DifferenceIcon />}
-          >{t`showDup`}</Button>
+          >
+            {t('showDup')}
+          </Button>
         </Grid>
       </Grid>
       <Suspense
diff --git a/libs/gi/page-characters/src/index.tsx b/libs/gi/page-characters/src/index.tsx
index 4bf552c707..54b5c3c1d3 100644
--- a/libs/gi/page-characters/src/index.tsx
+++ b/libs/gi/page-characters/src/index.tsx
@@ -298,7 +298,9 @@ export default function PageCharacter() {
         onClick={() => setnewCharacter(true)}
         color="info"
         startIcon={<AddIcon />}
-      >{t`addNew`}</Button>
+      >
+        {t('addNew')}
+      </Button>
       <Suspense
         fallback={
           <Skeleton
diff --git a/libs/gi/page-home/src/InventoryCard.tsx b/libs/gi/page-home/src/InventoryCard.tsx
index 8dcd08cfe1..60e1ef5468 100644
--- a/libs/gi/page-home/src/InventoryCard.tsx
+++ b/libs/gi/page-home/src/InventoryCard.tsx
@@ -88,7 +88,7 @@ export default function InventoryCard() {
   return (
     <CardThemed>
       <CardHeader
-        title={<Typography variant="h5">{t`inventoryCard.title`}</Typography>}
+        title={<Typography variant="h5">{t('inventoryCard.title')}</Typography>}
         avatar={<BusinessCenter fontSize="large" />}
       />
       <Divider />
@@ -108,7 +108,7 @@ export default function InventoryCard() {
             <Chip
               label={
                 <strong>
-                  {t(`ui:tabs.characters`)} {characterTotal}
+                  {t('ui:tabs.characters')} {characterTotal}
                 </strong>
               }
               icon={<People />}
@@ -145,7 +145,7 @@ export default function InventoryCard() {
             <Chip
               label={
                 <strong>
-                  {t(`ui:tabs.weapons`)} {weaponTotal}
+                  {t('ui:tabs.weapons')} {weaponTotal}
                 </strong>
               }
               icon={<AnvilIcon />}
@@ -182,7 +182,7 @@ export default function InventoryCard() {
             <Chip
               label={
                 <strong>
-                  {t(`ui:tabs.artifacts`)} {artifactTotal}
+                  {t('ui:tabs.artifacts')} {artifactTotal}
                 </strong>
               }
               icon={<FlowerIcon />}
@@ -222,7 +222,7 @@ export default function InventoryCard() {
               icon={<TeamIcon />}
               label={
                 <strong>
-                  {t(`ui:tabs.teams`)} {numTeams}
+                  {t('ui:tabs.teams')} {numTeams}
                 </strong>
               }
             />
@@ -232,7 +232,7 @@ export default function InventoryCard() {
               icon={<LoadoutIcon />}
               label={
                 <strong>
-                  {t(`ui:tabs.loadouts`)} {numLoadout}
+                  {t('ui:tabs.loadouts')} {numLoadout}
                 </strong>
               }
             />
@@ -242,7 +242,7 @@ export default function InventoryCard() {
               icon={<BuildIcon />}
               label={
                 <strong>
-                  {t(`ui:tabs.builds`)} {numBuilds}
+                  {t('ui:tabs.builds')} {numBuilds}
                 </strong>
               }
             />
diff --git a/libs/gi/page-home/src/QuickLinksCard.tsx b/libs/gi/page-home/src/QuickLinksCard.tsx
index 9da8ae3834..7ae2702283 100644
--- a/libs/gi/page-home/src/QuickLinksCard.tsx
+++ b/libs/gi/page-home/src/QuickLinksCard.tsx
@@ -40,12 +40,12 @@ const genshin_optimizer_links = [
     url: process.env['NX_URL_GITHUB_GO'],
   },
   {
-    title: (t: TFunction) => t`quickLinksCard.buttons.patchNotes.title`,
+    title: (t: TFunction) => t('quickLinksCard.buttons.patchNotes.title'),
     icon: <Description />,
     url: `${process.env['NX_URL_GITHUB_GO']}/releases`,
   },
   {
-    title: (t: TFunction) => t`quickLinksCard.buttons.tyGuide.title`,
+    title: (t: TFunction) => t('quickLinksCard.buttons.tyGuide.title'),
     icon: <YouTube />,
     url: process.env['NX_URL_YOUTUBE_TUTPL'],
   },
@@ -76,22 +76,22 @@ const frzyc_links = [
 
 const other_links = [
   {
-    title: (t: TFunction) => t`quickLinksCard.buttons.scanners.title`,
+    title: (t: TFunction) => t('quickLinksCard.buttons.scanners.title'),
     icon: <Scanner />,
     to: '/scanner',
   },
   {
-    title: (t: TFunction) => t`quickLinksCard.buttons.kqm.title`,
+    title: (t: TFunction) => t('quickLinksCard.buttons.kqm.title'),
     icon: <Handshake />,
     url: process.env['NX_URL_WEBSITE_KQM'],
   },
   {
-    title: (t: TFunction) => t`quickLinksCard.buttons.devDiscord.title`,
+    title: (t: TFunction) => t('quickLinksCard.buttons.devDiscord.title'),
     icon: <DiscordIcon />,
     url: process.env['NX_URL_DISCORD_GDEV'],
   },
   {
-    title: (t: TFunction) => t`quickLinksCard.buttons.good.title`,
+    title: (t: TFunction) => t('quickLinksCard.buttons.good.title'),
     icon: <Article />,
     to: '/doc',
   },
@@ -102,7 +102,9 @@ export default function QuickLinksCard() {
   return (
     <CardThemed>
       <CardHeader
-        title={<Typography variant="h5">{t`quickLinksCard.title`}</Typography>}
+        title={
+          <Typography variant="h5">{t('quickLinksCard.title')}</Typography>
+        }
         avatar={<InsertLink fontSize="large" />}
       />
       <Divider />
diff --git a/libs/gi/page-home/src/TeamCard.tsx b/libs/gi/page-home/src/TeamCard.tsx
index 72339d5b69..795b8dec1d 100644
--- a/libs/gi/page-home/src/TeamCard.tsx
+++ b/libs/gi/page-home/src/TeamCard.tsx
@@ -26,77 +26,77 @@ const team = [
   {
     name: 'frzyc',
     img: frzyc,
-    title: (t) => t`teamCard.jobTitle.leadDev`,
+    title: (t) => t('teamCard.jobTitle.leadDev'),
     subtitle: 'Insomniac in Chief',
     url: process.env.NX_URL_GITHUB_FRZYC,
   },
   {
     name: 'Lantua',
     img: lantua,
-    title: (t) => t`teamCard.jobTitle.dev`,
+    title: (t) => t('teamCard.jobTitle.dev'),
     subtitle: 'Copium Calculator',
     url: process.env.NX_URL_GITHUB_LANTUA,
   },
   {
     name: 'Van',
     img: van,
-    title: (t) => t`teamCard.jobTitle.dev`,
+    title: (t) => t('teamCard.jobTitle.dev'),
     subtitle: 'Waverider Stowaway',
     url: process.env.NX_URL_GITHUB_VAN,
   },
   {
     name: '✦ Sin ✦',
     img: sin,
-    title: (t) => t`teamCard.jobTitle.admin`,
+    title: (t) => t('teamCard.jobTitle.admin'),
     subtitle: 'Ohh, shiny.',
     url: '',
   },
   {
     name: 'Stain',
     img: stain,
-    title: (t) => t`teamCard.jobTitle.admin`,
+    title: (t) => t('teamCard.jobTitle.admin'),
     subtitle: 'Australia Man',
     url: '',
   },
   {
     name: 'yae!',
     img: yae,
-    title: (t) => t`teamCard.jobTitle.dev`,
+    title: (t) => t('teamCard.jobTitle.dev'),
     subtitle: 'eeeqeee',
     url: '',
   },
   {
     name: 'tooflesswulf',
     img: toofless,
-    title: (t) => t`teamCard.jobTitle.dev`,
+    title: (t) => t('teamCard.jobTitle.dev'),
     subtitle: 'Mad Mathematician',
     url: '',
   },
   {
     name: 'Qbe',
     img: qbe,
-    title: (t) => t`teamCard.jobTitle.dev`,
+    title: (t) => t('teamCard.jobTitle.dev'),
     subtitle: 'Irminsul Debugger',
     url: '',
   },
   {
     name: 'Polomo',
     img: polomo,
-    title: (t) => t`teamCard.jobTitle.translator`,
+    title: (t) => t('teamCard.jobTitle.translator'),
     subtitle: 'Director of Text',
     url: '',
   },
   {
     name: 'Vlad',
     img: vlad,
-    title: (t) => t`teamCard.jobTitle.TC`,
+    title: (t) => t('teamCard.jobTitle.TC'),
     subtitle: 'Spreadsheet Renegade',
     url: '',
   },
   {
     name: 'D1firehail',
     img: d1,
-    title: (t) => t`teamCard.jobTitle.mod`,
+    title: (t) => t('teamCard.jobTitle.mod'),
     subtitle: 'Scanner Spy',
     url: '',
   },
@@ -107,7 +107,7 @@ export default function TeamCard() {
   return (
     <CardThemed>
       <CardHeader
-        title={<Typography variant="h5">{t`teamCard.title`}</Typography>}
+        title={<Typography variant="h5">{t('teamCard.title')}</Typography>}
         avatar={<GroupsIcon fontSize="large" />}
       />
       <Divider />
diff --git a/libs/gi/page-home/src/VidGuideCard.tsx b/libs/gi/page-home/src/VidGuideCard.tsx
index d6409466c7..66a1c22c8e 100644
--- a/libs/gi/page-home/src/VidGuideCard.tsx
+++ b/libs/gi/page-home/src/VidGuideCard.tsx
@@ -27,7 +27,9 @@ export default function VidGuideCard() {
             href={process.env.NX_URL_YOUTUBE_TUTPL}
             target="_blank"
             rel="noopener"
-          >{t`vidGuideCard.title`}</Typography>
+          >
+            {t('vidGuideCard.title')}
+          </Typography>
         }
         avatar={<YouTubeIcon fontSize="large" />}
       />
diff --git a/libs/gi/page-home/src/index.tsx b/libs/gi/page-home/src/index.tsx
index 50a6805fdb..6f356f6b57 100644
--- a/libs/gi/page-home/src/index.tsx
+++ b/libs/gi/page-home/src/index.tsx
@@ -114,7 +114,9 @@ function PatchNotesCard() {
     <CardThemed>
       <CardHeader
         title={
-          <Typography variant="h5">{t`quickLinksCard.buttons.patchNotes.title`}</Typography>
+          <Typography variant="h5">
+            {t('quickLinksCard.buttons.patchNotes.title')}
+          </Typography>
         }
         avatar={<DescriptionIcon fontSize="large" />}
       />
diff --git a/libs/gi/page-settings/src/SillyCard.tsx b/libs/gi/page-settings/src/SillyCard.tsx
index a4e4a98a6b..7bd4f33bd3 100644
--- a/libs/gi/page-settings/src/SillyCard.tsx
+++ b/libs/gi/page-settings/src/SillyCard.tsx
@@ -22,7 +22,7 @@ export default function SillyCard() {
     <CardThemed bgt="light">
       <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
         <Avatar src={silly_icon} />
-        <Typography variant="h5"> {t`sillyPageTitle`}</Typography>
+        <Typography variant="h5"> {t('sillyPageTitle')}</Typography>
       </CardContent>
       <Divider />
       <CardContent>
@@ -40,8 +40,8 @@ export default function SillyCard() {
             color={silly ? 'success' : 'secondary'}
           >
             {silly
-              ? t`settings:sillyCard.toggle.enabled`
-              : t`settings:sillyCard.toggle.disabled`}
+              ? t('settings:sillyCard.toggle.enabled')
+              : t('settings:sillyCard.toggle.disabled')}
           </Button>
           <Button
             startIcon={<DiscordIcon />}
diff --git a/libs/gi/page-team/src/BuildDropdown.tsx b/libs/gi/page-team/src/BuildDropdown.tsx
index de390f9d6f..91a3a82a32 100644
--- a/libs/gi/page-team/src/BuildDropdown.tsx
+++ b/libs/gi/page-team/src/BuildDropdown.tsx
@@ -30,7 +30,7 @@ export default function BuildDropdown({
         <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
           <span>{database.teams.getActiveBuildName(loadoutDatum)}</span>
           {buildType === 'tc' && (
-            <SqBadge color="success">{t`buildDropdown.tcBadge`}</SqBadge>
+            <SqBadge color="success">{t('buildDropdown.tcBadge')}</SqBadge>
           )}
         </Box>
       }
@@ -41,7 +41,7 @@ export default function BuildDropdown({
         onClick={() => onChangeLoadoutDatum({ buildType: 'equipped' })}
         sx={{ display: 'flex', gap: 1 }}
       >
-        {t`buildDropdown.equipped`}
+        {t('buildDropdown.equipped')}
       </MenuItem>
       {buildIds.map((bId) => {
         const { name } = database.builds.get(bId)!
@@ -71,7 +71,7 @@ export default function BuildDropdown({
             sx={{ display: 'flex', gap: 1 }}
           >
             <span>{name}</span>
-            <SqBadge color="success">{t`buildDropdown.tcBadge`}</SqBadge>
+            <SqBadge color="success">{t('buildDropdown.tcBadge')}</SqBadge>
           </MenuItem>
         )
       })}
diff --git a/libs/gi/page-team/src/CharProfileCard.tsx b/libs/gi/page-team/src/CharProfileCard.tsx
index 3066ec56b1..8407e4b51f 100644
--- a/libs/gi/page-team/src/CharProfileCard.tsx
+++ b/libs/gi/page-team/src/CharProfileCard.tsx
@@ -38,7 +38,7 @@ export default function CharacterProfileCard() {
             onClick={onShowEditor}
             startIcon={<DriveFileRenameOutlineIcon />}
           >
-            {t`charProfile.button`}
+            {t('charProfile.button')}
           </Button>
         </Box>
 
diff --git a/libs/gi/page-team/src/CharProfileCharEditor.tsx b/libs/gi/page-team/src/CharProfileCharEditor.tsx
index 3cdacf2365..c4dd131efe 100644
--- a/libs/gi/page-team/src/CharProfileCharEditor.tsx
+++ b/libs/gi/page-team/src/CharProfileCharEditor.tsx
@@ -103,7 +103,7 @@ function Content({ onClose }: { onClose?: () => void }) {
                 })
               }}
             >
-              {t`buildTcCharOverride.btn`}
+              {t('buildTcCharOverride.btn')}
             </Button>
           </BootstrapTooltip>
         )}
diff --git a/libs/gi/page-team/src/CharacterDisplay/Build/BuildEquipped.tsx b/libs/gi/page-team/src/CharacterDisplay/Build/BuildEquipped.tsx
index f3a537eefd..d3e7601910 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Build/BuildEquipped.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Build/BuildEquipped.tsx
@@ -27,7 +27,7 @@ export function BuildEquipped({ active = false }: { active?: boolean }) {
     })
   const onDupe = () =>
     database.teamChars.newBuild(teamCharId, {
-      name: t`buildEqCard.copy.nameReal`,
+      name: t('buildEqCard.copy.nameReal'),
       artifactIds: equippedArtifacts,
       weaponId: equippedWeapon,
     })
@@ -42,14 +42,14 @@ export function BuildEquipped({ active = false }: { active?: boolean }) {
     if (!newBuildTcId) return
     // copy over name
     database.buildTcs.set(newBuildTcId, {
-      name: t`buildEqCard.copy.nameTc`,
-      description: t`buildEqCard.copy.desc`,
+      name: t('buildEqCard.copy.nameTc'),
+      description: t('buildEqCard.copy.desc'),
     })
   }
 
   return (
     <BuildCard
-      name={t`buildEqCard.name`}
+      name={t('buildEqCard.name')}
       active={active}
       onActive={onActive}
       onCopyToTc={copyToTc}
diff --git a/libs/gi/page-team/src/CharacterDisplay/Build/BuildReal.tsx b/libs/gi/page-team/src/CharacterDisplay/Build/BuildReal.tsx
index 3a68cc7da3..b89bd0fd80 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Build/BuildReal.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Build/BuildReal.tsx
@@ -112,7 +112,7 @@ export default function BuildReal({
         <BuildEditor buildId={buildId} onClose={onClose} />
       </ModalWrapper>
       <EquipBuildModal
-        currentName={t`buildRealCard.copy.equipped`}
+        currentName={t('buildRealCard.copy.equipped')}
         currentWeaponId={equippedWeapon}
         currentArtifactIds={equippedArtifacts}
         newWeaponId={weaponId}
@@ -235,7 +235,7 @@ function BuildEditor({
   return (
     <CardThemed>
       <CardHeader
-        title={t`buildRealCard.edit.title`}
+        title={t('buildRealCard.edit.title')}
         action={
           <IconButton onClick={onClose}>
             <CloseIcon />
@@ -246,14 +246,14 @@ function BuildEditor({
       <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <TextField
           fullWidth
-          label={t`buildRealCard.edit.label`}
-          placeholder={t`buildRealCard.edit.placeholder`}
+          label={t('buildRealCard.edit.label')}
+          placeholder={t('buildRealCard.edit.placeholder')}
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
         <TextField
           fullWidth
-          label={t`buildRealCard.edit.desc`}
+          label={t('buildRealCard.edit.desc')}
           value={desc}
           onChange={(e) => setDesc(e.target.value)}
           multiline
diff --git a/libs/gi/page-team/src/CharacterDisplay/Build/BuildTc.tsx b/libs/gi/page-team/src/CharacterDisplay/Build/BuildTc.tsx
index f051c49da8..4c7aaae2bb 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Build/BuildTc.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Build/BuildTc.tsx
@@ -271,7 +271,7 @@ function BuildTcEditor({
   return (
     <CardThemed>
       <CardHeader
-        title={t`buildTcCard.edit.title`}
+        title={t('buildTcCard.edit.title')}
         action={
           <IconButton onClick={onClose}>
             <CloseIcon />
@@ -282,14 +282,14 @@ function BuildTcEditor({
       <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <TextField
           fullWidth
-          label={t`buildTcCard.edit.label`}
-          placeholder={t`buildTcCard.edit.placeholder`}
+          label={t('buildTcCard.edit.label')}
+          placeholder={t('buildTcCard.edit.placeholder')}
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
         <TextField
           fullWidth
-          label={t`buildTcCard.edit.desc`}
+          label={t('buildTcCard.edit.desc')}
           value={desc}
           onChange={(e) => setDesc(e.target.value)}
           multiline
diff --git a/libs/gi/page-team/src/CharacterDisplay/CompareBtn.tsx b/libs/gi/page-team/src/CharacterDisplay/CompareBtn.tsx
index 340d019d90..f5fd88ba78 100644
--- a/libs/gi/page-team/src/CharacterDisplay/CompareBtn.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/CompareBtn.tsx
@@ -41,11 +41,11 @@ export default function CompareBtn({
       <span>
         {database.buildTcs.get(compareBuildTcId)?.name ?? ''}{' '}
         <SqBadge color="info" sx={{ ml: 1 }}>
-          {t`compareBtn.tcBadge`}
+          {t('compareBtn.tcBadge')}
         </SqBadge>
       </span>
     ) : (
-      t`compareBtn.equipped`
+      t('compareBtn.equipped')
     )
   const current =
     (compareType === 'equipped' && buildType === 'equipped') ||
@@ -66,7 +66,7 @@ export default function CompareBtn({
           })
         }
       >
-        {t`compareBtn.compare`}
+        {t('compareBtn.compare')}
       </Button>
       <DropdownButton
         title={
@@ -74,7 +74,7 @@ export default function CompareBtn({
             {selectedLabel}{' '}
             {current && (
               <SqBadge color="info" sx={{ ml: 1 }}>
-                {t`compareBtn.crrBadge`}
+                {t('compareBtn.crrBadge')}
               </SqBadge>
             )}
           </>
@@ -88,10 +88,10 @@ export default function CompareBtn({
             })
           }
         >
-          {t`compareBtn.equipped`}
+          {t('compareBtn.equipped')}
           {buildType === 'equipped' && (
             <SqBadge color="info" sx={{ ml: 1 }}>
-              {t`compareBtn.crrBadge`}
+              {t('compareBtn.crrBadge')}
             </SqBadge>
           )}
         </MenuItem>
@@ -109,7 +109,7 @@ export default function CompareBtn({
             {database.builds.get(bId)!.name}{' '}
             {buildType === 'real' && bId === buildId && (
               <SqBadge color="info" sx={{ ml: 1 }}>
-                {t`compareBtn.crrBadge`}
+                {t('compareBtn.crrBadge')}
               </SqBadge>
             )}
           </MenuItem>
@@ -126,11 +126,11 @@ export default function CompareBtn({
           >
             {database.buildTcs.get(bTcId)?.name ?? ''}{' '}
             <SqBadge color="info" sx={{ ml: 1 }}>
-              {t`compareBtn.tcBadge`}
+              {t('compareBtn.tcBadge')}
             </SqBadge>
             {buildType === 'tc' && bTcId === buildTcId && (
               <SqBadge color="info" sx={{ ml: 1 }}>
-                {t`compareBtn.crrBadge`}
+                {t('compareBtn.crrBadge')}
               </SqBadge>
             )}
           </MenuItem>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Content.tsx b/libs/gi/page-team/src/CharacterDisplay/Content.tsx
index b49127a14a..177bac1cc8 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Content.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Content.tsx
@@ -156,7 +156,7 @@ function TabNav({
                   <Box sx={{ display: 'flex', color: 'info.light', gap: 1 }}>
                     <BorderColorIcon />
                     <Typography>
-                      <strong>{t`loadout.editNameDesc`}</strong>
+                      <strong>{t('loadout.editNameDesc')}</strong>
                     </Typography>
                   </Box>
                   {!!teamChar.description && (
@@ -209,7 +209,7 @@ function TabNav({
           <ModalWrapper open={editMode} onClose={() => setEditMode(false)}>
             <CardThemed>
               <CardHeader
-                title={t`loadout.editNameDesc`}
+                title={t('loadout.editNameDesc')}
                 avatar={<LoadoutIcon />}
                 titleTypographyProps={{ variant: 'h6' }}
                 action={
@@ -227,13 +227,13 @@ function TabNav({
                   sx={{ mt: 2 }}
                 >
                   <TextFieldLazy
-                    label={t`loadout.name`}
+                    label={t('loadout.name')}
                     value={teamChar.name}
                     onChange={handleName}
                     autoFocus
                   />
                   <TextFieldLazy
-                    label={t`loadout.desc`}
+                    label={t('loadout.desc')}
                     value={teamChar.description}
                     onChange={handleDesc}
                     multiline
diff --git a/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/CustomMultiTargetCard.tsx b/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/CustomMultiTargetCard.tsx
index 9b8116ab6d..1824c3b002 100644
--- a/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/CustomMultiTargetCard.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/CustomMultiTargetCard.tsx
@@ -88,7 +88,7 @@ export default function CustomMultiTargetCard({
     (index: number) => () => {
       if (
         Object.values(target.targets[index].bonusStats).length &&
-        !window.confirm(t`multiTarget.confirm`)
+        !window.confirm(t('multiTarget.confirm'))
       )
         return
       const targets = [...target.targets]
@@ -124,7 +124,7 @@ export default function CustomMultiTargetCard({
   const copyToClipboard = () =>
     navigator.clipboard
       .writeText(JSON.stringify(target))
-      .then(() => alert(t`multiTarget.copyMsg`))
+      .then(() => alert(t('multiTarget.copyMsg')))
       .catch(console.error)
 
   const customTargetDisplays = useMemo(
@@ -192,7 +192,7 @@ export default function CustomMultiTargetCard({
           >
             <TextFieldLazy
               fullWidth
-              label={t`multiTarget.label`}
+              label={t('multiTarget.label')}
               value={name}
               onChange={(name) =>
                 setTarget((target) => ({
@@ -204,7 +204,7 @@ export default function CustomMultiTargetCard({
             {description && descIsJson && <JsonDescWarning />}
             <TextFieldLazy
               fullWidth
-              label={t`multiTarget.desc`}
+              label={t('multiTarget.desc')}
               value={description}
               onChange={(description) => {
                 setDescIsJson(
@@ -243,7 +243,7 @@ export default function CustomMultiTargetCard({
                 startIcon={<ContentPasteIcon />}
                 sx={{ flexGrow: 1 }}
               >
-                {t`multiTarget.export`}
+                {t('multiTarget.export')}
               </Button>
               <Button color="error" onClick={onDelete}>
                 <DeleteForeverIcon />
@@ -296,12 +296,9 @@ function AddCustomTargetBtn({
 
   return (
     <>
-      <Button
-        fullWidth
-        onClick={onShow}
-        startIcon={<AddIcon />}
-        sx={{ mb: 1 }}
-      >{t`multiTarget.addNewTarget`}</Button>
+      <Button fullWidth onClick={onShow} startIcon={<AddIcon />} sx={{ mb: 1 }}>
+        {t('multiTarget.addNewTarget')}
+      </Button>
       <TargetSelectorModal
         showEmptyTargets
         flatOnly
diff --git a/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/CustomMultiTargetImportBtn.tsx b/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/CustomMultiTargetImportBtn.tsx
index 7fe8fb9944..43649fa793 100644
--- a/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/CustomMultiTargetImportBtn.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/CustomMultiTargetImportBtn.tsx
@@ -30,33 +30,33 @@ export default function CustomMultiTargetImportBtn({
     try {
       const dataObj = JSON.parse(data)
       const validated = validateCustomMultiTarget(dataObj)
-      if (!validated) window.alert(t`mTargetImport.invalid`)
+      if (!validated) window.alert(t('mTargetImport.invalid'))
       else {
         setCustomMultiTarget(validated)
         onHide()
       }
     } catch (e) {
-      window.alert(t`mTargetImport.failed` + `\n${e}`)
+      window.alert(t('mTargetImport.failed') + `\n${e}`)
       return
     }
   }
   return (
     <>
       <Button {...btnProps} onClick={onShow}>
-        {t`mTargetImport.button`}
+        {t('mTargetImport.button')}
       </Button>
       <ModalWrapper open={show} onClose={onHide}>
         <CardThemed>
-          <CardHeader title={t`mTargetImport.title`} />
+          <CardHeader title={t('mTargetImport.title')} />
           <Divider />
           <CardContent
             sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
           >
-            <Typography>{t`mTargetImport.desc`}</Typography>
+            <Typography>{t('mTargetImport.desc')}</Typography>
             <TextField
               fullWidth
-              label={t`mTargetImport.label`}
-              placeholder={t`mTargetImport.placeholder`}
+              label={t('mTargetImport.label')}
+              placeholder={t('mTargetImport.placeholder')}
               value={data}
               onChange={(e) => setData(e.target.value)}
               multiline
@@ -67,7 +67,7 @@ export default function CustomMultiTargetImportBtn({
               disabled={!data}
               onClick={importData}
             >
-              {t`mTargetImport.import`}
+              {t('mTargetImport.import')}
             </Button>
           </CardContent>
         </CardThemed>
diff --git a/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/MTargetEditor.tsx b/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/MTargetEditor.tsx
index ed626cf15c..0bbb3a91a7 100644
--- a/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/MTargetEditor.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/MTargetEditor.tsx
@@ -146,7 +146,9 @@ export default function MTargetEditor({
           }}
           onClick={() => setcollapse((c) => !c)}
         >
-          <Typography variant="h6">{t`loadout:mTargetEditor.title`}</Typography>
+          <Typography variant="h6">
+            {t('loadout:mTargetEditor.title')}
+          </Typography>
           {collapse ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
         </CardActionArea>
         <TextFieldLazy
@@ -154,8 +156,8 @@ export default function MTargetEditor({
             startAdornment: (
               <InputAdornment position="start">
                 {isMobile
-                  ? t`loadout:mTargetEditor.rankMobile`
-                  : t`loadout:mTargetEditor.rank`}
+                  ? t('loadout:mTargetEditor.rankMobile')
+                  : t('loadout:mTargetEditor.rank')}
               </InputAdornment>
             ),
           }}
@@ -288,7 +290,7 @@ export default function MTargetEditor({
               <Grid item xs={1}>
                 <TextFieldLazy
                   fullWidth
-                  label={t`loadout:mTargetEditor.desc`}
+                  label={t('loadout:mTargetEditor.desc')}
                   value={description}
                   onChange={(description) =>
                     setCustomTarget({ ...customTarget, description })
@@ -340,12 +342,12 @@ function ReactionDropdown({
       <AdditiveReactionModeText reaction={reaction as AdditiveReactionKey} />
     )
   ) : (
-    t`noReaction`
+    t('noReaction')
   )
   return (
     <DropdownButton title={title} sx={{ ml: 'auto' }}>
       <MenuItem value="" disabled={!reaction} onClick={() => setReactionMode()}>
-        {t`loadout:mTargetEditor.noReaction`}
+        {t('loadout:mTargetEditor.noReaction')}
       </MenuItem>
       {reactions.map((rm) => (
         <MenuItem
diff --git a/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/index.tsx b/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/index.tsx
index 5ee1a2fff8..c42ed66ce8 100644
--- a/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/index.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/CustomMultiTarget/index.tsx
@@ -154,7 +154,7 @@ export function CustomMultiTargetButton({
         {...buttonProps}
       >
         <Box display="flex" gap={1}>
-          <span>{t`multiTarget.title`}</span>
+          <span>{t('multiTarget.title')}</span>
           <SqBadge color={customMultiTargets.length ? 'success' : 'secondary'}>
             {customMultiTargets.length}
           </SqBadge>
@@ -171,7 +171,7 @@ export function CustomMultiTargetButton({
               title={
                 <Box display="flex" gap={1} alignItems="center">
                   <DashboardCustomizeIcon />
-                  <Typography variant="h6">{t`multiTarget.title`}</Typography>
+                  <Typography variant="h6">{t('multiTarget.title')}</Typography>
                   <InfoTooltip
                     title={
                       <Typography>
@@ -221,7 +221,9 @@ export function CustomMultiTargetButton({
                       fullWidth
                       onClick={addNewCustomMultiTarget}
                       startIcon={<AddIcon />}
-                    >{t`multiTarget.addNewMTarget`}</Button>
+                    >
+                      {t('multiTarget.addNewMTarget')}
+                    </Button>
                   </Grid>
                   <Grid item xs={1}>
                     <CustomMultiTargetImportBtn
diff --git a/libs/gi/page-team/src/CharacterDisplay/FormulaModal.tsx b/libs/gi/page-team/src/CharacterDisplay/FormulaModal.tsx
index ddf7dc43af..62cff23559 100644
--- a/libs/gi/page-team/src/CharacterDisplay/FormulaModal.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/FormulaModal.tsx
@@ -55,7 +55,7 @@ export default function FormulaModal() {
     <ModalWrapper open={!!modalOpen} onClose={onCloseHandler}>
       <CardThemed>
         <CardHeader
-          title={t`showFormulas.title`}
+          title={t('showFormulas.title')}
           action={
             <IconButton onClick={onCloseHandler}>
               <CloseIcon />
diff --git a/libs/gi/page-team/src/CharacterDisplay/LoadoutSettingElement.tsx b/libs/gi/page-team/src/CharacterDisplay/LoadoutSettingElement.tsx
index f9bf8383a1..085f7fd9be 100644
--- a/libs/gi/page-team/src/CharacterDisplay/LoadoutSettingElement.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/LoadoutSettingElement.tsx
@@ -112,7 +112,7 @@ function BuildManagementContent() {
         title={
           <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
             <CheckroomIcon />
-            <span>{t`loadoutSettings.title`}</span>
+            <span>{t('loadoutSettings.title')}</span>
           </Box>
         }
       />
@@ -128,14 +128,14 @@ function BuildManagementContent() {
         </Grid>
 
         <Box sx={{ display: 'flex', gap: 2 }}>
-          <Typography variant="h6">{t`loadoutSettings.builds`}</Typography>
+          <Typography variant="h6">{t('loadoutSettings.builds')}</Typography>
           <Button
             startIcon={<AddIcon />}
             color="info"
             size="small"
             onClick={() => database.teamChars.newBuild(teamCharId)}
           >
-            {t`loadoutSettings.newBuildBtn`}
+            {t('loadoutSettings.newBuildBtn')}
           </Button>
         </Box>
         <BuildInfoAlert />
@@ -156,7 +156,7 @@ function BuildManagementContent() {
         </Box>
 
         <Box sx={{ display: 'flex', gap: 2 }}>
-          <Typography variant="h6">{t`loadoutSettings.tcBuilds`}</Typography>
+          <Typography variant="h6">{t('loadoutSettings.tcBuilds')}</Typography>
           <Button
             startIcon={<AddIcon />}
             color="info"
@@ -165,7 +165,7 @@ function BuildManagementContent() {
               database.teamChars.newBuildTcFromBuild(teamCharId, weaponTypeKey)
             }
           >
-            {t`loadoutSettings.newTcBuildBtn`}
+            {t('loadoutSettings.newTcBuildBtn')}
           </Button>
         </Box>
         <TCBuildInfoAlert />
@@ -203,7 +203,7 @@ function DetailStatButton({ buttonProps = {} }: { buttonProps?: ButtonProps }) {
         onClick={onOpen}
         {...buttonProps}
       >
-        {t`addStats.title`}
+        {t('addStats.title')}
         {!!bStatsNum && (
           <SqBadge sx={{ ml: 1 }} color="success">
             {bStatsNum}
@@ -224,7 +224,7 @@ function FormulasButton({ buttonProps = {} }: { buttonProps?: ButtonProps }) {
       onClick={onModalOpen}
       {...buttonProps}
     >
-      {t`showFormulas.button`}
+      {t('showFormulas.button')}
     </Button>
   )
 }
diff --git a/libs/gi/page-team/src/CharacterDisplay/StatModal.tsx b/libs/gi/page-team/src/CharacterDisplay/StatModal.tsx
index c6a64726e8..4c6b73b46f 100644
--- a/libs/gi/page-team/src/CharacterDisplay/StatModal.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/StatModal.tsx
@@ -57,7 +57,7 @@ export default function StatModal({
           title={
             <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
               <BarChartIcon />
-              <span>{t`addStats.title`}</span>
+              <span>{t('addStats.title')}</span>
             </Box>
           }
           action={
@@ -215,7 +215,7 @@ function MainStatsCards() {
       <CardContent>
         <Grid container columns={cols} spacing={1}>
           <Grid item xs={1}>
-            <StatDisplayCard title={t`addStats.main`}>
+            <StatDisplayCard title={t('addStats.main')}>
               <StatDisplayContent
                 nodes={mainReadNodes}
                 extra={
@@ -245,13 +245,13 @@ function MainStatsCards() {
             </StatDisplayCard>
           </Grid>
           <Grid item xs={1}>
-            <StatDisplayCard title={t`addStats.other`}>
+            <StatDisplayCard title={t('addStats.other')}>
               <StatDisplayContent nodes={otherStatReadNodes} />
             </StatDisplayCard>
           </Grid>
           {!!miscStatReadNodes.length && (
             <Grid item xs={1}>
-              <StatDisplayCard title={t`addStats.misc`}>
+              <StatDisplayCard title={t('addStats.misc')}>
                 <StatDisplayContent nodes={miscStatReadNodes} />
               </StatDisplayCard>
             </Grid>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ArtifactSetConfig.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ArtifactSetConfig.tsx
index 037e47ab61..dddc725c30 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ArtifactSetConfig.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ArtifactSetConfig.tsx
@@ -190,31 +190,31 @@ export default function ArtifactSetConfig({
       <CardThemed bgt="light" sx={{ display: 'flex', width: '100%' }}>
         <CardContent sx={{ flexGrow: 1 }}>
           <Typography>
-            <strong>{t`artSetConfig.title`}</strong>
+            <strong>{t('artSetConfig.title')}</strong>
           </Typography>
           <Stack spacing={1}>
             <Typography>
-              {t`artSetConfig.setEffCond`}{' '}
+              {t('artSetConfig.setEffCond')}{' '}
               <SqBadge color={artifactCondCount ? 'success' : 'warning'}>
                 {artifactCondCount} {t('artSetConfig.enabled')}
               </SqBadge>
             </Typography>
             <Typography>
-              {t`sheet:2set`}{' '}
+              {t('sheet:2set')}{' '}
               <SqBadge color="success">
                 {allowTotals['2']} <ShowChartIcon {...iconInlineProps} />{' '}
                 {t('artSetConfig.allowed')}
               </SqBadge>
             </Typography>
             <Typography>
-              {t`sheet:4set`}{' '}
+              {t('sheet:4set')}{' '}
               <SqBadge color="success">
                 {allowTotals['4']} <ShowChartIcon {...iconInlineProps} />{' '}
                 {t('artSetConfig.allowed')}
               </SqBadge>
             </Typography>
             <Typography>
-              {t`artSetConfig.2rainbow`}{' '}
+              {t('artSetConfig.2rainbow')}{' '}
               <SqBadge color={allowRainbow2 ? 'success' : 'secondary'}>
                 {allowRainbow2 ? (
                   <ShowChartIcon {...iconInlineProps} />
@@ -225,7 +225,7 @@ export default function ArtifactSetConfig({
               </SqBadge>
             </Typography>
             <Typography>
-              {t`artSetConfig.4rainbow`}{' '}
+              {t('artSetConfig.4rainbow')}{' '}
               <SqBadge color={allowRainbow4 ? 'success' : 'secondary'}>
                 {allowRainbow4 ? (
                   <ShowChartIcon {...iconInlineProps} />
@@ -251,7 +251,7 @@ export default function ArtifactSetConfig({
       <ModalWrapper open={open} onClose={onClose}>
         <CardThemed>
           <CardContent sx={{ display: 'flex', gap: 1 }}>
-            <Typography variant="h6">{t`artSetConfig.title`}</Typography>
+            <Typography variant="h6">{t('artSetConfig.title')}</Typography>
             <IconButton onClick={onClose} sx={{ ml: 'auto' }}>
               <CloseIcon />
             </IconButton>
@@ -262,7 +262,7 @@ export default function ArtifactSetConfig({
               <CardContent>
                 <Box display="flex" gap={1}>
                   <Typography>
-                    <strong>{t`artSetConfig.modal.setCond.title`}</strong>
+                    <strong>{t('artSetConfig.modal.setCond.title')}</strong>
                   </Typography>
                   <Typography sx={{ flexGrow: 1 }}>
                     <SqBadge color={artifactCondCount ? 'success' : 'warning'}>
@@ -274,9 +274,11 @@ export default function ArtifactSetConfig({
                     onClick={resetArtConds}
                     color="error"
                     startIcon={<Replay />}
-                  >{t`artSetConfig.modal.setCond.reset`}</Button>
+                  >
+                    {t('artSetConfig.modal.setCond.reset')}
+                  </Button>
                 </Box>
-                <Typography>{t`artSetConfig.modal.setCond.text`}</Typography>
+                <Typography>{t('artSetConfig.modal.setCond.text')}</Typography>
               </CardContent>
             </CardThemed>
             <CardThemed bgt="light" sx={{ mb: 1 }}>
@@ -462,7 +464,9 @@ export default function ArtifactSetConfig({
                         endIcon={
                           allowRainbow2 ? <ShowChartIcon /> : <BlockIcon />
                         }
-                      >{t`artSetConfig.2rainbow`}</Button>
+                      >
+                        {t('artSetConfig.2rainbow')}
+                      </Button>
                       <Button
                         fullWidth
                         onClick={() =>
@@ -485,7 +489,9 @@ export default function ArtifactSetConfig({
                         endIcon={
                           allowRainbow4 ? <ShowChartIcon /> : <BlockIcon />
                         }
-                      >{t`artSetConfig.4rainbow`}</Button>
+                      >
+                        {t('artSetConfig.4rainbow')}
+                      </Button>
                     </Box>
                   </CardContent>
                 </CardThemed>
@@ -657,7 +663,7 @@ function ArtifactSetCard({
                     >
                       <Box>
                         <Typography>
-                          <SqBadge color="success">{t`2set`}</SqBadge>
+                          <SqBadge color="success">{t('2set')}</SqBadge>
                         </Typography>
                         <Typography>
                           <Translate
@@ -672,7 +678,7 @@ function ArtifactSetCard({
                           }}
                         >
                           <Typography>
-                            <SqBadge color="success">{t`4set`}</SqBadge>
+                            <SqBadge color="success">{t('4set')}</SqBadge>
                           </Typography>
                           <Typography>
                             <Translate
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/BonusStatsCard.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/BonusStatsCard.tsx
index 329550a0c8..ebec203641 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/BonusStatsCard.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/BonusStatsCard.tsx
@@ -25,9 +25,9 @@ export default function BonusStatsCard() {
   return (
     <CardThemed bgt="light">
       <CardContent>
-        <Typography
-          sx={{ fontWeight: 'bold' }}
-        >{t`bonusStats.title`}</Typography>
+        <Typography sx={{ fontWeight: 'bold' }}>
+          {t('bonusStats.title')}
+        </Typography>
       </CardContent>
       <Divider />
       <FieldDisplayList bgt="light">
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ChartCard/CustomTooltip.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ChartCard/CustomTooltip.tsx
index 9cd4440ff7..8826af6ded 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ChartCard/CustomTooltip.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ChartCard/CustomTooltip.tsx
@@ -133,7 +133,7 @@ export default function CustomTooltip({
                 )}
                 {activeBuild && (
                   <SqBadge color="success">
-                    <strong>{t`activeBuild`}</strong>
+                    <strong>{t('activeBuild')}</strong>
                   </SqBadge>
                 )}
                 {generLabel && <SqBadge color="info">{generLabel}</SqBadge>}
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ChartCard/index.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ChartCard/index.tsx
index 9518557e31..6b6788c8f8 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ChartCard/index.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ChartCard/index.tsx
@@ -218,7 +218,7 @@ export default function ChartCard({
       <CardContent>
         <Grid container spacing={1} alignItems="center">
           <Grid item>
-            <Typography>{t`tcGraph.vs`}</Typography>
+            <Typography>{t('tcGraph.vs')}</Typography>
           </Grid>
           <Grid item>
             <BootstrapTooltip
@@ -271,7 +271,9 @@ export default function ChartCard({
                 startIcon={showMin ? <CheckBox /> : <CheckBoxOutlineBlank />}
                 color={showMin ? 'success' : 'secondary'}
                 onClick={() => setshowMin(!showMin)}
-              >{t`tcGraph.showStatThr`}</Button>
+              >
+                {t('tcGraph.showStatThr')}
+              </Button>
             </Grid>
           )}
           {!!downloadData && (
@@ -281,7 +283,9 @@ export default function ChartCard({
                 color="info"
                 startIcon={<Download />}
                 onClick={() => setshowDownload(!showDownload)}
-              >{t`tcGraph.downloadData`}</Button>
+              >
+                {t('tcGraph.downloadData')}
+              </Button>
             </Grid>
           )}
         </Grid>
@@ -436,7 +440,7 @@ function Chart({
               ? [
                   {
                     id: 'min',
-                    value: t`tcGraph.statReqThr`,
+                    value: t('tcGraph.statReqThr'),
                     type: 'line' as LegendType,
                     color: lineColor,
                   },
@@ -444,19 +448,19 @@ function Chart({
               : []),
             {
               id: 'trueY',
-              value: t`tcGraph.generatedBuilds`,
+              value: t('tcGraph.generatedBuilds'),
               type: 'circle',
               color: optTargetColor,
             },
             {
               id: 'highlighted',
-              value: t`tcGraph.highlightedBuilds`,
+              value: t('tcGraph.highlightedBuilds'),
               type: 'square',
               color: highlightedColor,
             },
             {
               id: 'current',
-              value: t`tcGraph.currentBuild`,
+              value: t('tcGraph.currentBuild'),
               type: 'diamond',
               color: currentColor,
             },
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ExcludeArt.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ExcludeArt.tsx
index 502249f99d..6ddabf1c5c 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ExcludeArt.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/ExcludeArt.tsx
@@ -108,9 +108,13 @@ export default function ExcludeArt({
           <CardHeader
             title={
               <Box display="flex" gap={1} alignItems="center">
-                <Typography variant="h6">{t`excludeArt.title_exclude`}</Typography>
+                <Typography variant="h6">
+                  {t('excludeArt.title_exclude')}
+                </Typography>
                 <InfoTooltip
-                  title={<Typography>{t`excludeArt.title_tooltip`}</Typography>}
+                  title={
+                    <Typography>{t('excludeArt.title_tooltip')}</Typography>
+                  }
                 />
               </Box>
             }
@@ -136,10 +140,14 @@ export default function ExcludeArt({
               color="info"
               sx={{ mb: 1 }}
               startIcon={<AddIcon />}
-            >{t`excludeArt.addExc`}</Button>
+            >
+              {t('excludeArt.addExc')}
+            </Button>
             {!!numExcludedArt && (
               <CardThemed bgt="light" sx={{ mb: 1 }}>
-                <Typography textAlign="center">{t`excludeArt.deSelectExc`}</Typography>
+                <Typography textAlign="center">
+                  {t('excludeArt.deSelectExc')}
+                </Typography>
               </CardThemed>
             )}
             <Grid
@@ -253,7 +261,7 @@ function ExcludeArtRedButtons({
           onClick={excludeArtifacts}
           startIcon={<ExcludeIcon />}
         >
-          {t`optExcludeModal.excludeBtn`}
+          {t('optExcludeModal.excludeBtn')}
           <SqBadge sx={{ ml: 1 }} color={numExclude ? 'success' : 'secondary'}>
             {numExclude}
           </SqBadge>
@@ -267,7 +275,7 @@ function ExcludeArtRedButtons({
           onClick={includeArtifacts}
           startIcon={<OptimizationIcon />}
         >
-          {t`optExcludeModal.includeBtn`}
+          {t('optExcludeModal.includeBtn')}
           <SqBadge sx={{ ml: 1 }} color={numInclude ? 'success' : 'secondary'}>
             {numInclude}
           </SqBadge>
@@ -341,7 +349,7 @@ function ArtifactSelectModal({
     >
       <CardThemed>
         <CardHeader
-          title={t`excludeArt.selExc`}
+          title={t('excludeArt.selExc')}
           action={
             <IconButton onClick={onClose}>
               <CloseIcon />
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/MainStatSelectionCard.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/MainStatSelectionCard.tsx
index 09cd465328..cb702be1fc 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/MainStatSelectionCard.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/MainStatSelectionCard.tsx
@@ -90,7 +90,7 @@ export default function MainStatSelectionCard({
           <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
             <BootstrapTooltip
               placement="top"
-              title={<Typography>{t(`slotName.flower`)}</Typography>}
+              title={<Typography>{t('slotName.flower')}</Typography>}
             >
               <FlowerIcon fontSize="inherit" />
             </BootstrapTooltip>
@@ -106,7 +106,7 @@ export default function MainStatSelectionCard({
           <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
             <BootstrapTooltip
               placement="top"
-              title={<Typography>{t(`slotName.plume`)}</Typography>}
+              title={<Typography>{t('slotName.plume')}</Typography>}
             >
               <PlumeIcon fontSize="inherit" />
             </BootstrapTooltip>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/StatFilterCard.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/StatFilterCard.tsx
index ce63313da9..34e1270e10 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/StatFilterCard.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/StatFilterCard.tsx
@@ -39,11 +39,11 @@ export default function StatFilterCard({
           }}
         >
           <Box display="flex" justifyContent="space-between">
-            <Typography
-              sx={{ fontWeight: 'bold' }}
-            >{t`constraintFilter.title`}</Typography>
+            <Typography sx={{ fontWeight: 'bold' }}>
+              {t('constraintFilter.title')}
+            </Typography>
             <InfoTooltip
-              title={<Typography>{t`constraintFilter.tooltip`}</Typography>}
+              title={<Typography>{t('constraintFilter.tooltip')}</Typography>}
             />
           </Box>
         </CardContent>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/TargetSelectorModal.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/TargetSelectorModal.tsx
index 19c7b495a4..f333375343 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/TargetSelectorModal.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/TargetSelectorModal.tsx
@@ -76,7 +76,7 @@ export function TargetSelectorModal({
     <ModalWrapper open={show} onClose={onClose}>
       <CardThemed>
         <CardHeader
-          title={t`targetSelectorTitle`}
+          title={t('targetSelectorTitle')}
           action={
             <IconButton onClick={onClose}>
               <CloseIcon />
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/UseEquipped.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/UseEquipped.tsx
index 2851b9a9cf..1592106068 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/UseEquipped.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/UseEquipped.tsx
@@ -303,7 +303,7 @@ export default function UseEquipped({
         <CardThemed>
           {/* Header */}
           <CardHeader
-            title={t`excludeChar.title`}
+            title={t('excludeChar.title')}
             titleTypographyProps={{ variant: 'h6' }}
             action={
               <IconButton onClick={onClose}>
@@ -359,7 +359,7 @@ export default function UseEquipped({
             <Grid container pb={1} gap={1} flexWrap="nowrap">
               <Grid item xs={6}>
                 <Button color="success" fullWidth onClick={allowAll}>
-                  {t`excludeChar.modal.allow_all`}
+                  {t('excludeChar.modal.allow_all')}
                   <SqBadge sx={{ ml: 1 }}>
                     <strong>{locListTotals['allowed']}</strong>
                   </SqBadge>
@@ -367,7 +367,7 @@ export default function UseEquipped({
               </Grid>
               <Grid item xs={6}>
                 <Button fullWidth color="error" onClick={disallowAll}>
-                  {t`excludeChar.modal.disallow_All`}
+                  {t('excludeChar.modal.disallow_All')}
                   <SqBadge sx={{ ml: 1 }}>
                     <strong>{locListTotals['excluded']}</strong>
                   </SqBadge>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/UseTeammateArt.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/UseTeammateArt.tsx
index 588429003b..6c6a769bdd 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/UseTeammateArt.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/Components/UseTeammateArt.tsx
@@ -94,7 +94,9 @@ export const UseTeammateArt = memo(function UseTeammateArt({
                         </Grid>
                       ) : (
                         <Typography>
-                          <SqBadge sx={{ width: '100%' }}>{t`tcBadge`}</SqBadge>
+                          <SqBadge sx={{ width: '100%' }}>
+                            {t('tcBadge')}
+                          </SqBadge>
                         </Typography>
                       )}
                     </CardThemed>
@@ -122,7 +124,7 @@ export const UseTeammateArt = memo(function UseTeammateArt({
           disabled={disabled}
         >
           <Box display="flex" gap={1}>
-            <span>{t`useTeamArts`}</span>
+            <span>{t('useTeamArts')}</span>
             <Chip label={totalTally} size="small" />
           </Box>
         </Button>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/index.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/index.tsx
index df7093c1eb..23363433e6 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/index.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOptimize/index.tsx
@@ -454,7 +454,7 @@ export default function TabBuild() {
         if (results && notificationRef.current) {
           audio.play()
           if (!tabFocused.current)
-            setTimeout(() => window.alert(t`buildCompleted`), 1)
+            setTimeout(() => window.alert(t('buildCompleted')), 1)
         }
       }, 100)
     } catch (e) {
@@ -573,9 +573,9 @@ export default function TabBuild() {
           {/* Main Stat Filters */}
           <CardThemed bgt="light">
             <CardContent>
-              <Typography
-                sx={{ fontWeight: 'bold' }}
-              >{t`mainStat.title`}</Typography>
+              <Typography sx={{ fontWeight: 'bold' }}>
+                {t('mainStat.title')}
+              </Typography>
             </CardContent>
             <Divider />
             <CardContent>
@@ -594,8 +594,12 @@ export default function TabBuild() {
                 <InfoTooltip
                   title={
                     <Box>
-                      <Typography variant="h6">{t`mainStat.levelAssTooltip.title`}</Typography>
-                      <Typography>{t`mainStat.levelAssTooltip.desc`}</Typography>
+                      <Typography variant="h6">
+                        {t('mainStat.levelAssTooltip.title')}
+                      </Typography>
+                      <Typography>
+                        {t('mainStat.levelAssTooltip.desc')}
+                      </Typography>
                     </Box>
                   }
                 />
@@ -629,7 +633,7 @@ export default function TabBuild() {
             }
             disabled={generatingBuilds}
           >
-            {t`allowPartial`}
+            {t('allowPartial')}
           </Button>
         </Grid>
 
@@ -712,7 +716,7 @@ export default function TabBuild() {
               </MenuItem>
             ))}
         </DropdownButton>
-        <BootstrapTooltip placement="top" title={t`notifyTooltip`}>
+        <BootstrapTooltip placement="top" title={t('notifyTooltip')}>
           <Box>
             <Button
               sx={{ borderRadius: 0 }}
@@ -790,13 +794,13 @@ export default function TabBuild() {
                     </Trans>{' '}
                     {!!buildDate && (
                       <span>
-                        {t`generatedOn`}
+                        {t('generatedOn')}
                         <strong>{new Date(buildDate).toLocaleString()}</strong>
                       </span>
                     )}
                   </span>
                 ) : (
-                  <span>{t`selectChar`}</span>
+                  <span>{t('selectChar')}</span>
                 )}
               </Typography>
               <Button
@@ -810,7 +814,7 @@ export default function TabBuild() {
                   })
                 }}
               >
-                {t`clearBuildsBtn`}
+                {t('clearBuildsBtn')}
               </Button>
             </Box>
             <Grid container display="flex" spacing={1}>
@@ -868,7 +872,7 @@ const LevelFilter = memo(function LevelFilter({
   return (
     <CardThemed bgt="light">
       <CardContent sx={{ display: 'flex', gap: 1 }}>
-        <Typography sx={{ fontWeight: 'bold' }}>{t`levelFilter`}</Typography>
+        <Typography sx={{ fontWeight: 'bold' }}>{t('levelFilter')}</Typography>
         <SqBadge color="info">{levelTotal}</SqBadge>
       </CardContent>
       <Divider />
@@ -1028,13 +1032,13 @@ function CopyTcButton({ build }: { build: GeneratedBuild }) {
         startIcon={<Science />}
         onClick={onShowTcPrompt}
       >
-        {t`createBuildTc.button`}
+        {t('createBuildTc.button')}
       </Button>
       {/* TODO: Dialog Wanted to use a Dialog here, but was having some weird issues with closing out of it */}
       <ModalWrapper open={showTcPrompt} onClose={OnHideTcPrompt}>
         <CardThemed>
           <CardHeader
-            title={t`createBuildTc.title`}
+            title={t('createBuildTc.title')}
             action={
               <IconButton onClick={OnHideTcPrompt}>
                 <CloseIcon />
@@ -1045,21 +1049,21 @@ function CopyTcButton({ build }: { build: GeneratedBuild }) {
           <CardContent
             sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}
           >
-            <Typography>{t`createBuildTc.desc`}</Typography>
+            <Typography>{t('createBuildTc.desc')}</Typography>
             <TextField
               value={name}
               onChange={(e) => setName(e.target.value)}
               autoFocus
               margin="dense"
-              label={t`createBuildTc.label`}
+              label={t('createBuildTc.label')}
               fullWidth
             />
             <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
-              <Button
-                onClick={OnHideTcPrompt}
-              >{t`createBuildTc.cancel`}</Button>
+              <Button onClick={OnHideTcPrompt}>
+                {t('createBuildTc.cancel')}
+              </Button>
               <Button color="success" disabled={!name} onClick={toTc}>
-                {t`createBuildTc.create`}
+                {t('createBuildTc.create')}
               </Button>
             </Box>
           </CardContent>
@@ -1099,7 +1103,7 @@ function CopyBuildButton({
         startIcon={<CheckroomIcon />}
         onClick={onShowPrompt}
       >
-        {t`createBuildReal.button`}
+        {t('createBuildReal.button')}
       </Button>
       {/* TODO: Dialog Wanted to use a Dialog here, but was having some weird issues with closing out of it */}
       <ModalWrapper
@@ -1109,7 +1113,7 @@ function CopyBuildButton({
       >
         <CardThemed>
           <CardHeader
-            title={t`createBuildReal.title`}
+            title={t('createBuildReal.title')}
             action={
               <IconButton onClick={OnHidePrompt}>
                 <CloseIcon />
@@ -1120,22 +1124,22 @@ function CopyBuildButton({
           <CardContent
             sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}
           >
-            <Typography>{t`createBuildReal.desc`}</Typography>
+            <Typography>{t('createBuildReal.desc')}</Typography>
             <form onSubmit={toLoadout}>
               <TextField
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 autoFocus
                 margin="dense"
-                label={t`createBuildReal.label`}
+                label={t('createBuildReal.label')}
                 fullWidth
               />
               <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
-                <Button
-                  onClick={OnHidePrompt}
-                >{t`createBuildReal.cancel`}</Button>
+                <Button onClick={OnHidePrompt}>
+                  {t('createBuildReal.cancel')}
+                </Button>
                 <Button type="submit" color="success" disabled={!name}>
-                  {t`createBuildReal.create`}
+                  {t('createBuildReal.create')}
                 </Button>
               </Box>
             </form>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOverview/EquipmentSection.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOverview/EquipmentSection.tsx
index be57c784c4..74eb0bc979 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOverview/EquipmentSection.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabOverview/EquipmentSection.tsx
@@ -177,7 +177,9 @@ function ArtifactSectionCard() {
           onClick={unequipArts}
           fullWidth
           sx={{ borderBottomRightRadius: 0, borderBottomLeftRadius: 0 }}
-        >{t`tabEquip.unequipArts`}</Button>
+        >
+          {t('tabEquip.unequipArts')}
+        </Button>
       )}
       <Box p={1}>
         <Stack spacing={1}>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTalent.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTalent.tsx
index c04cf0bceb..34e51ff194 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTalent.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTalent.tsx
@@ -355,7 +355,7 @@ export function ConstellationDropdown() {
                 })
           }
         >
-          {t(`constellationLvl`, { level: i })}
+          {t('constellationLvl', { level: i })}
         </MenuItem>
       ))}
     </DropdownButton>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/ArtifactSubCard/ArtifactAllSubstatEditor.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/ArtifactSubCard/ArtifactAllSubstatEditor.tsx
index c6bc60ce7f..5f2bd3f842 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/ArtifactSubCard/ArtifactAllSubstatEditor.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/ArtifactSubCard/ArtifactAllSubstatEditor.tsx
@@ -133,9 +133,9 @@ export function ArtifactAllSubstatEditor({
         }}
         InputProps={{
           startAdornment: (
-            <Box
-              sx={{ whiteSpace: 'nowrap' }}
-            >{t`tabTheorycraft.all.rolls`}</Box>
+            <Box sx={{ whiteSpace: 'nowrap' }}>
+              {t('tabTheorycraft.all.rolls')}
+            </Box>
           ),
         }}
         focused
@@ -152,7 +152,9 @@ export function ArtifactAllSubstatEditor({
         }}
         InputProps={{
           startAdornment: (
-            <Box sx={{ whiteSpace: 'nowrap' }}>{t`tabTheorycraft.all.max`}</Box>
+            <Box sx={{ whiteSpace: 'nowrap' }}>
+              {t('tabTheorycraft.all.max')}
+            </Box>
           ),
         }}
         focused
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/ArtifactSubCard/ArtifactSubstatEditor.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/ArtifactSubCard/ArtifactSubstatEditor.tsx
index 8305b21215..523c30c67f 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/ArtifactSubCard/ArtifactSubstatEditor.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/ArtifactSubCard/ArtifactSubstatEditor.tsx
@@ -239,7 +239,7 @@ export function ArtifactSubstatEditor({
           InputProps={{
             startAdornment: (
               <InputAdornment position="start">
-                {t`tabTheorycraft.substat.max`}
+                {t('tabTheorycraft.substat.max')}
               </InputAdornment>
             ),
           }}
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/index.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/index.tsx
index 8e787be005..35d6629ba0 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/index.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabTheorycraft/index.tsx
@@ -315,7 +315,7 @@ export default function TabTheorycraft() {
                 value={distributedSubstats}
                 disabled={!optimizationTarget || solving}
                 onChange={(v) => v !== undefined && setDistributedSubstats(v)}
-                endAdornment={t`tabTheorycraft.distInput`}
+                endAdornment={t('tabTheorycraft.distInput')}
                 sx={{
                   borderRadius: 1,
                   px: 1,
@@ -343,7 +343,7 @@ export default function TabTheorycraft() {
                   color="success"
                   startIcon={<CalculateIcon />}
                 >
-                  {t`tabTheorycraft.distribute`}
+                  {t('tabTheorycraft.distribute')}
                 </Button>
               ) : (
                 <Button
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/LevelFilter.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/LevelFilter.tsx
index e09fae832c..c366a5e44d 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/LevelFilter.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/LevelFilter.tsx
@@ -24,11 +24,11 @@ export const LevelFilter = memo(function LevelFilter({
   return (
     <CardThemed bgt="light">
       <CardContent sx={{ display: 'flex', gap: 1 }}>
-        <Typography
-          sx={{ fontWeight: 'bold' }}
-        >{t`upOptLevelFilter`}</Typography>
+        <Typography sx={{ fontWeight: 'bold' }}>
+          {t('upOptLevelFilter')}
+        </Typography>
         <SqBadge color="info">{levelTotal}</SqBadge>
-        <Tooltip title={t`upOptLevelFilterTooltip`}>
+        <Tooltip title={t('upOptLevelFilterTooltip')}>
           <InfoIcon />
         </Tooltip>
       </CardContent>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/UpgradeOptChartCard.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/UpgradeOptChartCard.tsx
index f1087a0252..70077b1019 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/UpgradeOptChartCard.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/UpgradeOptChartCard.tsx
@@ -226,13 +226,13 @@ function UpgradeOptChartCardGraph({
 
   const probUpgradeText = (
     <span>
-      {t('upOptChart.prob', { est: isExact ? '' : t`upOptChart.est` })}
+      {t('upOptChart.prob', { est: isExact ? '' : t('upOptChart.est') })}
       <strong>{(100 * reportP).toFixed(1)}%</strong>
     </span>
   )
   const avgIncText = (
     <span>
-      {t('upOptChart.average', { est: isExact ? '' : t`upOptChart.est` })}
+      {t('upOptChart.average', { est: isExact ? '' : t('upOptChart.est') })}
       <strong>
         {reportD <= 0 ? '' : '+'}
         {((100 * reportD) / thr0).toFixed(1)}%
@@ -264,9 +264,9 @@ function UpgradeOptChartCardGraph({
         >
           <Box flexGrow={1}>
             {isCurrentlyEquipped ? (
-              <SqBadge color="secondary">{t`upOptChart.equipped`}</SqBadge>
+              <SqBadge color="secondary">{t('upOptChart.equipped')}</SqBadge>
             ) : (
-              <Typography>{t`upOptChart.current`}</Typography>
+              <Typography>{t('upOptChart.current')}</Typography>
             )}
           </Box>
 
@@ -293,7 +293,7 @@ function UpgradeOptChartCardGraph({
             tickFormatter={(v) => `${v <= 0 ? '' : '+'}${v}%`}
           >
             <Label
-              value={t`upOptChart.incLabel`}
+              value={t('upOptChart.incLabel')}
               position="insideBottom"
               style={{ fill: '#eaebed' }}
               offset={-10}
@@ -305,7 +305,7 @@ function UpgradeOptChartCardGraph({
             tickFormatter={(v) => `${(v * 100).toFixed()}%`}
           >
             <Label
-              value={t`upOptChart.probLabel`}
+              value={t('upOptChart.probLabel')}
               position="insideLeft"
               angle={-90}
               style={{ fill: '#eaebed' }}
@@ -334,11 +334,11 @@ function UpgradeOptChartCardGraph({
             </linearGradient>
           </defs>
 
-          <Line dataKey="dne" stroke="red" name={t`upOptChart.currentLine`} />
+          <Line dataKey="dne" stroke="red" name={t('upOptChart.currentLine')} />
           <Line
             dataKey="dne"
             stroke="rgba(0,200,0)"
-            name={t`upOptChart.averageLine`}
+            name={t('upOptChart.averageLine')}
           />
           {constrained && (
             <Area
@@ -363,9 +363,9 @@ function UpgradeOptChartCardGraph({
             name={
               isExact
                 ? t('upOptChart.exactDist', {
-                    const: constrained ? t`upOptChart.const` : '',
+                    const: constrained ? t('upOptChart.const') : '',
                   })
-                : t`upOptChart.estimatedDist`
+                : t('upOptChart.estimatedDist')
             }
             activeDot={false}
           />
@@ -373,13 +373,13 @@ function UpgradeOptChartCardGraph({
             x={perc(thr0)}
             stroke="red"
             strokeDasharray="3 3"
-            name={t`upOptChart.currentTarget`}
+            name={t('upOptChart.currentTarget')}
           />
           <ReferenceLine
             x={perc(thr0 + reportD)}
             stroke="rgba(0,200,0,1)"
             strokeDasharray="3 3"
-            name={t`upOptChart.currentTarget`}
+            name={t('upOptChart.currentTarget')}
           />
         </ComposedChart>
       </ResponsiveContainer>
diff --git a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/index.tsx b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/index.tsx
index 54dd78d876..ea3a367d1a 100644
--- a/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/index.tsx
+++ b/libs/gi/page-team/src/CharacterDisplay/Tabs/TabUpgradeOpt/index.tsx
@@ -80,7 +80,7 @@ function AddArtifactButton({ onClick }: AddArtifactButtonProps) {
   const { t } = useTranslation(['artifact', 'ui'])
   return (
     <Button fullWidth onClick={onClick} color="info" startIcon={<AddIcon />}>
-      {t`addNew`}
+      {t('addNew')}
     </Button>
   )
 }
@@ -531,7 +531,7 @@ export default function TabUpopt() {
               />
             </Suspense>
             {!upOptCalc?.artifacts.length && (
-              <Alert severity="warning">{t`upOptNoResults`}</Alert>
+              <Alert severity="warning">{t('upOptNoResults')}</Alert>
             )}
             <Suspense
               fallback={
diff --git a/libs/gi/page-team/src/LoadoutDropdown.tsx b/libs/gi/page-team/src/LoadoutDropdown.tsx
index 53fa27de78..63d1856640 100644
--- a/libs/gi/page-team/src/LoadoutDropdown.tsx
+++ b/libs/gi/page-team/src/LoadoutDropdown.tsx
@@ -71,14 +71,14 @@ export function LoadoutDropdown({
           >
             <TextField
               fullWidth
-              label={t`loDropdown.createModal.label`}
-              placeholder={t`loDropdown.createModal.placeholder`}
+              label={t('loDropdown.createModal.label')}
+              placeholder={t('loDropdown.createModal.placeholder')}
               value={newName}
               onChange={(e) => setNewName(e.target.value)}
             />
             <TextField
               fullWidth
-              label={t`loDropdown.createModal.desc`}
+              label={t('loDropdown.createModal.desc')}
               value={newDesc}
               onChange={(e) => setNewDesc(e.target.value)}
               multiline
@@ -86,7 +86,7 @@ export function LoadoutDropdown({
             />
             <Box sx={{ display: 'flex', gap: 2 }}>
               <Button color="error" fullWidth onClick={onHide}>
-                {t`loDropdown.createModal.cancel`}
+                {t('loDropdown.createModal.cancel')}
               </Button>
               <Button
                 color="success"
@@ -94,7 +94,7 @@ export function LoadoutDropdown({
                 onClick={newLoadout}
                 disabled={!newName}
               >
-                {t`loDropdown.createModal.confirm`}
+                {t('loDropdown.createModal.confirm')}
               </Button>
             </Box>
           </CardContent>
@@ -115,7 +115,7 @@ export function LoadoutDropdown({
           >
             {label ? (
               <span>
-                {t`loDropdown.label`}
+                {t('loDropdown.label')}
                 <strong>{name}</strong>
               </span>
             ) : (
@@ -125,7 +125,7 @@ export function LoadoutDropdown({
         }
         {...dropdownBtnProps}
       >
-        <MenuItem onClick={() => onShow()}>{t`loDropdown.create`}</MenuItem>
+        <MenuItem onClick={() => onShow()}>{t('loDropdown.create')}</MenuItem>
         {teamCharIds.map((tcId) => {
           const { name, buildIds, buildTcIds, customMultiTargets } =
             database.teamChars.get(tcId)!
@@ -141,15 +141,15 @@ export function LoadoutDropdown({
                 color={buildIds.length ? 'primary' : 'secondary'}
                 sx={{ marginLeft: 'auto' }}
               >
-                {t(`loDropdown.builds`, { count: buildIds.length })}
+                {t('loDropdown.builds', { count: buildIds.length })}
               </SqBadge>
               <SqBadge color={buildTcIds.length ? 'primary' : 'secondary'}>
-                {t(`loDropdown.tcs`, { count: buildTcIds.length })}
+                {t('loDropdown.tcs', { count: buildTcIds.length })}
               </SqBadge>
               <SqBadge
                 color={customMultiTargets.length ? 'success' : 'secondary'}
               >
-                {t(`loDropdown.multi`, { count: customMultiTargets.length })}
+                {t('loDropdown.multi', { count: customMultiTargets.length })}
               </SqBadge>
             </MenuItem>
           )
diff --git a/libs/gi/page-team/src/TeamCharacterSelector.tsx b/libs/gi/page-team/src/TeamCharacterSelector.tsx
index bf9a126a35..c070a03505 100644
--- a/libs/gi/page-team/src/TeamCharacterSelector.tsx
+++ b/libs/gi/page-team/src/TeamCharacterSelector.tsx
@@ -133,7 +133,7 @@ export default function TeamCharacterSelector({
               >
                 <BorderColorIcon />
                 <Typography>
-                  <strong>{t`team.editNameDesc`}</strong>
+                  <strong>{t('team.editNameDesc')}</strong>
                 </Typography>
               </Box>
               {!!team.description && (
@@ -164,7 +164,7 @@ export default function TeamCharacterSelector({
       <ModalWrapper open={editMode} onClose={() => setEditMode(false)}>
         <CardThemed>
           <CardHeader
-            title={t`team.editNameDesc`}
+            title={t('team.editNameDesc')}
             avatar={<TeamIcon />}
             titleTypographyProps={{ variant: 'h6' }}
             action={
@@ -177,13 +177,13 @@ export default function TeamCharacterSelector({
           <CardContent>
             <Box display="flex" flexDirection="column" gap={2} sx={{ mt: 2 }}>
               <TextFieldLazy
-                label={t`team.name`}
+                label={t('team.name')}
                 value={team.name}
                 onChange={(teamName) => handleName(teamName)}
                 autoFocus
               />
               <TextFieldLazy
-                label={t`team.desc`}
+                label={t('team.desc')}
                 value={team.description}
                 onChange={(teamDesc) => handleDesc(teamDesc)}
                 multiline
@@ -203,7 +203,7 @@ export default function TeamCharacterSelector({
           icon={<GroupsIcon />}
           iconPosition="start"
           value={'team'}
-          label={t`teamSettings.tab.team`}
+          label={t('teamSettings.tab.team')}
           onClick={() => navigate(`/teams/${teamId}/`)}
         />
         {loadoutData.map((loadoutDatum, ind) => {
diff --git a/libs/gi/page-team/src/TeamSetting/ResonanceDisplay.tsx b/libs/gi/page-team/src/TeamSetting/ResonanceDisplay.tsx
index 3ae7beeb11..ebea390a16 100644
--- a/libs/gi/page-team/src/TeamSetting/ResonanceDisplay.tsx
+++ b/libs/gi/page-team/src/TeamSetting/ResonanceDisplay.tsx
@@ -51,7 +51,7 @@ export function ResonanceDisplay({
               </ColorText>
             </strong>{' '}
             <InfoTooltipInline
-              title={<Typography>{t`tabTeambuff.resonance_tip`}</Typography>}
+              title={<Typography>{t('tabTeambuff.resonance_tip')}</Typography>}
             />
           </span>
         }
diff --git a/libs/gi/page-team/src/TeamSetting/TeamComponents.tsx b/libs/gi/page-team/src/TeamSetting/TeamComponents.tsx
index 5027d92d38..3d72c86d37 100644
--- a/libs/gi/page-team/src/TeamSetting/TeamComponents.tsx
+++ b/libs/gi/page-team/src/TeamSetting/TeamComponents.tsx
@@ -72,7 +72,7 @@ export function TeamBuffDisplay() {
     >
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Typography>{t`teamComponents.teamBuffs`}</Typography>
+          <Typography>{t('teamComponents.teamBuffs')}</Typography>
           <SqBadge sx={{ ml: 1 }} color={nodes.length ? 'success' : 'info'}>
             {nodes.length}
           </SqBadge>
@@ -208,7 +208,7 @@ function TcEquipmentRow({
           gap: 1,
         }}
       >
-        <SqBadge color="info">{t`teamComponents.tcBadge`}</SqBadge>
+        <SqBadge color="info">{t('teamComponents.tcBadge')}</SqBadge>
         {Object.entries(sets).map(([setKey, number]) => (
           <Box
             key={setKey}
diff --git a/libs/gi/page-team/src/TeamSetting/TeamExportModal.tsx b/libs/gi/page-team/src/TeamSetting/TeamExportModal.tsx
index 4fa48789e9..e549d118d4 100644
--- a/libs/gi/page-team/src/TeamSetting/TeamExportModal.tsx
+++ b/libs/gi/page-team/src/TeamSetting/TeamExportModal.tsx
@@ -94,7 +94,7 @@ export default function TeamExportModal({
     const dataStr = JSON.stringify(data)
     navigator.clipboard
       .writeText(dataStr)
-      .then(() => alert(t`exportModal.msg`))
+      .then(() => alert(t('exportModal.msg')))
       .catch(console.error)
   }
   const [selAll, setSelAll] = useState(true)
@@ -135,7 +135,7 @@ export default function TeamExportModal({
     <ModalWrapper open={show} onClose={onHide}>
       <CardThemed>
         <CardHeader
-          title={t`exportModal.title`}
+          title={t('exportModal.title')}
           action={
             <IconButton onClick={onHide}>
               <CloseIcon />
@@ -164,7 +164,7 @@ export default function TeamExportModal({
               color="info"
               onClick={selAll ? onSelAll : onUnselAll}
             >
-              {selAll ? t`exportModal.selAll` : t`exportModal.unselAll`}
+              {selAll ? t('exportModal.selAll') : t('exportModal.unselAll')}
             </Button>
           </Box>
 
@@ -197,7 +197,7 @@ export default function TeamExportModal({
           sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}
         >
           <Button color="success" onClick={onExport}>
-            {t`exportModal.export`}
+            {t('exportModal.export')}
           </Button>
         </CardContent>
       </CardThemed>
@@ -267,7 +267,7 @@ function LoadoutSetting({
                   sx={{ display: 'flex', gap: 1, alignItems: 'center' }}
                 >
                   <OptimizationIcon />
-                  <Box>{t`exportModal.target`}</Box>
+                  <Box>{t('exportModal.target')}</Box>
                 </Typography>
                 <Typography>
                   <OptimizationTargetDisplay
@@ -287,7 +287,7 @@ function LoadoutSetting({
           <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <CustomMultiTargetIcon />
             <Typography>
-              <strong>{t`exportModal.mTargets`}</strong>
+              <strong>{t('exportModal.mTargets')}</strong>
             </Typography>
           </CardContent>
           <FieldDisplayList bgt="light">
@@ -335,7 +335,7 @@ function LoadoutSetting({
       <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
         <BuildIcon />
         <Typography>
-          <strong>{t`exportModal.builds`}</strong>
+          <strong>{t('exportModal.builds')}</strong>
         </Typography>
       </CardContent>
       <FieldDisplayList bgt="light">
@@ -351,7 +351,7 @@ function LoadoutSetting({
               tabIndex={-1}
               disableRipple
             />
-            <ListItemText primary={t`exportModal.equipped`} />
+            <ListItemText primary={t('exportModal.equipped')} />
           </ListItemButton>
         </ListItem>
         {buildIds.map((buildId) => {
@@ -404,7 +404,8 @@ function LoadoutSetting({
                 <ListItemText
                   primary={
                     <Box>
-                      {buildTc.name} <SqBadge>{t`exportModal.tcBadge`}</SqBadge>
+                      {buildTc.name}{' '}
+                      <SqBadge>{t('exportModal.tcBadge')}</SqBadge>
                     </Box>
                   }
                 />
diff --git a/libs/gi/page-team/src/TeamSetting/index.tsx b/libs/gi/page-team/src/TeamSetting/index.tsx
index 08f61a1452..8480c7ce19 100644
--- a/libs/gi/page-team/src/TeamSetting/index.tsx
+++ b/libs/gi/page-team/src/TeamSetting/index.tsx
@@ -74,7 +74,7 @@ export default function TeamSetting({
           disabled={noChars}
           onClick={onShow}
         >
-          {t`teamSettings.exportBtn`}
+          {t('teamSettings.exportBtn')}
         </Button>
         <Button
           color="info"
@@ -83,7 +83,7 @@ export default function TeamSetting({
           onClick={onDup}
           startIcon={<ContentCopyIcon />}
         >
-          {t`teamSettings.dupBtn`}
+          {t('teamSettings.dupBtn')}
         </Button>
         <TeamDelModal
           teamId={teamId}
@@ -97,7 +97,7 @@ export default function TeamSetting({
           onClick={noChars ? onDelNoChars : onShowDel}
           startIcon={<DeleteForeverIcon />}
         >
-          {t`teamSettings.deleteBtn`}
+          {t('teamSettings.deleteBtn')}
         </Button>
       </Box>
       <EnemyExpandCard teamId={teamId} />
@@ -285,7 +285,7 @@ function TeamEditor({
                 disabled={!!ind && !loadoutData.some((id) => id)}
                 startIcon={<AddIcon />}
               >
-                {t`teamSettings.addCharBtn`}
+                {t('teamSettings.addCharBtn')}
               </Button>
             )}
           </Grid>
@@ -370,11 +370,11 @@ function CharSelButton({
       />
       {index ? (
         <Button onClick={onActive} color="info">
-          {t`teamSettings.toFieldBtn`}
+          {t('teamSettings.toFieldBtn')}
         </Button>
       ) : (
         <Button disabled color="info">
-          {t`teamSettings.onFieldBtn`}
+          {t('teamSettings.onFieldBtn')}
         </Button>
       )}
       {dataContextValue && (
diff --git a/libs/gi/page-team/src/index.tsx b/libs/gi/page-team/src/index.tsx
index 96b109b9dd..15063b7cdc 100644
--- a/libs/gi/page-team/src/index.tsx
+++ b/libs/gi/page-team/src/index.tsx
@@ -138,11 +138,11 @@ function Page({ teamId }: { teamId: string }) {
               silly ? 'sillyWisher_charNames' : 'charNames_gen'
             }:${charKeyToLocGenderedCharKey(characterKey, gender)}`
           )
-        : t`page_team:teamSettings.tab.team`
+        : t('page_team:teamSettings.tab.team')
       const tabName = tab
         ? t(`page_character:tabs.${tab}`)
         : characterKey
-        ? t`page_character:tabs.setting`
+        ? t('page_character:tabs.setting')
         : tab
       return tabName
         ? `${team.name} - ${charName} - ${tabName}`
diff --git a/libs/gi/page-teams/src/index.tsx b/libs/gi/page-teams/src/index.tsx
index 05300f3a6e..0492c116b7 100644
--- a/libs/gi/page-teams/src/index.tsx
+++ b/libs/gi/page-teams/src/index.tsx
@@ -69,10 +69,10 @@ export default function PageTeams() {
     try {
       const dataObj = JSON.parse(data)
       if (!database.teams.import(dataObj))
-        window.alert(t`importForm.error.verifi`)
+        window.alert(t('importForm.error.verifi'))
       onHideImport()
     } catch (e) {
-      window.alert(t`importForm.error.import` + `\n${e}`)
+      window.alert(t('importForm.error.import') + `\n${e}`)
 
       return
     }
@@ -154,7 +154,7 @@ export default function PageTeams() {
               onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
                 setSearchTerm(e.target.value)
               }
-              label={t`searchLabel.team`}
+              label={t('searchLabel.team')}
               // size="small"
               sx={{ height: '100%', flexGrow: 1 }}
               InputProps={{
@@ -178,20 +178,20 @@ export default function PageTeams() {
 
       <Box sx={{ display: 'flex', gap: 1 }}>
         <Button fullWidth onClick={onAdd} color="info" startIcon={<AddIcon />}>
-          {t`addTeamBtn`}
+          {t('addTeamBtn')}
         </Button>
         <ModalWrapper open={showImport} onClose={onHideImport}>
           <CardThemed>
-            <CardHeader title={t`importForm.title`} />
+            <CardHeader title={t('importForm.title')} />
             <Divider />
             <CardContent
               sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
             >
-              <Typography>{t`importForm.desc`}</Typography>
+              <Typography>{t('importForm.desc')}</Typography>
               <TextField
                 fullWidth
-                label={t`importForm.label`}
-                placeholder={t`importForm.placeholder`}
+                label={t('importForm.label')}
+                placeholder={t('importForm.placeholder')}
                 value={data}
                 onChange={(e) => setData(e.target.value)}
                 multiline
@@ -202,7 +202,7 @@ export default function PageTeams() {
                 disabled={!data}
                 onClick={importData}
               >
-                {t`importForm.importBtn`}
+                {t('importForm.importBtn')}
               </Button>
             </CardContent>
           </CardThemed>
@@ -213,7 +213,7 @@ export default function PageTeams() {
           color="info"
           startIcon={<UploadIcon />}
         >
-          {t`importTeamBtn`}
+          {t('importTeamBtn')}
         </Button>
       </Box>
       <Suspense
diff --git a/libs/gi/page-weapons/src/WeaponFilter.tsx b/libs/gi/page-weapons/src/WeaponFilter.tsx
index 07439120b6..9c541aafd4 100644
--- a/libs/gi/page-weapons/src/WeaponFilter.tsx
+++ b/libs/gi/page-weapons/src/WeaponFilter.tsx
@@ -119,7 +119,7 @@ function WeaponFilter({
       <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
         <Grid container>
           <Grid item>
-            <Typography variant="h6">{t`weaponFilterTitle`}</Typography>
+            <Typography variant="h6">{t('weaponFilterTitle')}</Typography>
           </Grid>
           <Grid
             item
@@ -212,7 +212,7 @@ function WeaponFilter({
                       })
                     }
                   >
-                    {t`weaponInInv`}{' '}
+                    {t('weaponInInv')}{' '}
                     <Chip
                       sx={{ ml: 1 }}
                       label={equippedTotal['unequipped']}
@@ -228,7 +228,7 @@ function WeaponFilter({
                       })
                     }
                   >
-                    {t`equippedWeapon`}{' '}
+                    {t('equippedWeapon')}{' '}
                     <Chip
                       sx={{ ml: 1 }}
                       label={equippedTotal['equipped']}
@@ -239,7 +239,7 @@ function WeaponFilter({
                 <Stack spacing={1.5} pt={1.5}>
                   <Suspense fallback={null}>
                     <BootstrapTooltip
-                      title={showEquipped ? t`locationsTooltip` : ''}
+                      title={showEquipped ? t('locationsTooltip') : ''}
                       placement="top"
                     >
                       <span>
diff --git a/libs/gi/ui/src/components/EnemyEditor.tsx b/libs/gi/ui/src/components/EnemyEditor.tsx
index fc9f6e4c7c..eb5d787d2a 100644
--- a/libs/gi/ui/src/components/EnemyEditor.tsx
+++ b/libs/gi/ui/src/components/EnemyEditor.tsx
@@ -69,7 +69,7 @@ export function EnemyExpandCard({ teamId }: { teamId: string }) {
             color="success"
             label={
               <span>
-                {t`enemyEditor.enemyLevel`}
+                {t('enemyEditor.enemyLevel')}
                 <strong>{enemyLevel}</strong>
               </span>
             }
@@ -157,7 +157,7 @@ export function EnemyEditor({
           target="_blank"
           rel="noreferrer"
         >
-          {t`enemyEditor.announceBtn`}
+          {t('enemyEditor.announceBtn')}
         </Button>
       </Grid>
       <Grid item {...bsProps}>
@@ -225,7 +225,7 @@ export function EnemyEditor({
                   )
                 }
               >
-                {t`enemyEditor.immunity`}
+                {t('enemyEditor.immunity')}
               </Button>
             </StatInput>
           </Grid>
@@ -262,7 +262,7 @@ export function EnemyEditor({
         />
       </Grid>
       <Grid item xs={12}>
-        <small>{t`enemyEditor.note`}</small>
+        <small>{t('enemyEditor.note')}</small>
       </Grid>
     </Grid>
   )
diff --git a/libs/gi/ui/src/components/HitModeEditor.tsx b/libs/gi/ui/src/components/HitModeEditor.tsx
index 7ea4c7127a..9e791d496a 100644
--- a/libs/gi/ui/src/components/HitModeEditor.tsx
+++ b/libs/gi/ui/src/components/HitModeEditor.tsx
@@ -133,7 +133,9 @@ export function ReactionToggle(props: ReactionToggleProps) {
       disabled={!teamCharId}
       {...props}
     >
-      <ToggleButton value="" disabled={!reaction}>{t`noReaction`}</ToggleButton>
+      <ToggleButton value="" disabled={!reaction}>
+        {t('noReaction')}
+      </ToggleButton>
       {reactions.map((rm) => (
         <ToggleButton key={rm} value={rm} disabled={reaction === rm}>
           {([...allAmpReactionKeys] as string[]).includes(rm) ? (
diff --git a/libs/gi/ui/src/components/artifact/ArtifactCard.tsx b/libs/gi/ui/src/components/artifact/ArtifactCard.tsx
index 29a72826b3..2fb7385a78 100644
--- a/libs/gi/ui/src/components/artifact/ArtifactCard.tsx
+++ b/libs/gi/ui/src/components/artifact/ArtifactCard.tsx
@@ -312,10 +312,9 @@ export function ArtifactCardObj({
               variant="caption"
               sx={{ display: 'flex', gap: 1, alignItems: 'center' }}
             >
-              <ColorText
-                color="secondary"
-                sx={{ flexGrow: 1 }}
-              >{t`artifact:editor.curSubEff`}</ColorText>
+              <ColorText color="secondary" sx={{ flexGrow: 1 }}>
+                {t('artifact:editor.curSubEff')}
+              </ColorText>
               <PercentBadge
                 value={currentEfficiency}
                 max={9}
@@ -332,10 +331,9 @@ export function ArtifactCardObj({
             </Typography>
             {currentEfficiency !== maxEfficiency && (
               <Typography variant="caption" sx={{ display: 'flex', gap: 1 }}>
-                <ColorText
-                  color="secondary"
-                  sx={{ flexGrow: 1 }}
-                >{t`artifact:editor.maxSubEff`}</ColorText>
+                <ColorText color="secondary" sx={{ flexGrow: 1 }}>
+                  {t('artifact:editor.maxSubEff')}
+                </ColorText>
                 <PercentBadge
                   value={maxEfficiency}
                   max={9}
@@ -391,7 +389,7 @@ export function ArtifactCardObj({
           >
             {!!onEdit && (
               <BootstrapTooltip
-                title={<Typography>{t`artifact:edit`}</Typography>}
+                title={<Typography>{t('artifact:edit')}</Typography>}
                 placement="top"
                 arrow
               >
diff --git a/libs/gi/ui/src/components/artifact/ArtifactFilterDisplay.tsx b/libs/gi/ui/src/components/artifact/ArtifactFilterDisplay.tsx
index eecd6b8ded..b40fbcef35 100644
--- a/libs/gi/ui/src/components/artifact/ArtifactFilterDisplay.tsx
+++ b/libs/gi/ui/src/components/artifact/ArtifactFilterDisplay.tsx
@@ -335,7 +335,7 @@ export function ArtifactFilterDisplay({
                   filterOptionDispatch({ showInventory: !showInventory })
                 }
               >
-                {t`artInInv`}{' '}
+                {t('artInInv')}{' '}
                 <Chip
                   sx={{ ml: 1 }}
                   label={equippedTotal['unequipped']}
@@ -350,7 +350,7 @@ export function ArtifactFilterDisplay({
                   filterOptionDispatch({ showEquipped: !showEquipped })
                 }
               >
-                {t`equippedArt`}{' '}
+                {t('equippedArt')}{' '}
                 <Chip
                   sx={{ ml: 1 }}
                   label={equippedTotal['equipped']}
@@ -362,7 +362,7 @@ export function ArtifactFilterDisplay({
               {/* Filter characters */}
               <Suspense fallback={null}>
                 <BootstrapTooltip
-                  title={showEquipped ? t`locationsTooltip` : ''}
+                  title={showEquipped ? t('locationsTooltip') : ''}
                   placement="top"
                 >
                   <span>
diff --git a/libs/gi/ui/src/components/artifact/ArtifactLevelSlider.tsx b/libs/gi/ui/src/components/artifact/ArtifactLevelSlider.tsx
index 48e43d29dc..cef736db9b 100644
--- a/libs/gi/ui/src/components/artifact/ArtifactLevelSlider.tsx
+++ b/libs/gi/ui/src/components/artifact/ArtifactLevelSlider.tsx
@@ -64,7 +64,7 @@ export function ArtifactLevelSlider({
                 backgroundColor: 'rgb(30,120,200)',
               }}
             >
-              {t`levelSliderTitle`}
+              {t('levelSliderTitle')}
             </span>
             <Divider orientation="vertical" flexItem />
           </>
diff --git a/libs/gi/ui/src/components/artifact/ArtifactRarityDropdown.tsx b/libs/gi/ui/src/components/artifact/ArtifactRarityDropdown.tsx
index a8c33c592e..f7ba219f3a 100644
--- a/libs/gi/ui/src/components/artifact/ArtifactRarityDropdown.tsx
+++ b/libs/gi/ui/src/components/artifact/ArtifactRarityDropdown.tsx
@@ -20,7 +20,9 @@ export function ArtifactRarityDropdown({
   return (
     <DropdownButton
       {...props}
-      title={rarity ? <StarsDisplay stars={rarity} inline /> : t`editor.rarity`}
+      title={
+        rarity ? <StarsDisplay stars={rarity} inline /> : t('editor.rarity')
+      }
       color={rarity ? 'success' : 'primary'}
     >
       {([5, 4, 3] as ArtifactRarity[]).map((rarity) => (
diff --git a/libs/gi/ui/src/components/artifact/ArtifactSlotDropdown.tsx b/libs/gi/ui/src/components/artifact/ArtifactSlotDropdown.tsx
index 629f2257e2..a6065fc6d9 100644
--- a/libs/gi/ui/src/components/artifact/ArtifactSlotDropdown.tsx
+++ b/libs/gi/ui/src/components/artifact/ArtifactSlotDropdown.tsx
@@ -36,7 +36,7 @@ export function ArtifactSlotDropdown({
           <ListItemIcon>
             <ReplayIcon />
           </ListItemIcon>
-          <ListItemText>{t`ui:unselect`}</ListItemText>
+          <ListItemText>{t('ui:unselect')}</ListItemText>
         </MenuItem>
       )}
       {hasUnselect && <Divider />}
diff --git a/libs/gi/ui/src/components/artifact/ArtifactSwapModal.tsx b/libs/gi/ui/src/components/artifact/ArtifactSwapModal.tsx
index 02c4b262d6..1ed1367c86 100644
--- a/libs/gi/ui/src/components/artifact/ArtifactSwapModal.tsx
+++ b/libs/gi/ui/src/components/artifact/ArtifactSwapModal.tsx
@@ -164,7 +164,7 @@ export function ArtifactSwapModal({
         >
           <Typography variant="h6">
             {slotKey ? <ImgIcon src={imgAssets.slot[slotKey]} /> : null}{' '}
-            {t`tabEquip.swapArt`}
+            {t('tabEquip.swapArt')}
           </Typography>
           <IconButton onClick={onClose} sx={{ ml: 'auto' }}>
             <CloseIcon />
@@ -241,7 +241,9 @@ export function ArtifactSwapModal({
                           }}
                         >
                           <RemoveCircleIcon sx={{ fontSize: '10em' }} />
-                          <Typography>{t`artifact:button.unequipArtifact`}</Typography>
+                          <Typography>
+                            {t('artifact:button.unequipArtifact')}
+                          </Typography>
                         </Box>
                       </CardActionArea>
                     </CardThemed>
diff --git a/libs/gi/ui/src/components/artifact/RVSlide.tsx b/libs/gi/ui/src/components/artifact/RVSlide.tsx
index 6bbafcceb2..13047392be 100644
--- a/libs/gi/ui/src/components/artifact/RVSlide.tsx
+++ b/libs/gi/ui/src/components/artifact/RVSlide.tsx
@@ -68,7 +68,7 @@ export function RVSlide({
             color: 'rgba(255,255,255,0.9)',
           }}
         >
-          {MRV_RV ? t`rvSliderBtn.maximum` : t`rvSliderBtn.current`}
+          {MRV_RV ? t('rvSliderBtn.maximum') : t('rvSliderBtn.current')}
         </Button>
 
         <Divider orientation="vertical" flexItem />
diff --git a/libs/gi/ui/src/components/artifact/SetInclusionButton.tsx b/libs/gi/ui/src/components/artifact/SetInclusionButton.tsx
index 0595294c6a..2e839b28fa 100644
--- a/libs/gi/ui/src/components/artifact/SetInclusionButton.tsx
+++ b/libs/gi/ui/src/components/artifact/SetInclusionButton.tsx
@@ -41,7 +41,9 @@ export function SetInclusionButton({
         }
         color={exclude2 ? 'secondary' : 'success'}
         endIcon={exclude2 ? <BlockIcon /> : <ShowChartIcon />}
-      >{t`2set`}</Button>
+      >
+        {t('2set')}
+      </Button>
       <Button
         startIcon={exclude4 ? <CheckBoxOutlineBlank /> : <CheckBox />}
         onClick={() =>
@@ -51,7 +53,9 @@ export function SetInclusionButton({
         }
         color={exclude4 ? 'secondary' : 'success'}
         endIcon={exclude4 ? <BlockIcon /> : <ShowChartIcon />}
-      >{t`4set`}</Button>
+      >
+        {t('4set')}
+      </Button>
     </ButtonGroup>
   )
 }
diff --git a/libs/gi/ui/src/components/artifact/editor/SubstatInput.tsx b/libs/gi/ui/src/components/artifact/editor/SubstatInput.tsx
index a93d298139..ee8183f4e1 100644
--- a/libs/gi/ui/src/components/artifact/editor/SubstatInput.tsx
+++ b/libs/gi/ui/src/components/artifact/editor/SubstatInput.tsx
@@ -71,7 +71,8 @@ export function SubstatInput({
   }
   const rollOffset = 7 - rollData.length
 
-  if (!rollNum && key && value) error = error || t`editor.substat.error.noCalc`
+  if (!rollNum && key && value)
+    error = error || t('editor.substat.error.noCalc')
   if (allowedRolls < 0)
     error =
       error ||
@@ -108,7 +109,9 @@ export function SubstatInput({
             {key && (
               <MenuItem
                 onClick={() => setSubstat(index, { key: '', value: 0 })}
-              >{t`editor.substat.noSubstat`}</MenuItem>
+              >
+                {t('editor.substat.noSubstat')}
+              </MenuItem>
             )}
             {allSubstatKeys
               .filter((key) => mainStatKey !== key)
@@ -139,7 +142,7 @@ export function SubstatInput({
               },
             }}
             float={unit === '%'}
-            placeholder={t`editor.substat.selectSub`}
+            placeholder={t('editor.substat.selectSub')}
             value={key ? value : 0}
             onChange={(value) => setSubstat(index, { key, value: value ?? 0 })}
             disabled={!key}
@@ -149,7 +152,7 @@ export function SubstatInput({
             }}
           />
           {!!rollData.length && (
-            <TextButton>{t`editor.substat.nextRolls`}</TextButton>
+            <TextButton>{t('editor.substat.nextRolls')}</TextButton>
           )}
           {rollData.map((v, i) => {
             let newValue = artDisplayValue(accurateValue + v, unit)
@@ -183,7 +186,7 @@ export function SubstatInput({
       </Box>
       <Box sx={{ px: 1, pb: 1 }}>
         {error ? (
-          <SqBadge color="error">{t`ui:error`}</SqBadge>
+          <SqBadge color="error">{t('ui:error')}</SqBadge>
         ) : (
           <Grid container>
             <Grid item>
@@ -196,7 +199,7 @@ export function SubstatInput({
               >
                 {rollNum
                   ? t('editor.substat.RollCount', { count: rollNum })
-                  : t`editor.substat.noRoll`}
+                  : t('editor.substat.noRoll')}
               </SqBadge>
             </Grid>
             <Grid item flexGrow={1}>
@@ -230,7 +233,7 @@ export function SubstatInput({
                     value={
                       efficiency
                         ? efficiency
-                        : (t`editor.substat.noStat` as string)
+                        : (t('editor.substat.noStat') as string)
                     }
                   />
                 </Trans>
diff --git a/libs/gi/ui/src/components/artifact/editor/UploadExplainationModal.tsx b/libs/gi/ui/src/components/artifact/editor/UploadExplainationModal.tsx
index b92124d12f..7205aa3d0f 100644
--- a/libs/gi/ui/src/components/artifact/editor/UploadExplainationModal.tsx
+++ b/libs/gi/ui/src/components/artifact/editor/UploadExplainationModal.tsx
@@ -28,7 +28,7 @@ export function UploadExplainationModal({
     <ModalWrapper open={modalShow} onClose={hide}>
       <CardThemed>
         <CardContent sx={{ py: 1, display: 'flex' }}>
-          <Typography variant="h6">{t`editor.uploadExp.title`}</Typography>
+          <Typography variant="h6">{t('editor.uploadExp.title')}</Typography>
           <IconButton onClick={hide} sx={{ ml: 'auto' }}>
             <CloseIcon />
           </IconButton>
diff --git a/libs/gi/ui/src/components/artifact/editor/index.tsx b/libs/gi/ui/src/components/artifact/editor/index.tsx
index e2806370c7..34b20b9ea2 100644
--- a/libs/gi/ui/src/components/artifact/editor/index.tsx
+++ b/libs/gi/ui/src/components/artifact/editor/index.tsx
@@ -312,7 +312,7 @@ export function ArtifactEditor({
   )
   const isValid = !errors.length
   const canClearArtifact = (): boolean =>
-    window.confirm(t`editor.clearPrompt` as string)
+    window.confirm(t('editor.clearPrompt') as string)
   const { rarity = 5, level = 0 } = artifact ?? {}
   // Same as above when assigning newValue.slotKey in update.
   const slotKey = useMemo(() => {
@@ -326,7 +326,7 @@ export function ArtifactEditor({
       if (
         !artifactIdToEdit &&
         (queueTotal || artifact) &&
-        !window.confirm(t`editor.clearPrompt` as string)
+        !window.confirm(t('editor.clearPrompt') as string)
       ) {
         e?.preventDefault()
         return
@@ -464,7 +464,7 @@ export function ArtifactEditor({
               <Box component="div" display="flex">
                 <CustomNumberTextField
                   id="filled-basic"
-                  label={t`editor.level`}
+                  label={t('editor.level')}
                   variant="filled"
                   sx={{ flexShrink: 1, flexGrow: 1, mr: 1, my: 0 }}
                   margin="dense"
@@ -532,7 +532,7 @@ export function ArtifactEditor({
                           />
                         </span>
                       ) : (
-                        t`editor.unknownPieceName`
+                        t('editor.unknownPieceName')
                       )}
                     </Typography>
                   </Suspense>
@@ -552,7 +552,7 @@ export function ArtifactEditor({
                       {artifact ? (
                         <ArtifactStatWithUnit statKey={artifact.mainStatKey} />
                       ) : (
-                        t`mainStat`
+                        t('mainStat')
                       )}
                     </b>
                   }
@@ -578,7 +578,7 @@ export function ArtifactEditor({
                           rarity,
                           level
                         )
-                      : t`mainStat`}
+                      : t('mainStat')}
                   </Typography>
                 </CardThemed>
                 <Button
@@ -631,7 +631,7 @@ export function ArtifactEditor({
                               component="span"
                               startIcon={<PhotoCamera />}
                             >
-                              {t`editor.uploadBtn`}
+                              {t('editor.uploadBtn')}
                             </Button>
                           </label>
                         </Grid>
@@ -745,9 +745,9 @@ export function ArtifactEditor({
                   >
                     {oldType !== 'edit'
                       ? oldType === 'duplicate'
-                        ? t`editor.dupArt`
-                        : t`editor.upArt`
-                      : t`editor.beforeEdit`}
+                        ? t('editor.dupArt')
+                        : t('editor.upArt')
+                      : t('editor.beforeEdit')}
                   </Typography>
                   <ArtifactCardObj artifact={old} />
                 </CardThemed>
@@ -772,7 +772,9 @@ export function ArtifactEditor({
                     py={1}
                     variant="h6"
                     color="text.secondary"
-                  >{t`editor.preview`}</Typography>
+                  >
+                    {t('editor.preview')}
+                  </Typography>
                   {cArtifact && <ArtifactCardObj artifact={cArtifact} />}
                 </CardThemed>
               </Grid>
@@ -803,7 +805,7 @@ export function ArtifactEditor({
                 disabled={!artifact || !isValid}
                 color="primary"
               >
-                {t`editor.btnSave`}
+                {t('editor.btnSave')}
               </Button>
             ) : (
               <Button
@@ -819,7 +821,7 @@ export function ArtifactEditor({
                 disabled={!artifact || !isValid}
                 color={oldType === 'duplicate' ? 'warning' : 'primary'}
               >
-                {t`editor.btnAdd`}
+                {t('editor.btnAdd')}
               </Button>
             )}
             {allowEmpty && (
@@ -830,7 +832,9 @@ export function ArtifactEditor({
                   canClearArtifact() && reset()
                 }}
                 color="error"
-              >{t`editor.btnClear`}</Button>
+              >
+                {t('editor.btnClear')}
+              </Button>
             )}
             {process.env['NODE_ENV'] === 'development' && (
               <Button
@@ -842,7 +846,9 @@ export function ArtifactEditor({
                     artifact: randomizeArtifact(),
                   })
                 }
-              >{t`editor.btnRandom`}</Button>
+              >
+                {t('editor.btnRandom')}
+              </Button>
             )}
             {old && oldType !== 'edit' && (
               <Button
@@ -854,20 +860,24 @@ export function ArtifactEditor({
                 }}
                 disabled={!artifact || !isValid}
                 color="success"
-              >{t`editor.btnUpdate`}</Button>
+              >
+                {t('editor.btnUpdate')}
+              </Button>
             )}
             {!!removeId && (
               <Button
                 startIcon={<DeleteForeverIcon />}
                 onClick={() => {
-                  if (!window.confirm(t`editor.confirmDelete`)) return
+                  if (!window.confirm(t('editor.confirmDelete'))) return
                   database.arts.remove(removeId)
                   reset()
                   if (!allowEmpty) setShow(false)
                 }}
                 disabled={!artifact || !isValid}
                 color="error"
-              >{t`editor.delete`}</Button>
+              >
+                {t('editor.delete')}
+              </Button>
             )}
           </Box>
         </CardContent>
diff --git a/libs/gi/ui/src/components/build/BuildCard.tsx b/libs/gi/ui/src/components/build/BuildCard.tsx
index 932645e545..abc9d5c37b 100644
--- a/libs/gi/ui/src/components/build/BuildCard.tsx
+++ b/libs/gi/ui/src/components/build/BuildCard.tsx
@@ -88,7 +88,7 @@ export function BuildCard({
           }}
         >
           <Tooltip
-            title={<Typography>{t`buildCardTip.edit`}</Typography>}
+            title={<Typography>{t('buildCardTip.edit')}</Typography>}
             placement="top"
             arrow
           >
@@ -104,7 +104,7 @@ export function BuildCard({
             </IconButton>
           </Tooltip>
           <Tooltip
-            title={<Typography>{t`buildCardTip.copyTc`}</Typography>}
+            title={<Typography>{t('buildCardTip.copyTc')}</Typography>}
             placement="top"
             arrow
           >
@@ -118,7 +118,7 @@ export function BuildCard({
             </IconButton>
           </Tooltip>
           <Tooltip
-            title={<Typography>{t`buildCardTip.duplicate`}</Typography>}
+            title={<Typography>{t('buildCardTip.duplicate')}</Typography>}
             placement="top"
             arrow
           >
@@ -132,7 +132,7 @@ export function BuildCard({
             </IconButton>
           </Tooltip>
           <Tooltip
-            title={<Typography>{t`buildCardTip.equip`}</Typography>}
+            title={<Typography>{t('buildCardTip.equip')}</Typography>}
             placement="top"
             arrow
           >
@@ -146,7 +146,7 @@ export function BuildCard({
             </IconButton>
           </Tooltip>
           <Tooltip
-            title={<Typography>{t`buildCardTip.delete`}</Typography>}
+            title={<Typography>{t('buildCardTip.delete')}</Typography>}
             placement="top"
             arrow
           >
diff --git a/libs/gi/ui/src/components/build/BuildDisplayItem.tsx b/libs/gi/ui/src/components/build/BuildDisplayItem.tsx
index 20e2e64a80..d97ff7acf1 100644
--- a/libs/gi/ui/src/components/build/BuildDisplayItem.tsx
+++ b/libs/gi/ui/src/components/build/BuildDisplayItem.tsx
@@ -346,7 +346,7 @@ export const BuildDisplayItem = memo(function BuildDisplayItem({
                 <Typography sx={{ display: 'flex', gap: 1 }}>
                   <strong>{label}</strong>
                   {currentlyEquipped && (
-                    <span>{t`buildDisplay.equippedBadge`}</span>
+                    <span>{t('buildDisplay.equippedBadge')}</span>
                   )}
                 </Typography>
               </SqBadge>
@@ -362,7 +362,9 @@ export const BuildDisplayItem = memo(function BuildDisplayItem({
                       )?.name
                     }
                   </span>
-                  {isActiveBuild && <span>{t`buildDisplay.currentBadge`}</span>}
+                  {isActiveBuild && (
+                    <span>{t('buildDisplay.currentBadge')}</span>
+                  )}
                   {sameAsBuildIds.length > 1 && (
                     <Tooltip
                       arrow
@@ -398,7 +400,7 @@ export const BuildDisplayItem = memo(function BuildDisplayItem({
               currentName={
                 buildType === 'real'
                   ? database.builds.get(buildId)!.name
-                  : t`buildDisplay.equipped`
+                  : t('buildDisplay.equipped')
               }
               currentWeaponId={currentWeaponId}
               currentArtifactIds={currentArtifactIds}
@@ -418,7 +420,7 @@ export const BuildDisplayItem = memo(function BuildDisplayItem({
               disabled={disabled || isActiveBuild}
               startIcon={<Checkroom />}
             >
-              {t`buildDisplay.equipToCrr`}
+              {t('buildDisplay.equipToCrr')}
             </Button>
             {extraButtonsRight}
           </Box>
@@ -480,12 +482,12 @@ function CompareWeaponModal({
             <Box minWidth={320} display="flex" flexDirection="column" gap={1}>
               <CardThemed bgt="light" sx={{ p: 1 }}>
                 <Typography variant="h6" textAlign="center">
-                  {t`buildDisplay.oldWeapon`}
+                  {t('buildDisplay.oldWeapon')}
                 </Typography>
               </CardThemed>
               {oldId === 'tc' ? (
                 <Typography variant="h6" textAlign="center" color="info">
-                  <SqBadge>{t`buildDisplay.tcWeapon`}</SqBadge>
+                  <SqBadge>{t('buildDisplay.tcWeapon')}</SqBadge>
                 </Typography>
               ) : (
                 <WeaponCard weaponId={oldId!} onDelete={deleteWeapon} />
@@ -502,7 +504,7 @@ function CompareWeaponModal({
           <Box minWidth={320} display="flex" flexDirection="column" gap={1}>
             <CardThemed bgt="light" sx={{ p: 1 }}>
               <Typography variant="h6" textAlign="center">
-                {t`buildDisplay.newWeapon`}
+                {t('buildDisplay.newWeapon')}
               </Typography>
             </CardThemed>
             <WeaponCard weaponId={newId} onDelete={deleteWeapon} />
@@ -565,12 +567,12 @@ function CompareArtifactModal({
             <Box minWidth={320} display="flex" flexDirection="column" gap={1}>
               <CardThemed bgt="light" sx={{ p: 1 }}>
                 <Typography variant="h6" textAlign="center">
-                  {t`compareArtModal.oldArt`}
+                  {t('compareArtModal.oldArt')}
                 </Typography>
               </CardThemed>
               {oldId === 'tc' ? (
                 <Typography variant="h6" textAlign="center" color="info">
-                  <SqBadge>{t`compareArtModal.tcArt`}</SqBadge>
+                  <SqBadge>{t('compareArtModal.tcArt')}</SqBadge>
                 </Typography>
               ) : (
                 <ArtifactCard
@@ -603,7 +605,7 @@ function CompareArtifactModal({
             {oldId && (
               <CardThemed bgt="light" sx={{ p: 1 }}>
                 <Typography variant="h6" textAlign="center">
-                  {t`compareArtModal.newArt`}
+                  {t('compareArtModal.newArt')}
                 </Typography>
               </CardThemed>
             )}
@@ -661,7 +663,7 @@ function ArtInclusionButton({ id }: { id: string }) {
     <BootstrapTooltip
       title={
         <Box>
-          <Typography>{t`excludeArt.includeArtifactTip`}</Typography>
+          <Typography>{t('excludeArt.includeArtifactTip')}</Typography>
         </Box>
       }
       placement="top"
@@ -673,7 +675,7 @@ function ArtInclusionButton({ id }: { id: string }) {
         size="small"
         startIcon={excluded ? <CheckBoxOutlineBlankIcon /> : <CheckBoxIcon />}
       >
-        {t`excludeArt.includeArtifactButton`}
+        {t('excludeArt.includeArtifactButton')}
       </Button>
     </BootstrapTooltip>
   )
@@ -710,7 +712,7 @@ function ExcludeEquipButton({
       startIcon={excluded ? <CheckBoxOutlineBlankIcon /> : <CheckBoxIcon />}
     >
       <span>
-        {t`excludeChar.allowEquip`}{' '}
+        {t('excludeChar.allowEquip')}{' '}
         <strong>
           <CharacterName characterKey={characterKey} gender={gender} />
         </strong>
diff --git a/libs/gi/ui/src/components/build/EquipBuildModal.tsx b/libs/gi/ui/src/components/build/EquipBuildModal.tsx
index 9b2c89c9ea..34185e8f54 100644
--- a/libs/gi/ui/src/components/build/EquipBuildModal.tsx
+++ b/libs/gi/ui/src/components/build/EquipBuildModal.tsx
@@ -129,7 +129,9 @@ function Content(props: Props) {
         }}
       >
         {/* Confirmation Message */}
-        <Typography sx={{ fontSize: 20 }}>{t`equipBuildModal.desc`}</Typography>
+        <Typography sx={{ fontSize: 20 }}>
+          {t('equipBuildModal.desc')}
+        </Typography>
         {teamCharId && (
           <FormControlLabel
             label={
@@ -150,7 +152,7 @@ function Content(props: Props) {
         )}
         {copyCurrent && (
           <TextField
-            label={t`equipBuildModal.label`}
+            label={t('equipBuildModal.label')}
             placeholder={t('equipBuildModal.newName', { currentName })}
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -167,10 +169,10 @@ function Content(props: Props) {
           }}
         >
           <Button color="error" onClick={onHide}>
-            {t`equipBuildModal.cancel`}
+            {t('equipBuildModal.cancel')}
           </Button>
           <Button color="success" onClick={toEquip}>
-            {t`equipBuildModal.equip`}
+            {t('equipBuildModal.equip')}
           </Button>
         </Box>
         {/* Active Build */}
diff --git a/libs/gi/ui/src/components/character/CharacterMultiAutocomplete.tsx b/libs/gi/ui/src/components/character/CharacterMultiAutocomplete.tsx
index f6fd9a8f7a..442e89fa2d 100644
--- a/libs/gi/ui/src/components/character/CharacterMultiAutocomplete.tsx
+++ b/libs/gi/ui/src/components/character/CharacterMultiAutocomplete.tsx
@@ -134,7 +134,7 @@ export function CharacterMultiAutocomplete({
   return (
     <Suspense fallback={<Skeleton variant="text" width={100} />}>
       <GeneralAutocompleteMulti
-        label={t`searchLabel.char`}
+        label={t('searchLabel.char')}
         options={options}
         toImg={toImg}
         valueKeys={charKeys}
diff --git a/libs/gi/ui/src/components/character/EquippedGrid.tsx b/libs/gi/ui/src/components/character/EquippedGrid.tsx
index e9df298586..4ee59c374c 100644
--- a/libs/gi/ui/src/components/character/EquippedGrid.tsx
+++ b/libs/gi/ui/src/components/character/EquippedGrid.tsx
@@ -253,7 +253,7 @@ function ArtifactSwapButton({
   return (
     <>
       <Tooltip
-        title={<Typography>{t`tabEquip.swapArt`}</Typography>}
+        title={<Typography>{t('tabEquip.swapArt')}</Typography>}
         placement="top"
         arrow
       >
@@ -286,7 +286,7 @@ function WeaponSwapButton({
   return (
     <>
       <Tooltip
-        title={<Typography>{t`tabEquip.swapWeapon`}</Typography>}
+        title={<Typography>{t('tabEquip.swapWeapon')}</Typography>}
         placement="top"
         arrow
       >
@@ -317,11 +317,9 @@ function LargeWeaponSwapButton({
   const [show, onOpen, onClose] = useBoolState()
   return (
     <>
-      <Button
-        color="info"
-        onClick={onOpen}
-        startIcon={<SwapHorizIcon />}
-      >{t`tabEquip.swapWeapon`}</Button>
+      <Button color="info" onClick={onOpen} startIcon={<SwapHorizIcon />}>
+        {t('tabEquip.swapWeapon')}
+      </Button>
       <WeaponSwapModal
         weaponId={weaponId}
         weaponTypeKey={weaponTypeKey}
diff --git a/libs/gi/ui/src/components/character/LocationAutocomplete.tsx b/libs/gi/ui/src/components/character/LocationAutocomplete.tsx
index 65815b60ec..acaa3c8d94 100644
--- a/libs/gi/ui/src/components/character/LocationAutocomplete.tsx
+++ b/libs/gi/ui/src/components/character/LocationAutocomplete.tsx
@@ -107,7 +107,7 @@ export function LocationAutocomplete({
     () => [
       {
         key: '',
-        label: t`artifact:filterLocation.inventory`,
+        label: t('artifact:filterLocation.inventory'),
       },
       ...Array.from(
         new Set(
diff --git a/libs/gi/ui/src/components/character/LocationFilterMultiAutocomplete.tsx b/libs/gi/ui/src/components/character/LocationFilterMultiAutocomplete.tsx
index 0dce6d5c16..69b7b5b454 100644
--- a/libs/gi/ui/src/components/character/LocationFilterMultiAutocomplete.tsx
+++ b/libs/gi/ui/src/components/character/LocationFilterMultiAutocomplete.tsx
@@ -111,7 +111,7 @@ export function LocationFilterMultiAutocomplete({
         toImg={toImg}
         toExLabel={toExLabel}
         toExItemLabel={toExItemLabel}
-        label={t`artifact:filterLocation.location`}
+        label={t('artifact:filterLocation.location')}
         chipProps={{ variant: 'outlined' }}
       />
     </Suspense>
diff --git a/libs/gi/ui/src/components/character/card/CharacterCardEquipmentRow.tsx b/libs/gi/ui/src/components/character/card/CharacterCardEquipmentRow.tsx
index fe1dbeaa97..0541a1f9a8 100644
--- a/libs/gi/ui/src/components/character/card/CharacterCardEquipmentRow.tsx
+++ b/libs/gi/ui/src/components/character/card/CharacterCardEquipmentRow.tsx
@@ -77,7 +77,7 @@ export function CharacterCardEquipmentRowTC({
             }}
           >
             <Typography>
-              <strong>{t`tcBuild`}</strong>
+              <strong>{t('tcBuild')}</strong>
             </Typography>
           </Card>
         </Grid>
diff --git a/libs/gi/ui/src/components/character/card/CharacterCardStats.tsx b/libs/gi/ui/src/components/character/card/CharacterCardStats.tsx
index 232f0e63c4..874cd47cc7 100644
--- a/libs/gi/ui/src/components/character/card/CharacterCardStats.tsx
+++ b/libs/gi/ui/src/components/character/card/CharacterCardStats.tsx
@@ -20,7 +20,7 @@ export function CharacterCardStats({ bgt }: { bgt?: CardBackgroundColor }) {
       {name && (
         <ListItem sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
           <Typography flexGrow={1}>
-            <strong>{t`specialized`}</strong>
+            <strong>{t('specialized')}</strong>
           </Typography>
           {icon}
           <Typography>{name}</Typography>
diff --git a/libs/gi/ui/src/components/character/editor/Content.tsx b/libs/gi/ui/src/components/character/editor/Content.tsx
index 24810c8e33..398435f411 100644
--- a/libs/gi/ui/src/components/character/editor/Content.tsx
+++ b/libs/gi/ui/src/components/character/editor/Content.tsx
@@ -275,7 +275,7 @@ function InTeam() {
         variant="outlined"
         sx={{ backgroundColor: 'contentLight.main' }}
       >
-        {t`charContentModal.addLoAndTeam`}
+        {t('charContentModal.addLoAndTeam')}
       </Button>
       <CardThemed bgt="light"></CardThemed>
     </Box>
diff --git a/libs/gi/ui/src/components/character/editor/LoadoutCard.tsx b/libs/gi/ui/src/components/character/editor/LoadoutCard.tsx
index 5677221ad8..e73ea23f5c 100644
--- a/libs/gi/ui/src/components/character/editor/LoadoutCard.tsx
+++ b/libs/gi/ui/src/components/character/editor/LoadoutCard.tsx
@@ -72,7 +72,7 @@ export function LoadoutCard({
                 color="info"
                 startIcon={<AddIcon />}
               >
-                {t`charContentModal.addTeam`}
+                {t('charContentModal.addTeam')}
               </Button>
             </Grid>
           </Grid>
diff --git a/libs/gi/ui/src/components/character/editor/LoadoutEditor.tsx b/libs/gi/ui/src/components/character/editor/LoadoutEditor.tsx
index c784cc7130..dc8d270c05 100644
--- a/libs/gi/ui/src/components/character/editor/LoadoutEditor.tsx
+++ b/libs/gi/ui/src/components/character/editor/LoadoutEditor.tsx
@@ -124,14 +124,14 @@ export function LoadoutEditor({
           <LoadoutInfoAlert />
           <TextFieldLazy
             fullWidth
-            label={t`loadoutEditor.label`}
-            placeholder={t`loadoutEditor.placeholder`}
+            label={t('loadoutEditor.label')}
+            placeholder={t('loadoutEditor.placeholder')}
             value={name}
             onChange={(name) => database.teamChars.set(teamCharId, { name })}
           />
           <TextFieldLazy
             fullWidth
-            label={t`loadoutEditor.desc`}
+            label={t('loadoutEditor.desc')}
             value={description}
             onChange={(description) =>
               database.teamChars.set(teamCharId, { description })
@@ -148,7 +148,7 @@ export function LoadoutEditor({
                   fullWidth
                   startIcon={<ContentCopyIcon />}
                 >
-                  {t`loadoutEditor.dupBtn`}
+                  {t('loadoutEditor.dupBtn')}
                 </Button>
               </Grid>
               <Grid item xs={1}>
@@ -166,7 +166,7 @@ export function LoadoutEditor({
                   color="error"
                   onClick={onShowRemoval}
                 >
-                  {t`loadoutEditor.delBtn`}
+                  {t('loadoutEditor.delBtn')}
                 </Button>
               </Grid>
             </Grid>
@@ -192,7 +192,7 @@ export function LoadoutEditor({
                           }}
                         >
                           <OptimizationIcon />
-                          <span>{t`loadoutEditor.optTarget`}</span>
+                          <span>{t('loadoutEditor.optTarget')}</span>
                         </Box>
                       }
                     />
@@ -220,7 +220,7 @@ export function LoadoutEditor({
                 <CardThemed bgt="light">
                   <CardContent>
                     <Typography variant="h6">
-                      {t`loadoutEditor.conditionals`}
+                      {t('loadoutEditor.conditionals')}
                       <strong>{conditionalCount}</strong>
                     </Typography>
                   </CardContent>
@@ -234,7 +234,7 @@ export function LoadoutEditor({
           title={
             <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
               <CheckroomIcon />
-              <span>{t`loadoutEditor.builds`}</span>
+              <span>{t('loadoutEditor.builds')}</span>
             </Box>
           }
         />
@@ -270,7 +270,7 @@ export function LoadoutEditor({
           title={
             <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
               <CheckroomIcon />
-              <span>{t`loadoutEditor.teams`}</span>
+              <span>{t('loadoutEditor.teams')}</span>
             </Box>
           }
         />
@@ -298,7 +298,7 @@ export function LoadoutEditor({
                 color="info"
                 startIcon={<AddIcon />}
               >
-                {t`loadoutEditor.addNewTeam`}
+                {t('loadoutEditor.addNewTeam')}
               </Button>
             </Grid>
           </Grid>
@@ -326,7 +326,7 @@ function BonusStatsCard({
             }}
           >
             <BarChartIcon />
-            <span>{t`loadoutEditor.bonusStats`}</span>
+            <span>{t('loadoutEditor.bonusStats')}</span>
           </Box>
         }
         titleTypographyProps={{ variant: 'h6' }}
@@ -365,7 +365,7 @@ function MultiTargetCard({
             }}
           >
             <DashboardCustomizeIcon />
-            <span>{t`loadoutEditor.mltTargets`}</span>
+            <span>{t('loadoutEditor.mltTargets')}</span>
           </Box>
         }
         titleTypographyProps={{ variant: 'h6' }}
diff --git a/libs/gi/ui/src/components/character/editor/LoadoutHeaderContent.tsx b/libs/gi/ui/src/components/character/editor/LoadoutHeaderContent.tsx
index dc4b39bbd2..f76eb1adf4 100644
--- a/libs/gi/ui/src/components/character/editor/LoadoutHeaderContent.tsx
+++ b/libs/gi/ui/src/components/character/editor/LoadoutHeaderContent.tsx
@@ -48,21 +48,21 @@ export function LoadoutHeaderContent({
         <Box sx={{ display: 'flex', justifyItems: 'center', gap: 1 }}>
           <CheckroomIcon />
           <Typography>
-            {t`loadoutHeader.builds`}
+            {t('loadoutHeader.builds')}
             <strong>{buildIds.length}</strong>
           </Typography>
         </Box>
         <Box sx={{ display: 'flex', justifyItems: 'center', gap: 1 }}>
           <CheckroomIcon />
           <Typography>
-            {t`loadoutHeader.tcBuilds`}
+            {t('loadoutHeader.tcBuilds')}
             <strong>{buildTcIds.length}</strong>
           </Typography>
         </Box>
         <Box sx={{ display: 'flex', justifyItems: 'center', gap: 1 }}>
           <DashboardCustomizeIcon />
           <Typography>
-            {t`loadoutHeader.mltTargets`}
+            {t('loadoutHeader.mltTargets')}
             <strong>{customMultiTargets.length}</strong>
           </Typography>
         </Box>
@@ -70,7 +70,7 @@ export function LoadoutHeaderContent({
       {optimizationTarget && (
         <Typography sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
           <OptimizationIcon />
-          <Box>{t`loadoutHeader.optTarget`}</Box>
+          <Box>{t('loadoutHeader.optTarget')}</Box>
           <OptimizationTargetDisplay
             customMultiTargets={customMultiTargets}
             optimizationTarget={optimizationTarget}
diff --git a/libs/gi/ui/src/components/character/editor/RemoveLoadout.tsx b/libs/gi/ui/src/components/character/editor/RemoveLoadout.tsx
index a6710dfb24..08f35352e2 100644
--- a/libs/gi/ui/src/components/character/editor/RemoveLoadout.tsx
+++ b/libs/gi/ui/src/components/character/editor/RemoveLoadout.tsx
@@ -80,12 +80,12 @@ export function RemoveLoadout({
               <CardContent>{description}</CardContent>
             </CardThemed>
           )}
-          <Typography>{t`loadoutDelModal.desc`}</Typography>
+          <Typography>{t('loadoutDelModal.desc')}</Typography>
           <List sx={{ listStyleType: 'disc', pl: 4 }}>
             {!!buildIds.length && (
               <ListItem sx={{ display: 'list-item' }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  {t`loadoutDelModal.builds`}
+                  {t('loadoutDelModal.builds')}
                   {buildIds.length}{' '}
                   <Tooltip
                     title={
@@ -115,7 +115,7 @@ export function RemoveLoadout({
             {!!buildTcIds.length && (
               <ListItem sx={{ display: 'list-item' }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  {t`loadoutDelModal.tcBuilds`}
+                  {t('loadoutDelModal.tcBuilds')}
                   {buildTcIds.length}{' '}
                   <Tooltip
                     title={
@@ -145,7 +145,7 @@ export function RemoveLoadout({
             {!!customMultiTargets.length && (
               <ListItem sx={{ display: 'list-item' }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  {t`loadoutDelModal.mTargets`}
+                  {t('loadoutDelModal.mTargets')}
                   {customMultiTargets.length}{' '}
                   <Tooltip
                     title={
@@ -174,25 +174,25 @@ export function RemoveLoadout({
 
             {!!Object.keys(bonusStats).length && (
               <ListItem sx={{ display: 'list-item' }}>
-                {t`loadoutDelModal.bonus`}
+                {t('loadoutDelModal.bonus')}
                 {Object.keys(bonusStats).length}
               </ListItem>
             )}
             {!!conditionalCount && (
               <ListItem sx={{ display: 'list-item' }}>
-                {t`loadoutDelModal.condi`}
+                {t('loadoutDelModal.condi')}
                 {conditionalCount}
               </ListItem>
             )}
             <ListItem sx={{ display: 'list-item' }}>
-              {t`loadoutDelModal.optConfig`}
+              {t('loadoutDelModal.optConfig')}
             </ListItem>
 
             {!!teamIds.length && (
               <ListItem sx={{ display: 'list-item' }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                   <span>
-                    {t`loadoutDelModal.affected`}
+                    {t('loadoutDelModal.affected')}
                     {teamIds.length}
                   </span>
 
@@ -224,14 +224,14 @@ export function RemoveLoadout({
         </CardContent>
         <CardActions sx={{ float: 'right' }}>
           <Button startIcon={<CloseIcon />} color="secondary" onClick={onHide}>
-            {t`loadoutDelModal.cancel`}
+            {t('loadoutDelModal.cancel')}
           </Button>
           <Button
             startIcon={<DeleteForeverIcon />}
             color="error"
             onClick={onDeleteLoadout}
           >
-            {t`loadoutDelModal.delete`}
+            {t('loadoutDelModal.delete')}
           </Button>
         </CardActions>
       </CardThemed>
diff --git a/libs/gi/ui/src/components/database/DatabaseCard.tsx b/libs/gi/ui/src/components/database/DatabaseCard.tsx
index d342c29458..34c99238ab 100644
--- a/libs/gi/ui/src/components/database/DatabaseCard.tsx
+++ b/libs/gi/ui/src/components/database/DatabaseCard.tsx
@@ -27,7 +27,7 @@ export function DatabaseCard({ readOnly = false }: { readOnly?: boolean }) {
   return (
     <CardThemed bgt="light">
       <CardContent sx={{ py: 1 }}>
-        <Typography variant="subtitle1">{t`DatabaseCard.title`}</Typography>
+        <Typography variant="subtitle1">{t('DatabaseCard.title')}</Typography>
       </CardContent>
       <Divider />
       <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
@@ -147,14 +147,16 @@ function DataCard({ index, readOnly }: { index: number; readOnly: boolean }) {
             onClick={onSwap}
             color="warning"
             disabled={readOnly}
-          >{t`DatabaseCard.button.swap`}</Button>
+          >
+            {t('DatabaseCard.button.swap')}
+          </Button>
         )}
         <Chip
           color={current ? 'success' : 'secondary'}
           label={
             current
-              ? t`DatabaseCard.currentDB`
-              : `${t`DatabaseCard.title`} ${database.dbIndex}`
+              ? t('DatabaseCard.currentDB')
+              : `${t('DatabaseCard.title')} ${database.dbIndex}`
           }
         />
       </CardContent>
@@ -209,7 +211,7 @@ function DataCard({ index, readOnly }: { index: number; readOnly: boolean }) {
                   onClick={onOpen}
                   disabled={readOnly}
                 >
-                  {t`DatabaseCard.button.upload`}
+                  {t('DatabaseCard.button.upload')}
                 </Button>
               </Grid>
               <Grid item xs={1}>
@@ -219,7 +221,7 @@ function DataCard({ index, readOnly }: { index: number; readOnly: boolean }) {
                   onClick={download}
                   startIcon={<Download />}
                 >
-                  {t`DatabaseCard.button.download`}
+                  {t('DatabaseCard.button.download')}
                 </Button>
               </Grid>
               <Grid item xs={1}>
@@ -230,7 +232,7 @@ function DataCard({ index, readOnly }: { index: number; readOnly: boolean }) {
                   onClick={onDelete}
                   startIcon={<Delete />}
                 >
-                  {t`DatabaseCard.button.delete`}
+                  {t('DatabaseCard.button.delete')}
                 </Button>
               </Grid>
             </Grid>
diff --git a/libs/gi/ui/src/components/database/UploadCard.tsx b/libs/gi/ui/src/components/database/UploadCard.tsx
index 38a54b3070..5430937eba 100644
--- a/libs/gi/ui/src/components/database/UploadCard.tsx
+++ b/libs/gi/ui/src/components/database/UploadCard.tsx
@@ -125,11 +125,9 @@ export function UploadCard({
                 type="file"
                 onChange={onUpload}
               />
-              <Button
-                component="span"
-                color="info"
-                startIcon={<FileOpen />}
-              >{t`uploadCard.buttons.open`}</Button>
+              <Button component="span" color="info" startIcon={<FileOpen />}>
+                {t('uploadCard.buttons.open')}
+              </Button>
             </label>
           </Grid>
           <Grid item flexGrow={1}>
@@ -154,8 +152,8 @@ export function UploadCard({
             title={
               <Typography>
                 {ignoreDups
-                  ? t`uploadCard.tooltip.ignoreDup`
-                  : t`uploadCard.tooltip.detectdup`}
+                  ? t('uploadCard.tooltip.ignoreDup')
+                  : t('uploadCard.tooltip.detectdup')}
               </Typography>
             }
             placement="top"
@@ -169,7 +167,7 @@ export function UploadCard({
                 onClick={() => setIgnoreDups(!ignoreDups)}
                 startIcon={ignoreDups ? <CheckBoxOutlineBlank /> : <CheckBox />}
               >
-                {t`uploadCard.buttons.detectDups`}
+                {t('uploadCard.buttons.detectDups')}
               </Button>
             </Box>
           </Tooltip>
@@ -177,8 +175,8 @@ export function UploadCard({
             title={
               <Typography>
                 {keepNotInImport
-                  ? t`uploadCard.tooltip.keepNotInImport`
-                  : t`uploadCard.tooltip.delNotInImport`}
+                  ? t('uploadCard.tooltip.keepNotInImport')
+                  : t('uploadCard.tooltip.delNotInImport')}
               </Typography>
             }
             placement="top"
@@ -194,7 +192,7 @@ export function UploadCard({
                   keepNotInImport ? <CheckBoxOutlineBlank /> : <CheckBox />
                 }
               >
-                {t`uploadCard.buttons.delNotInImport`}
+                {t('uploadCard.buttons.delNotInImport')}
               </Button>
             </Box>
           </Tooltip>
diff --git a/libs/gi/ui/src/components/team/TeamDelModal.tsx b/libs/gi/ui/src/components/team/TeamDelModal.tsx
index 00dce246a9..7388c3e5b0 100644
--- a/libs/gi/ui/src/components/team/TeamDelModal.tsx
+++ b/libs/gi/ui/src/components/team/TeamDelModal.tsx
@@ -80,7 +80,7 @@ export function TeamDelModal({
                 alignItems: 'center',
               }}
             >
-              <Box>{t`teamDelModal.teamName`}</Box>
+              <Box>{t('teamDelModal.teamName')}</Box>
               <strong>{name}</strong>
               {description && (
                 <BootstrapTooltip title={description}>
@@ -123,7 +123,7 @@ export function TeamDelModal({
             startIcon={<DeleteForeverIcon />}
             onClick={onDelete}
           >
-            {t`teamDelModal.delBtn`}
+            {t('teamDelModal.delBtn')}
           </Button>
         </CardContent>
       </CardThemed>
@@ -167,7 +167,7 @@ function LoadoutDisplay({
             <ColorText color={inTeams.length === 1 ? 'success' : 'warning'}>
               <Typography>
                 {inTeams.length === 1
-                  ? t`teamDelModal.onlyCrrTeam`
+                  ? t('teamDelModal.onlyCrrTeam')
                   : t('teamDelModal.usingMltTeams', { count: inTeams.length })}
               </Typography>
             </ColorText>
diff --git a/libs/gi/ui/src/components/weapon/WeaponCard.tsx b/libs/gi/ui/src/components/weapon/WeaponCard.tsx
index 885a0b0c50..1fc9f1face 100644
--- a/libs/gi/ui/src/components/weapon/WeaponCard.tsx
+++ b/libs/gi/ui/src/components/weapon/WeaponCard.tsx
@@ -233,7 +233,7 @@ export function WeaponCardObj({
           >
             {!!onEdit && (
               <Tooltip
-                title={<Typography>{t`page_weapon:edit`}</Typography>}
+                title={<Typography>{t('page_weapon:edit')}</Typography>}
                 placement="top"
                 arrow
               >
diff --git a/libs/gi/ui/src/components/weapon/WeaponSwapModal.tsx b/libs/gi/ui/src/components/weapon/WeaponSwapModal.tsx
index da592194b3..6fcc123095 100644
--- a/libs/gi/ui/src/components/weapon/WeaponSwapModal.tsx
+++ b/libs/gi/ui/src/components/weapon/WeaponSwapModal.tsx
@@ -187,7 +187,7 @@ export function WeaponSwapModal({
                 {weaponTypeKey ? (
                   <ImgIcon src={imgAssets.weaponTypes[weaponTypeKey]} />
                 ) : null}
-                <span>{t`page_character:tabEquip.swapWeapon`}</span>
+                <span>{t('page_character:tabEquip.swapWeapon')}</span>
               </Typography>
             }
             action={
diff --git a/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx b/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx
index 3353c11940..63fd2a2f72 100644
--- a/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx
+++ b/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx
@@ -110,7 +110,7 @@ function NewBuildButton({
         startIcon={<CheckroomIcon />}
         onClick={onShowPrompt}
       >
-        {t`createBuildReal.button`}
+        {t('createBuildReal.button')}
       </Button>
       {/* TODO: Dialog Wanted to use a Dialog here, but was having some weird issues with closing out of it */}
       <ModalWrapper
@@ -120,7 +120,7 @@ function NewBuildButton({
       >
         <CardThemed>
           <CardHeader
-            title={t`createBuildReal.title`}
+            title={t('createBuildReal.title')}
             action={
               <IconButton onClick={OnHidePrompt}>
                 <CloseIcon />
@@ -131,7 +131,7 @@ function NewBuildButton({
           <CardContent
             sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}
           >
-            <Typography>{t`createBuildReal.desc`}</Typography>
+            <Typography>{t('createBuildReal.desc')}</Typography>
             <Box display="flex" alignItems="center" sx={{ ml: -1 }}>
               <Checkbox
                 size="small"
@@ -148,15 +148,15 @@ function NewBuildButton({
                 onChange={(e) => setName(e.target.value)}
                 autoFocus
                 margin="dense"
-                label={t`createBuildReal.label`}
+                label={t('createBuildReal.label')}
                 fullWidth
               />
               <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
-                <Button
-                  onClick={OnHidePrompt}
-                >{t`createBuildReal.cancel`}</Button>
+                <Button onClick={OnHidePrompt}>
+                  {t('createBuildReal.cancel')}
+                </Button>
                 <Button type="submit" color="success" disabled={!name}>
-                  {t`createBuildReal.create`}
+                  {t('createBuildReal.create')}
                 </Button>
               </Box>
             </form>
diff --git a/libs/sr/page-team/src/Optimize/StatFilterCard.tsx b/libs/sr/page-team/src/Optimize/StatFilterCard.tsx
index 956f9b1406..77ac92751a 100644
--- a/libs/sr/page-team/src/Optimize/StatFilterCard.tsx
+++ b/libs/sr/page-team/src/Optimize/StatFilterCard.tsx
@@ -34,11 +34,11 @@ export function StatFilterCard({ disabled = false }: { disabled?: boolean }) {
           }}
         >
           <Box display="flex" justifyContent="space-between">
-            <Typography
-              sx={{ fontWeight: 'bold' }}
-            >{t`constraintFilter.title`}</Typography>
+            <Typography sx={{ fontWeight: 'bold' }}>
+              {t('constraintFilter.title')}
+            </Typography>
             <InfoTooltip
-              title={<Typography>{t`constraintFilter.tooltip`}</Typography>}
+              title={<Typography>{t('constraintFilter.tooltip')}</Typography>}
             />
           </Box>
         </CardContent>
diff --git a/libs/sr/page-team/src/TeamCharacterSelector.tsx b/libs/sr/page-team/src/TeamCharacterSelector.tsx
index 933afd118e..3633c13848 100644
--- a/libs/sr/page-team/src/TeamCharacterSelector.tsx
+++ b/libs/sr/page-team/src/TeamCharacterSelector.tsx
@@ -80,7 +80,7 @@ export function TeamCharacterSelector({
               <Box sx={{ display: 'flex', color: 'info.light', gap: 1 }}>
                 <BorderColorIcon />
                 <Typography>
-                  <strong>{t`team.editNameDesc`}</strong>
+                  <strong>{t('team.editNameDesc')}</strong>
                 </Typography>
               </Box>
               {!!team.description && (
@@ -117,7 +117,7 @@ export function TeamCharacterSelector({
       <ModalWrapper open={editMode} onClose={() => setEditMode(false)}>
         <CardThemed>
           <CardHeader
-            title={t`team.editNameDesc`}
+            title={t('team.editNameDesc')}
             avatar={<GroupsIcon />}
             titleTypographyProps={{ variant: 'h6' }}
             action={
@@ -130,13 +130,13 @@ export function TeamCharacterSelector({
           <CardContent>
             <Box display="flex" flexDirection="column" gap={2} sx={{ mt: 2 }}>
               <TextFieldLazy
-                label={t`team.name`}
+                label={t('team.name')}
                 value={team.name}
                 onChange={(teamName) => handleName(teamName)}
                 autoFocus
               />
               <TextFieldLazy
-                label={t`team.desc`}
+                label={t('team.desc')}
                 value={team.description}
                 onChange={(teamDesc) => handleDesc(teamDesc)}
                 multiline
diff --git a/libs/sr/ui/src/Relic/RelicEditor/RelicRarityDropdown.tsx b/libs/sr/ui/src/Relic/RelicEditor/RelicRarityDropdown.tsx
index 891b0948af..f40bb99285 100644
--- a/libs/sr/ui/src/Relic/RelicEditor/RelicRarityDropdown.tsx
+++ b/libs/sr/ui/src/Relic/RelicEditor/RelicRarityDropdown.tsx
@@ -23,7 +23,9 @@ export default function RelicRarityDropdown({
   return (
     <DropdownButton
       {...props}
-      title={rarity ? <StarsDisplay stars={rarity} inline /> : t`editor.rarity`}
+      title={
+        rarity ? <StarsDisplay stars={rarity} inline /> : t('editor.rarity')
+      }
       color={rarity ? 'success' : 'primary'}
     >
       {allRelicRarityKeys.map((rarity) => (
diff --git a/libs/sr/ui/src/Relic/RelicEditor/SubstatInput.tsx b/libs/sr/ui/src/Relic/RelicEditor/SubstatInput.tsx
index 57715213cf..11abcb0c9c 100644
--- a/libs/sr/ui/src/Relic/RelicEditor/SubstatInput.tsx
+++ b/libs/sr/ui/src/Relic/RelicEditor/SubstatInput.tsx
@@ -69,7 +69,7 @@ export default function SubstatInput({
   }
   const rollOffset = 7 - rollData.length
 
-  // if (!rollNum && key && value) error = error || t`editor.substat.error.noCalc`
+  // if (!rollNum && key && value) error = error || t('editor.substat.error.noCalc')
   if (allowedRolls < 0)
     error =
       error ||
@@ -106,7 +106,9 @@ export default function SubstatInput({
             {key && (
               <MenuItem
                 onClick={() => setSubstat(index, { key: '', value: 0 })}
-              >{t`editor.substat.noSubstat`}</MenuItem>
+              >
+                {t('editor.substat.noSubstat')}
+              </MenuItem>
             )}
             {allRelicSubStatKeys
               .filter((key) => mainStatKey !== key)
@@ -131,7 +133,7 @@ export default function SubstatInput({
           >
             <CustomNumberInput
               float={getUnitStr(key) === '%'}
-              placeholder={t`editor.substat.selectSub`}
+              placeholder={t('editor.substat.selectSub')}
               value={
                 key
                   ? roundStat(toPercent(value, key), key as RelicSubStatKey)
@@ -155,7 +157,7 @@ export default function SubstatInput({
             />
           </CustomNumberInputButtonGroupWrapper>
           {!!rollData.length && (
-            <TextButton>{t`editor.substat.nextRolls`}</TextButton>
+            <TextButton>{t('editor.substat.nextRolls')}</TextButton>
           )}
           {/* {rollData.map((v, i) => {
             let newValue = artDisplayValue(accurateValue + v, unit)
@@ -193,7 +195,7 @@ export default function SubstatInput({
       </Box>
       <Box sx={{ px: 1, pb: 1 }}>
         {error ? (
-          <SqBadge color="error">{t`ui:error`}</SqBadge>
+          <SqBadge color="error">{t('ui:error')}</SqBadge>
         ) : (
           <Grid container>
             {/* <Grid item>
@@ -206,7 +208,7 @@ export default function SubstatInput({
               >
                 {rollNum
                   ? t('editor.substat.RollCount', { count: rollNum })
-                  : t`editor.substat.noRoll`}
+                  : t('editor.substat.noRoll')}
               </SqBadge>
             </Grid> */}
             <Grid item flexGrow={1}>
@@ -241,7 +243,7 @@ export default function SubstatInput({
                     value={
                       efficiency
                         ? efficiency
-                        : (t`editor.substat.noStat` as string)
+                        : (t('editor.substat.noStat') as string)
                     }
                   /> */}
                   {efficiency}
diff --git a/libs/sr/ui/src/Settings/DatabaseCard.tsx b/libs/sr/ui/src/Settings/DatabaseCard.tsx
index 260f74a403..72c9dcc49c 100644
--- a/libs/sr/ui/src/Settings/DatabaseCard.tsx
+++ b/libs/sr/ui/src/Settings/DatabaseCard.tsx
@@ -27,7 +27,7 @@ export function DatabaseCard() {
   return (
     <CardThemed bgt="light">
       <CardContent sx={{ py: 1 }}>
-        <Typography variant="subtitle1">{t`DatabaseCard.title`}</Typography>
+        <Typography variant="subtitle1">{t('DatabaseCard.title')}</Typography>
       </CardContent>
       <Divider />
       <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
@@ -140,19 +140,17 @@ function DataCard({ index }: { index: number }) {
           onKeyDown={onKeyDown}
         />
         {!current && (
-          <Button
-            startIcon={<ImportExport />}
-            onClick={onSwap}
-            color="warning"
-          >{t`DatabaseCard.button.swap`}</Button>
+          <Button startIcon={<ImportExport />} onClick={onSwap} color="warning">
+            {t('DatabaseCard.button.swap')}
+          </Button>
         )}
         <Chip
           color={current ? 'success' : 'secondary'}
           sx={{ alignSelf: 'center' }}
           label={
             current
-              ? t`DatabaseCard.currentDB`
-              : `${t`DatabaseCard.title`} ${database.dbIndex}`
+              ? t('DatabaseCard.currentDB')
+              : `${t('DatabaseCard.title')} ${database.dbIndex}`
           }
         />
       </CardContent>
@@ -203,7 +201,7 @@ function DataCard({ index }: { index: number }) {
                   startIcon={<Upload />}
                   onClick={onOpen}
                 >
-                  {t`DatabaseCard.button.upload`}
+                  {t('DatabaseCard.button.upload')}
                 </Button>
               </Grid>
               <Grid item xs={1}>
@@ -213,7 +211,7 @@ function DataCard({ index }: { index: number }) {
                   onClick={download}
                   startIcon={<Download />}
                 >
-                  {t`DatabaseCard.button.download`}
+                  {t('DatabaseCard.button.download')}
                 </Button>
               </Grid>
               <Grid item xs={1}>
@@ -224,7 +222,7 @@ function DataCard({ index }: { index: number }) {
                   onClick={onDelete}
                   startIcon={<Delete />}
                 >
-                  {t`DatabaseCard.button.delete`}
+                  {t('DatabaseCard.button.delete')}
                 </Button>
               </Grid>
             </Grid>
diff --git a/libs/sr/ui/src/Settings/UploadCard.tsx b/libs/sr/ui/src/Settings/UploadCard.tsx
index 0a19d5cb06..0da6403fd8 100644
--- a/libs/sr/ui/src/Settings/UploadCard.tsx
+++ b/libs/sr/ui/src/Settings/UploadCard.tsx
@@ -123,7 +123,7 @@ export function UploadCard({
                 onChange={onUpload}
               />
               <Button component="span" color="info" startIcon={<FileOpen />}>
-                {t`uploadCard.buttons.open`}
+                {t('uploadCard.buttons.open')}
               </Button>
             </label>
           </Grid>
@@ -149,8 +149,8 @@ export function UploadCard({
             title={
               <Typography>
                 {ignoreDups
-                  ? t`uploadCard.tooltip.ignoreDup`
-                  : t`uploadCard.tooltip.detectdup`}
+                  ? t('uploadCard.tooltip.ignoreDup')
+                  : t('uploadCard.tooltip.detectdup')}
               </Typography>
             }
             placement="top"
@@ -164,7 +164,7 @@ export function UploadCard({
                 onClick={() => setIgnoreDups(!ignoreDups)}
                 startIcon={ignoreDups ? <CheckBoxOutlineBlank /> : <CheckBox />}
               >
-                {t`uploadCard.buttons.detectDups`}
+                {t('uploadCard.buttons.detectDups')}
               </Button>
             </Box>
           </Tooltip>
@@ -172,8 +172,8 @@ export function UploadCard({
             title={
               <Typography>
                 {keepNotInImport
-                  ? t`uploadCard.tooltip.keepNotInImport`
-                  : t`uploadCard.tooltip.delNotInImport`}
+                  ? t('uploadCard.tooltip.keepNotInImport')
+                  : t('uploadCard.tooltip.delNotInImport')}
               </Typography>
             }
             placement="top"
@@ -189,7 +189,7 @@ export function UploadCard({
                   keepNotInImport ? <CheckBoxOutlineBlank /> : <CheckBox />
                 }
               >
-                {t`uploadCard.buttons.delNotInImport`}
+                {t('uploadCard.buttons.delNotInImport')}
               </Button>
             </Box>
           </Tooltip>