From 791d88dccb9f5f53886c9e0513aa528e97667265 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 11 Sep 2024 18:51:59 +0000
Subject: [PATCH 1/5] fix: type

---
 .../TemplateGeneralSettingsPage/TemplateSettingsForm.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
index 6b2e80567fae6..02e2067f3b9ef 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -213,7 +213,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
 											css={{ marginTop: 16 }}
 										>
 											<PremiumBadge />
-											<span>Premium license required to enabled.</span>
+											<span>Premium license required to be enabled.</span>
 										</Stack>
 									)}
 								</StackLabelHelperText>

From 164b65ef8a354e62e35eb6b5253c88a96764c689 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 11 Sep 2024 18:52:14 +0000
Subject: [PATCH 2/5] chore: paywall improvements

---
 site/src/components/Paywall/Paywall.tsx | 41 ++++++++++++-------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index 37b1546457bd2..d68244f5d0640 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -19,15 +19,7 @@ export const Paywall: FC<PaywallProps> = ({
 	documentationLink,
 }) => {
 	return (
-		<div
-			css={[
-				styles.root,
-				(theme) => ({
-					backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
-					border: `1px solid ${theme.branding.border}`,
-				}),
-			]}
-		>
+		<div css={[styles.root]}>
 			<div>
 				<Stack direction="row" alignItems="center" css={{ marginBottom: 24 }}>
 					<h5 css={styles.title}>{message}</h5>
@@ -45,7 +37,7 @@ export const Paywall: FC<PaywallProps> = ({
 				</Link>
 			</div>
 			<div css={styles.separator} />
-			<Stack direction="column" alignItems="center" spacing={3}>
+			<Stack direction="column" alignItems="left" spacing={3}>
 				<ul css={styles.featureList}>
 					<li css={styles.feature}>
 						<FeatureIcon />
@@ -64,16 +56,18 @@ export const Paywall: FC<PaywallProps> = ({
 						Unlimited Git & external auth integrations
 					</li>
 				</ul>
-				<Button
-					href={docs("/enterprise")}
-					target="_blank"
-					rel="noreferrer"
-					startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
-					variant="outlined"
-					color="neutral"
-				>
-					Learn about Premium
-				</Button>
+				<div css={styles.learnButton}>
+					<Button
+						href={docs("/enterprise")}
+						target="_blank"
+						rel="noreferrer"
+						startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
+						variant="outlined"
+						color="neutral"
+					>
+						Learn about Premium
+					</Button>
+				</div>
 			</Stack>
 		</div>
 	);
@@ -92,7 +86,7 @@ const FeatureIcon: FC = () => {
 };
 
 const styles = {
-	root: () => ({
+	root: (theme) => ({
 		display: "flex",
 		flexDirection: "row",
 		justifyContent: "center",
@@ -101,6 +95,8 @@ const styles = {
 		padding: 24,
 		borderRadius: 8,
 		gap: 32,
+		backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
+		border: `1px solid ${theme.branding.border}`,
 	}),
 	title: {
 		fontWeight: 600,
@@ -119,6 +115,9 @@ const styles = {
 		backgroundColor: theme.branding.divider,
 		marginLeft: 8,
 	}),
+	learnButton: {
+		padding: "0 28px",
+	},
 	featureList: {
 		listStyle: "none",
 		margin: 0,

From 81f167e33c4f9537d3f773f3dfc391aba5ad9942 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 11 Sep 2024 19:47:35 +0000
Subject: [PATCH 3/5] feat: update create org for premium license

---
 .../CreateOrganizationPageView.tsx            | 137 ++++++++----------
 .../CustomRolesPage/CustomRolesPageView.tsx   |   2 +-
 2 files changed, 64 insertions(+), 75 deletions(-)

diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
index 82f7bf7b8d4c2..035c1be28c287 100644
--- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
@@ -2,12 +2,7 @@ import TextField from "@mui/material/TextField";
 import { isApiValidationError } from "api/errors";
 import type { CreateOrganizationRequest } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
-import {
-	Badges,
-	DisabledBadge,
-	EntitledBadge,
-	PremiumBadge,
-} from "components/Badges/Badges";
+import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import {
 	FormFields,
 	FormFooter,
@@ -15,13 +10,9 @@ import {
 	HorizontalForm,
 } from "components/Form/Form";
 import { IconField } from "components/IconField/IconField";
-import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "components/Popover/Popover";
+import { Paywall } from "components/Paywall/Paywall";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
+import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
 import type { FC } from "react";
 import { docs } from "utils/docs";
@@ -67,79 +58,77 @@ export const CreateOrganizationPageView: FC<
 	const getFieldHelpers = getFormHelpers(form, error);
 
 	return (
-		<div>
+		<Stack spacing={3}>
 			<SettingsHeader
 				title="New Organization"
 				description="Organize your deployment into multiple platform teams."
 			/>
 
-			<Badges>
-				{isEntitled ? <EntitledBadge /> : <DisabledBadge />}
-				<Popover mode="hover">
-					<PopoverTrigger>
-						<span>
-							<PremiumBadge />
-						</span>
-					</PopoverTrigger>
-					<PopoverContent css={{ transform: "translateY(-28px)" }}>
-						<PopoverPaywall
-							message="Organizations"
-							description="Organizations allow you to run a Coder deployment with multiple platform teams, all with unique use cases, templates, and even underlying infrastructure."
-							documentationLink={docs("/guides/using-organizations")}
-						/>
-					</PopoverContent>
-				</Popover>
-			</Badges>
-
 			{Boolean(error) && !isApiValidationError(error) && (
 				<div css={{ marginBottom: 32 }}>
 					<ErrorAlert error={error} />
 				</div>
 			)}
 
-			<HorizontalForm
-				onSubmit={form.handleSubmit}
-				aria-label="Organization settings form"
-			>
-				<FormSection
-					title="General info"
-					description="The name and description of the organization."
-				>
-					<fieldset
-						disabled={form.isSubmitting}
-						css={{ border: "unset", padding: 0, margin: 0, width: "100%" }}
+			<ChooseOne>
+				<Cond condition={!isEntitled}>
+					<Paywall
+						message="Organizations"
+						description="Create multiple organizations within a single Coder deployment, allowing several platform teams to operate with isolated users, templates, and distinct underlying infrastructure."
+						documentationLink={docs("/guides/using-organizations")}
+					/>
+				</Cond>
+				<Cond>
+					<HorizontalForm
+						onSubmit={form.handleSubmit}
+						aria-label="Organization settings form"
 					>
-						<FormFields>
-							<TextField
-								{...getFieldHelpers("name")}
-								onChange={onChangeTrimmed(form)}
-								autoFocus
-								fullWidth
-								label="Name"
-							/>
-							<TextField
-								{...getFieldHelpers("display_name")}
-								fullWidth
-								label="Display name"
-							/>
-							<TextField
-								{...getFieldHelpers("description")}
-								multiline
-								fullWidth
-								label="Description"
-								rows={2}
-							/>
-							<IconField
-								{...getFieldHelpers("icon")}
-								onChange={onChangeTrimmed(form)}
-								fullWidth
-								onPickEmoji={(value) => form.setFieldValue("icon", value)}
-							/>
-						</FormFields>
-					</fieldset>
-				</FormSection>
-				<FormFooter isLoading={form.isSubmitting} />
-			</HorizontalForm>
-		</div>
+						<FormSection
+							title="General info"
+							description="The name and description of the organization."
+						>
+							<fieldset
+								disabled={form.isSubmitting}
+								css={{
+									border: "unset",
+									padding: 0,
+									margin: 0,
+									width: "100%",
+								}}
+							>
+								<FormFields>
+									<TextField
+										{...getFieldHelpers("name")}
+										onChange={onChangeTrimmed(form)}
+										autoFocus
+										fullWidth
+										label="Name"
+									/>
+									<TextField
+										{...getFieldHelpers("display_name")}
+										fullWidth
+										label="Display name"
+									/>
+									<TextField
+										{...getFieldHelpers("description")}
+										multiline
+										fullWidth
+										label="Description"
+										rows={2}
+									/>
+									<IconField
+										{...getFieldHelpers("icon")}
+										onChange={onChangeTrimmed(form)}
+										fullWidth
+										onPickEmoji={(value) => form.setFieldValue("icon", value)}
+									/>
+								</FormFields>
+							</fieldset>
+						</FormSection>
+						<FormFooter isLoading={form.isSubmitting} />
+					</HorizontalForm>
+				</Cond>
+			</ChooseOne>
+		</Stack>
 	);
 };
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
index 4dc526cf6e035..9be45d16318c0 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -49,7 +49,7 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 			{!isCustomRolesEnabled && (
 				<Paywall
 					message="Custom Roles"
-					description="Custom Roles are available in the Premium plan and require an upgraded license. Please contact your Customer Success team for more information."
+					description="Create custom roles to grant users a tailored set of granular permissions."
 					documentationLink={docs("/admin/groups")}
 				/>
 			)}

From 01ae14312ff2b14d3debf9aab1fc7e140a4bfb86 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Fri, 13 Sep 2024 18:03:05 +0000
Subject: [PATCH 4/5] fix: remove []

---
 site/src/components/Paywall/Paywall.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index d68244f5d0640..1d7c427a712de 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -19,7 +19,7 @@ export const Paywall: FC<PaywallProps> = ({
 	documentationLink,
 }) => {
 	return (
-		<div css={[styles.root]}>
+		<div css={styles.root}>
 			<div>
 				<Stack direction="row" alignItems="center" css={{ marginBottom: 24 }}>
 					<h5 css={styles.title}>{message}</h5>

From 09a92cb48568699277c187a65dc74094b6b6f251 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Fri, 13 Sep 2024 13:07:29 -0500
Subject: [PATCH 5/5] feat: update licensing pills to reflect new premium tier
 (#14670)

* feat: update licensing pills to reflect new premium tier

* fix: format
---
 site/src/components/Badges/Badges.tsx         | 23 +++++++--
 site/src/components/Paywall/Paywall.tsx       |  8 +--
 .../src/components/Paywall/PopoverPaywall.tsx | 39 ++++++++-------
 .../AppearanceSettingsPage.tsx                |  3 ++
 .../AppearanceSettingsPageView.tsx            | 22 +++++----
 .../ObservabilitySettingsPage.tsx             |  3 ++
 .../ObservabilitySettingsPageView.tsx         | 33 +++++++++++--
 .../CreateOrganizationPageView.tsx            | 49 +++++++++++++++----
 .../GroupsPage/GroupPage.tsx                  |  2 +-
 .../OrganizationMembersPageView.tsx           |  2 +-
 site/src/theme/branding.ts                    | 16 ++++--
 site/src/theme/dark/branding.ts               | 16 ++++--
 site/src/theme/darkBlue/branding.ts           | 16 ++++--
 site/src/theme/light/branding.ts              | 16 ++++--
 14 files changed, 182 insertions(+), 66 deletions(-)

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index 9492184a273c7..278eb890cd2ee 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -106,15 +106,32 @@ export const DisabledBadge: FC = forwardRef<
 	);
 });
 
+export const EnterpriseBadge: FC = () => {
+	return (
+		<span
+			css={[
+				styles.badge,
+				(theme) => ({
+					backgroundColor: theme.branding.enterprise.background,
+					border: `1px solid ${theme.branding.enterprise.border}`,
+					color: theme.branding.enterprise.text,
+				}),
+			]}
+		>
+			Enterprise
+		</span>
+	);
+};
+
 export const PremiumBadge: FC = () => {
 	return (
 		<span
 			css={[
 				styles.badge,
 				(theme) => ({
-					backgroundColor: theme.branding.background,
-					border: `1px solid ${theme.branding.border}`,
-					color: theme.roles.notice.text,
+					backgroundColor: theme.branding.premium.background,
+					border: `1px solid ${theme.branding.premium.border}`,
+					color: theme.branding.premium.text,
 				}),
 			]}
 		>
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index 1d7c427a712de..4ab955c856a3c 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -78,7 +78,7 @@ const FeatureIcon: FC = () => {
 		<TaskAltIcon
 			css={[
 				(theme) => ({
-					color: theme.branding.border,
+					color: theme.branding.premium.border,
 				}),
 			]}
 		/>
@@ -95,8 +95,8 @@ const styles = {
 		padding: 24,
 		borderRadius: 8,
 		gap: 32,
-		backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
-		border: `1px solid ${theme.branding.border}`,
+		backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.premium.background})`,
+		border: `1px solid ${theme.branding.premium.border}`,
 	}),
 	title: {
 		fontWeight: 600,
@@ -112,7 +112,7 @@ const styles = {
 	separator: (theme) => ({
 		width: 1,
 		height: 220,
-		backgroundColor: theme.branding.divider,
+		backgroundColor: theme.branding.premium.divider,
 		marginLeft: 8,
 	}),
 	learnButton: {
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
index eac7fafcae010..96a431495bcd3 100644
--- a/site/src/components/Paywall/PopoverPaywall.tsx
+++ b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -23,8 +23,8 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 			css={[
 				styles.root,
 				(theme) => ({
-					backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
-					border: `1px solid ${theme.branding.border}`,
+					backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.premium.background})`,
+					border: `1px solid ${theme.branding.premium.border}`,
 				}),
 			]}
 		>
@@ -45,7 +45,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 				</Link>
 			</div>
 			<div css={styles.separator} />
-			<Stack direction="column" alignItems="center" spacing={2}>
+			<Stack direction="column" alignItems="left" spacing={2}>
 				<ul css={styles.featureList}>
 					<li css={styles.feature}>
 						<FeatureIcon /> High availability & workspace proxies
@@ -60,16 +60,18 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 						<FeatureIcon /> Unlimited Git & external auth integrations
 					</li>
 				</ul>
-				<Button
-					href={docs("/enterprise")}
-					target="_blank"
-					rel="noreferrer"
-					startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
-					variant="outlined"
-					color="neutral"
-				>
-					Learn about Premium
-				</Button>
+				<div css={styles.learnButton}>
+					<Button
+						href={docs("/enterprise")}
+						target="_blank"
+						rel="noreferrer"
+						startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
+						variant="outlined"
+						color="neutral"
+					>
+						Learn about Premium
+					</Button>
+				</div>
 			</Stack>
 		</div>
 	);
@@ -80,7 +82,7 @@ const FeatureIcon: FC = () => {
 		<TaskAltIcon
 			css={[
 				(theme) => ({
-					color: theme.branding.border,
+					color: theme.branding.premium.border,
 				}),
 			]}
 		/>
@@ -92,7 +94,7 @@ const styles = {
 		display: "flex",
 		flexDirection: "row",
 		alignItems: "center",
-		maxWidth: 600,
+		maxWidth: 770,
 		padding: "24px 36px",
 		borderRadius: 8,
 		gap: 18,
@@ -106,7 +108,7 @@ const styles = {
 	description: (theme) => ({
 		marginTop: 8,
 		fontFamily: "inherit",
-		maxWidth: 420,
+		maxWidth: 360,
 		lineHeight: "160%",
 		color: theme.palette.text.secondary,
 		fontSize: 14,
@@ -121,10 +123,13 @@ const styles = {
 		listStyle: "none",
 		margin: 0,
 		marginRight: 8,
-		padding: "0 12px",
+		padding: "0 0 0 24px",
 		fontSize: 13,
 		fontWeight: 500,
 	},
+	learnButton: {
+		padding: "0 28px",
+	},
 	feature: {
 		display: "flex",
 		alignItems: "center",
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
index b9153c6d1279b..9132e83876dfd 100644
--- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
@@ -3,6 +3,7 @@ import { appearanceConfigKey, updateAppearance } from "api/queries/appearance";
 import type { UpdateAppearanceConfig } from "api/typesGenerated";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQueryClient } from "react-query";
@@ -15,6 +16,7 @@ import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView";
 // the command line would be a significantly worse user experience.
 const AppearanceSettingsPage: FC = () => {
 	const { appearance, entitlements } = useDashboard();
+	const { multiple_organizations: hasPremiumLicense } = useFeatureVisibility();
 	const queryClient = useQueryClient();
 	const updateAppearanceMutation = useMutation(updateAppearance(queryClient));
 
@@ -46,6 +48,7 @@ const AppearanceSettingsPage: FC = () => {
 				isEntitled={
 					entitlements.features.appearance.entitlement !== "not_entitled"
 				}
+				isPremium={hasPremiumLicense}
 			/>
 		</>
 	);
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
index 8c4e2f3285ee2..0c5d470c027fe 100644
--- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -4,8 +4,7 @@ import TextField from "@mui/material/TextField";
 import type { UpdateAppearanceConfig } from "api/typesGenerated";
 import {
 	Badges,
-	DisabledBadge,
-	EntitledBadge,
+	EnterpriseBadge,
 	PremiumBadge,
 } from "components/Badges/Badges";
 import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
@@ -24,6 +23,7 @@ import { AnnouncementBannerSettings } from "./AnnouncementBannerSettings";
 export type AppearanceSettingsPageViewProps = {
 	appearance: UpdateAppearanceConfig;
 	isEntitled: boolean;
+	isPremium: boolean;
 	onSaveAppearance: (
 		newConfig: Partial<UpdateAppearanceConfig>,
 	) => Promise<void>;
@@ -31,7 +31,7 @@ export type AppearanceSettingsPageViewProps = {
 
 export const AppearanceSettingsPageView: FC<
 	AppearanceSettingsPageViewProps
-> = ({ appearance, isEntitled, onSaveAppearance }) => {
+> = ({ appearance, isEntitled, isPremium, onSaveAppearance }) => {
 	const applicationNameForm = useFormik<{
 		application_name: string;
 	}>({
@@ -60,13 +60,17 @@ export const AppearanceSettingsPageView: FC<
 			/>
 
 			<Badges>
-				{isEntitled ? <EntitledBadge /> : <DisabledBadge />}
 				<Popover mode="hover">
-					<PopoverTrigger>
-						<span>
-							<PremiumBadge />
-						</span>
-					</PopoverTrigger>
+					{isEntitled && !isPremium ? (
+						<EnterpriseBadge />
+					) : (
+						<PopoverTrigger>
+							<span>
+								<PremiumBadge />
+							</span>
+						</PopoverTrigger>
+					)}
+
 					<PopoverContent css={{ transform: "translateY(-28px)" }}>
 						<PopoverPaywall
 							message="Appearance"
diff --git a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx b/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx
index cd6b494c07c38..0b23dee112e15 100644
--- a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx
@@ -1,5 +1,6 @@
 import { Loader } from "components/Loader/Loader";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
@@ -9,6 +10,7 @@ import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView";
 const ObservabilitySettingsPage: FC = () => {
 	const { deploymentValues } = useDeploySettings();
 	const { entitlements } = useDashboard();
+	const { multiple_organizations: hasPremiumLicense } = useFeatureVisibility();
 
 	return (
 		<>
@@ -20,6 +22,7 @@ const ObservabilitySettingsPage: FC = () => {
 				<ObservabilitySettingsPageView
 					options={deploymentValues.options}
 					featureAuditLogEnabled={entitlements.features.audit_log.enabled}
+					isPremium={hasPremiumLicense}
 				/>
 			) : (
 				<Loader />
diff --git a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx b/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx
index bdf7b47722603..ece25f476a721 100644
--- a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx
@@ -1,10 +1,15 @@
 import type { SerpentOption } from "api/typesGenerated";
 import {
 	Badges,
-	DisabledBadge,
-	EnabledBadge,
+	EnterpriseBadge,
 	PremiumBadge,
 } from "components/Badges/Badges";
+import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
@@ -15,11 +20,12 @@ import OptionsTable from "../OptionsTable";
 export type ObservabilitySettingsPageViewProps = {
 	options: SerpentOption[];
 	featureAuditLogEnabled: boolean;
+	isPremium: boolean;
 };
 
 export const ObservabilitySettingsPageView: FC<
 	ObservabilitySettingsPageViewProps
-> = ({ options, featureAuditLogEnabled }) => {
+> = ({ options, featureAuditLogEnabled, isPremium }) => {
 	return (
 		<>
 			<Stack direction="column" spacing={6}>
@@ -33,8 +39,25 @@ export const ObservabilitySettingsPageView: FC<
 					/>
 
 					<Badges>
-						{featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
-						<PremiumBadge />
+						<Popover mode="hover">
+							{featureAuditLogEnabled && !isPremium ? (
+								<EnterpriseBadge />
+							) : (
+								<PopoverTrigger>
+									<span>
+										<PremiumBadge />
+									</span>
+								</PopoverTrigger>
+							)}
+
+							<PopoverContent css={{ transform: "translateY(-28px)" }}>
+								<PopoverPaywall
+									message="Observability"
+									description="With a Premium license, you can monitor your application with logs and metrics."
+									documentationLink="https://coder.com/docs/admin/appearance"
+								/>
+							</PopoverContent>
+						</Popover>
 					</Badges>
 				</div>
 
diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
index 035c1be28c287..abb8242aba6c1 100644
--- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
@@ -2,6 +2,7 @@ import TextField from "@mui/material/TextField";
 import { isApiValidationError } from "api/errors";
 import type { CreateOrganizationRequest } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Badges, PremiumBadge } from "components/Badges/Badges";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import {
 	FormFields,
@@ -11,6 +12,12 @@ import {
 } from "components/Form/Form";
 import { IconField } from "components/IconField/IconField";
 import { Paywall } from "components/Paywall/Paywall";
+import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
@@ -58,17 +65,39 @@ export const CreateOrganizationPageView: FC<
 	const getFieldHelpers = getFormHelpers(form, error);
 
 	return (
-		<Stack spacing={3}>
-			<SettingsHeader
-				title="New Organization"
-				description="Organize your deployment into multiple platform teams."
-			/>
+		<Stack>
+			<div>
+				<SettingsHeader
+					title="New Organization"
+					description="Organize your deployment into multiple platform teams."
+				/>
+
+				{Boolean(error) && !isApiValidationError(error) && (
+					<div css={{ marginBottom: 32 }}>
+						<ErrorAlert error={error} />
+					</div>
+				)}
+
+				<Badges>
+					<Popover mode="hover">
+						{isEntitled && (
+							<PopoverTrigger>
+								<span>
+									<PremiumBadge />
+								</span>
+							</PopoverTrigger>
+						)}
 
-			{Boolean(error) && !isApiValidationError(error) && (
-				<div css={{ marginBottom: 32 }}>
-					<ErrorAlert error={error} />
-				</div>
-			)}
+						<PopoverContent css={{ transform: "translateY(-28px)" }}>
+							<PopoverPaywall
+								message="Organizations"
+								description="Create multiple organizations within a single Coder deployment, allowing several platform teams to operate with isolated users, templates, and distinct underlying infrastructure."
+								documentationLink={docs("/guides/using-organizations")}
+							/>
+						</PopoverContent>
+					</Popover>
+				</Badges>
+			</div>
 
 			<ChooseOne>
 				<Cond condition={!isEntitled}>
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
index 8a90404644b19..22841f5d2fbc0 100644
--- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
@@ -165,7 +165,7 @@ export const GroupPage: FC = () => {
 							<TableRow>
 								<TableCell width="59%">User</TableCell>
 								<TableCell width="40">Status</TableCell>
-								<TableCell width="1%"></TableCell>
+								<TableCell width="1%" />
 							</TableRow>
 						</TableHead>
 
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
index 18200b1e5e3d4..a714d480cc702 100644
--- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
@@ -89,7 +89,7 @@ export const OrganizationMembersPageView: FC<
 										<TableColumnHelpTooltip variant="groups" />
 									</Stack>
 								</TableCell>
-								<TableCell width="1%"></TableCell>
+								<TableCell width="1%" />
 							</TableRow>
 						</TableHead>
 						<TableBody>
diff --git a/site/src/theme/branding.ts b/site/src/theme/branding.ts
index d3b29ab7fd54c..c1e42e5111abd 100644
--- a/site/src/theme/branding.ts
+++ b/site/src/theme/branding.ts
@@ -1,6 +1,14 @@
 export interface Branding {
-	background: string;
-	divider: string;
-	border: string;
-	text: string;
+	enterprise: {
+		background: string;
+		divider: string;
+		border: string;
+		text: string;
+	};
+	premium: {
+		background: string;
+		divider: string;
+		border: string;
+		text: string;
+	};
 }
diff --git a/site/src/theme/dark/branding.ts b/site/src/theme/dark/branding.ts
index c44a7326c86de..cc0b603b62f0c 100644
--- a/site/src/theme/dark/branding.ts
+++ b/site/src/theme/dark/branding.ts
@@ -2,8 +2,16 @@ import type { Branding } from "../branding";
 import colors from "../tailwindColors";
 
 export default {
-	background: colors.violet[950],
-	divider: colors.violet[900],
-	border: colors.violet[400],
-	text: colors.violet[50],
+	enterprise: {
+		background: colors.blue[950],
+		divider: colors.blue[900],
+		border: colors.blue[400],
+		text: colors.blue[50],
+	},
+	premium: {
+		background: colors.violet[950],
+		divider: colors.violet[900],
+		border: colors.violet[400],
+		text: colors.violet[50],
+	},
 } satisfies Branding;
diff --git a/site/src/theme/darkBlue/branding.ts b/site/src/theme/darkBlue/branding.ts
index c44a7326c86de..cc0b603b62f0c 100644
--- a/site/src/theme/darkBlue/branding.ts
+++ b/site/src/theme/darkBlue/branding.ts
@@ -2,8 +2,16 @@ import type { Branding } from "../branding";
 import colors from "../tailwindColors";
 
 export default {
-	background: colors.violet[950],
-	divider: colors.violet[900],
-	border: colors.violet[400],
-	text: colors.violet[50],
+	enterprise: {
+		background: colors.blue[950],
+		divider: colors.blue[900],
+		border: colors.blue[400],
+		text: colors.blue[50],
+	},
+	premium: {
+		background: colors.violet[950],
+		divider: colors.violet[900],
+		border: colors.violet[400],
+		text: colors.violet[50],
+	},
 } satisfies Branding;
diff --git a/site/src/theme/light/branding.ts b/site/src/theme/light/branding.ts
index 4b9ff1f3c8af3..97b6df71def0e 100644
--- a/site/src/theme/light/branding.ts
+++ b/site/src/theme/light/branding.ts
@@ -2,8 +2,16 @@ import type { Branding } from "../branding";
 import colors from "../tailwindColors";
 
 export default {
-	background: colors.violet[100],
-	divider: colors.violet[300],
-	border: colors.violet[600],
-	text: colors.violet[950],
+	enterprise: {
+		background: colors.blue[100],
+		divider: colors.blue[300],
+		border: colors.blue[600],
+		text: colors.blue[950],
+	},
+	premium: {
+		background: colors.violet[100],
+		divider: colors.violet[300],
+		border: colors.violet[600],
+		text: colors.violet[950],
+	},
 } satisfies Branding;

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/14650.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/14650.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/14650.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/14650.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>