diff --git a/public/assets/misc/flags/de.webp b/public/assets/misc/flags/de.webp
deleted file mode 100644
index 1b2ccbc05..000000000
Binary files a/public/assets/misc/flags/de.webp and /dev/null differ
diff --git a/public/assets/misc/flags/en.webp b/public/assets/misc/flags/en.webp
deleted file mode 100644
index 2ad051b9e..000000000
Binary files a/public/assets/misc/flags/en.webp and /dev/null differ
diff --git a/public/assets/misc/flags/es.webp b/public/assets/misc/flags/es.webp
deleted file mode 100644
index a8c6dcb30..000000000
Binary files a/public/assets/misc/flags/es.webp and /dev/null differ
diff --git a/public/assets/misc/flags/fr.webp b/public/assets/misc/flags/fr.webp
deleted file mode 100644
index c6a331c6d..000000000
Binary files a/public/assets/misc/flags/fr.webp and /dev/null differ
diff --git a/public/assets/misc/flags/id.webp b/public/assets/misc/flags/id.webp
deleted file mode 100644
index fdcc65c28..000000000
Binary files a/public/assets/misc/flags/id.webp and /dev/null differ
diff --git a/public/assets/misc/flags/it.webp b/public/assets/misc/flags/it.webp
deleted file mode 100644
index f6e5a4aba..000000000
Binary files a/public/assets/misc/flags/it.webp and /dev/null differ
diff --git a/public/assets/misc/flags/ja.webp b/public/assets/misc/flags/ja.webp
deleted file mode 100644
index aa35a68dd..000000000
Binary files a/public/assets/misc/flags/ja.webp and /dev/null differ
diff --git a/public/assets/misc/flags/ko.webp b/public/assets/misc/flags/ko.webp
deleted file mode 100644
index aadd9514e..000000000
Binary files a/public/assets/misc/flags/ko.webp and /dev/null differ
diff --git a/public/assets/misc/flags/pt.webp b/public/assets/misc/flags/pt.webp
deleted file mode 100644
index 708416477..000000000
Binary files a/public/assets/misc/flags/pt.webp and /dev/null differ
diff --git a/public/assets/misc/flags/ru.webp b/public/assets/misc/flags/ru.webp
deleted file mode 100644
index f33654138..000000000
Binary files a/public/assets/misc/flags/ru.webp and /dev/null differ
diff --git a/public/assets/misc/flags/th.webp b/public/assets/misc/flags/th.webp
deleted file mode 100644
index b0a486fce..000000000
Binary files a/public/assets/misc/flags/th.webp and /dev/null differ
diff --git a/public/assets/misc/flags/vi.webp b/public/assets/misc/flags/vi.webp
deleted file mode 100644
index a0c42355a..000000000
Binary files a/public/assets/misc/flags/vi.webp and /dev/null differ
diff --git a/public/assets/misc/flags/zh.webp b/public/assets/misc/flags/zh.webp
deleted file mode 100644
index b71c855ea..000000000
Binary files a/public/assets/misc/flags/zh.webp and /dev/null differ
diff --git a/public/assets/misc/globe.webp b/public/assets/misc/globe.webp
new file mode 100644
index 000000000..2cdd2f54a
Binary files /dev/null and b/public/assets/misc/globe.webp differ
diff --git a/src/lib/characterPreview/CharacterScoringSummary.tsx b/src/lib/characterPreview/CharacterScoringSummary.tsx
index a3a02c9bc..c6ea88a4b 100644
--- a/src/lib/characterPreview/CharacterScoringSummary.tsx
+++ b/src/lib/characterPreview/CharacterScoringSummary.tsx
@@ -34,7 +34,7 @@ export const CharacterScoringSummary = (props: {
 
   const characterId = result.simulationForm.characterId
   const characterMetadata = DB.getMetadata().characters[characterId]
-  const elementalDmgValue: string = ElementToDamage[characterMetadata.element]
+  const elementalDmgValue = ElementToDamage[characterMetadata.element]
 
   function ScoringSet(props: {
     set: string
@@ -155,7 +155,7 @@ export const CharacterScoringSummary = (props: {
       const upgradeStat = statUpgrade.stat!
       const isFlat = Utils.isFlat(statUpgrade.stat)
       const suffix = isFlat ? '' : '%'
-      const rollValue = Utils.precisionRound(StatCalculator.getMaxedSubstatValue(upgradeStat, 0.8))
+      const rollValue = TsUtils.precisionRound(StatCalculator.getMaxedSubstatValue(upgradeStat as SubStats, 0.8))
 
       rows.push(
         <Flex key={Utils.randomId()} align='center' gap={10}>
diff --git a/src/lib/i18n/LanguageSelector.tsx b/src/lib/i18n/LanguageSelector.tsx
index 0bacdd541..ba2a6dfb8 100644
--- a/src/lib/i18n/LanguageSelector.tsx
+++ b/src/lib/i18n/LanguageSelector.tsx
@@ -1,63 +1,50 @@
 import { Button, Flex, Select } from 'antd'
 import { languages } from 'lib/i18n/i18n'
 import { Assets } from 'lib/rendering/assets'
-import React, { ReactElement } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-// FIXME LOW
-
-type placementOptions = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'
-
 type Languages = keyof typeof languages
 
 const completedLocales: Languages[] = ['en', 'zh', 'pt'] as const
 
-export function LanguageSelector(props: { style: React.CSSProperties; dropdownStyle: React.CSSProperties; flagOnly: boolean; placement: placementOptions }) {
+export function LanguageSelector() {
   const { i18n } = useTranslation()
-  const selectOptions = ((locales: { [key in Languages]: { locale: string; nativeName: string } }) => {
-    const ret: { value: string; label: ReactElement }[] = []
-    for (const key in locales) {
-      ret.push({
-        value: locales[key as Languages].locale,
-        label: (
-          <Flex gap={8}>
-            <img style={{ height: 15, marginTop: 4 }} src={Assets.getFlag(locales[key as Languages].locale)}/>
-            {locales[key as Languages].nativeName}
-            {/* eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access */}
-            {completedLocales.includes(locales[key].locale) ? '' : ' (WIP)'}
-          </Flex>
-        ),
-      })
-    }
-    return ret
-  })(languages)
+  const selectOptions = Object.values(languages)
+    .map(({ locale, nativeName, shortName }) => ({
+      value: locale,
+      display: (
+        <Flex align='center' gap={10}>
+          <img style={{ width: 22 }} src={Assets.getGlobe()}/>
+          {shortName}
+        </Flex>
+      ),
+      label: (
+        <Flex gap={8}>
+          {nativeName}
+          {completedLocales.includes(locale) ? '' : ' (WIP)'}
+        </Flex>
+      ),
+    }))
+
   return (
     <Select
       options={selectOptions}
       optionRender={(option) => option.data.label}
-      labelRender={({ label, value }) => {
-        if (!props.flagOnly) {
-          return (
-            <Flex gap={8}>
-              <img style={{ height: 15, marginTop: 8 }} src={Assets.getFlag(value as Languages)}/>{languages[value as Languages].nativeName}
-            </Flex>
-          )
-        }
-        return <img style={{ height: 15, marginTop: 8 }} src={Assets.getFlag(value as Languages)}/>
-      }}
       onChange={(e: string) => {
-        i18n.changeLanguage(e)
+        void i18n.changeLanguage(e)
       }}
-      style={props.style}
-      dropdownStyle={props.dropdownStyle}
+      style={{ width: 135, marginRight: 6, height: 36 }}
+      placement='bottomLeft'
+      optionLabelProp='display'
+      dropdownStyle={{ width: 210 }}
       defaultValue={i18n.resolvedLanguage}
-      placement={props.placement}
       dropdownRender={(menu) => (
         <Flex gap={4} vertical>
           {menu}
           <Button
             type='primary'
-            style={{ borderRadius: 5, height: 40 }}
+            style={{ borderRadius: 5, height: 32 }}
             onClick={() => window.open('https://discord.gg/rDmB4Un7qg')}
           >
             Help translate the website!
diff --git a/src/lib/i18n/i18n.ts b/src/lib/i18n/i18n.ts
index bab91b27c..74d0501ee 100644
--- a/src/lib/i18n/i18n.ts
+++ b/src/lib/i18n/i18n.ts
@@ -11,56 +11,63 @@ export const languages = {
   en: {
     locale: 'en',
     nativeName: 'English',
+    shortName: 'English',
   },
   es: {
     locale: 'es',
     nativeName: 'Español',
+    shortName: 'Español',
   },
   fr: {
     locale: 'fr',
     nativeName: 'Français',
+    shortName: 'Français',
   },
   it: {
     locale: 'it',
     nativeName: 'Italiano',
+    shortName: 'Italiano',
   },
   pt: {
     locale: 'pt',
-    nativeName: 'Português (Brasil)',
+    nativeName: 'Português (BR)',
+    shortName: 'Português',
   },
   zh: {
     locale: 'zh',
     nativeName: '中文',
+    shortName: '中文',
   },
   /*
-  de: {
-    locale: 'de',
-    nativeName: 'Deutsch',
-  },
-  id: {
-    locale: 'id',
-    nativeName: 'Bahasa Indonesia',
-  },
-  ja: {
-    locale: 'ja',
-    nativeName: '日本語',
-  },
-  ko: {
-    locale: 'ko',
-    nativeName: '한국인',
-  },
-  ru: {
-    locale: 'ru',
-    nativeName: 'русский',
-  },
-  th: {
-    locale: 'th',
-    nativeName: ' ไทย',
-  },
-  vi: {
-    locale: 'vi',
-    nativeName: 'tiếng việt',
-  }, */
+      de: {
+        locale: 'de',
+        nativeName: 'Deutsch',
+      },
+      id: {
+        locale: 'id',
+        nativeName: 'Bahasa Indonesia',
+      },
+      ja: {
+        locale: 'ja',
+        nativeName: '日本語',
+      },
+      ko: {
+        locale: 'ko',
+        nativeName: '한국인',
+      },
+      ru: {
+        locale: 'ru',
+        nativeName: 'русский',
+      },
+      th: {
+        locale: 'th',
+        nativeName: ' ไทย',
+      },
+      vi: {
+        locale: 'vi',
+        nativeName: 'tiếng việt',
+      },
+  */
 } as const
 
 export const supportedLanguages = Object.keys(languages)
diff --git a/src/lib/layout/LayoutHeader.tsx b/src/lib/layout/LayoutHeader.tsx
index e101bcf8e..163a1bbd3 100644
--- a/src/lib/layout/LayoutHeader.tsx
+++ b/src/lib/layout/LayoutHeader.tsx
@@ -50,12 +50,7 @@ export function LayoutHeader() {
           </a>
         </Flex>
         <Flex>
-          <LanguageSelector
-            style={{ width: 60, marginRight: 6, height: 36 }}
-            dropdownStyle={{ width: 210 }}
-            flagOnly={true}
-            placement='bottomRight'
-          />
+          <LanguageSelector/>
           <a href='https://ko-fi.com/fribbels' target='_blank' rel='noreferrer'>
             <Flex>
               <img src={Assets.getKofi()} style={{ height: 36, marginRight: 6, borderRadius: 5 }}></img>
diff --git a/src/lib/optimization/defaultForm.ts b/src/lib/optimization/defaultForm.ts
index 89ef52a6d..fc97700d7 100644
--- a/src/lib/optimization/defaultForm.ts
+++ b/src/lib/optimization/defaultForm.ts
@@ -106,7 +106,7 @@ export function getDefaultForm(initialCharacter: { id: string }) {
     defaultForm.comboBreak = scoringMetadata.simulation.comboBreak
   }
 
-  return defaultForm
+  return defaultForm as Form
 }
 
 export function defaultTeammate() {
diff --git a/src/lib/rendering/assets.ts b/src/lib/rendering/assets.ts
index 74e3c1831..e6fe45265 100644
--- a/src/lib/rendering/assets.ts
+++ b/src/lib/rendering/assets.ts
@@ -172,4 +172,8 @@ export const Assets = {
   getHomeBackground: (file: string) => {
     return getImageUrl(`/misc/home/background/${file}.webp`)
   },
+
+  getGlobe: () => {
+    return getImageUrl(`/misc/globe.webp`)
+  },
 }
diff --git a/src/lib/tabs/tabHome/HomeTab.tsx b/src/lib/tabs/tabHome/HomeTab.tsx
index 62256c8c3..844888945 100644
--- a/src/lib/tabs/tabHome/HomeTab.tsx
+++ b/src/lib/tabs/tabHome/HomeTab.tsx
@@ -68,8 +68,8 @@ function CommunityCollapse() {
         </span>
 
         <span>
-          Come be a part of our Star Rail community! Join the <ColorizedLinkWithIcon text='Discord server' url='https://discord.gg/rDmB4Un7qg'/> to hang out,
-          or check out the <ColorizedLinkWithIcon text='GitHub repo' url='https://github.com/fribbels/hsr-optimizer'/> if you'd like to contribute.
+          Come be a part of our Star Rail community! Join the <ColorizedLinkWithIcon text='Discord' url='https://discord.gg/rDmB4Un7qg'/> server to hang out,
+          or check out the <ColorizedLinkWithIcon text='GitHub' url='https://github.com/fribbels/hsr-optimizer'/> repo if you'd like to contribute.
         </span>
       </Flex>
       <Flex style={{ flex: 1 }} align='flex-start'>
@@ -267,7 +267,7 @@ function SearchBar() {
         placeholder='UUID'
         enterButton={(
           <Flex gap={5} style={{ marginRight: 5 }}>
-            <SearchOutlined/> Search
+            <SearchOutlined style={{ marginRight: 10 }}/> Search
           </Flex>
         )}
         allowClear
diff --git a/src/lib/tabs/tabImport/LoadDataSubmenu.tsx b/src/lib/tabs/tabImport/LoadDataSubmenu.tsx
index f51cab3c3..8584ce78d 100644
--- a/src/lib/tabs/tabImport/LoadDataSubmenu.tsx
+++ b/src/lib/tabs/tabImport/LoadDataSubmenu.tsx
@@ -5,8 +5,7 @@ import { SaveState } from 'lib/state/saveState'
 import { importerTabButtonWidth, importerTabSpinnerMs } from 'lib/tabs/tabImport/importerTabUiConstants'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-
-// FIXME LOW
+import { HsrOptimizerSaveFormat } from 'types/store'
 
 const { Text } = Typography
 
@@ -16,30 +15,24 @@ enum Stages {
   FINISHED = 2,
 }
 
-type LoadSaveState = {
-  characters: []
-  relics: []
-}
-
 export function LoadDataSubmenu() {
   const [currentStage, setCurrentStage] = useState<Stages>(Stages.LOAD_FILE)
-  const [currentSave, setCurrentSave] = useState<LoadSaveState | undefined>(undefined)
+  const [currentSave, setCurrentSave] = useState<HsrOptimizerSaveFormat | undefined>(undefined)
   const [loading1, setLoading1] = useState(false)
   const [loading2, setLoading2] = useState(false)
   const { t } = useTranslation('importSaveTab', { keyPrefix: 'LoadData' })
 
-  function beforeUpload(file): Promise<boolean> {
+  function beforeUpload(file: File): Promise<boolean> {
     return new Promise(() => {
       const reader = new FileReader()
       reader.readAsText(file)
       reader.onload = () => {
         const fileUploadText = String(reader.result)
-        // console.log('Uploaded file', fileUploadText)
-
         const json = JSON.parse(fileUploadText)
-        // console.log('Parsed json', json)
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         if (json.fileType || json.source) {
+          // Invalid save file
           setLoading1(true)
 
           setTimeout(() => {
@@ -54,7 +47,7 @@ export function LoadDataSubmenu() {
 
         setTimeout(() => {
           setLoading1(false)
-          setCurrentSave(json)
+          setCurrentSave(json as HsrOptimizerSaveFormat)
           setCurrentStage(Stages.CONFIRM_DATA)
         }, importerTabSpinnerMs)
       }
@@ -65,7 +58,7 @@ export function LoadDataSubmenu() {
   function loadConfirmed() {
     setLoading2(true)
     setTimeout(() => {
-      DB.setStore(currentSave, false)
+      DB.setStore(currentSave!, false)
       window.refreshRelicsScore()
 
       setTimeout(() => {
@@ -106,7 +99,7 @@ export function LoadDataSubmenu() {
     if (!currentSave?.relics || !currentSave.characters) {
       return (
         <Flex style={{ minHeight: 100 }}>
-          <Flex vertical gap={10} style={{ display: currentStage >= 1 ? 'flex' : 'none' }}>
+          <Flex vertical gap={10} style={{ display: currentStage >= Stages.CONFIRM_DATA ? 'flex' : 'none' }}>
             {
               /* Invalid save file, please try a different file. Did you mean to use the Relic scanner import tab? */
               t('Stage2.ErrorMsg')
@@ -117,7 +110,7 @@ export function LoadDataSubmenu() {
     }
     return (
       <Flex style={{ minHeight: 100 }}>
-        <Flex vertical gap={10} style={{ display: currentStage >= 1 ? 'flex' : 'none' }}>
+        <Flex vertical gap={10} style={{ display: currentStage >= Stages.CONFIRM_DATA ? 'flex' : 'none' }}>
           <Text>
             {
               /* File contains {n relics} and {m characters}. Replace your current data with the uploaded data? */
@@ -135,7 +128,7 @@ export function LoadDataSubmenu() {
   function LoadCompleted() {
     return (
       <Flex style={{ minHeight: 100 }}>
-        <Flex vertical gap={10} style={{ display: currentStage >= 2 ? 'flex' : 'none' }}>
+        <Flex vertical gap={10} style={{ display: currentStage >= Stages.FINISHED ? 'flex' : 'none' }}>
           <Text>
             {t('Stage3.SuccessMessage')/* Done! */}
           </Text>
diff --git a/src/lib/tabs/tabMetadata/MetadataTab.tsx b/src/lib/tabs/tabMetadata/MetadataTab.tsx
index 0e7920868..36e24a84d 100644
--- a/src/lib/tabs/tabMetadata/MetadataTab.tsx
+++ b/src/lib/tabs/tabMetadata/MetadataTab.tsx
@@ -6,24 +6,7 @@ import { AppPages, DB } from 'lib/state/db'
 import React, { useState } from 'react'
 import { StringToNumberMap } from 'types/common'
 import { ReactElement } from 'types/components'
-
-// FIXME LOW
-
-// Fake type for metadata
-type MetadataObject = {
-  id: string
-  name: string
-  scoringMetadata: {
-    simulation: {
-      relicSets: string[][]
-      ornamentSets: string[]
-    }
-    presets: any[]
-    stats: StringToNumberMap
-  }
-  element: string
-  path: string
-}
+import { DBMetadataCharacter } from 'types/metadata'
 
 const setToIndex: StringToNumberMap = {}
 const iconSize = 40
@@ -68,8 +51,8 @@ export default function MetadataTab(): React.JSX.Element {
 
 function SubstatWeightDashboard() {
   // @ts-ignore
-  const sets: MetadataObject[] = gameData.relics.slice().reverse()
-  const characters: MetadataObject[] = Object.values(DB.getMetadata().characters)
+  const sets = gameData.relics.slice().reverse()
+  const characters = Object.values(DB.getMetadata().characters)
 
   for (let i = 0; i < sets.length; i++) {
     setToIndex[sets[i].name] = i
@@ -88,7 +71,7 @@ function SubstatWeightDashboard() {
   )
 }
 
-function generateSubstatWeightGrid(characters: MetadataObject[], sets: MetadataObject[]) {
+function generateSubstatWeightGrid(characters: DBMetadataCharacter[], sets: (typeof gameData.relics)) {
   const weightedStats = [
     Stats.ATK,
     Stats.ATK_P,
@@ -124,8 +107,9 @@ function generateSubstatWeightGrid(characters: MetadataObject[], sets: MetadataO
 
   for (let i = 0; i < characters.length; i++) {
     const character = characters[i]
-    const rowAssets: ReactElement[] = [<Icon src={Assets.getCharacterAvatarById(character.id)}/>]
+    const rowAssets: ReactElement[] = []
 
+    rowAssets.push(<Icon src={Assets.getCharacterAvatarById(character.id)}/>)
     for (const value of Object.values(character.scoringMetadata.stats)) {
       rowAssets.push(<div>{value || ''}</div>)
     }
@@ -138,7 +122,7 @@ function generateSubstatWeightGrid(characters: MetadataObject[], sets: MetadataO
 
 // =========================================== ConditionalSetsPresetsDashboard ===========================================
 
-const presetToSetMapping = {
+const presetToSetMapping: Record<string, string> = {
   fnAshblazingSet: Sets.TheAshblazingGrandDuke,
   fnPioneerSet: Sets.PioneerDiverOfDeadWaters,
   fnSacerdosSet: Sets.SacerdosRelivedOrdeal,
@@ -150,8 +134,8 @@ const presetToSetMapping = {
 
 function ConditionalSetsPresetsDashboard() {
   // @ts-ignore
-  const sets: MetadataObject[] = gameData.relics.slice().reverse()
-  const characters: MetadataObject[] = Object.values(DB.getMetadata().characters)
+  const sets = gameData.relics.slice().reverse()
+  const characters = Object.values(DB.getMetadata().characters)
 
   for (let i = 0; i < sets.length; i++) {
     setToIndex[sets[i].name] = i
@@ -170,7 +154,7 @@ function ConditionalSetsPresetsDashboard() {
   )
 }
 
-function generateConditionalSetsGrid(characters: MetadataObject[], sets: MetadataObject[]) {
+function generateConditionalSetsGrid(characters: DBMetadataCharacter[], sets: (typeof gameData.relics)) {
   const relicAssets = sets.map((x) => Assets.getSetImage(x.name))
   relicAssets.unshift(Assets.getBlank())
 
@@ -182,7 +166,8 @@ function generateConditionalSetsGrid(characters: MetadataObject[], sets: Metadat
 
   for (let i = 0; i < characters.length; i++) {
     const character = characters[i]
-    const rowAssets: ReactElement[] = [<Icon src={Assets.getCharacterAvatarById(character.id)}/>]
+    const rowAssets: ReactElement[] = []
+    rowAssets.push(<Icon src={Assets.getCharacterAvatarById(character.id)}/>)
 
     for (const preset of character.scoringMetadata.presets) {
       const set = presetToSetMapping[preset.name]
@@ -201,9 +186,9 @@ function generateConditionalSetsGrid(characters: MetadataObject[], sets: Metadat
 
 function SimulationEquivalentSetsDashboard() {
   // @ts-ignore
-  const sets: MetadataObject[] = gameData.relics.slice().reverse()
-  const characters: MetadataObject[] = Object.values(DB.getMetadata().characters)
-  const simulationCharacters: MetadataObject[] = characters.filter((x) => x.scoringMetadata.simulation)
+  const sets = gameData.relics.slice().reverse()
+  const characters = Object.values(DB.getMetadata().characters)
+  const simulationCharacters = characters.filter((x) => x.scoringMetadata.simulation)
 
   for (let i = 0; i < sets.length; i++) {
     setToIndex[sets[i].name] = i
@@ -222,7 +207,7 @@ function SimulationEquivalentSetsDashboard() {
   )
 }
 
-function generateEquivalentSetsGrid(characters: MetadataObject[], sets: MetadataObject[]) {
+function generateEquivalentSetsGrid(characters: DBMetadataCharacter[], sets: (typeof gameData.relics)) {
   const relicAssets = sets.map((x) => Assets.getSetImage(x.name))
   relicAssets.unshift(Assets.getBlank())
 
@@ -234,9 +219,10 @@ function generateEquivalentSetsGrid(characters: MetadataObject[], sets: Metadata
 
   for (let i = 0; i < characters.length; i++) {
     const character = characters[i]
-    const rowAssets: ReactElement[] = [<Icon src={Assets.getCharacterAvatarById(character.id)}/>]
+    const rowAssets: ReactElement[] = []
+    rowAssets.push(<Icon src={Assets.getCharacterAvatarById(character.id)}/>)
 
-    for (const allowedSets of character.scoringMetadata.simulation.relicSets) {
+    for (const allowedSets of character.scoringMetadata.simulation!.relicSets) {
       if (allowedSets.length == 2) {
         // 4p
         const setIndex = setToIndex[allowedSets[0]]
@@ -250,7 +236,7 @@ function generateEquivalentSetsGrid(characters: MetadataObject[], sets: Metadata
       }
     }
 
-    for (const p2 of character.scoringMetadata.simulation.ornamentSets) {
+    for (const p2 of character.scoringMetadata.simulation!.ornamentSets) {
       const setIndex = setToIndex[p2]
       rowAssets[setIndex + 1] = <Icon src={Assets.getSetImage(p2)}/>
     }
@@ -272,7 +258,7 @@ function Icon(props: {
 }
 
 function GridDisplay(props: {
-  grid: ReactElement[][]
+  grid: (ReactElement | string)[][]
 }) {
   const [hoveredColumn, setHoveredColumn] = useState<number | null>(null)
 
diff --git a/src/lib/tabs/tabOptimizer/combo/comboDrawerController.tsx b/src/lib/tabs/tabOptimizer/combo/comboDrawerController.tsx
index 4f13967f6..ae14b1f60 100644
--- a/src/lib/tabs/tabOptimizer/combo/comboDrawerController.tsx
+++ b/src/lib/tabs/tabOptimizer/combo/comboDrawerController.tsx
@@ -7,12 +7,11 @@ import { ConditionalSetMetadata } from 'lib/optimization/rotation/setConditional
 import DB from 'lib/state/db'
 import { SaveState } from 'lib/state/saveState'
 import { OptimizerTabController } from 'lib/tabs/tabOptimizer/optimizerTabController'
+import { arrayIncludes } from 'lib/utils/arrayUtils'
 import { CharacterConditionalsController, ConditionalValueMap, ContentItem, LightConeConditionalsController } from 'types/conditionals'
 import { Form, Teammate } from 'types/form'
 import { DBMetadataCharacter } from 'types/metadata'
 
-// FIXME HIGH
-
 export type ComboConditionals = {
   [key: string]: ComboConditionalCategory
 }
@@ -190,8 +189,8 @@ function displayModifiedSets(request: Form, comboState: ComboState) {
     }
   }
 
-  const modifiedRelics = modified.filter((set) => SetsRelicsNames.includes(set))
-  const modifiedOrnaments = modified.filter((set) => SetsOrnamentsNames.includes(set))
+  const modifiedRelics = modified.filter((set) => arrayIncludes(SetsRelicsNames, set))
+  const modifiedOrnaments = modified.filter((set) => arrayIncludes(SetsOrnamentsNames, set))
 
   comboState.comboCharacter.displayedRelicSets = Array.from(new Set([...modifiedRelics, ...comboState.comboCharacter.displayedRelicSets]))
   comboState.comboCharacter.displayedOrnamentSets = Array.from(new Set([...modifiedOrnaments, ...comboState.comboCharacter.displayedOrnamentSets]))
@@ -260,7 +259,7 @@ function generateComboConditionals(
         activations: activations,
       }
     } else if (content.formItem == 'slider') {
-      const value: number = conditionals[content.id] ?? defaults[content.id]
+      const value = (conditionals[content.id] ?? defaults[content.id]) as number
       const activations: boolean[] = Array(actionCount).fill(true)
       const valuePartitions: ComboSubNumberConditional = {
         value: value,
@@ -271,7 +270,7 @@ function generateComboConditionals(
         partitions: [valuePartitions],
       }
     } else if (content.formItem == 'select') {
-      const value: number = conditionals[content.id] ?? defaults[content.id]
+      const value = (conditionals[content.id] ?? defaults[content.id]) as number
       const activations: boolean[] = Array(actionCount).fill(true)
       const valuePartitions: ComboSubSelectConditional = {
         value: value,
@@ -385,7 +384,8 @@ export function locateComboCategory(sourceKey: string, contentItemId: string, co
       comboConditionals = character.characterConditionals
     }
   } else if (sourceKey.includes('comboTeammate')) {
-    const teammate: ComboTeammate = comboState[sourceKey.substring(0, 14)]
+    const teammateIndexString = sourceKey.substring(0, 14) as 'comboTeammate0' | 'comboTeammate1' | 'comboTeammate2'
+    const teammate: ComboTeammate = comboState[teammateIndexString]!
     if (sourceKey.includes('RelicSet')) {
       comboConditionals = teammate.relicSetConditionals
     } else if (sourceKey.includes('OrnamentSet')) {
@@ -620,33 +620,34 @@ function shiftLeft(arr: boolean[], index: number) {
   arr.push(arr[0])
 }
 
-function shiftAllActivations(obj: ComboState, index: number): void {
+type NestedObject = {
+  [key: string]: unknown
+}
+
+function shiftAllActivations(obj: NestedObject, index: number): void {
   for (const key in obj) {
     if (!Object.prototype.hasOwnProperty.call(obj, key)) continue
 
     if (key === 'activations' && Array.isArray(obj[key])) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      shiftLeft(obj[key], index)
+      shiftLeft(obj[key] as boolean[], index)
     }
 
     if (typeof obj[key] === 'object' && obj[key] !== null) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      shiftAllActivations(obj[key], index)
+      shiftAllActivations(obj[key] as NestedObject, index)
     }
   }
 }
 
-function setActivationIndexToDefault(obj: ComboState, index: number): void {
+function setActivationIndexToDefault(obj: NestedObject, index: number): void {
   for (const key in obj) {
     if (!Object.prototype.hasOwnProperty.call(obj, key)) continue
 
     if (key === 'activations' && Array.isArray(obj[key])) {
-      obj[key][index] = obj[key][0]
+      obj[key][index] = (obj[key] as boolean[])[0]
     }
 
     if (typeof obj[key] === 'object' && obj[key] !== null) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      setActivationIndexToDefault(obj[key], index)
+      setActivationIndexToDefault(obj[key] as NestedObject, index)
     }
   }
 }
@@ -702,8 +703,8 @@ type ChangeEvent = {
   }
 }
 
-// eslint-disable-next-line
 function change(changeConditional: {
+  // eslint-disable-next-line
   [key: string]: any
 }, originalConditional: ComboConditionals, set: boolean = false) {
   for (const [key, value] of Object.entries(changeConditional)) {
diff --git a/src/lib/tabs/tabOptimizer/optimizerForm/components/CardSelectModalComponents.tsx b/src/lib/tabs/tabOptimizer/optimizerForm/components/CardSelectModalComponents.tsx
index c3768b00a..f07973ee6 100644
--- a/src/lib/tabs/tabOptimizer/optimizerForm/components/CardSelectModalComponents.tsx
+++ b/src/lib/tabs/tabOptimizer/optimizerForm/components/CardSelectModalComponents.tsx
@@ -2,11 +2,10 @@ import { Flex, theme, Typography } from 'antd'
 import CheckableTag from 'antd/lib/tag/CheckableTag'
 import { ElementToDamage, PathNames } from 'lib/constants/constants'
 import { Assets } from 'lib/rendering/assets'
-import { Utils } from 'lib/utils/utils'
+import { arrayIncludes } from 'lib/utils/arrayUtils'
+import { TsUtils } from 'lib/utils/TsUtils'
 import { ReactElement } from 'react'
 
-// FIXME MED
-
 const { useToken } = theme
 
 const { Paragraph } = Typography
@@ -102,16 +101,31 @@ export function generateElementTags() {
   })
 }
 
-export function SegmentedFilterRow({ currentFilters, name, flexBasis, tags, setCurrentFilters }) {
+type Filters = {
+  element: string[]
+  path: string[]
+  rarity: number[]
+  name: string
+}
+
+export function SegmentedFilterRow(props: {
+  currentFilters: Filters
+  name: 'element' | 'path' | 'rarity'
+  flexBasis: string
+  tags: { key: string | number; display: ReactElement }[]
+  setCurrentFilters: (filters: Filters) => void
+}) {
   const { token } = useToken()
+  const { currentFilters, name, flexBasis, tags, setCurrentFilters } = props
   const selectedTags = currentFilters[name]
 
-  const handleChange = (tag, checked) => {
+  const handleChange = (tag: string | number, checked: boolean) => {
     const nextSelectedTags = checked
       ? [...selectedTags, tag]
       : selectedTags.filter((t) => t != tag)
 
-    const clonedFilters = Utils.clone(currentFilters)
+    const clonedFilters = TsUtils.clone(currentFilters)
+    // @ts-ignore
     clonedFilters[name] = nextSelectedTags
     console.log('filters', name, clonedFilters)
 
@@ -133,13 +147,13 @@ export function SegmentedFilterRow({ currentFilters, name, flexBasis, tags, setC
       {tags.map((tag) => (
         <CheckableTag
           key={tag.key}
-          checked={selectedTags.includes(tag.key)}
+          checked={arrayIncludes(selectedTags, tag.key)}
           onChange={(checked) => handleChange(tag.key, checked)}
           style={{
             flex: 1,
             flexBasis: flexBasis,
             boxShadow: `1px 1px 1px 0px ${token.colorBorder}`,
-            backgroundColor: selectedTags.includes(tag.key) ? token.colorPrimary : 'transparent',
+            backgroundColor: arrayIncludes(selectedTags, tag.key) ? token.colorPrimary : 'transparent',
           }}
         >
           <Flex align='center' justify='space-around' style={{ height: '100%' }}>
diff --git a/src/lib/tabs/tabShowcase/RelicScorerTab.jsx b/src/lib/tabs/tabShowcase/RelicScorerTab.jsx
index c5e6b6539..e9a03dc82 100644
--- a/src/lib/tabs/tabShowcase/RelicScorerTab.jsx
+++ b/src/lib/tabs/tabShowcase/RelicScorerTab.jsx
@@ -4,21 +4,17 @@ import Icon, {
   EditOutlined,
   ExperimentOutlined,
   ImportOutlined,
-  LineChartOutlined,
 } from '@ant-design/icons'
 import { Button, Dropdown, Flex, Form, Input, Segmented, theme, Typography } from 'antd'
 import { CharacterPreview } from 'lib/characterPreview/CharacterPreview'
-import { Constants, CURRENT_DATA_VERSION, officialOnly } from 'lib/constants/constants'
+import { CURRENT_DATA_VERSION, officialOnly } from 'lib/constants/constants'
 import { SavedSessionKeys } from 'lib/constants/constantsSession'
 import { CharacterConverter } from 'lib/importer/characterConverter'
 import { Message } from 'lib/interactions/message'
-import { calculateBuild } from 'lib/optimization/calculateBuild'
 import CharacterModal from 'lib/overlays/modals/CharacterModal'
 import { Assets } from 'lib/rendering/assets'
 import DB, { AppPages, PageToRoute } from 'lib/state/db'
 import { SaveState } from 'lib/state/saveState'
-import { applySpdPreset } from 'lib/tabs/tabOptimizer/optimizerForm/components/RecommendedPresetsButton'
-import { OptimizerTabController } from 'lib/tabs/tabOptimizer/optimizerTabController'
 import { Utils } from 'lib/utils/utils'
 import PropTypes from 'prop-types'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
@@ -450,51 +446,19 @@ function CharacterPreviewSelection(props) {
     })
   }
 
-  // This is kinda janky and could use a refactor
-  function optimizeClicked() {
-    const form = props.selectedCharacter.form
-    const characterId = form.characterId
-
-    // Add relics and character
-    importClicked()
-    DB.addFromForm(form)
-
-    // Open optimizer
-    window.store.getState().setActiveKey(AppPages.OPTIMIZER)
-    window.store.getState().setOptimizerTabFocusCharacter(characterId)
-
-    // Timeout to allow the optimize page to load before applying presets
-    setTimeout(() => {
-      const equippedRelics = Utils.clone(props.selectedCharacter.equipped)
-      const cleanedForm = OptimizerTabController.formToDisplay(form)
-
-      // Do some relic transformations to get it ready for optimization
-      const relicsByPart = {}
-      for (const part of Object.values(Constants.Parts)) {
-        relicsByPart[part] = [equippedRelics[part]]
-      }
-      RelicFilters.condenseRelicSubstatsForOptimizer(relicsByPart)
-
-      // Calculate the build's speed value to use as a preset
-      const { c } = calculateBuild(cleanedForm, equippedRelics)
-      applySpdPreset(Utils.precisionRound(c.SPD, 3), characterId)
-
-      // Timeout to allow the form to populate before optimizing
-      setTimeout(() => {
-        window.optimizerStartClicked()
-      }, 500)
-    }, 1000)
-  }
-
   return (
     <Flex style={{ width: 1300, marginLeft: 25 }} justify='space-around'>
       <Flex vertical align='center' gap={5} style={{ marginBottom: 100, width: 1068 }}>
         <Flex vertical style={{ display: (props.availableCharacters.length > 0) ? 'flex' : 'none', width: '100%' }}>
-          <Sidebar presetClicked={presetClicked} optimizeClicked={optimizeClicked} activeKey={activeKey}/>
-          <Flex style={{ display: (props.availableCharacters.length > 0) ? 'flex' : 'none' }} justify='space-between'>
+          <Sidebar presetClicked={presetClicked} activeKey={activeKey}/>
+          <Flex
+            style={{ display: (props.availableCharacters.length > 0) ? 'flex' : 'none' }}
+            justify='space-between'
+            gap={10}
+          >
             <Button
+              style={{ flex: 1 }}
               onClick={clipboardClicked}
-              style={{ width: 225 }}
               icon={<CameraOutlined/>}
               loading={screenshotLoading}
               type='primary'
@@ -502,25 +466,27 @@ function CharacterPreviewSelection(props) {
               {t('CopyScreenshot')/* Copy screenshot */}
             </Button>
             <Button
-              style={{ width: 40 }}
+              style={{ width: 50 }}
               icon={<DownloadOutlined/>}
               onClick={downloadClicked}
               loading={downloadLoading}
             />
             <Dropdown.Button
+              style={{ flex: 1 }}
+              className='dropdownButton'
               onClick={importClicked}
-              style={{ width: 250 }}
               menu={menuProps}
             >
               <ImportOutlined/>
               {t('ImportLabels.Relics')/* Import relics into optimizer */}
             </Dropdown.Button>
-            <Button icon={<ExperimentOutlined/>} onClick={simulateClicked} style={{ width: 280 }}>
+            <Button
+              style={{ flex: 1 }}
+              icon={<ExperimentOutlined/>}
+              onClick={simulateClicked}
+            >
               {t('SimulateRelics')/* Simulate relics on another character */}
             </Button>
-            <Button icon={<LineChartOutlined/>} onClick={optimizeClicked} style={{ width: 228 }}>
-              {t('OptimizeOnCharacter')/* Optimize character stats */}
-            </Button>
           </Flex>
         </Flex>
 
diff --git a/src/lib/utils/utils.js b/src/lib/utils/utils.js
index c163b437a..6a300bae1 100644
--- a/src/lib/utils/utils.js
+++ b/src/lib/utils/utils.js
@@ -52,6 +52,7 @@ export const Utils = {
     return x
   },
 
+  // TODO: Deprecate these
   mergeDefinedValues: (target, source) => {
     if (!source) return target
 
@@ -63,6 +64,7 @@ export const Utils = {
     return target
   },
 
+  // TODO: Deprecate these
   mergeUndefinedValues: (target, source) => {
     for (const key of Object.keys(source)) {
       if (target[key] == null) {
@@ -225,6 +227,7 @@ export const Utils = {
   truncate10000ths: (x) => {
     return Math.floor(x * 10000) / 10000
   },
+
   // Round a number to a certain precision. Useful for js floats: precisionRound(16.1999999312682. 5) == 16.2
   precisionRound(number, precision = 5) {
     const factor = Math.pow(10, precision)
@@ -313,11 +316,6 @@ export const Utils = {
     return uuidv4()
   },
 
-  // 1212 => Jingliu
-  getCharacterNameById: (id) => {
-    return DB.getMetadata().characters[id]?.displayName
-  },
-
   // hsr-optimizer// => hsr-optimizer
   stripTrailingSlashes: (str) => {
     return str.replace(/\/+$/, '')
diff --git a/src/style/style.css b/src/style/style.css
index 61feb1416..b5c513e6f 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -614,3 +614,7 @@ a {
     margin: auto !important;
     height: unset !important;
 }
+
+.dropdownButton .ant-btn-compact-first-item {
+    width: 100% !important;
+}