diff --git a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.stories.tsx b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.stories.tsx
index 1a59413fb42..a67b5737a47 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.stories.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.stories.tsx
@@ -92,6 +92,63 @@ export const WithSelectedValue: Story = {
 	},
 };
 
+export const SelectedValueShowsProviderIcon: Story = {
+	args: {
+		options: allModels,
+		value: "anthropic/claude-sonnet-4",
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(
+			canvas.getByRole("combobox", { name: "Claude Sonnet 4" }),
+		).toBeInTheDocument();
+		expect(
+			canvas.getByTestId("model-selector-trigger-icon"),
+		).toBeInTheDocument();
+	},
+};
+
+export const SelectedValueShowsCustomProviderIcon: Story = {
+	args: {
+		options: [
+			{
+				...MockModelSelectorOption,
+				id: "anthropic-hyper/claude-opus-4",
+				provider: "anthropic",
+				providerId: "provider-anthropic-hyper",
+				providerLabel: "Hyper",
+				providerIcon: "/icon/coder.svg",
+				model: "claude-opus-4-20250514",
+				displayName: "Claude Opus 4",
+			},
+		],
+		value: "anthropic-hyper/claude-opus-4",
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(
+			canvas.getByRole("combobox", { name: "Claude Opus 4" }),
+		).toBeInTheDocument();
+		const icon = canvas.getByTestId("model-selector-trigger-icon");
+		expect(icon.querySelector("img")).toHaveAttribute("src", "/icon/coder.svg");
+	},
+};
+
+export const PlaceholderShowsNoIcon: Story = {
+	args: {
+		value: "",
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(
+			canvas.getByRole("combobox", { name: "Select model" }),
+		).toBeInTheDocument();
+		expect(
+			canvas.queryByTestId("model-selector-trigger-icon"),
+		).not.toBeInTheDocument();
+	},
+};
+
 export const CustomTriggerLabel: Story = {
 	args: {
 		options: openAIModels,
diff --git a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx
index 2633ce070b9..450e0ce5775 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx
@@ -163,11 +163,20 @@ export const ModelSelector: FC<ModelSelectorProps> = ({
 					type="button"
 					variant="subtle"
 					className={cn(
-						"h-7 md:h-auto min-w-0 shrink justify-start gap-0.5 rounded-full border-0 bg-surface-secondary px-1 py-0.5 text-xs font-medium shadow-none transition-colors hover:bg-surface-tertiary hover:text-content-primary focus:ring-0 focus-visible:ring-2 focus-visible:ring-content-link md:w-auto md:shrink-0 md:gap-1.5 [&>svg]:!size-3.5 [&>svg]:p-0 [&>svg]:shrink-0 [&>svg]:transition [&>svg]:hover:text-content-primary",
+						"h-7 md:h-auto min-w-0 shrink justify-start gap-1 rounded-full border-0 bg-surface-secondary px-2 py-0.5 text-xs font-medium shadow-none transition-colors hover:bg-surface-tertiary hover:text-content-primary focus:ring-0 focus-visible:ring-2 focus-visible:ring-content-link md:w-auto md:shrink-0 [&>svg]:!size-3.5 [&>svg]:p-0 [&>svg]:shrink-0 [&>svg]:transition [&>svg]:hover:text-content-primary [&>img]:!size-3 [&>img]:!p-0",
 						className,
 					)}
 					onTouchStart={onTriggerTouchStart}
 				>
+					{selectedModel && (
+						<span data-testid="model-selector-trigger-icon">
+							<ProviderIcon
+								provider={selectedModel.provider}
+								icon={selectedModel.providerIcon}
+								className="size-3 shrink-0"
+							/>
+						</span>
+					)}
 					<span className="truncate">{triggerLabel}</span>
 					<ChevronDownIcon open={open} />
 				</Button>