diff --git a/src/components/atoms/auth/AuthCard.svelte b/src/components/atoms/auth/AuthCard.svelte
index 5545dbbc..5aa28b10 100644
--- a/src/components/atoms/auth/AuthCard.svelte
+++ b/src/components/atoms/auth/AuthCard.svelte
@@ -8,15 +8,15 @@
 
 <div class="legal-docs-container">
   <a href="../docs/legal" target="_blank">
-    <Translation key="LEGAL_NOTICE" />
+    <Translation key="common-auth:legal-notice" />
   </a>
   <div class="separator" />
   <a href="../docs/terms" target="_blank">
-    <Translation key="TERMS_OF_SERVICE" />
+    <Translation key="common-auth:terms" />
   </a>
   <div class="separator" />
   <a href="../docs/privacy" target="_blank">
-    <Translation key="PRIVACY_POLICY" />
+    <Translation key="common-auth:privacy-policy" />
   </a>
 </div>
 
diff --git a/src/components/atoms/interaction/InputField.svelte b/src/components/atoms/interaction/InputField.svelte
index 4f7547b8..b9e2093d 100644
--- a/src/components/atoms/interaction/InputField.svelte
+++ b/src/components/atoms/interaction/InputField.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { currentLangData, type TranslationKey } from '@/utils/i18n';
+  import { currentLang, type TranslationKey, translate } from '@/utils/i18n';
   import Icon from '@atoms/asset/Icon.svelte';
 
-  export let value: TranslationKey = '';
+  export let value: string = '';
   export let placeholder: string = '';
   export let passwordVisible: boolean = false;
 
@@ -14,7 +14,7 @@
     input.type = showPassword ? 'text' : 'password';
   };
 
-  $: localizedPlaceholder = $currentLangData[placeholder];
+  $: localizedPlaceholder = translate(placeholder as TranslationKey, {}, true, $currentLang);
 </script>
 
 <div class="input-field-container">
diff --git a/src/components/atoms/search/SearchMetaInput.svelte b/src/components/atoms/search/SearchMetaInput.svelte
index e92852fc..de10ebfd 100644
--- a/src/components/atoms/search/SearchMetaInput.svelte
+++ b/src/components/atoms/search/SearchMetaInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { translate, currentLang } from '@/utils/i18n';
+  import { translate, type TranslationKey } from '@/utils/i18n';
 
-  export let placeholder: string | null = null;
+  export let placeholder: TranslationKey | null = null;
 
   export let value: string | number | null = '';
 
@@ -10,7 +10,7 @@
   export let min: number | undefined = undefined;
   export let max: number | undefined = undefined;
 
-  $: placeholderContent = translate(placeholder || '', $currentLang);
+  $: placeholderContent = translate(placeholder!);
 
   $: textValue = `${value ?? ''}`;
 
diff --git a/src/components/molecules/auth/OAuth2SignOptions.svelte b/src/components/molecules/auth/OAuth2SignOptions.svelte
index 65bde3bf..504d8e6f 100644
--- a/src/components/molecules/auth/OAuth2SignOptions.svelte
+++ b/src/components/molecules/auth/OAuth2SignOptions.svelte
@@ -3,10 +3,11 @@
   import Button from '@atoms/interaction/Button.svelte';
   import Google from 'svelte-icons/fa/FaGoogle.svelte';
   import { createEventDispatcher } from 'svelte';
+  import type { StringTranslationKey } from '@/utils/i18n';
 
   const dispatch = createEventDispatcher();
 
-  export let labelKey: string = 'SIGNIN_MORE_OPTIONS';
+  export let labelKey: StringTranslationKey = 'sign-in:more-options';
 </script>
 
 <div class="oauth2-container">
diff --git a/src/components/molecules/nav/NavSignArea.svelte b/src/components/molecules/nav/NavSignArea.svelte
index 868aa809..1a21ab2c 100644
--- a/src/components/molecules/nav/NavSignArea.svelte
+++ b/src/components/molecules/nav/NavSignArea.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="sign-area" class:sign-area__overlay={overlay}>
-  <a href="/auth/signup" class="sign-area__singup">
+  <a href="/auth/signup" class="sign-area__signup">
     <Translation key="common:sign-up" />
   </a>
 
diff --git a/src/components/organisms/levels/info/LevelLeaderboardItem.svelte b/src/components/organisms/levels/info/LevelLeaderboardItem.svelte
index a3be9c02..9c4f634f 100644
--- a/src/components/organisms/levels/info/LevelLeaderboardItem.svelte
+++ b/src/components/organisms/levels/info/LevelLeaderboardItem.svelte
@@ -47,7 +47,7 @@
       <a href={play.url} target="_blank" class="right-side__video-link" rel="noreferrer">
         <Icon icon="playOutlined" size={16} alt="Video Icon" />
         <span>
-          <Translation key="level-details:clear-video" />
+          <Translation key="level-details:leaderboard-clear-video" />
         </span>
       </a>
     </div>
diff --git a/src/components/organisms/levels/info/LevelMetaArea.svelte b/src/components/organisms/levels/info/LevelMetaArea.svelte
index 493410ed..8243c3a1 100644
--- a/src/components/organisms/levels/info/LevelMetaArea.svelte
+++ b/src/components/organisms/levels/info/LevelMetaArea.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-  import Button from '@atoms/interaction/Button.svelte';
   import DifficultyIcon from '@atoms/asset/DifficultyIcon.svelte';
-  import Icon from '@atoms/asset/Icon.svelte';
   import LevelMetaLabelValuePair from '@molecules/levels/LevelMetaLabelValuePair.svelte';
   import Translation from '@/components/utils/Translation.svelte';
   import type { Level } from '@/types';
   import LevelShareMenu from '@organisms/levels/info/LevelShareMenu.svelte';
   import LevelTagDetailsArea from '@organisms/levels/info/LevelTagDetailsArea.svelte';
-  import { useAccount } from '@/utils/constants';
 
   $: convertLength = (length: number): [string, number] => {
     const seconds = Math.floor(length % 60);
@@ -86,15 +83,15 @@
   <div class="blank" />
 
   <div class="buttons">
-    {#if useAccount}
-      <Button type="levelAction">
-        <div class="buttons__like-container">
-          <Icon style="color: rgba(var(--color-red), 1);" icon="heart" size={20} alt="Heart Icon" />
+    <!-- TODO: uncomment after backend implements likes feature
+    <Button type="levelAction">
+      <div class="buttons__like-container">
+        <Icon style="color: rgba(var(--color-red), 1);" icon="heart" size={20} alt="Heart Icon" />
 
-          <div class="buttons__like-container-text">1.4K</div>
-        </div>
-      </Button>
-    {/if}
+        <div class="buttons__like-container-text">1.4K</div>
+      </div>
+    </Button>
+    -->
 
     <LevelShareMenu {level} />
   </div>
@@ -121,6 +118,7 @@
     display: flex;
     gap: 12px;
 
+    /* TODO: uncomment after backend implements likes feature
     &__like-container {
       display: flex;
       gap: 6px;
@@ -131,5 +129,6 @@
         font-size: 16px;
       }
     }
+    */
   }
 </style>
diff --git a/src/components/organisms/levels/list/LevelListItemTagList.svelte b/src/components/organisms/levels/list/LevelListItemTagList.svelte
index b23da8a7..8e0b7550 100644
--- a/src/components/organisms/levels/list/LevelListItemTagList.svelte
+++ b/src/components/organisms/levels/list/LevelListItemTagList.svelte
@@ -68,7 +68,7 @@
     {#if level.epilepsyWarning}
       <Tooltip placement="bottom-end">
         <Icon
-          icon="SW"
+          icon="sw"
           namespace="tagIcons"
           style="color: rgba(var(--color-red), 100);"
           size={24}
diff --git a/src/components/organisms/levels/list/LevelTableView.svelte b/src/components/organisms/levels/list/LevelTableView.svelte
index b559e473..e5bf2e31 100644
--- a/src/components/organisms/levels/list/LevelTableView.svelte
+++ b/src/components/organisms/levels/list/LevelTableView.svelte
@@ -13,11 +13,11 @@
 
   export let total: number;
 
-  let swwidth = 0;
+  let swWidth = 0;
 </script>
 
 {#if browser}
-  <VirtualTable style="width: {1582 + swwidth + 24}px;" data={levels} let:item {total} on:more>
+  <VirtualTable style="width: {1582 + swWidth + 24}px;" data={levels} let:item {total} on:more>
     <colgroup slot="cols">
       <col width="56" />
       <col width="40" />
@@ -28,7 +28,7 @@
       <col width="144" />
       <col width="120" />
       <col width="180" />
-      <col style="min-width: {swwidth + 24}px;" />
+      <col style="min-width: {swWidth + 24}px;" />
       <col width="92" />
     </colgroup>
     <thead slot="head">
@@ -62,7 +62,7 @@
         </th>
 
         <th>
-          <Translation key="level-table-cols:tils" />
+          <Translation key="level-table-cols:tiles" />
         </th>
 
         <th>
@@ -70,7 +70,7 @@
         </th>
 
         <th class="auto-fit">
-          <div bind:clientWidth={swwidth}>
+          <div bind:clientWidth={swWidth}>
             <Translation key="level-table-cols:warnings" />
           </div>
         </th>
diff --git a/src/components/organisms/levels/search/DifficultyRangeSelector.svelte b/src/components/organisms/levels/search/DifficultyRangeSelector.svelte
index 834ef22d..27381c6c 100644
--- a/src/components/organisms/levels/search/DifficultyRangeSelector.svelte
+++ b/src/components/organisms/levels/search/DifficultyRangeSelector.svelte
@@ -69,13 +69,13 @@
   <DifficultySelectorInput
     bind:value={$parsedQuery.minDifficulty}
     on:change={onChangeMin}
-    placeholderKey="SEARCH_META_LV_MIN"
+    placeholderKey="search:meta-field-difficulty-placeholder-min"
     slot="min"
   />
   <DifficultySelectorInput
     bind:value={$parsedQuery.maxDifficulty}
     on:change={onChangeMax}
-    placeholderKey="SEARCH_META_LV_MAX"
+    placeholderKey="search:meta-field-difficulty-placeholder-max"
     slot="max"
   />
 </RangeInputPair>
diff --git a/src/components/organisms/levels/search/LevelSearchMetaTab.svelte b/src/components/organisms/levels/search/LevelSearchMetaTab.svelte
index 43250e05..499469b0 100644
--- a/src/components/organisms/levels/search/LevelSearchMetaTab.svelte
+++ b/src/components/organisms/levels/search/LevelSearchMetaTab.svelte
@@ -137,37 +137,37 @@
 </script>
 
 <div class="meta">
-  <SearchGroup title="SEARCH_META_CREDIT">
+  <SearchGroup title="search:meta-group-credit">
     <div class="meta-group">
-      <LabeledInputContainer key="SEARCH_META_ARTIST_LABEL">
+      <LabeledInputContainer key="search:meta-field-artist">
         <SearchMetaInput
           on:input={onChangeArtist}
           value={$parsedQuery.artist}
-          placeholder="SEARCH_META_ARTIST_PLACEHOLDER"
+          placeholder="search:meta-field-artist-placeholder"
         />
       </LabeledInputContainer>
-      <LabeledInputContainer label="SEARCH_META_SONG_LABEL">
+      <LabeledInputContainer key="search:meta-field-song">
         <SearchMetaInput
           on:input={onChangeSong}
           value={$parsedQuery.song}
-          placeholder="SEARCH_META_SONG_PLACEHOLDER"
+          placeholder="search:meta-field-song-placeholder"
         />
       </LabeledInputContainer>
-      <LabeledInputContainer key="SEARCH_META_CREATOR_LABEL">
+      <LabeledInputContainer key="search:meta-field-creator">
         <SearchMetaInput
           on:input={onChangeCreator}
           value={$parsedQuery.creator}
-          placeholder="SEARCH_META_CREATOR_PLACEHOLDER"
+          placeholder="search:meta-field-creator-placeholder"
         />
       </LabeledInputContainer>
     </div>
   </SearchGroup>
-  <SearchGroup title="SEARCH_META_LEVEL">
+  <SearchGroup title="search:meta-group-level">
     <div class="meta-group">
-      <LabeledInputContainer key="SEARCH_META_LV_LABEL">
+      <LabeledInputContainer key="search:meta-field-difficulty-label">
         <DifficultyRangeSelector />
       </LabeledInputContainer>
-      <LabeledInputContainer key="SEARCH_META_TILES_LABEL">
+      <LabeledInputContainer key="search:meta-field-tiles-label">
         <RangeInputPair>
           <SearchMetaInput
             value={$parsedQuery.minTiles}
@@ -175,7 +175,7 @@
             slot="min"
             min={0}
             type="number"
-            placeholder="SEARCH_META_TILES_MIN"
+            placeholder="search:meta-field-tiles-placeholder-min"
           />
           <SearchMetaInput
             value={$parsedQuery.maxTiles}
@@ -183,11 +183,11 @@
             slot="max"
             min={0}
             type="number"
-            placeholder="SEARCH_META_TILES_MAX"
+            placeholder="search:meta-field-tiles-placeholder-max"
           />
         </RangeInputPair>
       </LabeledInputContainer>
-      <LabeledInputContainer key="SEARCH_META_BPM_LABEL">
+      <LabeledInputContainer key="search:meta-field-bpm-label">
         <RangeInputPair>
           <SearchMetaInput
             value={$parsedQuery.minBpm}
@@ -195,7 +195,7 @@
             slot="min"
             min={0}
             type="number"
-            placeholder="SEARCH_META_BPM_MIN"
+            placeholder="search:meta-field-bpm-placeholder-min"
           />
           <SearchMetaInput
             value={$parsedQuery.maxBpm}
@@ -203,7 +203,7 @@
             slot="max"
             min={0}
             type="number"
-            placeholder="SEARCH_META_BPM_MAX"
+            placeholder="search:meta-field-bpm-placeholder-max"
           />
         </RangeInputPair>
       </LabeledInputContainer>
diff --git a/src/components/organisms/levels/search/LevelSearchSortTab.svelte b/src/components/organisms/levels/search/LevelSearchSortTab.svelte
index 78c1c007..47906e72 100644
--- a/src/components/organisms/levels/search/LevelSearchSortTab.svelte
+++ b/src/components/organisms/levels/search/LevelSearchSortTab.svelte
@@ -4,7 +4,6 @@
 
   import SearchGroup from '@molecules/levels/SearchGroup.svelte';
   import { searchSettingStore, type SearchSettings } from '@/stores/search';
-  import { useAccount } from '@/utils/constants';
 
   const updateOrder = (v: SearchSettings['sort']['order']) => () => {
     searchSettingStore.update((x) => ({
@@ -27,24 +26,24 @@
   };
 </script>
 
-<SearchGroup title="SORT_BY">
+<SearchGroup title="search:sort-by">
   <div class="sort">
     <div class="sort__unit-container">
       <SortOrderRadio
         icon="topLeft"
-        key="SORT_ASC"
+        key="search:sort-direction-asc"
         checked={$searchSettingStore.sort.order === 'asc'}
         on:click={updateOrder('asc')}
       />
       <SortOrderRadio
         icon="bottomRight"
-        key="SORT_DESC"
+        key="search:sort-direction-desc"
         checked={$searchSettingStore.sort.order === 'desc'}
         on:click={updateOrder('desc')}
       />
       <SortOrderRadio
         icon="shuffle"
-        key="SORT_SHUFFLE"
+        key="search:sort-direction-shuffle"
         checked={$searchSettingStore.sort.order === 'shuffle'}
         on:click={updateOrder('shuffle')}
       />
@@ -55,24 +54,24 @@
         <div class="sort__order-container">
           <SortOrderRadio
             icon="calendar"
-            key="SORT_CREATED"
+            key="search:sort-by-created"
             checked={$searchSettingStore.sort.type === 'created'}
             on:click={updateType('created')}
           />
           <SortOrderRadio
             icon="fire"
-            key="SORT_DIFFICULTY"
+            key="search:sort-by-difficulty"
             checked={$searchSettingStore.sort.type === 'difficulty'}
             on:click={updateType('difficulty')}
           />
-          {#if useAccount}
-            <SortOrderRadio
-              icon="heart"
-              key="SORT_LIKES"
-              checked={$searchSettingStore.sort.type === 'likes'}
-              on:click={updateType('likes')}
-            />
-          {/if}
+          <!-- TODO: uncomment after backend implements likes feature
+          <SortOrderRadio
+            icon="heart"
+            key="search:sort-by-likes"
+            checked={$searchSettingStore.sort.type === 'likes'}
+            on:click={updateType('likes')}
+          />
+          -->
         </div>
       </div>
     {/if}
diff --git a/src/components/organisms/levels/search/TagSearchTab.svelte b/src/components/organisms/levels/search/TagSearchTab.svelte
index f18485a1..269270e3 100644
--- a/src/components/organisms/levels/search/TagSearchTab.svelte
+++ b/src/components/organisms/levels/search/TagSearchTab.svelte
@@ -6,7 +6,7 @@
 
 <div class="tag-search-tab-container">
   {#each tagGroups as group}
-    <SearchTagGroup tags={group.tags} title={`TAG_GROUP_${group.key}`} />
+    <SearchTagGroup tags={group.tags} title={`tags:group-${group.key}`} />
   {/each}
   <MusicTagSearchArea />
 </div>
diff --git a/src/routes/auth/signin/+page.svelte b/src/routes/auth/signin/+page.svelte
index 613f1958..99dccb09 100644
--- a/src/routes/auth/signin/+page.svelte
+++ b/src/routes/auth/signin/+page.svelte
@@ -8,33 +8,33 @@
 </script>
 
 <AuthTitle>
-  <Translation key="SIGN_IN" />
+  <Translation key="sign-in:title" />
 </AuthTitle>
 
 <div class="sign-in-form-container">
   <div class="sign-in-form">
-    <InputField placeholder="SIGNIN_IDENTIFIER_PLACEHOLDER" />
-    <InputField placeholder="SIGNIN_PASSWORD_PLACEHOLDER" type="password" />
+    <InputField placeholder="sign-in:form-id-placeholder" />
+    <InputField placeholder="sign-in:form-password-placeholder" type="password" />
   </div>
   <CheckboxWithLinkedLabel
-    labelKey="SIGNIN_STAY_LABEL"
-    extraLabelKey="SIGNIN_RECOVERY"
+    labelKey="sign-in:keep-logged-in"
+    extraLabelKey="sign-in:forgot-password"
     extraLabelLink="/auth/forgot-password"
   />
 </div>
 
 <Button type="authAction">
-  <Translation key="SIGN_IN" />
+  <Translation key="sign-in:title" />
 </Button>
 
 <OAuth2SignOptions />
 
 <div class="new-to-adofaigg-container">
   <div class="new-to-adofaigg">
-    <Translation key="NEW_TO_ADOFAIGG" />
+    <Translation key="sign-in:new-to-adofai-gg" />
   </div>
   <a class="signup-link" href="/auth/signup">
-    <Translation key="NEW_TO_ADOFAIGG_SIGN_UP" />
+    <Translation key="sign-in:sign-up-link" />
   </a>
 </div>
 
diff --git a/src/routes/auth/signup/+page.svelte b/src/routes/auth/signup/+page.svelte
index d80666f8..59f20fbd 100644
--- a/src/routes/auth/signup/+page.svelte
+++ b/src/routes/auth/signup/+page.svelte
@@ -55,41 +55,41 @@
 </script>
 
 <AuthTitle>
-  <Translation key="SIGN_UP" />
+  <Translation key="sign-up:title" />
 </AuthTitle>
 
 <!-- register form -->
 <div class="legal-agreement-terms-group">
   <h3>
-    <Translation key="SIGNUP_TERMS" />
+    <Translation key="sign-up:section-terms" />
   </h3>
   <div class="legal-agreement-container">
     <CheckboxWithLinkedLabel
-      labelKey="SIGNUP_AGREE_TERMS"
-      extraLabelKey="SIGNUP_READ_TERMS"
+      labelKey="sign-up:terms-agreement"
+      extraLabelKey="sign-up:terms-link"
       extraLabelLink="../docs/terms"
       bind:checked={agreeTos}
     />
     <CheckboxWithLinkedLabel
-      labelKey="SIGNUP_AGREE_PRIVACY"
-      extraLabelKey="SIGNUP_READ_PRIVACY"
+      labelKey="sign-up:privacy-agreement"
+      extraLabelKey="sign-up:privacy-link"
       extraLabelLink="../docs/privacy"
       bind:checked={agreePrivacy}
     />
   </div>
   {#if signupFailed && !hasAgreed()}
     <Hint warn={true} bind:this={allConditionsHint}>
-      <Translation key="SIGNUP_ERROR_AGREE_CONDITIONS" />
+      <Translation key="sign-up:error-agreement-required" />
     </Hint>
   {/if}
 </div>
 <Button type="authActionAccent" on:click={emailSignup}>
-  <Translation key="SIGNUP_WITH_EMAIL" />
+  <Translation key="sign-up:strategy-email" />
 </Button>
 
 <!-- oauth2 register buttons -->
 <OAuth2SignOptions
-  labelKey="SIGNUP_MORE_OPTIONS"
+  labelKey="sign-up:more-options"
   on:googleSignup={googleSignup}
   on:discordSignup={discordSignup}
 />
diff --git a/src/routes/rankings/+page.svelte b/src/routes/rankings/+page.svelte
index 431c4ca5..1f541029 100644
--- a/src/routes/rankings/+page.svelte
+++ b/src/routes/rankings/+page.svelte
@@ -61,7 +61,7 @@
 
 <PageContainer>
   <div class="top-spacer">
-    <MainSectionTitle titleKey="RANKING_TITLE" />
+    <MainSectionTitle titleKey="ranking:title" />
   </div>
   {#if browser}
     <div class="top-rankings">
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index e48a32b9..ebc2a84f 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -113,13 +113,29 @@ export const translate = (
     [sectionName, key] = rawKey;
   }
 
-  if (!l) return key;
+  if (!l) {
+    console.error(`received null or empty language code.`);
+    return key;
+  }
+
   const lang = langData[l];
-  if (!lang) return key;
+  if (!lang) {
+    console.error(`'${l}' is not a valid language code.`);
+    return key;
+  }
+
   const section = lang[sectionName];
-  if (!section) return key;
+  if (!section) {
+    console.error(`'${sectionName}' is not a valid section name.`);
+    return key;
+  }
+
   const message = section.getMessage(key);
-  if (!message?.value) return key;
+  if (!message?.value) {
+    console.error(`message value did not exist for key '${key}'. wrong key?`);
+    return key;
+  }
+
   const result = section.formatPattern(message.value, args);
   if (escape) escapeHtmlTags(result);
   return result;