diff --git a/site/src/pages/TemplateBuilder/ModuleCard.stories.tsx b/site/src/pages/TemplateBuilder/ModuleCard.stories.tsx
index 7012ed25e6..084909b158 100644
--- a/site/src/pages/TemplateBuilder/ModuleCard.stories.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleCard.stories.tsx
@@ -39,6 +39,26 @@ export const NoIcon: Story = {
 	},
 };
 
+export const Community: Story = {
+	args: {
+		name: "Docker Containers",
+		description: "Provision Docker containers as Coder workspaces.",
+		iconUrl: "/icon/docker.svg",
+		official: false,
+		selected: false,
+	},
+};
+
+export const CommunitySelected: Story = {
+	args: {
+		name: "Docker Containers",
+		description: "Provision Docker containers as Coder workspaces.",
+		iconUrl: "/icon/docker.svg",
+		official: false,
+		selected: true,
+	},
+};
+
 export const LongDescription: Story = {
 	args: {
 		name: "Kubernetes Pods",
diff --git a/site/src/pages/TemplateBuilder/ModuleCard.tsx b/site/src/pages/TemplateBuilder/ModuleCard.tsx
index dcbce79217..a1199b90d1 100644
--- a/site/src/pages/TemplateBuilder/ModuleCard.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleCard.tsx
@@ -1,4 +1,4 @@
-import { CheckIcon } from "lucide-react";
+import { BadgeCheckIcon, CheckIcon } from "lucide-react";
 import { useId } from "react";
 import { Link } from "#/components/Link/Link";
 import { cn } from "#/utils/cn";
@@ -8,6 +8,7 @@ type ModuleCardProps = {
 	description: string;
 	iconUrl?: string;
 	detailsUrl?: string;
+	official?: boolean;
 	selected?: boolean;
 	onSelect?: () => void;
 };
@@ -17,6 +18,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 	description,
 	iconUrl,
 	detailsUrl,
+	official = true,
 	selected = false,
 	onSelect,
 }) => {
@@ -65,8 +67,14 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 			</div>
 
 			<div>
-				<h3 id={nameId} className="text-md font-semibold text-content-primary">
+				<h3
+					id={nameId}
+					className="flex items-center gap-1.5 text-md font-semibold text-content-primary"
+				>
 					{name}
+					{official && (
+						<BadgeCheckIcon className="size-4 text-highlight-sky shrink-0" />
+					)}
 				</h3>
 				<p className="text-sm font-normal text-content-secondary">
 					{description}
diff --git a/site/src/pages/TemplateBuilder/TemplateCard.stories.tsx b/site/src/pages/TemplateBuilder/TemplateCard.stories.tsx
index 77ecebec4d..3d56a941dc 100644
--- a/site/src/pages/TemplateBuilder/TemplateCard.stories.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCard.stories.tsx
@@ -40,6 +40,26 @@ export const NoIcon: Story = {
 	},
 };
 
+export const Community: Story = {
+	args: {
+		name: "Docker Containers",
+		description: "Provision Docker containers as Coder workspaces.",
+		iconUrl: "/icon/docker.svg",
+		official: false,
+		selected: false,
+	},
+};
+
+export const CommunitySelected: Story = {
+	args: {
+		name: "Docker Containers",
+		description: "Provision Docker containers as Coder workspaces.",
+		iconUrl: "/icon/docker.svg",
+		official: false,
+		selected: true,
+	},
+};
+
 export const LongDescription: Story = {
 	args: {
 		name: "Kubernetes Pods",
diff --git a/site/src/pages/TemplateBuilder/TemplateCard.tsx b/site/src/pages/TemplateBuilder/TemplateCard.tsx
index 74b0992352..5650a3358b 100644
--- a/site/src/pages/TemplateBuilder/TemplateCard.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCard.tsx
@@ -1,3 +1,4 @@
+import { BadgeCheckIcon } from "lucide-react";
 import { useId } from "react";
 import { Link } from "#/components/Link/Link";
 import { cn } from "#/utils/cn";
@@ -7,6 +8,7 @@ type TemplateCardProps = {
 	description: string;
 	iconUrl?: string;
 	detailsUrl: string;
+	official?: boolean;
 	selected?: boolean;
 	onSelect?: () => void;
 };
@@ -16,6 +18,7 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
 	description,
 	iconUrl,
 	detailsUrl,
+	official = true,
 	selected = false,
 	onSelect,
 }) => {
@@ -63,8 +66,14 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
 			</div>
 
 			<div>
-				<h3 id={nameId} className="text-md font-semibold text-content-primary">
+				<h3
+					id={nameId}
+					className="flex items-center gap-1.5 text-md font-semibold text-content-primary"
+				>
 					{name}
+					{official && (
+						<BadgeCheckIcon className="size-4 text-highlight-sky shrink-0" />
+					)}
 				</h3>
 				<div>
 					<p className="text-sm font-normal text-content-secondary">