diff --git a/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx b/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx
index 5d4a2b48d8bd2..91cfc8d02106f 100644
--- a/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx
+++ b/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx
@@ -42,7 +42,7 @@ export const BaseInfraSelectStep: FC<BaseInfraSelectStepProps> = ({
 				Select your infrastructure foundation.
 			</TemplateBuilderSubtitle>
 
-			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
 				{bases.map((base) => (
 					<TemplateCard
 						key={base.id}
diff --git a/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx b/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
index ca7b2266adc15..34c547b04a9e9 100644
--- a/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
+++ b/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
@@ -134,11 +134,13 @@ export const BaseTemplateParametersStep: FC<
 					<div className="mt-6">
 						<MemoizedMarkdown
 							className={cn(
-								"text-sm font-normal",
+								"text-xs font-normal",
 								"[&_h2]:mt-6 [&_h2]:text-base [&_h2]:font-semibold",
 								"[&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-semibold",
 								"[&_p]:mb-3 [&_p]:text-content-secondary",
+								"[&_li]:text-content-secondary",
 								"[&_a]:font-normal",
+								"[&_code]:text-[length:inherit]",
 							)}
 						>
 							{prerequisites}
diff --git a/site/src/pages/TemplateBuilder/ConfigurationField.tsx b/site/src/pages/TemplateBuilder/ConfigurationField.tsx
index b8e68550bf4ab..26a578ccc44a3 100644
--- a/site/src/pages/TemplateBuilder/ConfigurationField.tsx
+++ b/site/src/pages/TemplateBuilder/ConfigurationField.tsx
@@ -135,7 +135,7 @@ const SelectField: FC<SelectFieldDefinition> = ({
 				)}
 			</Label>
 			{description && (
-				<div id={descriptionId} className="text-sm text-content-secondary">
+				<div id={descriptionId} className="text-xs text-content-secondary">
 					{description}
 				</div>
 			)}
@@ -185,7 +185,7 @@ const RadioField: FC<RadioFieldDefinition> = ({
 				)}
 			</Label>
 			{description && (
-				<div id={descriptionId} className="text-sm text-content-secondary">
+				<div id={descriptionId} className="text-xs text-content-secondary">
 					{description}
 				</div>
 			)}
@@ -276,7 +276,7 @@ const SwitchField: FC<SwitchFieldDefinition> = ({
 			{description && (
 				<div
 					id={descriptionId}
-					className="ml-[44px] text-sm font-normal text-content-secondary"
+					className="ml-[44px] text-xs font-normal text-content-secondary"
 				>
 					{description}
 				</div>
@@ -310,7 +310,7 @@ const SwitchGroupField: FC<SwitchGroupFieldDefinition> = ({
 				)}
 			</Label>
 			{description && (
-				<div id={descriptionId} className="text-sm text-content-secondary">
+				<div id={descriptionId} className="text-xs text-content-secondary">
 					{description}
 				</div>
 			)}
diff --git a/site/src/pages/TemplateBuilder/ModuleCard.tsx b/site/src/pages/TemplateBuilder/ModuleCard.tsx
index a6a0a1ad8c4be..bf793b414f091 100644
--- a/site/src/pages/TemplateBuilder/ModuleCard.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleCard.tsx
@@ -62,7 +62,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 			</div>
 
 			<div>
-				<h3 id={nameId} className="text-md font-semibold text-content-primary">
+				<h3 id={nameId} className="text-sm font-bold text-content-primary">
 					{name}
 					{official && (
 						<>
@@ -71,7 +71,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 						</>
 					)}
 				</h3>
-				<p className="text-sm font-normal text-content-secondary">
+				<p className="text-xs font-normal text-content-secondary">
 					{description}
 				</p>
 
@@ -79,7 +79,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 					<Link
 						href={detailsUrl}
 						target="_blank"
-						className="text-sm font-normal"
+						className="text-xs font-normal"
 					>
 						View details
 					</Link>
diff --git a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
index 79a62c9027b81..85de9a946cdb6 100644
--- a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
@@ -67,7 +67,7 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 					</ConfigurationFieldContainer>
 				</CollapsibleSummary>
 			) : (
-				<div className="text-sm text-content-secondary flex items-center gap-2 mt-4">
+				<div className="text-xs text-content-secondary flex items-center gap-2 mt-4">
 					<CheckIcon className="size-4" />
 					No configuration required.
 				</div>
diff --git a/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx b/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx
index a5a04e123492c..86668f4b3a985 100644
--- a/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx
@@ -244,7 +244,7 @@ export const ModuleSelectStep: FC<ModuleSelectStepProps> = ({
 				</TabsList>
 			</Tabs>
 
-			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
 				{visibleModules.length ? (
 					visibleModules.map((m) => (
 						<ModuleCard
@@ -260,7 +260,7 @@ export const ModuleSelectStep: FC<ModuleSelectStepProps> = ({
 				) : (
 					<div className="col-span-full my-12 flex flex-col items-center gap-1 text-content-secondary">
 						<SearchIcon />
-						<p className="m-0 text-sm font-normal">
+						<p className="m-0 text-xs font-normal">
 							{doesBaseTemplateHaveModules
 								? "No module matched your search"
 								: "No modules available for this base template"}
diff --git a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
index a156884adbf4b..4c36def8b0c47 100644
--- a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
@@ -162,7 +162,7 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 							/>
 
 							{sensitiveVars.length > 0 && (
-								<div className="flex items-center gap-2 mt-2 p-3 rounded-md text-sm text-content-secondary">
+								<div className="flex items-center gap-2 mt-2 p-3 rounded-md text-xs text-content-secondary">
 									<InfoIcon className="size-icon-sm shrink-0 mt-0.5" />
 									<p>
 										{sensitiveVars.map((v) => (
diff --git a/site/src/pages/TemplateBuilder/TemplateCard.tsx b/site/src/pages/TemplateBuilder/TemplateCard.tsx
index 72074bf42e2be..6a987e2e47b90 100644
--- a/site/src/pages/TemplateBuilder/TemplateCard.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCard.tsx
@@ -61,7 +61,7 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
 			</div>
 
 			<div>
-				<h3 id={nameId} className="text-md font-semibold text-content-primary">
+				<h3 id={nameId} className="text-sm font-bold text-content-primary">
 					{name}
 					{official && (
 						<>
@@ -71,14 +71,14 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
 					)}
 				</h3>
 				<div>
-					<p className="text-sm font-normal text-content-secondary">
+					<p className="text-xs font-normal text-content-secondary">
 						{description}
 					</p>
 
 					<Link
 						href={detailsUrl}
 						target="_blank"
-						className="text-sm font-normal"
+						className="text-xs font-normal"
 					>
 						View details
 					</Link>
diff --git a/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
index 95a2aaf5faede..22885bef3902e 100644
--- a/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
@@ -181,7 +181,7 @@ const BaseTemplateCard: FC<{ base: SelectedBaseMeta }> = ({ base }) => {
 	return (
 		<div className="w-56 shrink-0 rounded-lg bg-surface-secondary p-4 self-start">
 			{base.iconUrl && <Avatar src={base.iconUrl} size="lg" variant="icon" />}
-			<p className="text-sm font-medium text-content-primary">{base.name}</p>
+			<p className="text-sm font-bold text-content-primary">{base.name}</p>
 			<p className="text-xs text-content-secondary mt-1">
 				Preset based on base template
 			</p>