diff --git a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
index 538b754ed964a..eb89be0810ae2 100644
--- a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
@@ -26,6 +26,7 @@ interface ModuleSettingsStepProps {
 		moduleId: string,
 		variables: Record<string, string>,
 	) => void;
+	onRemoveModule: (moduleId: string) => void;
 }
 
 function variableToField(
@@ -107,6 +108,7 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 	selectedModuleIds,
 	moduleVariables,
 	onChangeModuleVariables,
+	onRemoveModule,
 }) => {
 	const { data } = useQuery(templateBuilderModules(baseId));
 	const modules = data?.modules ?? [];
@@ -157,6 +159,7 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 								detailsUrl={moduleDetailsUrl(mod.id)}
 								fields={requiredFields}
 								optionalFields={optionalFields}
+								onRemove={() => onRemoveModule(mod.id)}
 							/>
 
 							{sensitiveVars.length > 0 && (
diff --git a/site/src/pages/TemplateBuilder/SelectionSummary.stories.tsx b/site/src/pages/TemplateBuilder/SelectionSummary.stories.tsx
index 7c83ef57dfadf..3c50d9e07d029 100644
--- a/site/src/pages/TemplateBuilder/SelectionSummary.stories.tsx
+++ b/site/src/pages/TemplateBuilder/SelectionSummary.stories.tsx
@@ -1,13 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, fn, within } from "storybook/test";
+import { expect, within } from "storybook/test";
 import { SelectionSummary } from "./SelectionSummary";
 
 const meta: Meta<typeof SelectionSummary> = {
 	title: "pages/TemplateBuilder/SelectionSummary",
 	component: SelectionSummary,
-	args: {
-		onDeselectModule: fn(),
-	},
 };
 
 export default meta;
diff --git a/site/src/pages/TemplateBuilder/SelectionSummary.tsx b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
index 0c83339b37728..f66914304860e 100644
--- a/site/src/pages/TemplateBuilder/SelectionSummary.tsx
+++ b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
@@ -1,8 +1,6 @@
 import { cva } from "class-variance-authority";
-import { XIcon } from "lucide-react";
 import { createContext, type PropsWithChildren, useContext } from "react";
 import { Avatar } from "#/components/Avatar/Avatar";
-import { Button } from "#/components/Button/Button";
 import { cn } from "#/utils/cn";
 
 type Variant = "complete" | "current" | "upcoming" | null | undefined;
@@ -24,14 +22,12 @@ type SelectionSummaryProps = {
 	currentStep: number;
 	selectedTemplate?: SelectedTemplate;
 	selectedModules?: SelectedModule[];
-	onDeselectModule: (moduleId: string) => void;
 };
 
 export const SelectionSummary: React.FC<SelectionSummaryProps> = ({
 	currentStep,
 	selectedTemplate,
 	selectedModules,
-	onDeselectModule,
 }) => {
 	const variant = (step: number) => {
 		if (currentStep === step) return "current";
@@ -53,10 +49,7 @@ export const SelectionSummary: React.FC<SelectionSummaryProps> = ({
 				<VariantContext.Provider value={variant(2)}>
 					<StepIndicator step={2}>Modules</StepIndicator>
 					{selectedModules ? (
-						<ModuleSelection
-							modules={selectedModules}
-							onDeselectModule={onDeselectModule}
-						/>
+						<ModuleSelection modules={selectedModules} />
 					) : (
 						<StepDivider />
 					)}
@@ -161,19 +154,15 @@ const BaseTemplateSelection: React.FC<BaseTemplateSelectionProps> = ({
 
 type ModuleSelectionProps = {
 	modules: SelectedModule[];
-	onDeselectModule: (moduleId: string) => void;
 };
 
-const ModuleSelection: React.FC<ModuleSelectionProps> = ({
-	modules,
-	onDeselectModule,
-}) => {
+const ModuleSelection: React.FC<ModuleSelectionProps> = ({ modules }) => {
 	return (
 		<StepDivider className="max-h-72 overflow-y-auto">
 			{modules.map((module) => (
 				<div
 					key={module.id}
-					className="group flex items-start justify-between p-1 mb-1 rounded-sm hover:bg-surface-secondary"
+					className="group flex items-start justify-between p-1 mb-1 rounded-sm"
 				>
 					<div className="h-[1lh] content-center">
 						<Avatar src={module.iconUrl} size="sm" variant="icon" />
@@ -181,17 +170,6 @@ const ModuleSelection: React.FC<ModuleSelectionProps> = ({
 					<span className="flex-1 ml-2 text-content-secondary">
 						{module.name}
 					</span>
-					<div className="h-[1lh] content-center">
-						<Button
-							size="xs"
-							variant="subtle"
-							className="flex opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
-							onClick={() => onDeselectModule(module.id)}
-							aria-label="Deselect module"
-						>
-							<XIcon className="size-4" />
-						</Button>
-					</div>
 				</div>
 			))}
 		</StepDivider>
diff --git a/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx b/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx
index bb11c33d9c166..8d5ede68cd42b 100644
--- a/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx
@@ -162,6 +162,7 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
 							moduleVarMap,
 							createError,
 							handleProvisionerStatusChange,
+							handleDeselectModule,
 						)}
 					</div>
 
@@ -199,7 +200,6 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
 								? state.selectedModules
 								: undefined
 						}
-						onDeselectModule={handleDeselectModule}
 					/>
 				</div>
 			</div>
@@ -214,6 +214,7 @@ function renderStepContent(
 	moduleVarMap: Record<string, Record<string, string>>,
 	createError: Error | null,
 	onProvisionerStatusChange: (value: boolean | undefined) => void,
+	onRemoveModule: (moduleId: string) => void,
 ): ReactNode {
 	switch (stepId) {
 		case "base-infra":
@@ -259,6 +260,7 @@ function renderStepContent(
 							variables,
 						})
 					}
+					onRemoveModule={onRemoveModule}
 				/>
 			);
 		case "customizations":