Index: binaries/data/mods/public/gui/common/tooltips.js
===================================================================
--- binaries/data/mods/public/gui/common/tooltips.js
+++ binaries/data/mods/public/gui/common/tooltips.js
@@ -2,7 +2,10 @@
 	"unit": ['[font="sans-10"][color="orange"]', '[/color][/font]'],
 	"header": ['[font="sans-bold-13"]', '[/font]'],
 	"body": ['[font="sans-13"]', '[/font]'],
-	"comma": ['[font="sans-12"]', '[/font]']
+	"comma": ['[font="sans-12"]', '[/font]'],
+	"entityNameSpecificBig": ['[font="sans-bold-16"]', '[/font]'],
+	"entityNameSpecificSmall": ['[font="sans-bold-12"]', '[/font]'],
+	"entityNameGeneric": ['[font="sans-bold-16"]', '[/font]']
 };
 
 var g_AttackTypes = {
@@ -110,6 +113,10 @@
 	});
 }
 
+/**
+ * XML-based templates have a `Tooltip` tag.
+ * (The contents of which are copied to a `tooltip` attribute in globalscripts.)
+ */
 function getEntityTooltip(template)
 {
 	if (!template.tooltip)
@@ -118,6 +125,30 @@
 	return bodyFont(template.tooltip);
 }
 
+/**
+ * Technologies have a `description` attribute, and Auras have an `auraDescription`
+ * attribute, which becomes `description` during the loading/parsing process.
+ */
+function getDescriptionTooltip(template)
+{
+	if (!template.description)
+		return "";
+
+	return bodyFont(template.description);
+}
+
+/**
+ * XML-based templates have a `History` tag.
+ * (The contents of which are copied to a `history` attribute in globalscripts.)
+ */
+function getHistoryTooltip(template)
+{
+	if (!template.history)
+		return "";
+
+	return bodyFont(template.history);
+}
+
 function getHealthTooltip(template)
 {
 	if (!template.health)
@@ -553,7 +584,15 @@
 	}
 
 	if (template.cost)
-		return getEntityCostComponentsTooltipString(template, entity, buildingsCountToTrainFullBatch, fullBatchSize, remainderBatch).join("  ");
+	{
+		let costs = getEntityCostComponentsTooltipString(template, entity, buildingsCountToTrainFullBatch, fullBatchSize, remainderBatch).join("  ");
+		if (costs)
+			// Translation: Label in tooltip showing cost of a unit, structure or technology.
+			return sprintf(translate("%(label)s %(costs)s"), {
+				"label": headerFont(translate("Cost:")),
+				"costs": costs
+			});
+	}
 
 	return "";
 }
@@ -568,6 +607,25 @@
 	});
 }
 
+/**
+ * Returns the resources this entity supplies in the specified entity's tooltip
+ */
+function getResourceSupplyTooltip(template)
+{
+	if (!template.supply)
+		return "";
+
+	let supply = template.supply;
+	let type = supply.type[0] == "treasure" ? supply.type[1] : supply.type[0];
+
+	// Translation: Label in tooltip showing the resource type and quantity of a given resource supply.
+	return sprintf(translate("%(label)s %(component)s %(amount)s"), {
+		"label": headerFont(translate("Resource Supply:")),
+		"component": resourceIcon(type),
+		"amount": Number.isFinite(+supply.amount) ? supply.amount : translate("∞")
+	});
+}
+
 /**
  * Returns the population bonus information to display in the specified entity's construction button tooltip.
  */
@@ -702,16 +760,16 @@
 function getEntityNamesFormatted(template)
 {
 	if (!template.name.specific)
-		return '[font="sans-bold-16"]' + template.name.generic + "[/font]";
+		return g_TooltipTextFormats.entityNameSpecificBig[0] + template.name.generic + g_TooltipTextFormats.entityNameSpecificBig[1];
 
 	// Translation: Example: "Epibátēs Athēnaîos [font="sans-bold-16"](Athenian Marine)[/font]"
 	return sprintf(translate("%(specificName)s %(fontStart)s(%(genericName)s)%(fontEnd)s"), {
 		"specificName":
-			'[font="sans-bold-16"]' + template.name.specific[0] + '[/font]' +
-			'[font="sans-bold-12"]' + template.name.specific.slice(1).toUpperCase() + '[/font]',
+			g_TooltipTextFormats.entityNameSpecificBig[0] + template.name.specific[0] + g_TooltipTextFormats.entityNameSpecificBig[1] +
+			g_TooltipTextFormats.entityNameSpecificSmall[0] + template.name.specific.slice(1).toUpperCase() + g_TooltipTextFormats.entityNameSpecificSmall[1],
 		"genericName": template.name.generic,
-		"fontStart": '[font="sans-bold-16"]',
-		"fontEnd": '[/font]'
+		"fontStart": g_TooltipTextFormats.entityNameGeneric[0],
+		"fontEnd": g_TooltipTextFormats.entityNameGeneric[1]
 	});
 }
 
@@ -761,3 +819,16 @@
 		"details": lootLabels.join("  ")
 	});
 }
+
+/**
+ * @param {boolean} rightClickOnly
+ */
+function templateViewerOnClickMessage(rightClickOnly)
+{
+	if (rightClickOnly)
+		// Translation: Appears in a tooltip to indicate that right-clicking the corresponding GUI element will open the Template Details GUI page.
+		return translate("Right-click to view more information.");
+
+	// Translation: Appears in a tooltip to indicate that clicking the corresponding GUI element will open the Template Details GUI page.
+	return translate("Click to view more information.");
+}
Index: binaries/data/mods/public/gui/page_viewer.xml
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/page_viewer.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<page>
+	<include>common/modern/setup.xml</include>
+	<include>common/modern/styles.xml</include>
+	<include>common/modern/sprites.xml</include>
+
+	<include>common/setup_resources.xml</include>
+	<include>common/sprites.xml</include>
+	<include>common/styles.xml</include>
+
+	<include>reference/common/sprites.xml</include>
+	<include>reference/common/styles.xml</include>
+
+	<include>reference/viewer/styles.xml</include>
+	<include>reference/viewer/sprites.xml</include>
+	<include>reference/viewer/viewer.xml</include>
+
+	<include>reference/common/setup.xml</include>
+</page>
Index: binaries/data/mods/public/gui/reference/common/core.js
===================================================================
--- binaries/data/mods/public/gui/reference/common/core.js
+++ binaries/data/mods/public/gui/reference/common/core.js
@@ -1,4 +1,4 @@
-var g_SelectedCiv = "";
+var g_SelectedCiv = "gaia";
 var g_CallbackSet = false;
 
 function closePage()
@@ -95,6 +95,11 @@
 		return {};
 	let template = loadTemplate(templateName);
 
+	// If this is a non-promotion variant (ie. {civ}_support_female_citizen_house)
+	// then it is functionally equivalent to another unit being processed, so skip it.
+	if (getBaseTemplateName(templateName) != templateName)
+		return {};
+
 	let templateLists = {
 		"structures": [],
 		"units": [],
@@ -151,8 +156,15 @@
 			for (let build of template.ProductionQueue.Entities._string.split(" "))
 			{
 				build = build.replace("{civ}", g_SelectedCiv);
-				if (Engine.TemplateExists(build) && templateLists.units.indexOf(build) === -1)
-					templateLists.units.push(build);
+				if (Engine.TemplateExists(build))
+				{
+					if (templateLists.units.indexOf(build) == -1)
+						templateLists.units.push(build);
+
+					let baseBuild = getBaseTemplateName(build);
+					if (baseBuild != build && templateLists.units.indexOf(baseBuild) == -1)
+						templateLists.units.push(baseBuild);
+				}
 			}
 
 		if (template.ProductionQueue.Technologies && template.ProductionQueue.Technologies._string)
@@ -174,3 +186,64 @@
 
 	return templateLists;
 }
+
+/**
+ * Returns the name of a template's base (as dictated by the selection
+ * group name), or the template's own name if the template is its own base.
+ *
+ * We have entities, such as the female-citizen and some champions, that
+ * can be trained initially in certain structures (civic centre, fortress)
+ * and then, once a given technology has been researched, in further
+ * structures (houses, barracks, ships). In this case, a `*_house`,
+ * `*_barracks`, `*_trireme`, or other `{original}_{*}` variant is used
+ * which is functionally identical to the original it is based on, but
+ * with a different technology requirement.
+ *
+ * We don't test for differing tech-requirements so as to support other
+ * potential variant types, such as a unit having a different cost
+ * depending on where it is trained (although admittedly there are other
+ * ways of achieving that without using a different template file).
+ *
+ * The exception to this is that we don't return a base that is of a
+ * different promotion rank to the provided template.
+ *
+ * @param {string} templateName
+ * @return {string} The base template name.
+ */
+function getBaseTemplateName(templateName)
+{
+	if (!templateName || !Engine.TemplateExists(templateName))
+		return undefined;
+
+	let template = loadTemplate(templateName);
+	if (!template.Identity || !template.Identity.SelectionGroupName ||
+		templateName == template.Identity.SelectionGroupName)
+		return templateName;
+
+	let selectionName = template.Identity.SelectionGroupName;
+	if (!template.Identity.Rank)
+		return selectionName;
+
+	let selectionTemplate = loadTemplate(selectionName);
+	if (!selectionTemplate.Identity || !selectionTemplate.Identity.Rank ||
+		selectionTemplate.Identity.Rank == template.Identity.Rank)
+		return selectionName;
+
+	return templateName;
+}
+
+/**
+ * @param {string} objectName
+ * @param {string} templateName
+ */
+function setViewerOnPress(objectName, templateName)
+{
+	let viewerFunc = () => {
+		Engine.PushGuiPage("page_viewer.xml", {
+			"templateName": templateName,
+			"civ": g_SelectedCiv,
+		});
+	};
+	Engine.GetGUIObjectByName(objectName).onPress = viewerFunc;
+	Engine.GetGUIObjectByName(objectName).onPressRight = viewerFunc;
+}
Index: binaries/data/mods/public/gui/reference/common/draw.js
===================================================================
--- binaries/data/mods/public/gui/reference/common/draw.js
+++ binaries/data/mods/public/gui/reference/common/draw.js
@@ -4,13 +4,12 @@
 var g_DrawLimits = {};
 
 /**
- * These functions are defined in gui/common/tooltips.js
+ * List of functions that get the statistics of any template or entity,
+ * formatted in such a way as to appear in a tooltip.
+ *
+ * The functions listed are defined in gui/common/tooltips.js
  */
-var g_TooltipFunctions = [
-	getEntityNamesFormatted,
-	getEntityCostTooltip,
-	getEntityTooltip,
-	getAurasTooltip,
+var g_StatsFunctions = [
 	getHealthTooltip,
 	getHealerTooltip,
 	getAttackTooltip,
@@ -20,6 +19,7 @@
 	getProjectilesTooltip,
 	getSpeedTooltip,
 	getGatherTooltip,
+	getResourceSupplyTooltip,
 	getPopulationBonusTooltip,
 	getResourceTrickleTooltip,
 	getLootTooltip
Index: binaries/data/mods/public/gui/reference/common/helper.js
===================================================================
--- binaries/data/mods/public/gui/reference/common/helper.js
+++ binaries/data/mods/public/gui/reference/common/helper.js
@@ -24,6 +24,7 @@
 		upgrade.entity = upgrade.entity.replace("{civ}", g_SelectedCiv);
 
 		let data = GetTemplateDataHelper(loadTemplate(upgrade.entity), null, g_AuraData, g_ResourceData, g_DamageTypes);
+		data.name.internal = upgrade.entity;
 		data.cost = upgrade.cost;
 		data.icon = upgrade.icon || data.icon;
 		data.tooltip = upgrade.tooltip || data.tooltip;
Index: binaries/data/mods/public/gui/reference/common/load.js
===================================================================
--- binaries/data/mods/public/gui/reference/common/load.js
+++ binaries/data/mods/public/gui/reference/common/load.js
@@ -36,12 +36,16 @@
 	{
 		// We need to clone the template because we want to perform some translations.
 		let data = clone(Engine.GetTemplate(templateName));
-		translateObjectKeys(data, ["GenericName", "SpecificName", "Tooltip"]);
+		translateObjectKeys(data, ["GenericName", "SpecificName", "Tooltip", "History"]);
 
 		if (data.Auras)
 			for (let auraID of data.Auras._string.split(/\s+/))
 				loadAuraData(auraID);
 
+		if (data.Identity.Civ != "gaia" && g_SelectedCiv != "gaia" && data.Identity.Civ != g_SelectedCiv)
+			warn("The \"" + templateName + "\" template has a defined civ of \"" + data.Identity.Civ + "\". " +
+				"This does not match the currently selected civ \"" + g_SelectedCiv + "\".");
+
 		g_TemplateData[templateName] = data;
 	}
 
@@ -61,7 +65,7 @@
 	if (!(templateName in g_TechnologyData))
 	{
 		let data = Engine.ReadJSONFile(g_TechnologyPath + templateName + ".json");
-		translateObjectKeys(data, ["genericName", "tooltip"]);
+		translateObjectKeys(data, ["genericName", "tooltip", "description"]);
 
 		g_TechnologyData[templateName] = data;
 	}
@@ -103,6 +107,9 @@
 
 	let template = loadTemplate(templateName);
 	let unit = GetTemplateDataHelper(template, null, g_AuraData, g_ResourceData, g_DamageTypes, g_CurrentModifiers);
+	unit.name.internal = templateName;
+
+	unit.history = template.Identity.History;
 
 	if (template.ProductionQueue)
 	{
@@ -129,6 +136,12 @@
 		}
 	}
 
+	if (template.Identity.Rank)
+		unit.promotion = {
+			"current_rank": template.Identity.Rank,
+			"entity": template.Promotion && template.Promotion.Entity
+		};
+
 	if (template.Builder && template.Builder.Entities._string)
 	{
 		unit.builder = [];
@@ -143,6 +156,12 @@
 	if (unit.upgrades)
 		unit.upgrades = getActualUpgradeData(unit.upgrades);
 
+	if (template.ResourceSupply)
+		unit.supply = {
+			"type": template.ResourceSupply.Type.split("."),
+			"amount": template.ResourceSupply.Amount,
+		};
+
 	return unit;
 }
 
@@ -159,6 +178,9 @@
 
 	let template = loadTemplate(templateName);
 	let structure = GetTemplateDataHelper(template, null, g_AuraData, g_ResourceData, g_DamageTypes, g_CurrentModifiers);
+	structure.name.internal = templateName;
+
+	structure.history = template.Identity.History;
 
 	structure.production = {
 		"technology": [],
@@ -237,9 +259,31 @@
 			});
 	}
 
+	if (template.ResourceSupply)
+		structure.supply = {
+			"type": template.ResourceSupply.Type.split("."),
+			"amount": template.ResourceSupply.Amount,
+		};
+
 	return structure;
 }
 
+function loadResource(templateName)
+{
+	let template = loadTemplate(templateName);
+	let resource = GetTemplateDataHelper(template);
+	resource.name.internal = templateName;
+
+	resource.history = template.Identity.History;
+
+	resource.supply = {
+		"type": template.ResourceSupply.Type.split("."),
+		"amount": template.ResourceSupply.Amount,
+	};
+
+	return resource;
+}
+
 /**
  * Load and parse technology from json template.
  *
@@ -250,6 +294,7 @@
 {
 	let template = loadTechData(techName);
 	let tech = GetTechnologyDataHelper(template, g_SelectedCiv, g_ResourceData);
+	tech.name.internal = "tech/" + techName;
 
 	if (template.pair !== undefined)
 	{
Index: binaries/data/mods/public/gui/reference/structree/draw.js
===================================================================
--- binaries/data/mods/public/gui/reference/structree/draw.js
+++ binaries/data/mods/public/gui/reference/structree/draw.js
@@ -1,3 +1,13 @@
+/**
+ * Functions used to collate the contents of a tooltip.
+ */
+var g_StructreeTooltipFunctions = [
+	getEntityNamesFormatted,
+	getEntityCostTooltip,
+	getEntityTooltip,
+	getAurasTooltip
+].concat(g_StatsFunctions);
+
 /**
  * Draw the structree
  *
@@ -44,11 +54,12 @@
 				"stretched:session/portraits/"+stru.icon;
 
 			Engine.GetGUIObjectByName("phase["+i+"]_struct["+s+"]_icon").tooltip =
-				buildText(stru, g_TooltipFunctions);
+				compileTooltip(stru);
 
 			Engine.GetGUIObjectByName("phase["+i+"]_struct["+s+"]_name").caption =
 				translate(stru.name.specific);
 
+			setViewerOnPress("phase["+i+"]_struct["+s+"]_icon", stru.name.internal);
 			thisEle.hidden = false;
 
 			for (let r in g_DrawLimits[pha].prodQuant)
@@ -154,8 +165,9 @@
 
 		trainer = g_ParsedData.units[trainer];
 		Engine.GetGUIObjectByName("trainer["+t+"]_icon").sprite = "stretched:session/portraits/"+trainer.icon;
-		Engine.GetGUIObjectByName("trainer["+t+"]_icon").tooltip = buildText(trainer, g_TooltipFunctions);
+		Engine.GetGUIObjectByName("trainer["+t+"]_icon").tooltip = compileTooltip(trainer);
 		Engine.GetGUIObjectByName("trainer["+t+"]_name").caption = translate(trainer.name.specific);
+		setViewerOnPress("trainer["+t+"]_icon", trainer.name.internal);
 		thisEle.hidden = false;
 
 		let p = 0;
@@ -242,11 +254,17 @@
 	}
 
 	prodEle.sprite = "stretched:session/portraits/"+template.icon;
-	prodEle.tooltip = buildText(template, g_TooltipFunctions);
+	prodEle.tooltip = compileTooltip(template);
 	prodEle.hidden = false;
+	setViewerOnPress(prodEle.name, template.name.internal);
 	return true;
 }
 
+function compileTooltip(template)
+{
+	return buildText(template, g_StructreeTooltipFunctions) + "\n" + templateViewerOnClickMessage(false);
+}
+
 /**
  * Calculate row position offset (accounting for different number of prod rows per phase).
  *
Index: binaries/data/mods/public/gui/reference/structree/rows.xml
===================================================================
--- binaries/data/mods/public/gui/reference/structree/rows.xml
+++ binaries/data/mods/public/gui/reference/structree/rows.xml
@@ -6,14 +6,14 @@
 			<repeat count="20" var="s">
 				<object type="image" style="StructBox" name="phase[k]_struct[s]">
 					<object type="text" style="StructNameSpecific" name="phase[k]_struct[s]_name"/>
-					<object type="image" style="StructIcon" name="phase[k]_struct[s]_icon"
+					<object type="button" style="StructIcon" name="phase[k]_struct[s]_icon"
 						sprite="stretched:pregame/shell/logo/wfg_logo_white.png"
 					/>
 					<object name="phase[k]_struct[s]_rows">
 						<repeat count="4" var="r">
 							<object name="phase[k]_struct[s]_row[r]">
 								<repeat count="24" var="p">
-									<object type="image" style="ProdBox" name="phase[k]_struct[s]_row[r]_prod[p]"/>
+									<object type="button" style="ProdBox" name="phase[k]_struct[s]_row[r]_prod[p]"/>
 								</repeat>
 							</object>
 						</repeat>
Index: binaries/data/mods/public/gui/reference/structree/structree.xml
===================================================================
--- binaries/data/mods/public/gui/reference/structree/structree.xml
+++ binaries/data/mods/public/gui/reference/structree/structree.xml
@@ -99,12 +99,12 @@
 				<repeat count="6" var="t">
 					<object type="image" style="StructBox" name="trainer[t]">
 						<object type="text" style="StructNameSpecific" name="trainer[t]_name"/>
-						<object type="image" style="StructIcon" name="trainer[t]_icon"
+						<object type="button" style="StructIcon" name="trainer[t]_icon"
 							sprite="stretched:pregame/shell/logo/wfg_logo_white.png"
 						/>
 						<object name="trainer[t]_row">
 							<repeat count="4" var="p">
-								<object type="image" style="ProdBox" name="trainer[t]_prod[p]"/>
+								<object type="button" style="ProdBox" name="trainer[t]_prod[p]"/>
 							</repeat>
 						</object>
 					</object>
Index: binaries/data/mods/public/gui/reference/viewer/sprites.xml
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/reference/viewer/sprites.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<sprites>
+	<sprite name="IconFrame_Gold">
+		<image
+			border="true"
+			bordercolor="163 163 103"
+			backcolor="0 0 0 0"
+			size="0 0 100% 100%"
+		/>
+		<image
+			border="true"
+			bordercolor="0 0 0"
+			backcolor="0 0 0 0"
+			size="1 1 100%-1 100%-1"
+		/>
+	</sprite>
+</sprites>
Index: binaries/data/mods/public/gui/reference/viewer/styles.xml
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/reference/viewer/styles.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<styles>
+	<style name="IconFrame"
+		sprite="IconFrame_Gold"
+		size="0 0 100% 100%"
+		ghost="true"
+	/>
+
+	<style name="RankGlyph"
+		size="4 6 20 22"
+		ghost="true"
+	/>
+</styles>
Index: binaries/data/mods/public/gui/reference/viewer/viewer.js
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/reference/viewer/viewer.js
@@ -0,0 +1,375 @@
+/**
+ * Holder for the template file being displayed
+ */
+var g_Template = {};
+
+/**
+ * Holder for the template lists generated by compileTemplateLists()
+ */
+var g_TemplateLists = {};
+
+/**
+ * Most templates in simulation/templates/other/ can be safely treated as structures.
+ * The templates with filenames that start with the following are the odd ones out.
+ */
+var g_OtherPathOddities = new Map([
+	["other/special_treasure", "resource"], // Sea-based treasures are in `other/` instead of `gaia/` with the rest of the treasures.
+	["other/catafalque", "unit"] // Catafalques are units.
+]);
+
+/**
+ * List of functions used to display the stats of the template being displayed.
+ * At present, these appear to the right of the icon.
+ */
+let g_StatFunctions = [getEntityCostTooltip].concat(g_StatsFunctions);
+
+/**
+ * List of functions used to display textual information and build/train
+ * lists of the template being displayed.
+ * At present, these are drawn in the main body of the page.
+ */
+var g_InfoFunctions = [
+	getEntityTooltip,
+	getHistoryTooltip,
+	getDescriptionTooltip,
+	getAurasTooltip,
+	getVisibleEntityClassesFormatted,
+	getProducedByList,
+	getBuildList,
+	getTrainList,
+	getResearchList,
+	getUpgradeList
+];
+
+/**
+ * Override style so we can get a bigger specific name.
+ */
+g_TooltipTextFormats.entityNameSpecificBig[0] = '[font="sans-bold-20"]';
+g_TooltipTextFormats.entityNameSpecificSmall[0] = '[font="sans-bold-16"]';
+g_TooltipTextFormats.entityNameGeneric[0] = '[font="sans-bold-16"]';
+
+/**
+ * Page initialisation. May also eventually pre-draw/arrange objects.
+ *
+ * @param {object} data - Contains the civCode and the name of the template to display.
+ * @param {string} data.templateName
+ * @param {string} [data.civ]
+ * @param {string} [data.researcherName] - The template name of the researcher, if
+ *                                         the template we're viewing is a technology.
+ * @param {*} [data.callback] - If set and loosely equivalent to true, a callback is
+ *                              assumed to be setup ready be called by the Engine upon
+ *                              closure of this page.
+ */
+function init(data)
+{
+	if (!data || !data.templateName)
+	{
+		error("Viewer: No template provided");
+		closePage();
+		return;
+	}
+
+	if (data.callback)
+		g_CallbackSet = true;
+
+	let templateName = data.templateName;
+
+	// Attempt to get the civ code from the template, or, if
+	// it's a technology, from the researcher's template.
+	if (getTypeFromName(data.templateName) != "tech")
+	{
+		// Catch and redirect if template is a non-promotion variant of
+		// another (ie. units/{civ}_support_female_citizen_house).
+		templateName = getBaseTemplateName(templateName);
+
+		g_SelectedCiv = loadTemplate(templateName).Identity.Civ;
+	}
+	else if (data.researcherName)
+		g_SelectedCiv = loadTemplate(getBaseTemplateName(data.researcherName)).Identity.Civ;
+
+	if (g_SelectedCiv == "gaia" && data.civ)
+		g_SelectedCiv = data.civ;
+
+	g_TemplateLists = compileTemplateLists(g_SelectedCiv);
+	g_CurrentModifiers = deriveModifications(g_AutoResearchTechList);
+
+	g_Template = loadTemplateFromName(templateName);
+	if (!g_Template)
+	{
+		error("Viewer: unable to recognise or load template (" + templateName + ")");
+		closePage();
+		return;
+	}
+
+	draw();
+}
+
+/**
+ * Populate the UI elements.
+ */
+function draw()
+{
+	let iconObject = Engine.GetGUIObjectByName("entityIcon");
+	Engine.GetGUIObjectByName("entityName").caption = getEntityNamesFormatted(g_Template);
+	iconObject.sprite = "stretched:session/portraits/" + g_Template.icon;
+
+	let statsObject = Engine.GetGUIObjectByName("entityStats");
+	statsObject.caption = buildText(g_Template, g_StatFunctions);
+
+	// This is something of a crude hack. Ideally, it would be better to
+	// acquire the height of the rendered text from the text object, but
+	// that is not currently implemented (needs c++ change).
+	let infoObject = Engine.GetGUIObjectByName("entityInfo");
+	let lines = statsObject.caption.split("\n").length;
+	let fontSize = +statsObject.font.split("-")[1] + 4;
+	let infoSize = infoObject.size;
+	infoSize.top = Math.max(iconObject.size.bottom, lines * fontSize + statsObject.size.top) + 8;
+	infoObject.size = infoSize;
+
+	infoObject.caption = buildText(g_Template, g_InfoFunctions, "\n\n");
+
+	if (g_Template.promotion)
+		Engine.GetGUIObjectByName("entityRankGlyph").sprite = "stretched:" + getRankGlyph(g_Template.promotion.current_rank);
+	Engine.GetGUIObjectByName("entityRankGlyph").hidden = !g_Template.promotion;
+}
+
+/**
+ * Determines the requested template and loads it
+ *
+ * @param {string} templateName - The template name. If loading a technology, then `tech/` must be prefixed.
+ * @return {object} The entity object.
+ */
+function loadTemplateFromName(templateName)
+{
+	if (templateName.indexOf("|") != -1)
+		templateName = templateName.slice(templateName.indexOf("|")+1);
+
+	if (g_ParsedData[templateName])
+		return g_ParsedData[templateName];
+
+	let template;
+	switch (getTypeFromName(templateName))
+	{
+	case "structure":
+		template = loadStructure(templateName);
+		break;
+
+	case "unit":
+		template = loadUnit(templateName);
+		break;
+
+	case "resource":
+		template = loadResource(templateName);
+		break;
+
+	case "tech":
+		template = loadTechnology(templateName.substr(templateName.indexOf("/")+1));
+		break;
+
+	default:
+		// Do nothing (error message is given elsewhere).
+	}
+
+	g_ParsedData[templateName] = template;
+
+	return template;
+}
+
+/**
+ * Returns the type of entity created from the provided template.
+ *
+ * This used by loadTemplateFromName() to know which load function to use,
+ * and used by getProducedByList() to pick a suitable label.
+ *
+ * @param {string} templateName
+ * @return {(string|false)} Entity type; "structure", "unit", etc.
+ */
+function getTypeFromName(templateName)
+{
+	if (templateName.indexOf("|") != -1)
+		templateName = templateName.slice(templateName.indexOf("|")+1);
+	let prefix = templateName.slice(0, templateName.indexOf("/"));
+
+	if (prefix == "other")
+	{
+		for (let [pathStart, type] of g_OtherPathOddities)
+			if (templateName.startsWith(pathStart))
+				return type;
+
+		return "structure";
+	}
+
+	let dict = {
+		"structures": "structure",
+		"units": "unit",
+		"gaia": "resource",
+		"tech": "tech"
+	};
+
+	return dict[prefix] || false;
+}
+
+/**
+ * @param {object} template
+ * @return {string} List of the names of all the buildings/units that build/train/research the selected template.
+ */
+function getProducedByList(template)
+{
+	if (g_SelectedCiv == "gaia")
+		return "";
+
+	let builders = [];
+	let buildCaption = "";
+	switch (getTypeFromName(template.name.internal))
+	{
+
+	case "structure":
+		if (!g_TemplateLists.structures.has(template.name.internal))
+			// Wall towers and gates are not built directly by anything,
+			// thus they won't exist in the data store.
+			return "";
+		builders = g_TemplateLists.structures.get(template.name.internal).filter(name => !name.startsWith("structures/"));
+		// Translation: Label before a list of the names of units that build the structure selected.
+		buildCaption = translate("Built by:");
+		break;
+
+	case "unit":
+		builders = g_TemplateLists.units.get(template.name.internal);
+		// Translation: Label before a list of the names of structures or units that train the unit selected.
+		buildCaption = translate("Trained at:");
+		break;
+
+	case "tech":
+	{
+		let templateName = template.name.internal;
+		builders = g_TemplateLists.techs.get(templateName.substr(templateName.indexOf("/")+1));
+		// Translation: Label before a list of names of stuctures or units that research the technology selected.
+		buildCaption = translate("Researched at:");
+		break;
+	}
+
+	default:
+		return "";
+
+	}
+
+	// Some templates cannot be built or trained directly (upgrades) or at all (catafalques).
+	if (!builders || builders.length == 0)
+		return "";
+
+	let builderText = builders.map(builder => getEntityNames(loadTemplateFromName(builder)));
+
+	// Translation: Label followed by a list of unit/structure names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		"listHeader": headerFont(buildCaption),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builderText.join(translate(", ")))
+	});
+}
+
+/**
+ * @param {object} template
+ * @return {string} List of the names of the buildings the selected unit can build.
+ */
+function getBuildList(template)
+{
+	if (!template.builder || !template.builder.length)
+		return "";
+
+	let builds = template.builder.map(prod => getEntityNames(loadStructure(prod)));
+
+	// Translation: Label followed by a list of unit or structure names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		// Translation: Label before a list of the names of structures the selected unit can construct or build.
+		"listHeader": headerFont(translate("Builds:")),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builds.join(translate(", ")))
+	});
+}
+
+/**
+ * @param {object} template
+ * @return {string} List of the names of the technologies the selected structure/unit can research.
+ */
+function getResearchList(template)
+{
+	if (!template.production || !template.production.technology || !template.production.technology.length)
+		return "";
+
+	let builds = [];
+	for (let prod of template.production.technology)
+	{
+		let research = loadTechnology(prod);
+		if (research.reqs)
+			builds.push(getEntityNames(research));
+	}
+
+	// Translation: Label followed by a list of technology names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		// Translation: Label before a list of the names of technologies the selected unit or structure can research.
+		"listHeader": headerFont(translate("Researches:")),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builds.join(translate(", ")))
+	});
+}
+
+/**
+ * @param {object} template
+ * @return {string} List of the names of the units the selected unit can train.
+ */
+function getTrainList(template)
+{
+	if (!template.production || !template.production.units || !template.production.units.length)
+		return "";
+
+	let builds = template.production.units.map(prod => getEntityNames(loadUnit(prod)));
+
+	// Translation: Label followed by a list of unit names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		// Translation: Label before a list of the names of units the selected unit or structure can train.
+		"listHeader": headerFont(translate("Trains:")),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builds.join(translate(", ")))
+	});
+}
+
+/**
+ * @param {object} template
+ * @return {string} List of the names of the buildings/units the selected structure/unit can upgrade to.
+ */
+function getUpgradeList(template)
+{
+	if (!template.upgrades)
+		return "";
+
+	let builds = [];
+	for (let prod of template.upgrades)
+		if (!prod.name)
+			builds.push(getEntityNames(getTypeFromName(prod.entity) == "unit" ? loadUnit(prod.entity) : loadStructure(prod.entity)));
+		else
+			builds.push(getEntityNames(prod));
+
+	// Translation: Label followed by a list of unit or structure names.
+	return sprintf(translate("%(listHeader)s %(listOfNames)s"), {
+		// Translation: Label before a list of the names of units or structures the selected unit or structure can be upgradable to.
+		"listHeader": headerFont(translate("Upgradable to:")),
+		// Translation: List separator.
+		"listOfNames": bodyFont(builds.join(translate(", ")))
+	});
+}
+
+/**
+ * Returns the appropriate promotion rank glyph for a given rank
+ *
+ * TODO: Don't hardcode ranks.
+ *
+ * @param {string} rank
+ * @return {string} Path to the image.
+ */
+function getRankGlyph(rank)
+{
+	let ranks = [ "Basic", "Advanced", "Elite" ];
+	if (ranks.indexOf(rank) == -1)
+		return null;
+	return "session/icons/rank" + (ranks.indexOf(rank) + 1) + ".png";
+}
Index: binaries/data/mods/public/gui/reference/viewer/viewer.xml
===================================================================
--- /dev/null
+++ binaries/data/mods/public/gui/reference/viewer/viewer.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<objects>
+	<script file="gui/common/functions_civinfo.js"/>
+	<script file="gui/common/functions_utility.js"/>
+	<script file="gui/common/tooltips.js"/>
+	<script directory="gui/reference/common/"/>
+	<script file="gui/reference/viewer/viewer.js"/>
+
+	<!-- Add a translucent black background to fade out whatever's behind this -->
+	<object type="image" z="0" sprite="BackgroundTranslucent"/>
+
+	<object type="image" sprite="ModernDialog" size="50%-250 50%-300 50%+250 50%+300">
+		<object style="TitleText" type="text" size="50%-128 -18 50%+128 14">
+			<translatableAttribute id="caption">Information</translatableAttribute>
+		</object>
+
+		<object name="entityName" type="text" size="8 16 100%-8 48" text_align="center" text_valign="top" textcolor="white"/>
+
+		<object name="entityIcon" type="image"
+			size="16 48 128+16 128+48"
+			sprite="stretched:pregame/shell/logo/wfg_logo_white.png"
+		>
+			<object type="image" style="IconFrame"/>
+			<object type="image" style="RankGlyph" name="entityRankGlyph"/>
+		</object>
+
+		<object name="entityStats" type="text" style="ModernText" size="128+20 44 100%-8 50%" scrollbar="false"/>
+
+		<object name="entityInfo" type="text" style="ModernText" size="16 128+48+8 100%-16 100%-48"/>
+
+		<!-- Close page -->
+		<object
+			type="button"
+			style="StoneButton"
+			size="100%-164 100%-44 100%-16 100%-16"
+			hotkey="cancel"
+		>
+			<translatableAttribute id="caption">Close</translatableAttribute>
+			<action on="Press">closePage();</action>
+		</object>
+	</object>
+
+</objects>
Index: binaries/data/mods/public/gui/session/selection_details.js
===================================================================
--- binaries/data/mods/public/gui/session/selection_details.js
+++ binaries/data/mods/public/gui/session/selection_details.js
@@ -305,6 +305,10 @@
 
 	// TODO: we should require all entities to have icons
 	Engine.GetGUIObjectByName("icon").sprite = template.icon ? ("stretched:session/portraits/" + template.icon) : "BackgroundBlack";
+	if (template.icon)
+		Engine.GetGUIObjectByName("iconBorder").onPressRight = () => {
+			showTemplateDetails(entState.template, playerState.civ);
+		};
 
 	Engine.GetGUIObjectByName("attackAndArmorStats").tooltip = [
 		getAttackTooltip,
@@ -331,6 +335,7 @@
 		getAurasTooltip,
 		getEntityTooltip
 	].map(func => func(template)));
+	iconTooltips.push(templateViewerOnClickMessage(true));
 
 	Engine.GetGUIObjectByName("iconBorder").tooltip = iconTooltips.filter(tip => tip).join("\n");
 
Index: binaries/data/mods/public/gui/session/selection_panels.js
===================================================================
--- binaries/data/mods/public/gui/session/selection_panels.js
+++ binaries/data/mods/public/gui/session/selection_panels.js
@@ -259,6 +259,7 @@
 			});
 
 		data.button.onPress = function () { startBuildingPlacement(data.item, data.playerState); };
+		data.button.onPressRight = function () { showTemplateDetails(data.item, data.playerState.civ); };
 
 		let tooltips = [
 			getEntityNamesFormatted,
@@ -269,6 +270,7 @@
 			getGarrisonTooltip,
 			getPopulationBonusTooltip
 		].map(func => func(template));
+		tooltips.push(templateViewerOnClickMessage(true));
 
 		let limits = getEntityLimitAndCount(data.playerState, data.item);
 		tooltips.push(
@@ -765,6 +767,7 @@
 				getEntityTooltip,
 				getEntityCostTooltip
 			].map(func => func(template));
+			tooltips.push(templateViewerOnClickMessage(true));
 
 			if (!requirementsPassed)
 			{
@@ -814,6 +817,15 @@
 				addResearchToQueue(data.item.researchFacilityId, tech);
 			};
 
+			button.onPressRight = function () {
+				let researcherTemplate;
+				for (let selectedEntity of data.unitEntStates)
+					if (selectedEntity.id == data.item.researchFacilityId)
+						researcherTemplate = selectedEntity.template;
+
+				showTemplateDetails("tech/"+data.item.tech, data.playerState.civ, researcherTemplate);
+			};
+
 			if (data.item.tech.pair)
 			{
 				// On mouse enter, show a cross over the other icon
@@ -1001,6 +1013,9 @@
 		data.button.onPress = function() {
 			addTrainingToQueue(data.unitEntStates.map(state => state.id), data.item, data.playerState);
 		};
+		data.button.onPressRight = function() {
+			showTemplateDetails(data.item, data.playerState.civ);
+		};
 
 		data.countDisplay.caption = trainNum > 1 ? trainNum : "";
 
@@ -1029,6 +1044,7 @@
 				getSpeedTooltip
 			].map(func => func(template)));
 
+		tooltips.push(templateViewerOnClickMessage(true));
 		tooltips.push(
 			"[color=\"" + g_HotkeyColor + "\"]" +
 			formatBatchTrainingString(buildingsCountToTrainFullBatch, fullBatchSize, remainderBatch) +
@@ -1116,7 +1132,8 @@
 				getEntityCostComponentsTooltipString(data.item, undefined, data.unitEntStates.length),
 				formatLimitString(limits.entLimit, limits.entCount, limits.entLimitChangers),
 				getRequiredTechnologyTooltip(technologyEnabled, data.item.requiredTechnology, GetSimState().players[data.player].civ),
-				getNeededResourcesTooltip(neededResources));
+				getNeededResourcesTooltip(neededResources),
+				templateViewerOnClickMessage(true));
 
 			tooltip = tooltips.filter(tip => tip).join("\n");
 
@@ -1135,6 +1152,10 @@
 		data.button.enabled = controlsPlayer(data.player);
 		data.button.tooltip = tooltip;
 
+		data.button.onPressRight = function() {
+			showTemplateDetails(data.item.entity, data.playerState.civ);
+		};
+
 		let modifier = "";
 		if (!isUpgrading)
 		{
@@ -1171,6 +1192,32 @@
 	}
 };
 
+/**
+ * Pauses game and opens the template details viewer for a selected entity or technology.
+ *
+ * Arguably, we shouldn't have to pass a civcode, as that should be derivable from the
+ * template page. However, the palisade walls and trainable animals have a set civ of
+ * gaia, so we pass the civcode of the currently owning civ.
+ *
+ * And technologies don't have a set civ, so we pass along the name of the template of
+ * the entity that's researching it so as to derive the civcode from that, if we can.
+ *
+ * @param {string} templateName
+ * @param {string} civ - Civ code of the current owner of the entity selected.
+ * @param {string} [researcherName] - The template name of the entity that researches a selected technology.
+ */
+function showTemplateDetails(templateName, civ, researcherName)
+{
+	pauseGame();
+
+	Engine.PushGuiPage("page_viewer.xml", {
+		"templateName": templateName,
+		"callback": "resumeGame",
+		"civ": civ,
+		"researcherName": researcherName
+	});
+}
+
 /**
  * If two panels need the same space, so they collide,
  * the one appearing first in the order is rendered.
Index: binaries/data/mods/public/gui/session/selection_panels_middle/single_details_area.xml
===================================================================
--- binaries/data/mods/public/gui/session/selection_panels_middle/single_details_area.xml
+++ binaries/data/mods/public/gui/session/selection_panels_middle/single_details_area.xml
@@ -67,7 +67,7 @@
 		</object>
 
 		<!-- Big unit icon -->
-		<object size="-8 -8 88 88" type="image" name="iconBorder" sprite="iconBorder" tooltip_style="sessionToolTip">
+		<object size="-8 -8 88 88" type="button" name="iconBorder" sprite="iconBorder" tooltip_style="sessionToolTip">
 			<object size="1 1 100%-1 100%-1" type="image" name="icon" ghost="true"/>
 
 			<!-- Experience bar -->
Index: binaries/data/mods/public/l10n/messages.json
===================================================================
--- binaries/data/mods/public/l10n/messages.json
+++ binaries/data/mods/public/l10n/messages.json
@@ -245,6 +245,7 @@
                     "gui/pregame/**.js",
                     "gui/reference/common/**.js",
                     "gui/reference/structree/**.js",
+                    "gui/reference/viewer/**.js",
                     "gui/replaymenu/**.js",
                     "gui/savedgames/**.js",
                     "gui/splashscreen/**.js",
@@ -279,6 +280,7 @@
                     "gui/options/**.xml",
                     "gui/pregame/**.xml",
                     "gui/reference/structree/**.xml",
+                    "gui/reference/viewer/**.xml",
                     "gui/replaymenu/**.xml",
                     "gui/savedgames/**.xml",
                     "gui/splashscreen/**.xml",
@@ -388,6 +390,7 @@
                     "keywords": {
                         "GenericName": {},
                         "SpecificName": {},
+                        "History": {},
                         "VisibleClasses": {
                             "splitOnWhitespace": true
                         },
@@ -419,6 +422,7 @@
                     "keywords": {
                         "GenericName": {},
                         "SpecificName": {},
+                        "History": {},
                         "VisibleClasses": {
                             "splitOnWhitespace": true
                         },
@@ -457,6 +461,7 @@
                     "keywords": {
                         "GenericName": {},
                         "SpecificName": {},
+                        "History": {},
                         "VisibleClasses": {
                             "splitOnWhitespace": true
                         },