From 4eb4bf99c3b90b9926f4bb45b7d62e9ddcb8c76e Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Wed, 6 May 2026 13:28:46 +0200
Subject: [PATCH 1/4] improve(i18n): wrapper localizations

---
 .../components/WrapperGameDataLoader.vue      |  2 +-
 .../components/WrapperPlanningDataLoader.vue  |  2 +-
 src/features/wrapper/useGameDataLoader.ts     | 18 ++++++++++------
 src/features/wrapper/usePlanningDataLoader.ts | 20 +++++++++++-------
 src/locales/en_US/terms.json                  |  4 ++++
 src/locales/en_US/wrapper.json                | 21 +++++++++++++++++++
 6 files changed, 51 insertions(+), 16 deletions(-)
 create mode 100644 src/locales/en_US/wrapper.json

diff --git a/src/features/wrapper/components/WrapperGameDataLoader.vue b/src/features/wrapper/components/WrapperGameDataLoader.vue
index aebb4b72..d37cbafe 100644
--- a/src/features/wrapper/components/WrapperGameDataLoader.vue
+++ b/src/features/wrapper/components/WrapperGameDataLoader.vue
@@ -36,7 +36,7 @@
 				<div
 					class="min-w-75 max-w-125 bg-black p-8 rounded shadow-lg text-center flex flex-col gap-y-3">
 					<h1 class="text-2xl font-bold font-mono mb-3">
-						Loading Data...
+						{{ $t("wrapper.loading") }}
 					</h1>
 					<div
 						v-for="e in loadingSteps"
diff --git a/src/features/wrapper/components/WrapperPlanningDataLoader.vue b/src/features/wrapper/components/WrapperPlanningDataLoader.vue
index 6046fc21..772827e7 100644
--- a/src/features/wrapper/components/WrapperPlanningDataLoader.vue
+++ b/src/features/wrapper/components/WrapperPlanningDataLoader.vue
@@ -36,7 +36,7 @@
 				<div
 					class="min-w-75 max-w-125 bg-black p-8 rounded shadow-lg text-center flex flex-col gap-y-3">
 					<h1 class="text-2xl font-bold font-mono mb-3">
-						Loading Data...
+						{{ $t("wrapper.loading") }}
 					</h1>
 					<div
 						v-for="e in loadingSteps"
diff --git a/src/features/wrapper/useGameDataLoader.ts b/src/features/wrapper/useGameDataLoader.ts
index 5070c42c..41e46a6a 100644
--- a/src/features/wrapper/useGameDataLoader.ts
+++ b/src/features/wrapper/useGameDataLoader.ts
@@ -1,5 +1,7 @@
 import { computed, reactive, ref, Ref, watch, watchEffect } from "vue";
 
+import { useI18n } from "vue-i18n";
+
 // Stores & Repository
 import { useQueryStore } from "@/lib/query_cache/queryStore";
 
@@ -25,13 +27,15 @@ export function useGameDataLoader(
 	props: GameDataLoaderProps,
 	emits: GameDataLoaderEmits
 ) {
+	const { t } = useI18n();
+
 	const queryStore = useQueryStore();
 	const done: Ref<boolean> = ref(false);
 
 	const stepConfigs: GameDataStepConfigsType = [
 		{
 			key: "material",
-			name: `Material Data`,
+			name: t("wrapper.gamedata.material_data"),
 			enabled: () => !!props.loadMaterials,
 			load: () => {
 				return queryStore.execute("GetMaterials", undefined);
@@ -40,7 +44,7 @@ export function useGameDataLoader(
 		},
 		{
 			key: "exchange",
-			name: `Exchange Data`,
+			name: t("wrapper.gamedata.exchange_data"),
 			enabled: () => !!props.loadExchanges,
 			load: () => {
 				return queryStore.execute("GetExchanges", undefined);
@@ -49,7 +53,7 @@ export function useGameDataLoader(
 		},
 		{
 			key: "building",
-			name: `Building Data`,
+			name: t("wrapper.gamedata.building_data"),
 			enabled: () => !!props.loadBuildings,
 			load: () => {
 				return queryStore.execute("GetBuildings", undefined);
@@ -58,7 +62,7 @@ export function useGameDataLoader(
 		},
 		{
 			key: "recipe",
-			name: `Recipe Data`,
+			name: t("wrapper.gamedata.recipe_data"),
 			enabled: () => !!props.loadRecipes,
 			load: () => {
 				return queryStore.execute("GetRecipes", undefined);
@@ -67,7 +71,7 @@ export function useGameDataLoader(
 		},
 		{
 			key: "planet",
-			name: `Planet '${props.loadPlanet}' Data`,
+			name: t("wrapper.gamedata.planet_data", { name: props.loadPlanet }),
 			enabled: () => !!props.loadPlanet,
 			load: () => {
 				return queryStore.execute("GetPlanet", {
@@ -78,7 +82,9 @@ export function useGameDataLoader(
 		},
 		{
 			key: "planetMultiple",
-			name: `Planet '${props.loadPlanetMultiple?.join(", ")}' Data`,
+			name: t("wrapper.gamedata.planet_multiple_data", {
+				names: props.loadPlanetMultiple?.join(", "),
+			}),
 			enabled: () => !!props.loadPlanetMultiple,
 			load: () => {
 				return queryStore.execute("GetMultiplePlanets", {
diff --git a/src/features/wrapper/usePlanningDataLoader.ts b/src/features/wrapper/usePlanningDataLoader.ts
index 2b287a6f..690b59b9 100644
--- a/src/features/wrapper/usePlanningDataLoader.ts
+++ b/src/features/wrapper/usePlanningDataLoader.ts
@@ -1,5 +1,7 @@
 import { computed, reactive, ref, Ref, watch, watchEffect } from "vue";
 
+import { useI18n } from "vue-i18n";
+
 // Stores & Repository
 import { useQueryRepository } from "@/lib/query_cache/queryRepository";
 import { useQueryStore } from "@/lib/query_cache/queryStore";
@@ -38,6 +40,8 @@ export function usePlanningDataLoader(
 		Loading both is not permitted as it doesn't make sense.
 	*/
 
+	const { t } = useI18n();
+
 	if (
 		props.sharedPlanUuid &&
 		(props.empireList || props.planUuid || props.planetNaturalId)
@@ -92,7 +96,7 @@ export function usePlanningDataLoader(
 	const stepConfigs: PlanningStepConfigsType = [
 		{
 			key: "sharedPlan",
-			name: "Shared Plan Configuration",
+			name: t("wrapper.planning_data.shared_plan"),
 			enabled: () => !!props.sharedPlanUuid,
 			load: () =>
 				queryStore.execute("GetSharedPlan", {
@@ -102,7 +106,7 @@ export function usePlanningDataLoader(
 		},
 		{
 			key: "empireList",
-			name: "Empires Configurations",
+			name: t("wrapper.planning_data.empires"),
 			enabled: () => !!props.empireList,
 			load: () => queryStore.execute("GetAllEmpires", undefined),
 			onSuccess: (data: IPlanEmpireElement[]) => {
@@ -118,7 +122,7 @@ export function usePlanningDataLoader(
 		},
 		{
 			key: "plan",
-			name: "Plan Configuration",
+			name: t("wrapper.planning_data.plan"),
 			enabled: () => !!props.planUuid,
 			load: () =>
 				queryStore.execute("GetPlan", {
@@ -128,7 +132,7 @@ export function usePlanningDataLoader(
 		},
 		{
 			key: "planList",
-			name: "All Plan Configurations",
+			name: t("wrapper.planning_data.plans_all"),
 			enabled: () => !!props.planList,
 			load: () => queryStore.execute("GetAllPlans", undefined),
 			onSuccess: (data: IPlan[]) => {
@@ -142,7 +146,7 @@ export function usePlanningDataLoader(
 		},
 		{
 			key: "planet",
-			name: "Planet Data",
+			name: t("wrapper.planning_data.planet_data"),
 			// If sharedPlanId, wait for sharedPlan; else if planetId, no depends; else never
 			dependsOn: props.sharedPlanUuid ? "sharedPlan" : undefined,
 			enabled: () => !!(props.sharedPlanUuid || props.planetNaturalId),
@@ -166,7 +170,7 @@ export function usePlanningDataLoader(
 		},
 		{
 			key: "cx",
-			name: "CX Configurations",
+			name: t("wrapper.planning_data.cx"),
 			enabled: () => !!props.loadCX,
 			load: () => queryStore.execute("GetAllCX", undefined),
 			onSuccess: (d: ICX[]) => {
@@ -178,14 +182,14 @@ export function usePlanningDataLoader(
 		},
 		{
 			key: "sharedList",
-			name: "Shared Plan Configurations",
+			name: t("wrapper.planning_data.shared_list"),
 			enabled: () => !!props.loadShared,
 			load: () => queryStore.execute("GetAllShared", undefined),
 			onSuccess: (data: IShared[]) => emits("data:shared", data),
 		},
 		{
 			key: "empirePlans",
-			name: "Empire Plans",
+			name: t("wrapper.planning_data.empire_plans"),
 			enabled: () => !!props.empireUuid,
 			load: () =>
 				queryStore.execute("GetEmpirePlans", {
diff --git a/src/locales/en_US/terms.json b/src/locales/en_US/terms.json
index f69c44b3..455ede2d 100644
--- a/src/locales/en_US/terms.json
+++ b/src/locales/en_US/terms.json
@@ -5,12 +5,14 @@
 	"cx": "CX | CXs",
 	"cx_plural": "CXs",
 	"planets": "Planet | Planets",
+	"planet_plural": "Planets",
 	"faction": "Faction",
 	"cogc": "COGC",
 	"permits": "Permit | Permits",
 	"permits_plural": "Permits",
 	"profit": "Profit",
 	"revenue": "Revenue",
+	"exchanges": "Exchange | Exchanges",
 	"cost": "Cost",
 	"profit_per_area": "Profit / Area",
 	"hq": "HQ",
@@ -21,6 +23,8 @@
 	"production": "Production",
 	"consumption": "Consumption",
 	"materials": "Material | Materials",
+	"buildings": "Building | Buildings",
+	"recipes": "Recipe | Recipes",
 	"materials_plural": "Materials",
 	"surface": "Surface",
 	"gravity": "Gravity",
diff --git a/src/locales/en_US/wrapper.json b/src/locales/en_US/wrapper.json
new file mode 100644
index 00000000..b7917532
--- /dev/null
+++ b/src/locales/en_US/wrapper.json
@@ -0,0 +1,21 @@
+{
+	"loading": "Loading Data...",
+	"gamedata": {
+		"material_data": "@:terms.materials Data",
+		"exchange_data": "@:terms.exchanges Data",
+		"building_data": "@:terms.buildings Data",
+		"recipe_data": "@:terms.recipes Data",
+		"planet_data": "@:terms.planets '{name}' Data",
+		"planet_multiple_data": "@:terms.planet_plural '{names}' Data"
+	},
+	"planning_data": {
+		"shared_plan": "Shared @:terms.plan Configuration",
+		"empires": "@:terms.empire Configuration",
+		"plan": "@:terms.plan Configuration",
+		"plans_all": "All @:terms.plans_plural Configuration",
+		"planet_data": "@:terms.planets '{name}' Data",
+		"cx": "@:terms.cx '{name}' Configuration",
+		"shared_list": "Shared @:terms.plans_plural Configurations",
+		"empire_plans": "@:terms.empire @:terms.plans_plural Configurations"
+	}
+}

From 317fe62cba8d1b2babdc9f77ff99d16ef63d8404 Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Wed, 6 May 2026 13:57:35 +0200
Subject: [PATCH 2/4] improve(i18n): cx overlay table

---
 .../cx/components/MaterialCXOverviewTable.vue |  50 ++++----
 src/locales/en_US/cx_info_table.json          |  15 +++
 src/locales/en_US/market_exploration.json     |  41 ++++++
 src/locales/en_US/terms.json                  |  12 +-
 src/views/tools/MarketExplorationView.vue     | 118 +++++++++++++-----
 5 files changed, 185 insertions(+), 51 deletions(-)
 create mode 100644 src/locales/en_US/cx_info_table.json
 create mode 100644 src/locales/en_US/market_exploration.json

diff --git a/src/features/cx/components/MaterialCXOverviewTable.vue b/src/features/cx/components/MaterialCXOverviewTable.vue
index 4ddf4031..1cf4da0f 100644
--- a/src/features/cx/components/MaterialCXOverviewTable.vue
+++ b/src/features/cx/components/MaterialCXOverviewTable.vue
@@ -72,17 +72,17 @@
 				<th>CI1</th>
 				<th>IC1</th>
 				<th>NC1</th>
-				<th>UNIVERSE</th>
+				<th>{{ $t("cx_info_table.universe") }}</th>
 			</tr>
 		</thead>
 		<tbody class="child:child:first:font-bold child:child:px-2!">
 			<tr
 				class="border-b-2 border-t-2 border-dark-gray child:bg-dark-gray/50">
-				<td colspan="6">VWAP</td>
+				<td colspan="6">{{ $t("cx_info_table.vwap") }}</td>
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>7D</td>
+				<td>{{ $t("terms.7d") }}</td>
 				<td
 					v-for="cx in exchangeTypesArray"
 					:key="`vwap_7d#${cx}`"
@@ -92,7 +92,7 @@
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>30D</td>
+				<td>{{ $t("terms.30d") }}</td>
 				<td
 					v-for="cx in exchangeTypesArray"
 					:key="`vwap_30d#${cx}`"
@@ -102,7 +102,7 @@
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>Trend</td>
+				<td>{{ $t("terms.trend") }}</td>
 				<td
 					v-for="cx in exchangeTypesArray"
 					:key="`vwap_7d#${cx}`"
@@ -148,11 +148,11 @@
 			</tr>
 			<tr
 				class="border-b-2 border-t-2 border-dark-gray child:bg-dark-gray/50">
-				<td colspan="6">Traded Volume</td>
+				<td colspan="6">{{ $t("cx_info_table.traded_volume") }}</td>
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>7D</td>
+				<td>{{ $t("terms.7d") }}</td>
 				<td
 					v-for="cx in exchangeTypesArray"
 					:key="`sum_traded_7d#${cx}`"
@@ -162,7 +162,7 @@
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>30D</td>
+				<td>{{ $t("terms.30d") }}</td>
 				<td
 					v-for="cx in exchangeTypesArray"
 					:key="`sum_traded_30d#${cx}`"
@@ -172,11 +172,13 @@
 			</tr>
 			<tr
 				class="border-b-2 border-t-2 border-dark-gray child:bg-dark-gray/50">
-				<td colspan="6">Market Live Data</td>
+				<td colspan="6">
+					{{ $t("cx_info_table.market_live_data") }}
+				</td>
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>Ask</td>
+				<td>{{ $t("terms.ask") }}</td>
 				<td
 					v-for="cx in exchangeGameTypesArray"
 					:key="`ask#${cx}`"
@@ -187,7 +189,7 @@
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>Bid</td>
+				<td>{{ $t("terms.bid") }}</td>
 				<td
 					v-for="cx in exchangeGameTypesArray"
 					:key="`bid#${cx}`"
@@ -198,7 +200,7 @@
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>Spread</td>
+				<td>{{ $t("terms.spread") }}</td>
 				<td
 					v-for="cx in exchangeGameTypesArray"
 					:key="`spread#${cx}`"
@@ -209,7 +211,7 @@
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray border-t-2 border-dark-gray">
-				<td>S / D</td>
+				<td>{{ $t("cx_info_table.supply_vs_demand") }}</td>
 				<td
 					v-for="cx in exchangeTypesArray"
 					:key="`supply_demand#${cx}`"
@@ -224,7 +226,7 @@
 			</tr>
 			<tr
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>Delta</td>
+				<td>{{ $t("terms.delta") }}</td>
 				<td
 					v-for="cx in exchangeTypesArray"
 					:key="`delta_supply_demand#${cx}`"
@@ -246,7 +248,7 @@
 			</tr>
 			<tr
 				class="border-b-2 border-t-2 border-dark-gray child:bg-dark-gray/50">
-				<td colspan="6">Insights</td>
+				<td colspan="6">{{ $t("cx_info_table.insights") }}</td>
 			</tr>
 			<tr v-if="overviewData.systemic_health" class="">
 				<td colspan="6" class="border-t border-b border-dark-gray">
@@ -255,7 +257,7 @@
 							<div class="flex flex-col">
 								<span
 									class="text-[10px] text-white/50 uppercase">
-									Market Breadth
+									{{ $t("cx_info_table.market_breadth") }}
 								</span>
 								<span class="text-lg font-mono"
 									>{{
@@ -279,7 +281,7 @@
 							<div class="flex flex-col">
 								<span
 									class="text-[10px] text-white/50 uppercase">
-									Liquidity Ratio
+									{{ $t("cx_info_table.liquidity_ratio") }}
 								</span>
 								<span
 									class="text-lg font-mono"
@@ -299,14 +301,14 @@
 								</span>
 								<span
 									class="text-[10px] text-white/50 font-normal">
-									Demand / Supply
+									{{ $t("cx_info_table.demand_vs_supply") }}
 								</span>
 							</div>
 
 							<div class="flex flex-col">
 								<span
 									class="text-[10px] text-white/50 uppercase">
-									Weighted Trend
+									{{ $t("cx_info_table.weighted_trend") }}
 								</span>
 								<span
 									class="text-lg font-mono"
@@ -328,14 +330,18 @@
 								</span>
 								<span
 									class="text-[10px] text-white/50 font-normal">
-									Volume-Adjusted Delta
+									{{
+										$t(
+											"cx_info_table.volume_adjusted_delta"
+										)
+									}}
 								</span>
 							</div>
 
 							<div class="flex flex-col">
 								<span
 									class="text-[10px] text-white/50 uppercase">
-									Price Cohesion
+									{{ $t("cx_info_table.price_cohesion") }}
 								</span>
 								<span
 									class="text-lg font-mono"
@@ -355,7 +361,7 @@
 								</span>
 								<span
 									class="text-[10px] text-white/50 font-normal">
-									Variance Index
+									{{ $t("cx_info_table.variance_index") }}
 								</span>
 							</div>
 						</div>
diff --git a/src/locales/en_US/cx_info_table.json b/src/locales/en_US/cx_info_table.json
new file mode 100644
index 00000000..0f488d12
--- /dev/null
+++ b/src/locales/en_US/cx_info_table.json
@@ -0,0 +1,15 @@
+{
+	"universe": "UNIVERSE",
+	"vwap": "@:terms.vwap",
+	"traded_volume": "Traded Volume",
+	"market_live_data": "Market Live Data",
+	"supply_vs_demand": "S / D",
+	"insights": "Insights",
+	"market_breadth": "Market Breadth",
+	"liquidity_ratio": "Liquidity Ratio",
+	"demand_vs_supply": "Demand / Supply",
+	"weighted_trend": "Weighted Trend",
+	"volume_adjusted_delta": "Volume-Adjusted Delta",
+	"price_cohesion": "Price Cohesion",
+	"variance_index": "Variance Index"
+}
diff --git a/src/locales/en_US/market_exploration.json b/src/locales/en_US/market_exploration.json
new file mode 100644
index 00000000..5428c412
--- /dev/null
+++ b/src/locales/en_US/market_exploration.json
@@ -0,0 +1,41 @@
+{
+	"view_title": "Market Exploration",
+	"title": "Market Exploration",
+	"switch_material": "Switch Material",
+	"kpis": {
+		"universe_vwap_7d": "Universe VWAP @:terms.7d",
+		"universe_traded_7d": "Universe Traded Volume @:terms.7d",
+		"universe_market_delta": "Universe Market Delta",
+		"percent_trend": "% Trend",
+		"30d": "@:{'terms.30d'}:",
+		"supply": "@:{'terms.supply'}:",
+		"demand": "@:{'terms.demand'}:",
+		"weighted_trend": "Weighted Trend",
+		"volume_adjusted_delta": "Volume-Adjusted Delta",
+		"price_cohesion": "Price Cohesion",
+		"variance_index": "Variance Index"
+	},
+	"chart": {
+		"title": "Market Chart",
+		"intervals": {
+			"daily": "Daily",
+			"weekly": "Weekly",
+			"monthly": "Monthly"
+		}
+	},
+	"market_data": {
+		"title": "Market Data"
+	},
+	"overview": {
+		"title": "Material Market Overview",
+		"table": {
+			"material": "@:terms.materials",
+			"vwap_7d": "@:terms.vwap @:terms.7d",
+			"vwap_30d": "@:terms.vwap @:terms.30d",
+			"trend": "Trend",
+			"volume_7d": "@:terms.volume @:terms.7d",
+			"volume_30d": "@:terms.volume @:terms.30d",
+			"details": "Details"
+		}
+	}
+}
diff --git a/src/locales/en_US/terms.json b/src/locales/en_US/terms.json
index 455ede2d..23851bb8 100644
--- a/src/locales/en_US/terms.json
+++ b/src/locales/en_US/terms.json
@@ -37,5 +37,15 @@
 	"fertility": "Fertility",
 	"popr": "POPR",
 	"fio": "FIO",
-	"api_key": "API Key"
+	"api_key": "API Key",
+	"supply": "Supply",
+	"demand": "Demand",
+	"vwap": "VWAP",
+	"volume": "Volume",
+	"7d": "7D",
+	"30d": "30D",
+	"trend": "Trend",
+	"ask": "Ask",
+	"bid": "Bid",
+	"spread": "Spread"
 }
diff --git a/src/views/tools/MarketExplorationView.vue b/src/views/tools/MarketExplorationView.vue
index bb7ff2e8..1b0f1120 100644
--- a/src/views/tools/MarketExplorationView.vue
+++ b/src/views/tools/MarketExplorationView.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 	import { computed, onMounted, Ref, ref } from "vue";
-	import { useHead } from "@unhead/vue";
 
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
+	// Unhead
+	import { useHead } from "@unhead/vue";
 	useHead({
-		title: "Market Exploration | PRUNplanner",
+		title: `${t("market_exploration.view_title")} | PRUNplanner`,
 	});
 
 	// Stores
@@ -48,9 +52,9 @@
 	);
 
 	const intervalOptions: Ref<PSelectOption[]> = ref(
-		["Daily", "Weekly", "Monthly"].map((e) => ({
+		["daily", "weekly", "monthly"].map((e) => ({
 			label: e,
-			value: e.toLowerCase(),
+			value: e,
 		}))
 	);
 
@@ -176,10 +180,14 @@
 		<div class="min-h-screen flex flex-col">
 			<div
 				class="px-6 py-3 border-b border-white/10 flex flex-row justify-between gap-x-3">
-				<h1 class="text-2xl font-bold">Market Exploration</h1>
+				<h1 class="text-2xl font-bold">
+					{{ $t("market_exploration.title") }}
+				</h1>
 				<div>
 					<div class="flex flex-row gap-x-3 child:my-auto">
-						<div>Switch Material</div>
+						<div>
+							{{ $t("market_exploration.switch_material") }}
+						</div>
 						<PSelect
 							v-model:value="selectedMaterial"
 							searchable
@@ -206,7 +214,11 @@
 								<div
 									class="p-3 rounded border border-white/10 flex flex-col">
 									<div class="pb-1 text-white/50">
-										Universe VWAP 7D
+										{{
+											$t(
+												"market_exploration.kpis.universe_vwap_7d"
+											)
+										}}
 									</div>
 									<div class="text-3xl font-bold">
 										{{
@@ -237,14 +249,22 @@
 													true
 												)
 											}}
-											% Trend
+											{{
+												$t(
+													"market_exploration.kpis.percent_trend"
+												)
+											}}
 										</span>
 									</div>
 								</div>
 								<div
 									class="p-3 rounded border border-white/10 flex flex-col">
 									<div class="pb-1 text-white/50">
-										Universe Traded Volume 7D
+										{{
+											$t(
+												"market_exploration.kpis.universe_traded_7d"
+											)
+										}}
 									</div>
 									<div class="text-3xl font-bold">
 										{{
@@ -254,7 +274,7 @@
 										}}
 									</div>
 									<div class="text-white/50">
-										30D:
+										{{ $t("market_exploration.kpis.30d") }}
 										{{
 											formatAmount(
 												materialOverviewData()
@@ -266,7 +286,11 @@
 								<div
 									class="p-3 rounded border border-white/10 flex flex-col">
 									<div class="pb-1 text-white/50">
-										Universe Market Delta
+										{{
+											$t(
+												"market_exploration.kpis.universe_market_delta"
+											)
+										}}
 									</div>
 									<div class="text-3xl font-bold">
 										<span
@@ -288,7 +312,11 @@
 									<div
 										class="text-white/50 flex flex-row justify-between">
 										<div>
-											Supply:
+											{{
+												$t(
+													"market_exploration.kpis.supply"
+												)
+											}}
 											{{
 												formatAmount(
 													materialOverviewData()
@@ -297,7 +325,11 @@
 											}}
 										</div>
 										<div>
-											Demand:
+											{{
+												$t(
+													"market_exploration.kpis.demand"
+												)
+											}}
 											{{
 												formatAmount(
 													materialOverviewData()
@@ -310,7 +342,11 @@
 								<div
 									class="p-3 rounded border border-white/10 flex flex-col">
 									<div class="pb-1 text-white/50">
-										Weighted Trend
+										{{
+											$t(
+												"market_exploration.kpis.weighted_trend"
+											)
+										}}
 									</div>
 									<div class="text-3xl font-bold">
 										<span
@@ -332,13 +368,21 @@
 										</span>
 									</div>
 									<div class="text-white/50">
-										Volume-Adjusted Delta
+										{{
+											$t(
+												"market_exploration.kpis.volume_adjusted_delta"
+											)
+										}}
 									</div>
 								</div>
 								<div
 									class="p-3 rounded border border-white/10 flex flex-col">
 									<div class="pb-1 text-white/50">
-										Price Cohesion
+										{{
+											$t(
+												"market_exploration.kpis.price_cohesion"
+											)
+										}}
 									</div>
 									<div class="text-3xl font-bold">
 										<span
@@ -360,7 +404,11 @@
 										</span>
 									</div>
 									<div class="text-white/50">
-										Variance Index
+										{{
+											$t(
+												"market_exploration.kpis.variance_index"
+											)
+										}}
 									</div>
 								</div>
 							</div>
@@ -374,7 +422,7 @@
 							<div
 								class="flex flex-row pb-3 child:my-auto flex-none">
 								<h3 class="font-bold text-lg grow">
-									Market Chart
+									{{ $t("market_exploration.chart.title") }}
 								</h3>
 								<div class="flex flex-row">
 									<div class="flex flex-row gap-1 pr-3">
@@ -429,7 +477,11 @@
 														}
 													}
 												">
-												{{ option.label }}
+												{{
+													$t(
+														`market_exploration.chart.intervals.${option.label}`
+													)
+												}}
 											</PButton>
 										</template>
 									</div>
@@ -452,7 +504,9 @@
 							</div>
 						</div>
 						<div class="p-3 rounded border border-white/10">
-							<h3 class="font-bold text-lg pb-3">Market Data</h3>
+							<h3 class="font-bold text-lg pb-3">
+								{{ $t("market_exploration.market_data.title") }}
+							</h3>
 
 							<MaterialCXOverviewTable
 								:overview-data="materialOverviewData().overview"
@@ -461,7 +515,9 @@
 					</div>
 				</div>
 
-				<h3 class="font-bold text-lg pb-3">Material Market Overview</h3>
+				<h3 class="font-bold text-lg pb-3">
+					{{ $t("market_exploration.overview.title") }}
+				</h3>
 
 				<XNDataTable
 					:data="dataOverview"
@@ -470,7 +526,7 @@
 					:max-height="800">
 					<XNDataTableColumn
 						key="material_ticker"
-						title="Material"
+						:title="t('market_exploration.overview.table.material')"
 						sorter="default">
 						<template #render-cell="{ rowData }">
 							<MaterialTile
@@ -480,7 +536,7 @@
 					</XNDataTableColumn>
 					<XNDataTableColumn
 						key="vwap_universe_7d"
-						title="VWAP 7D"
+						:title="t('market_exploration.overview.table.vwap_7d')"
 						sorter="default">
 						<template #render-cell="{ rowData }">
 							{{ formatNumber(rowData.vwap_universe_7d) }}
@@ -491,7 +547,7 @@
 					</XNDataTableColumn>
 					<XNDataTableColumn
 						key="vwap_universe_30d"
-						title="VWAP 30D"
+						:title="t('market_exploration.overview.table.vwap_30d')"
 						sorter="default">
 						<template #render-cell="{ rowData }">
 							{{ formatNumber(rowData.vwap_universe_30d) }}
@@ -502,7 +558,7 @@
 					</XNDataTableColumn>
 					<XNDataTableColumn
 						key="weighted_trend"
-						title="Trend"
+						:title="t('market_exploration.overview.table.trend')"
 						sorter="default">
 						<template #render-cell="{ rowData }">
 							<span
@@ -516,7 +572,9 @@
 					</XNDataTableColumn>
 					<XNDataTableColumn
 						key="volume_7d"
-						title="Volume 7D"
+						:title="
+							t('market_exploration.overview.table.volume_7d')
+						"
 						sorter="default">
 						<template #render-cell="{ rowData }">
 							{{ formatAmount(rowData.volume_7d) }}
@@ -524,13 +582,17 @@
 					</XNDataTableColumn>
 					<XNDataTableColumn
 						key="volume_30d"
-						title="Volume 30D"
+						:title="
+							t('market_exploration.overview.table.volume_30d')
+						"
 						sorter="default">
 						<template #render-cell="{ rowData }">
 							{{ formatAmount(rowData.volume_30d) }}
 						</template>
 					</XNDataTableColumn>
-					<XNDataTableColumn key="explore" title="Details">
+					<XNDataTableColumn
+						key="explore"
+						:title="t('market_exploration.overview.table.details')">
 						<template #render-cell="{ rowData }">
 							<PButton
 								@click="

From 1cf8dfe66997ec46f4c8a1c1abc6c0900eeaacb4 Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Wed, 6 May 2026 14:09:48 +0200
Subject: [PATCH 3/4] improve(i18n): recipe roi localization

---
 .../components/ROIOverviewTable.vue           | 52 ++++++++++---------
 .../components/ROIOverviewTableFilters.vue    | 15 +++---
 src/locales/en_US/recipe_roi.json             | 26 ++++++++++
 src/locales/en_US/terms.json                  |  4 +-
 src/views/tools/ROIOverviewView.vue           | 18 ++++---
 5 files changed, 77 insertions(+), 38 deletions(-)
 create mode 100644 src/locales/en_US/recipe_roi.json

diff --git a/src/features/roi_overview/components/ROIOverviewTable.vue b/src/features/roi_overview/components/ROIOverviewTable.vue
index 53d81db9..8594ab0c 100644
--- a/src/features/roi_overview/components/ROIOverviewTable.vue
+++ b/src/features/roi_overview/components/ROIOverviewTable.vue
@@ -9,6 +9,9 @@
 		watch,
 	} from "vue";
 
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
 	// Composables
 	import { useROIOverview } from "@/features/roi_overview/useROIOverview";
 
@@ -160,7 +163,7 @@
 		<div class="text-center w-100 py-3">
 			<PProgressBar :step="progressCurrent" :total="progressTotal" />
 			<div class="pt-3 text-xs text-white/60">
-				Calculating Building Recipe ROI
+				{{ $t("recipe_roi.calculating") }}
 			</div>
 		</div>
 	</div>
@@ -181,18 +184,22 @@
 			:pagination="{ pageSize: 50 }">
 			<XNDataTableColumn
 				key="buildingTicker"
-				title="Building"
+				:title="t('recipe_roi.table.building')"
 				sorter="default">
 				<template #render-cell="{ rowData }">
 					<span class="font-bold">{{ rowData.buildingTicker }}</span>
 				</template>
 			</XNDataTableColumn>
-			<XNDataTableColumn key="optimalSetup" title="Optimal Setup">
+			<XNDataTableColumn
+				key="optimalSetup"
+				:title="t('recipe_roi.table.optimal_setup')">
 				<template #render-cell="{ rowData }">
 					{{ formatOptimal(rowData.optimalSetup) }}
 				</template>
 			</XNDataTableColumn>
-			<XNDataTableColumn key="recipeOutputs" title="Recipe Output">
+			<XNDataTableColumn
+				key="recipeOutputs"
+				:title="t('recipe_roi.table.recipe_output')">
 				<template #render-cell="{ rowData }">
 					<div class="flex flex-row flex-wrap gap-1">
 						<MaterialTile
@@ -203,7 +210,9 @@
 					</div>
 				</template>
 			</XNDataTableColumn>
-			<XNDataTableColumn key="recipeInputs" title="Recipe Input">
+			<XNDataTableColumn
+				key="recipeInputs"
+				:title="t('recipe_roi.table.recipe_input')">
 				<template #render-cell="{ rowData }">
 					<div class="flex flex-row flex-wrap gap-1">
 						<MaterialTile
@@ -214,25 +223,23 @@
 					</div>
 				</template>
 			</XNDataTableColumn>
-			<XNDataTableColumn key="cogc" title="COGC">
+			<XNDataTableColumn key="cogc" :title="t('recipe_roi.table.cogc')">
 				<template #render-cell="{ rowData }">
 					<span class="text-nowrap">
 						{{ capitalizeString(rowData.cogc) }}
 					</span>
 				</template>
 			</XNDataTableColumn>
-			<XNDataTableColumn key="cogm" title="COGM">
+			<XNDataTableColumn key="cogm" :title="t('recipe_roi.table.cogm')">
 				<template #render-cell="{ rowData }">
 					<COGMButton :cogm-data="rowData.cogm" />
 				</template>
 			</XNDataTableColumn>
 			<XNDataTableColumn
 				key="planCost"
-				title="Plan Cost"
-				sorter="default">
-				<template #title>
-					<div class="text-end">Plan Cost</div>
-				</template>
+				:title="t('recipe_roi.table.plan_cost')"
+				sorter="default"
+				title-align="right">
 				<template #render-cell="{ rowData }">
 					<div class="text-end text-nowrap">
 						{{ formatNumber(rowData.planCost) }}
@@ -242,11 +249,9 @@
 			</XNDataTableColumn>
 			<XNDataTableColumn
 				key="dailyProfit"
-				title="Daily Profit"
+				:title="t('recipe_roi.table.daily_profit')"
+				title-align="right"
 				sorter="default">
-				<template #title>
-					<div class="text-end">Daily Profit</div>
-				</template>
 				<template #render-cell="{ rowData }">
 					<div
 						class="text-end text-nowrap"
@@ -262,11 +267,9 @@
 			</XNDataTableColumn>
 			<XNDataTableColumn
 				key="planProfitArea"
-				title="Profit/Area"
+				:title="t('recipe_roi.table.profit_area')"
+				title-align="right"
 				sorter="default">
-				<template #title>
-					<div class="text-end">Profit/Area</div>
-				</template>
 				<template #render-cell="{ rowData }">
 					<div
 						class="text-end"
@@ -280,10 +283,11 @@
 					</div>
 				</template>
 			</XNDataTableColumn>
-			<XNDataTableColumn key="planROI" title="Plan ROI" sorter="default">
-				<template #title>
-					<div class="text-end">Plan ROI</div>
-				</template>
+			<XNDataTableColumn
+				key="planROI"
+				:title="t('recipe_roi.table.plan_roi')"
+				title-align="right"
+				sorter="default">
 				<template #render-cell="{ rowData }">
 					<div
 						class="text-end text-nowrap"
diff --git a/src/features/roi_overview/components/ROIOverviewTableFilters.vue b/src/features/roi_overview/components/ROIOverviewTableFilters.vue
index 55ed07aa..c5fa1d60 100644
--- a/src/features/roi_overview/components/ROIOverviewTableFilters.vue
+++ b/src/features/roi_overview/components/ROIOverviewTableFilters.vue
@@ -5,7 +5,6 @@
 	import { PSelectOption } from "@/ui/ui.types";
 
 	// UI
-	import PSelect from "@/ui/components/PSelect.vue";
 	import PCheckbox from "@/ui/components/PCheckbox.vue";
 	import PSelectMultiple from "@/ui/components/PSelectMultiple.vue";
 
@@ -86,9 +85,11 @@
 	<div
 		class="w-full p-3 flex flex-row gap-3 flex-wrap items-center justify-between border border-b-0 rounded-[3px] border-white/15">
 		<div class="flex flex-row flex-wrap items-center gap-3">
-			<div class="font-bold pr-3">Filter</div>
+			<div class="font-bold pr-3">
+				{{ $t("recipe_roi.filters.title") }}
+			</div>
 			<div class="flex flex-row gap-3 child:my-auto">
-				<div>Building</div>
+				<div>{{ $t("recipe_roi.filters.building") }}</div>
 				<PSelectMultiple
 					v-model:value="localFilterBuilding"
 					:options="buildingOptions"
@@ -97,7 +98,7 @@
 					class="w-40" />
 			</div>
 			<div class="flex flex-row gap-3 child:my-auto">
-				<div>COGC</div>
+				<div>{{ $t("recipe_roi.filters.cogc") }}</div>
 				<PSelectMultiple
 					v-model:value="localFilterCogc"
 					:options="cogcOptions"
@@ -106,7 +107,7 @@
 					class="w-50" />
 			</div>
 			<div class="flex flex-row gap-3 child:my-auto">
-				<div>Output</div>
+				<div>{{ $t("recipe_roi.filters.output") }}</div>
 				<PSelectMultiple
 					v-model:value="localFilterOutputMaterial"
 					:options="outputMaterialOptions"
@@ -115,7 +116,7 @@
 					class="w-75" />
 			</div>
 			<div class="flex flex-row gap-3 child:my-auto">
-				<div>Input</div>
+				<div>{{ $t("recipe_roi.filters.input") }}</div>
 				<PSelectMultiple
 					v-model:value="localFilterInputMaterial"
 					:options="inputMaterialOptions"
@@ -125,7 +126,7 @@
 			</div>
 		</div>
 		<div class="flex flex-row flex-wrap gap-3 items-center">
-			<div>Positive ROI</div>
+			<div>{{ $t("recipe_roi.filters.positive_roi") }}</div>
 			<PCheckbox v-model:checked="localFilterPositiveROI" />
 		</div>
 	</div>
diff --git a/src/locales/en_US/recipe_roi.json b/src/locales/en_US/recipe_roi.json
new file mode 100644
index 00000000..aab2c7f9
--- /dev/null
+++ b/src/locales/en_US/recipe_roi.json
@@ -0,0 +1,26 @@
+{
+	"view_title": "ROI Overview",
+	"title": "ROI Overview",
+	"calculating": "Calculating Building Recipe ROI",
+	"cx_select": "@:terms.cx Preference",
+	"filters": {
+		"title": "@:terms.filter",
+		"building": "@:terms.buildings",
+		"cogc": "@:terms.cogc",
+		"output": "Output",
+		"input": "Input",
+		"positive_roi": "Positive ROI"
+	},
+	"table": {
+		"building": "@:terms.buildings",
+		"optimal_setup": "Optimal Setup",
+		"recipe_output": "@:terms.recipes Output",
+		"recipe_input": "@:terms.recipes Input",
+		"cogc": "@:terms.cogc",
+		"cogm": "@:terms.cogm",
+		"plan_cost": "@:terms.plan Cost",
+		"daily_profit": "Daily Profit",
+		"profit_area": "Profit/Area",
+		"plan_roi": "@:terms.plan ROI"
+	}
+}
diff --git a/src/locales/en_US/terms.json b/src/locales/en_US/terms.json
index 23851bb8..a8c6192a 100644
--- a/src/locales/en_US/terms.json
+++ b/src/locales/en_US/terms.json
@@ -47,5 +47,7 @@
 	"trend": "Trend",
 	"ask": "Ask",
 	"bid": "Bid",
-	"spread": "Spread"
+	"spread": "Spread",
+	"filter": "Filter",
+	"cogm": "COGM"
 }
diff --git a/src/views/tools/ROIOverviewView.vue b/src/views/tools/ROIOverviewView.vue
index 7c217a10..d7ad1173 100644
--- a/src/views/tools/ROIOverviewView.vue
+++ b/src/views/tools/ROIOverviewView.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
 	import { ref, Ref } from "vue";
+
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
+	// Unhead
 	import { useHead } from "@unhead/vue";
+	useHead({
+		title: `${t("recipe_roi.view_title")} | PRUNplanner`,
+	});
 
 	// Components
 	import WrapperGameDataLoader from "@/features/wrapper/components/WrapperGameDataLoader.vue";
@@ -9,10 +17,6 @@
 	import CXPreferenceSelector from "@/features/exchanges/components/CXPreferenceSelector.vue";
 	import ROIOverviewTable from "@/features/roi_overview/components/ROIOverviewTable.vue";
 
-	useHead({
-		title: "ROI Overview | PRUNplanner",
-	});
-
 	// UI
 	import { PForm, PFormItem } from "@/ui";
 
@@ -37,10 +41,12 @@
 				<div class="min-h-screen flex flex-col">
 					<div
 						class="px-6 py-3 border-b border-white/10 flex flex-row justify-between">
-						<h1 class="text-2xl font-bold my-auto">ROI Overview</h1>
+						<h1 class="text-2xl font-bold my-auto">
+							{{ $t("recipe_roi.title") }}
+						</h1>
 						<div class="flex flex-row gap-x-3">
 							<PForm>
-								<PFormItem label="CX Preference">
+								<PFormItem :label="t('recipe_roi.cx_select')">
 									<CXPreferenceSelector
 										:cx-uuid="refSelectedCXUuid"
 										@update:cxuuid="

From c94d5210e312acc9f80fcbf62ebb43ce4981fa42 Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Wed, 6 May 2026 14:24:29 +0200
Subject: [PATCH 4/4] improve(i18n): resource roi localization

---
 .../components/ResourceROITable.vue           | 64 ++++++++++++-------
 src/locales/en_US/resource_roi.json           | 26 ++++++++
 src/locales/en_US/terms.json                  |  2 +
 src/views/tools/ResourceROIOverviewView.vue   | 28 ++++----
 4 files changed, 85 insertions(+), 35 deletions(-)
 create mode 100644 src/locales/en_US/resource_roi.json

diff --git a/src/features/resource_roi_overview/components/ResourceROITable.vue b/src/features/resource_roi_overview/components/ResourceROITable.vue
index ee3e57ef..f603948c 100644
--- a/src/features/resource_roi_overview/components/ResourceROITable.vue
+++ b/src/features/resource_roi_overview/components/ResourceROITable.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 	import { ComputedRef, PropType, Ref, computed, ref } from "vue";
 
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
 	// Util
 	import { formatNumber } from "@/util/numbers";
 	import { capitalizeString } from "@/util/text";
@@ -85,7 +88,10 @@
 		:building-options="filterOptionBuilding"
 		:searched-material="searchedMaterial" />
 	<XNDataTable :data="localResult" striped :pagination="{ pageSize: 50 }">
-		<XNDataTableColumn key="planetName" title="Planet" sorter="default">
+		<XNDataTableColumn
+			key="planetName"
+			:title="t('resource_roi.table.planet')"
+			sorter="default">
 			<template #render-cell="{ rowData }">
 				<router-link
 					:to="`/plan/${rowData.planetNaturalId}`"
@@ -94,38 +100,45 @@
 				</router-link>
 			</template>
 		</XNDataTableColumn>
-		<XNDataTableColumn key="production" title="Production">
+		<XNDataTableColumn
+			key="production"
+			:title="t('resource_roi.table.production')">
 			<XNDataTableColumn
 				key="buildingTicker"
-				title="Building"
+				:title="t('resource_roi.table.building')"
 				sorter="default">
 				<template #render-cell="{ rowData }">
 					<span class="font-bold">{{ rowData.buildingTicker }}</span>
 				</template>
 			</XNDataTableColumn>
-			<XNDataTableColumn key="dailyYield" title="Daily" sorter="default">
+			<XNDataTableColumn
+				key="dailyYield"
+				:title="t('resource_roi.table.daily')"
+				sorter="default">
 				<template #render-cell="{ rowData }">
 					{{ formatNumber(rowData.dailyYield) }}
 				</template>
 			</XNDataTableColumn>
 			<XNDataTableColumn
 				key="percentMaxDailyYield"
-				title="% Max."
+				:title="t('resource_roi.table.percent_max')"
 				sorter="default">
 				<template #render-cell="{ rowData }">
 					{{ formatNumber(rowData.percentMaxDailyYield * 100) }} %
 				</template>
 			</XNDataTableColumn>
 		</XNDataTableColumn>
-		<XNDataTableColumn key="planet" title="Planet">
-			<XNDataTableColumn key="popr" title="POPR">
+		<XNDataTableColumn key="planet" :title="t('resource_roi.table.planet')">
+			<XNDataTableColumn key="popr" :title="t('resource_roi.table.popr')">
 				<template #render-cell="{ rowData }">
 					<PlanetPOPRButton
 						:planet-natural-id="rowData.planetNaturalId"
 						button-size="sm" />
 				</template>
 			</XNDataTableColumn>
-			<XNDataTableColumn key="planetCOGC" title="COGC">
+			<XNDataTableColumn
+				key="planetCOGC"
+				:title="t('resource_roi.table.cogc')">
 				<template #render-cell="{ rowData }">
 					{{
 						rowData.planetCOGC
@@ -136,7 +149,9 @@
 					}}
 				</template>
 			</XNDataTableColumn>
-			<XNDataTableColumn key="environment" title="Environment">
+			<XNDataTableColumn
+				key="environment"
+				:title="t('resource_roi.table.environment')">
 				<template #render-cell="{ rowData }">
 					<div class="flex flex-row flex-wrap gap-1">
 						<MaterialTile
@@ -160,13 +175,15 @@
 			</XNDataTableColumn>
 			<XNDataTableColumn
 				key="planetInfrastructures"
-				title="Infrastructure">
+				:title="t('resource_roi.table.infrastructure')">
 				<template #render-cell="{ rowData }">
 					{{ rowData.planetInfrastructures.join(", ") }}
 				</template>
 			</XNDataTableColumn>
 		</XNDataTableColumn>
-		<XNDataTableColumn key="profit" title="Cost / Profit">
+		<XNDataTableColumn
+			key="profit"
+			:title="t('resource_roi.table.cost_profit')">
 			<XNDataTableColumn key="cogm" title="COGM">
 				<template #render-cell="{ rowData }">
 					<COGMButton :cogm-data="rowData.cogm" />
@@ -174,11 +191,9 @@
 			</XNDataTableColumn>
 			<XNDataTableColumn
 				key="planCost"
-				title="Plan Cost"
+				:title="t('resource_roi.table.plan_cost')"
+				title-align="right"
 				sorter="default">
-				<template #title>
-					<div class="text-end">Plan Cost</div>
-				</template>
 				<template #render-cell="{ rowData }">
 					<div class="text-end text-nowrap">
 						{{ formatNumber(rowData.planCost) }}
@@ -208,11 +223,9 @@
 			</XNDataTableColumn> -->
 			<XNDataTableColumn
 				key="dailyProfit"
-				title="Daily Profit"
+				:title="t('resource_roi.table.daily_profit')"
+				title-align="right"
 				sorter="default">
-				<template #title>
-					<div class="text-end">Daily Profit</div>
-				</template>
 				<template #render-cell="{ rowData }">
 					<div
 						class="text-end text-nowrap"
@@ -246,10 +259,11 @@
 					</div>
 				</template>
 			</XNDataTableColumn> -->
-			<XNDataTableColumn key="planROI" title="Plan ROI" sorter="default">
-				<template #title>
-					<div class="text-end text-nowrap">Plan ROI</div>
-				</template>
+			<XNDataTableColumn
+				key="planROI"
+				:title="t('resource_roi.table.plan_roi')"
+				title-align="right"
+				sorter="default">
 				<template #render-cell="{ rowData }">
 					<div
 						class="text-end"
@@ -264,7 +278,9 @@
 				</template>
 			</XNDataTableColumn>
 		</XNDataTableColumn>
-		<XNDataTableColumn key="distances" title="Distances">
+		<XNDataTableColumn
+			key="distances"
+			:title="t('resource_roi.table.distances')">
 			<XNDataTableColumn
 				key="distanceAI1"
 				title="AI1"
diff --git a/src/locales/en_US/resource_roi.json b/src/locales/en_US/resource_roi.json
new file mode 100644
index 00000000..4f1ddc57
--- /dev/null
+++ b/src/locales/en_US/resource_roi.json
@@ -0,0 +1,26 @@
+{
+	"view_title": "Resource ROI",
+	"title": "Resource ROI Overview",
+	"info": "Select a Resource and press 'Search & Calculate'",
+	"calculating": "Calculating resource ROI for planets.",
+	"searching": "Searching for @:terms.planet_plural with '{resource}'. Awaiting backend response",
+	"resource_select": "Select @:terms.resources",
+	"cx_select": "@:terms.cx Preference",
+	"button_calculate": "Search & Calculate",
+	"table": {
+		"planet": "@:terms.planets",
+		"production": "@:terms.production",
+		"building": "@:terms.buildings",
+		"daily": "Daily",
+		"percent_max": "% Max.",
+		"popr": "@:terms.popr",
+		"cogc": "@:terms.cogc",
+		"environment": "Environment",
+		"infrastructure": "Infrastructure",
+		"cost_profit": "Cost / Profit",
+		"plan_cost": "@:terms.plan @:terms.cost",
+		"daily_profit": "Daily @:terms.profit",
+		"plan_roi": "@:terms.plan ROI",
+		"distances": "Distances"
+	}
+}
diff --git a/src/locales/en_US/terms.json b/src/locales/en_US/terms.json
index a8c6192a..9def0bb8 100644
--- a/src/locales/en_US/terms.json
+++ b/src/locales/en_US/terms.json
@@ -13,6 +13,8 @@
 	"profit": "Profit",
 	"revenue": "Revenue",
 	"exchanges": "Exchange | Exchanges",
+	"resources": "Resource | Resources",
+	"resources_plural": "Resources",
 	"cost": "Cost",
 	"profit_per_area": "Profit / Area",
 	"hq": "HQ",
diff --git a/src/views/tools/ResourceROIOverviewView.vue b/src/views/tools/ResourceROIOverviewView.vue
index 1e4eb809..dcf2f64d 100644
--- a/src/views/tools/ResourceROIOverviewView.vue
+++ b/src/views/tools/ResourceROIOverviewView.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 	import { ref, Ref } from "vue";
-	import { useHead } from "@unhead/vue";
 
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
+	// Unhead
+	import { useHead } from "@unhead/vue";
 	useHead({
-		title: "Resource ROI Overview | PRUNplanner",
+		title: `${t("resource_roi.view_title")} | PRUNplanner`,
 	});
 
 	// Composables
@@ -65,18 +69,18 @@
 				<div
 					class="px-6 py-3 border-b border-white/10 flex flex-row justify-between">
 					<h1 class="text-2xl font-bold my-auto grow">
-						Resource ROI Overview
+						{{ $t("resource_roi.title") }}
 					</h1>
 					<div
 						class="flex flex-row flex-wrap gap-3 my-auto child:my-auto">
-						<div>Select Resource</div>
+						<div>{{ $t("resource_roi.resource_select") }}</div>
 						<PSelect
 							v-model:value="refSearchMaterial"
 							:options="PLANETSEARCHOPTIONMATERIALS"
 							placeholder=""
 							searchable
 							class="w-50" />
-						<div>CX Preference</div>
+						<div>{{ $t("resource_roi.cx_select") }}</div>
 						<CXPreferenceSelector
 							:cx-uuid="refSelectedCXUuid"
 							class="w-50"
@@ -87,7 +91,7 @@
 							:disabled="!refSearchMaterial"
 							:loading="refIsLoading"
 							@click="performSearchAndCalculation">
-							Search & Calculate
+							{{ $t("resource_roi.button_calculate") }}
 						</PButton>
 						<HelpDrawer file-name="tools_resource_roi_overview" />
 					</div>
@@ -95,7 +99,7 @@
 
 				<div class="px-6 py-3">
 					<div v-if="!refInitialized" class="text-center py-3">
-						Select a Resource and press "Search & Calculate"
+						{{ $t("resource_roi.info") }}
 					</div>
 					<div
 						v-else-if="refIsLoading"
@@ -104,9 +108,11 @@
 							<div v-if="progressSearchingPlanets">
 								<PSpin size="xl" />
 								<div class="pt-3 text-xs text-white/60">
-									Searching for planets with
-									{{ refSearchMaterial }}. Awaiting backend
-									response.
+									{{
+										$t("resource_roi.calculating", {
+											resource: refSearchMaterial,
+										})
+									}}
 								</div>
 							</div>
 							<div v-else>
@@ -114,7 +120,7 @@
 									:step="progressCurrent"
 									:total="progressTotal" />
 								<div class="pt-3 text-xs text-white/60">
-									Calculating resource ROI for planets.
+									{{ $t("resource_roi.calculating") }}
 								</div>
 							</div>
 						</div>