From 856c2d5a5b5afc5b96bd8b13c8260ed1fe3f2b3f Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Wed, 6 May 2026 16:45:59 +0200
Subject: [PATCH 1/3] improve(i18n): localize hq upgrade calculator

---
 src/locales/en_US/hq_upgrade_calculator.json | 25 ++++++
 src/locales/en_US/terms.json                 | 91 ++++++++++----------
 src/views/tools/HQUpgradeCalculatorView.vue  | 73 ++++++++++++----
 3 files changed, 127 insertions(+), 62 deletions(-)
 create mode 100644 src/locales/en_US/hq_upgrade_calculator.json

diff --git a/src/locales/en_US/hq_upgrade_calculator.json b/src/locales/en_US/hq_upgrade_calculator.json
new file mode 100644
index 00000000..542176e9
--- /dev/null
+++ b/src/locales/en_US/hq_upgrade_calculator.json
@@ -0,0 +1,25 @@
+{
+	"view_title": "HQ",
+	"title": "HQ Upgrade Calculator",
+	"form": {
+		"from_level": "From HQ Level",
+		"to_level": "To HQ Level",
+		"cx_preference": "@:terms.cx Preference",
+		"show_locations": "Show Locations"
+	},
+	"cost": {
+		"total_cost": "Total @:terms.cost",
+		"total_weight": "Total @:terms.weight",
+		"total_volume": "Total @:terms.volume"
+	},
+	"table": {
+		"material": "@:terms.materials",
+		"amount": "@:terms.amount",
+		"storage": "@:terms.storage",
+		"override_stock": "Override Stock",
+		"required": "Required",
+		"cost_unit": "Cost / Unit",
+		"cost_total": "Total Cost",
+		"storage_locations": "@:terms.storage Locations"
+	}
+}
diff --git a/src/locales/en_US/terms.json b/src/locales/en_US/terms.json
index 9def0bb8..b7ead843 100644
--- a/src/locales/en_US/terms.json
+++ b/src/locales/en_US/terms.json
@@ -1,55 +1,58 @@
 {
-	"plan": "Plan | Plans",
-	"plans_plural": "Plans",
-	"empire": "Empire | Empires",
-	"cx": "CX | CXs",
-	"cx_plural": "CXs",
-	"planets": "Planet | Planets",
-	"planet_plural": "Planets",
-	"faction": "Faction",
+	"30d": "30D",
+	"7d": "7D",
+	"api_key": "API Key",
+	"ask": "Ask",
+	"bid": "Bid",
+	"buffer": "Buffer",
+	"buildings": "Building | Buildings",
 	"cogc": "COGC",
-	"permits": "Permit | Permits",
-	"permits_plural": "Permits",
-	"profit": "Profit",
-	"revenue": "Revenue",
-	"exchanges": "Exchange | Exchanges",
-	"resources": "Resource | Resources",
-	"resources_plural": "Resources",
+	"cogm": "COGM",
+	"consumption": "Consumption",
 	"cost": "Cost",
-	"profit_per_area": "Profit / Area",
-	"hq": "HQ",
-	"buffer": "Buffer",
-	"material_ticker": "Ticker",
-	"delta": "Delta",
+	"cx_plural": "CXs",
+	"cx": "CX | CXs",
 	"delta_price": "ȼ Delta",
-	"production": "Production",
-	"consumption": "Consumption",
-	"materials": "Material | Materials",
-	"buildings": "Building | Buildings",
-	"recipes": "Recipe | Recipes",
-	"materials_plural": "Materials",
-	"surface": "Surface",
+	"delta": "Delta",
+	"demand": "Demand",
+	"empire": "Empire | Empires",
+	"exchanges": "Exchange | Exchanges",
+	"faction": "Faction",
+	"fertility": "Fertility",
+	"filter": "Filter",
+	"fio": "FIO",
+	"gaseous": "Gaseous",
 	"gravity": "Gravity",
-	"temperature": "Temperature",
-	"pressure": "Pressure",
 	"high": "High",
+	"hq": "HQ",
 	"low": "Low",
-	"rocky": "Rocky",
-	"gaseous": "Gaseous",
-	"fertility": "Fertility",
+	"material_ticker": "Ticker",
+	"materials_plural": "Materials",
+	"materials": "Material | Materials",
+	"permits_plural": "Permits",
+	"permits": "Permit | Permits",
+	"plan": "Plan | Plans",
+	"planet_plural": "Planets",
+	"planets": "Planet | Planets",
+	"plans_plural": "Plans",
 	"popr": "POPR",
-	"fio": "FIO",
-	"api_key": "API Key",
+	"pressure": "Pressure",
+	"production": "Production",
+	"profit_per_area": "Profit / Area",
+	"profit": "Profit",
+	"recipes": "Recipe | Recipes",
+	"resources_plural": "Resources",
+	"resources": "Resource | Resources",
+	"revenue": "Revenue",
+	"rocky": "Rocky",
+	"spread": "Spread",
 	"supply": "Supply",
-	"demand": "Demand",
-	"vwap": "VWAP",
-	"volume": "Volume",
-	"7d": "7D",
-	"30d": "30D",
+	"surface": "Surface",
+	"temperature": "Temperature",
 	"trend": "Trend",
-	"ask": "Ask",
-	"bid": "Bid",
-	"spread": "Spread",
-	"filter": "Filter",
-	"cogm": "COGM"
+	"volume": "Volume",
+	"vwap": "VWAP",
+	"weight": "Weight",
+	"amount": "Amount",
+	"storage": "Storage"
 }
diff --git a/src/views/tools/HQUpgradeCalculatorView.vue b/src/views/tools/HQUpgradeCalculatorView.vue
index 8a431d4a..65f3a14c 100644
--- a/src/views/tools/HQUpgradeCalculatorView.vue
+++ b/src/views/tools/HQUpgradeCalculatorView.vue
@@ -1,9 +1,12 @@
 <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: "HQ Upgrade Calculator | PRUNplanner",
+		title: `${t("hq_upgrade_calculator.view_title")} | PRUNplanner`,
 	});
 
 	// Composables
@@ -66,7 +69,7 @@
 				<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 my-auto">
-						HQ Upgrade Calculator
+						{{ $t("hq_upgrade_calculator.title") }}
 					</h1>
 					<HelpDrawer file-name="tools_hq_upgrade_calculator" />
 				</div>
@@ -76,7 +79,12 @@
 						class="px-6 py-3 grid grid-cols-1 xl:grid-cols-2 gap-3">
 						<div>
 							<PForm>
-								<PFormItem label="From HQ Level">
+								<PFormItem
+									:label="
+										t(
+											'hq_upgrade_calculator.form.from_level'
+										)
+									">
 									<PSelect
 										v-model:value="selectedStart"
 										:options="levelOptions"
@@ -84,7 +92,10 @@
 										class="w-37.5"
 										@update:value="calculateMaterialData" />
 								</PFormItem>
-								<PFormItem label="To HQ Level">
+								<PFormItem
+									:label="
+										t('hq_upgrade_calculator.form.to_level')
+									">
 									<PSelect
 										v-model:value="selectedTo"
 										:options="levelOptionsTo"
@@ -96,7 +107,12 @@
 						</div>
 						<div>
 							<PForm>
-								<PFormItem label="CX Preference">
+								<PFormItem
+									:label="
+										t(
+											'hq_upgrade_calculator.form.cx_preference'
+										)
+									">
 									<CXPreferenceSelector
 										:cx-uuid="refSelectedCXUuid"
 										class="w-full"
@@ -105,7 +121,12 @@
 												(refSelectedCXUuid = value)
 										" />
 								</PFormItem>
-								<PFormItem label="Show Locations">
+								<PFormItem
+									:label="
+										t(
+											'hq_upgrade_calculator.form.show_locations'
+										)
+									">
 									<PCheckbox
 										v-model:checked="
 											selectedShowLocations
@@ -118,14 +139,20 @@
 						class="px-6 py-3 grid grid-cols-1 xl:grid-cols-2 gap-x-3">
 						<div
 							class="grid grid-cols-[min-content_1fr] gap-x-3 child:not-even:font-bold child:not-even:text-nowrap child:not-even:pr-3">
-							<div>Total Cost</div>
+							<div>
+								{{ t("hq_upgrade_calculator.cost.total_cost") }}
+							</div>
 							<div>
 								{{ formatNumber(totalCost) }}
 								<span class="pl-1 font-light text-white/50">
 									ȼ
 								</span>
 							</div>
-							<div>Total Weight</div>
+							<div>
+								{{
+									t("hq_upgrade_calculator.cost.total_weight")
+								}}
+							</div>
 							<div>
 								{{
 									formatNumber(totalWeightVolume.totalWeight)
@@ -134,7 +161,11 @@
 									t
 								</span>
 							</div>
-							<div>Total Volume</div>
+							<div>
+								{{
+									t("hq_upgrade_calculator.cost.total_volume")
+								}}
+							</div>
 							<div>
 								{{
 									formatNumber(totalWeightVolume.totalVolume)
@@ -162,7 +193,7 @@
 					<XNDataTable :data="materialData" striped>
 						<XNDataTableColumn
 							key="ticker"
-							title="Material"
+							:title="t('hq_upgrade_calculator.table.material')"
 							sorter="default">
 							<template #render-cell="{ rowData }">
 								<MaterialTile
@@ -173,7 +204,7 @@
 						</XNDataTableColumn>
 						<XNDataTableColumn
 							key="amount"
-							title="Amount"
+							:title="t('hq_upgrade_calculator.table.amount')"
 							sorter="default">
 							<template #render-cell="{ rowData }">
 								{{ formatAmount(rowData.amount) }}
@@ -181,7 +212,7 @@
 						</XNDataTableColumn>
 						<XNDataTableColumn
 							key="storage"
-							title="Storage"
+							:title="t('hq_upgrade_calculator.table.storage')"
 							sorter="default">
 							<template #render-cell="{ rowData }">
 								{{ formatAmount(rowData.storage) }}
@@ -189,7 +220,9 @@
 						</XNDataTableColumn>
 						<XNDataTableColumn
 							key="override"
-							title="Override Stock">
+							:title="
+								t('hq_upgrade_calculator.table.override_stock')
+							">
 							<template #render-cell="{ rowData }">
 								<PInputNumber
 									:key="`OVERRIDE#${rowData.ticker}`"
@@ -206,7 +239,7 @@
 						</XNDataTableColumn>
 						<XNDataTableColumn
 							key="required"
-							title="Required"
+							:title="t('hq_upgrade_calculator.table.required')"
 							sorter="default">
 							<template #render-cell="{ rowData }">
 								{{ formatAmount(rowData.required) }}
@@ -214,7 +247,7 @@
 						</XNDataTableColumn>
 						<XNDataTableColumn
 							key="unitCost"
-							title="Cost / Unit"
+							:title="t('hq_upgrade_calculator.table.cost_unit')"
 							sorter="default">
 							<template #render-cell="{ rowData }">
 								{{ formatNumber(rowData.unitCost) }}
@@ -225,7 +258,7 @@
 						</XNDataTableColumn>
 						<XNDataTableColumn
 							key="totalCost"
-							title="Total Cost"
+							:title="t('hq_upgrade_calculator.table.cost_total')"
 							sorter="default">
 							<template #render-cell="{ rowData }">
 								{{ formatNumber(rowData.totalCost) }}
@@ -237,7 +270,11 @@
 						<XNDataTableColumn
 							v-if="selectedShowLocations"
 							key="storageLocations"
-							title="Storage Locations"
+							:title="
+								t(
+									'hq_upgrade_calculator.table.storage_locations'
+								)
+							"
 							:width="'25%'">
 							<template #render-cell="{ rowData }">
 								{{

From 4ff9e1b313f324cf979c73a25d26f15cd7a06b3b Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Wed, 6 May 2026 16:55:30 +0200
Subject: [PATCH 2/3] improve(i18n): localize production chains

---
 .../components/GraphAnalysisExpertise.vue     | 23 ++++++--
 .../components/GraphAnalysisMaterials.vue     | 18 +++++-
 .../components/GraphAnalysisWorkforce.vue     | 20 ++++++-
 src/locales/en_US/production_chains.json      | 35 +++++++++++
 src/views/tools/ProductionChainView.vue       | 58 ++++++++++++++-----
 5 files changed, 129 insertions(+), 25 deletions(-)
 create mode 100644 src/locales/en_US/production_chains.json

diff --git a/src/features/production_chain/components/GraphAnalysisExpertise.vue b/src/features/production_chain/components/GraphAnalysisExpertise.vue
index d750b1a8..44056cab 100644
--- a/src/features/production_chain/components/GraphAnalysisExpertise.vue
+++ b/src/features/production_chain/components/GraphAnalysisExpertise.vue
@@ -22,13 +22,27 @@
 </script>
 
 <template>
-	<h3 class="font-bold pb-3">Building Expertises</h3>
+	<h3 class="font-bold pb-3">
+		{{ $t("production_chains.analysis_expertise.title") }}
+	</h3>
 
 	<PTable striped>
 		<thead>
 			<tr>
-				<th>Expertise</th>
-				<th class="text-end!">Materials</th>
+				<th>
+					{{
+						$t(
+							"production_chains.analysis_expertise.table.expertise"
+						)
+					}}
+				</th>
+				<th class="text-end!">
+					{{
+						$t(
+							"production_chains.analysis_expertise.table.materials"
+						)
+					}}
+				</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -39,8 +53,7 @@
 					<span
 						class="py-1 px-2"
 						:style="`background-color:
-											${EXPERTISECOLORS[expertise as
-											BUILDING_EXPERTISE_TYPE]};`">
+											${EXPERTISECOLORS[expertise as BUILDING_EXPERTISE_TYPE]};`">
 						{{ capitalizeString(expertise) }}
 					</span>
 				</td>
diff --git a/src/features/production_chain/components/GraphAnalysisMaterials.vue b/src/features/production_chain/components/GraphAnalysisMaterials.vue
index dae0a3df..e8cea2eb 100644
--- a/src/features/production_chain/components/GraphAnalysisMaterials.vue
+++ b/src/features/production_chain/components/GraphAnalysisMaterials.vue
@@ -23,12 +23,24 @@
 </script>
 
 <template>
-	<h3 class="font-bold py-3">Materials</h3>
+	<h3 class="font-bold py-3">
+		{{ $t("production_chains.analysis_materials.title") }}
+	</h3>
 	<PTable striped>
 		<thead>
 			<tr>
-				<th>Material</th>
-				<th>Amount</th>
+				<th>
+					{{
+						$t(
+							"production_chains.analysis_materials.table.material"
+						)
+					}}
+				</th>
+				<th>
+					{{
+						$t("production_chains.analysis_materials.table.amount")
+					}}
+				</th>
 			</tr>
 		</thead>
 		<tbody>
diff --git a/src/features/production_chain/components/GraphAnalysisWorkforce.vue b/src/features/production_chain/components/GraphAnalysisWorkforce.vue
index 812356ad..5c66c6db 100644
--- a/src/features/production_chain/components/GraphAnalysisWorkforce.vue
+++ b/src/features/production_chain/components/GraphAnalysisWorkforce.vue
@@ -21,12 +21,26 @@
 </script>
 
 <template>
-	<h3 class="font-bold py-3">Workforce</h3>
+	<h3 class="font-bold py-3">
+		{{ $t("production_chains.analysis_workforce.title") }}
+	</h3>
 	<PTable striped>
 		<thead>
 			<tr>
-				<th>Workforce</th>
-				<th class="text-end!">Required</th>
+				<th>
+					{{
+						$t(
+							"production_chains.analysis_workforce.table.workforce"
+						)
+					}}
+				</th>
+				<th class="text-end!">
+					{{
+						$t(
+							"production_chains.analysis_workforce.table.required"
+						)
+					}}
+				</th>
 			</tr>
 		</thead>
 		<tbody>
diff --git a/src/locales/en_US/production_chains.json b/src/locales/en_US/production_chains.json
new file mode 100644
index 00000000..fdcac235
--- /dev/null
+++ b/src/locales/en_US/production_chains.json
@@ -0,0 +1,35 @@
+{
+	"view_title": "Production Chains",
+	"title": "Production Chains",
+	"configuration": {
+		"title": "Configuration",
+		"material": "@:terms.materials",
+		"recipe_runs": "Recipe Runs",
+		"node_color": "Node Color",
+		"terminals": "Terminals",
+		"terminals_placeholder": "Comma-separated material tickers",
+		"terminals_info": "Terminals are materials whose inputs are excluded from the graph, useful if you buy them on the CX or locally and don't need to produce them.",
+		"recipe_selection": "Recipe Selection"
+	},
+	"analysis_materials": {
+		"title": "Materials",
+		"table": {
+			"material": "@:terms.materials",
+			"amount": "@:terms.amount"
+		}
+	},
+	"analysis_expertise": {
+		"title": "Building Expertises",
+		"table": {
+			"expertise": "Expertise",
+			"materials": "@:terms.materials_plural"
+		}
+	},
+	"analysis_workforce": {
+		"title": "Workforce",
+		"table": {
+			"workforce": "Workforce",
+			"required": "Required"
+		}
+	}
+}
diff --git a/src/views/tools/ProductionChainView.vue b/src/views/tools/ProductionChainView.vue
index 40d9b5fa..cb82c56a 100644
--- a/src/views/tools/ProductionChainView.vue
+++ b/src/views/tools/ProductionChainView.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 	import { onMounted, ref, Ref } from "vue";
 
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
 	// Unhead
 	import { useHead } from "@unhead/vue";
 	useHead({
-		title: "Production Chain | PRUNplanner",
+		title: `${t("production_chains.view_title")} | PRUNplanner`,
 	});
 
 	// Components
@@ -79,15 +82,22 @@
 		<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 my-auto">Production Chains</h1>
+				<h1 class="text-2xl font-bold my-auto">
+					{{ $t("production_chains.title") }}
+				</h1>
 				<HelpDrawer file-name="tools_production_chain" />
 			</div>
 			<div
 				class="grow grid grid-cols-1 xl:grid-cols-[400px_auto_300px] gap-3 divide-x divide-white/10">
 				<div class="px-6 py-3">
-					<h3 class="font-bold pb-3">Configuration</h3>
+					<h3 class="font-bold pb-3">
+						{{ $t("production_chains.configuration.title") }}
+					</h3>
 					<PForm>
-						<PFormItem label="Material">
+						<PFormItem
+							:label="
+								t('production_chains.configuration.material')
+							">
 							<PSelect
 								v-model:value="selectedMaterial"
 								:options="materialSelectOptions"
@@ -95,7 +105,10 @@
 								class="w-full"
 								@update:value="generate(true)" />
 						</PFormItem>
-						<PFormItem label="Recipe Runs">
+						<PFormItem
+							:label="
+								t('production_chains.configuration.recipe_runs')
+							">
 							<PInputNumber
 								v-model:value="selectedAmount"
 								:min="1"
@@ -103,7 +116,10 @@
 								class="w-full"
 								@update:value="generate()" />
 						</PFormItem>
-						<PFormItem label="Node Color">
+						<PFormItem
+							:label="
+								t('production_chains.configuration.node_color')
+							">
 							<PSelect
 								v-model:value="selectedNodeColorType"
 								:options="NodeColorTypeOptions"
@@ -111,24 +127,38 @@
 								class="w-full"
 								@update:value="generate(true)" />
 						</PFormItem>
-						<PFormItem label="Terminals">
+						<PFormItem
+							:label="
+								t('production_chains.configuration.terminals')
+							">
 							<PInput
 								v-model:value="selectedTerminals"
-								placeholder="Comma-separated Material Tickers"
+								:placeholder="
+									t(
+										'production_chains.configuration.terminals_placeholder'
+									)
+								"
 								class="w-full"
 								@update:value="generate()" />
 						</PFormItem>
 						<PFormSeperator>
-							<div class="text-xs text-white/60!">
-								Terminals are materials whose inputs are
-								excluded from the graph, useful if you buy them
-								on the CX or locally and don't need to produce
-								them.
+							<div class="text-xs text-white/60 pt-1">
+								{{
+									$t(
+										"production_chains.configuration.terminals_info"
+									)
+								}}
 							</div>
 						</PFormSeperator>
 					</PForm>
 					<template v-if="graphData">
-						<h3 class="font-bold py-3">Recipe Selection</h3>
+						<h3 class="font-bold py-3">
+							{{
+								$t(
+									"production_chains.configuration.recipe_selection"
+								)
+							}}
+						</h3>
 						<PForm>
 							<template
 								v-for="[building, options] in Object.entries(

From bacc1c8c4e2d7d7d0a69295fd109fb0b0ebb4b3d Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Wed, 6 May 2026 17:03:31 +0200
Subject: [PATCH 3/3] improve(i18n): localize upkeep price calculator

---
 .../components/UpkeepPriceCalculator.vue      | 56 +++++++++++++------
 src/locales/en_US/game.json                   |  7 +++
 .../en_US/upkeep_price_calculator.json        | 27 +++++++++
 src/views/tools/UpkeepPriceCalculatorView.vue | 23 +++++---
 4 files changed, 88 insertions(+), 25 deletions(-)
 create mode 100644 src/locales/en_US/upkeep_price_calculator.json

diff --git a/src/features/government/components/UpkeepPriceCalculator.vue b/src/features/government/components/UpkeepPriceCalculator.vue
index aa748104..f47bd068 100644
--- a/src/features/government/components/UpkeepPriceCalculator.vue
+++ b/src/features/government/components/UpkeepPriceCalculator.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 	import { ComputedRef, Ref, computed, ref, watch } from "vue";
 
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
 	// Composables
 	import { useUpkeepBuildings } from "@/features/government/composables/useUpkeepBuildings";
 	import { useUpkeepPriceCalculator } from "@/features/government/composables/useUpkeepPriceCalculator";
 
 	// Util
 	import { formatNumber } from "@/util/numbers";
-	import { capitalizeString } from "@/util/text";
 
 	// Components
 	import MaterialTile from "@/features/material_tile/components/MaterialTile.vue";
@@ -82,7 +84,7 @@
 		<div class="text-center w-100 py-3">
 			<PProgressBar :step="1" :total="2" />
 			<div class="pt-3 text-xs text-white/60">
-				Calculating Upkeep Material Prices
+				{{ $t("upkeep_price_calculator.calculator.calculating") }}
 			</div>
 		</div>
 	</div>
@@ -97,7 +99,11 @@
 						selectedNeedType === needType ? 'primary' : 'secondary'
 					"
 					@click="selectedNeedType = needType">
-					{{ capitalizeString(needType) }}
+					{{
+						$t(
+							`upkeep_price_calculator.calculator.needs.${needType}`
+						)
+					}}
 				</PButton>
 			</PButtonGroup>
 		</div>
@@ -105,7 +111,7 @@
 		<!-- Material Details Section -->
 		<div>
 			<h3 class="text-sm font-semibold text-white/80 mb-3">
-				Material Details
+				{{ $t("upkeep_price_calculator.calculator.details.title") }}
 			</h3>
 			<XNDataTable
 				:data="currentResults"
@@ -113,7 +119,11 @@
 				:pagination="{ pageSize: 50 }">
 				<XNDataTableColumn
 					key="ticker"
-					title="Material"
+					:title="
+						t(
+							'upkeep_price_calculator.calculator.details.table.material'
+						)
+					"
 					sorter="default">
 					<template #render-cell="{ rowData }">
 						<MaterialTile
@@ -123,7 +133,11 @@
 				</XNDataTableColumn>
 				<XNDataTableColumn
 					key="buildingTicker"
-					title="Building"
+					:title="
+						t(
+							'upkeep_price_calculator.calculator.details.table.building'
+						)
+					"
 					sorter="default">
 					<template #render-cell="{ rowData }">
 						<span class="font-bold">{{
@@ -133,11 +147,13 @@
 				</XNDataTableColumn>
 				<XNDataTableColumn
 					key="pricePerNeed"
-					title="ȼ/Need"
+					:title="
+						t(
+							'upkeep_price_calculator.calculator.details.table.price_need'
+						)
+					"
+					title-align="right"
 					sorter="default">
-					<template #title>
-						<div class="text-end">ȼ/Need</div>
-					</template>
 					<template #render-cell="{ rowData }">
 						<div
 							class="text-end text-nowrap"
@@ -153,11 +169,13 @@
 				</XNDataTableColumn>
 				<XNDataTableColumn
 					key="cxPrice"
-					title="CX Price"
+					:title="
+						t(
+							'upkeep_price_calculator.calculator.details.table.cx_price'
+						)
+					"
+					title-align="right"
 					sorter="default">
-					<template #title>
-						<div class="text-end">CX Price</div>
-					</template>
 					<template #render-cell="{ rowData }">
 						<div
 							class="text-end text-nowrap"
@@ -177,11 +195,13 @@
 
 				<XNDataTableColumn
 					key="qtyPerDay"
-					title="Qty/Day"
+					:title="
+						t(
+							'upkeep_price_calculator.calculator.details.table.qty_day'
+						)
+					"
+					title-align="right"
 					sorter="default">
-					<template #title>
-						<div class="text-end">Qty/Day</div>
-					</template>
 					<template #render-cell="{ rowData }">
 						<div class="text-end text-nowrap">
 							{{ formatNumber(rowData.qtyPerDay, 2) }}
diff --git a/src/locales/en_US/game.json b/src/locales/en_US/game.json
index 89f28c1b..8351bc83 100644
--- a/src/locales/en_US/game.json
+++ b/src/locales/en_US/game.json
@@ -50,5 +50,12 @@
 		"WORKFORCE_TECHNICIANS": "TEC",
 		"WORKFORCE_ENGINEERS": "ENG",
 		"WORKFORCE_SCIENTISTS": "SCI"
+	},
+	"upkeep": {
+		"safety": "Safety",
+		"health": "Health",
+		"comfort": "Comfort",
+		"culture": "Culture",
+		"education": "Education"
 	}
 }
diff --git a/src/locales/en_US/upkeep_price_calculator.json b/src/locales/en_US/upkeep_price_calculator.json
new file mode 100644
index 00000000..1b873678
--- /dev/null
+++ b/src/locales/en_US/upkeep_price_calculator.json
@@ -0,0 +1,27 @@
+{
+	"view_title": "Upkeep Price Calculator",
+	"title": "Upkeep Price Calculator",
+	"form": {
+		"cx_preference": "CX Preference"
+	},
+	"calculator": {
+		"calculating": "Calculating Upkeep Material Prices",
+		"needs": {
+			"safety": "@:game.upkeep.safety",
+			"health": "@:game.upkeep.health",
+			"comfort": "@:game.upkeep.comfort",
+			"culture": "@:game.upkeep.culture",
+			"education": "@:game.upkeep.education"
+		},
+		"details": {
+			"title": "Material Details",
+			"table": {
+				"material": "@:terms.materials",
+				"building": "@:terms.buildings",
+				"price_need": "ȼ/Need",
+				"cx_price": "@:terms.cx Price",
+				"qty_day": "Qty/Day"
+			}
+		}
+	}
+}
diff --git a/src/views/tools/UpkeepPriceCalculatorView.vue b/src/views/tools/UpkeepPriceCalculatorView.vue
index b44953a8..6d23f3ce 100644
--- a/src/views/tools/UpkeepPriceCalculatorView.vue
+++ b/src/views/tools/UpkeepPriceCalculatorView.vue
@@ -1,6 +1,13 @@
 <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("upkeep_price_calculator.view_title")} | PRUNplanner`,
+	});
 
 	// Components
 	import WrapperGameDataLoader from "@/features/wrapper/components/WrapperGameDataLoader.vue";
@@ -9,10 +16,6 @@
 	import CXPreferenceSelector from "@/features/exchanges/components/CXPreferenceSelector.vue";
 	import UpkeepPriceCalculator from "@/features/government/components/UpkeepPriceCalculator.vue";
 
-	useHead({
-		title: "Upkeep Price Calculator | PRUNplanner",
-	});
-
 	// UI
 	import { PForm, PFormItem } from "@/ui";
 
@@ -31,11 +34,16 @@
 					<div
 						class="px-6 py-3 border-b border-white/10 flex flex-row justify-between">
 						<h1 class="text-2xl font-bold my-auto">
-							Upkeep Price Calculator
+							{{ $t("upkeep_price_calculator.title") }}
 						</h1>
 						<div class="flex flex-row gap-x-3">
 							<PForm>
-								<PFormItem label="CX Preference">
+								<PFormItem
+									:label="
+										t(
+											'upkeep_price_calculator.form.cx_preference'
+										)
+									">
 									<CXPreferenceSelector
 										:cx-uuid="refSelectedCXUuid"
 										@update:cxuuid="
@@ -44,7 +52,8 @@
 										" />
 								</PFormItem>
 							</PForm>
-							<HelpDrawer file-name="tools_upkeep_price_calculator" />
+							<HelpDrawer
+								file-name="tools_upkeep_price_calculator" />
 						</div>
 					</div>