Merge branch 'dev' into feat/paginate-user-roles-table

src/app/[orgId]/settings/(private)/access/approvals/page.tsx

@@ -12,6 +12,11 @@ import type { ListRolesResponse } from "@server/routers/role";
 import type { AxiosResponse } from "axios";
 import { getTranslations } from "next-intl/server";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Approvals"
+};
 
 export interface ApprovalFeedPageProps {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/(private)/billing/layout.tsx

@@ -7,6 +7,11 @@ import { getTranslations } from "next-intl/server";
 import { getCachedOrgUser } from "@app/lib/api/getCachedOrgUser";
 import { getCachedOrg } from "@app/lib/api/getCachedOrg";
 import { build } from "@server/build";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Billing"
+};
 
 type BillingSettingsProps = {
     children: React.ReactNode;

src/app/[orgId]/settings/(private)/billing/page.tsx

@@ -477,7 +477,7 @@ export default function BillingPage() {
     };
 
     const handleContactUs = () => {
-        window.open("https://pangolin.net/talk-to-us", "_blank");
+        window.open("https://pangolin.net/contact", "_blank");
     };
 
     // Get current plan ID from tier
@@ -491,6 +491,10 @@ export default function BillingPage() {
 
     const currentPlanId = getCurrentPlanId();
 
+    const visiblePlanOptions = planOptions.filter(
+        (plan) => plan.id !== "home" || currentPlanId === "home"
+    );
+
     // Check if subscription is in a problematic state that requires attention
     const hasProblematicSubscription = (): boolean => {
         if (!tierSubscription?.subscription) return false;
@@ -554,6 +558,14 @@ export default function BillingPage() {
     // Get button label and action for each plan
     const getPlanAction = (plan: PlanOption) => {
         if (plan.id === "enterprise") {
+            if (plan.id === currentPlanId) {
+                return {
+                    label: "Manage Current Plan",
+                    action: handleModifySubscription,
+                    variant: "default" as const,
+                    disabled: false
+                };
+            }
             return {
                 label: "Contact Us",
                 action: handleContactUs,
@@ -803,8 +815,8 @@ export default function BillingPage() {
                 </SettingsSectionHeader>
                 <SettingsSectionBody>
                     {/* Plan Cards Grid */}
-                    <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
-                        {planOptions.map((plan) => {
+                    <div className={cn("grid grid-cols-1 gap-4", visiblePlanOptions.length === 5 ? "md:grid-cols-5" : "md:grid-cols-4")}>
+                        {visiblePlanOptions.map((plan) => {
                             const isCurrentPlan = plan.id === currentPlanId;
                             const planAction = getPlanAction(plan);
 

src/app/[orgId]/settings/(private)/idp/[idpId]/general/page.tsx

@@ -97,7 +97,8 @@ export default function GeneralPage() {
         emailPath: z.string().nullable().optional(),
         namePath: z.string().nullable().optional(),
         scopes: z.string().min(1, { message: t("idpScopeRequired") }),
-        autoProvision: z.boolean().default(false)
+        autoProvision: z.boolean().default(false),
+        orgMapping: z.string().optional()
     });
 
     // Google form schema (simplified)
@@ -109,7 +110,8 @@ export default function GeneralPage() {
             .min(1, { message: t("idpClientSecretRequired") }),
         roleMapping: z.string().nullable().optional(),
         roleId: z.number().nullable().optional(),
-        autoProvision: z.boolean().default(false)
+        autoProvision: z.boolean().default(false),
+        orgMapping: z.string().optional()
     });
 
     // Azure form schema (simplified with tenant ID)
@@ -122,7 +124,8 @@ export default function GeneralPage() {
         tenantId: z.string().min(1, { message: t("idpTenantIdRequired") }),
         roleMapping: z.string().nullable().optional(),
         roleId: z.number().nullable().optional(),
-        autoProvision: z.boolean().default(false)
+        autoProvision: z.boolean().default(false),
+        orgMapping: z.string().optional()
     });
 
     type OidcFormValues = z.infer<typeof OidcFormSchema>;
@@ -160,7 +163,8 @@ export default function GeneralPage() {
             autoProvision: true,
             roleMapping: null,
             roleId: null,
-            tenantId: ""
+            tenantId: "",
+            orgMapping: ""
         }
     });
 
@@ -227,7 +231,8 @@ export default function GeneralPage() {
                         clientSecret: data.idpOidcConfig.clientSecret,
                         autoProvision: data.idp.autoProvision,
                         roleMapping: roleMapping || null,
-                        roleId: null
+                        roleId: null,
+                        orgMapping: data.idpOrg?.orgMapping ?? ""
                     };
 
                     // Add variant-specific fields
@@ -344,12 +349,14 @@ export default function GeneralPage() {
             }
 
             // Build payload based on variant
+            const orgMappingTrimmed = data.orgMapping?.trim() ?? "";
             let payload: any = {
                 name: data.name,
                 clientId: data.clientId,
                 clientSecret: data.clientSecret,
                 autoProvision: data.autoProvision,
-                roleMapping: roleMappingExpression
+                roleMapping: roleMappingExpression,
+                orgMapping: orgMappingTrimmed === "" ? null : orgMappingTrimmed
             };
 
             // Add variant-specific fields
@@ -532,6 +539,10 @@ export default function GeneralPage() {
                                     }
                                     rawExpression={rawRoleExpression}
                                     onRawExpressionChange={setRawRoleExpression}
+                                    orgMappingField={{
+                                        control: form.control,
+                                        name: "orgMapping"
+                                    }}
                                 />
                             </form>
                         </Form>

src/app/[orgId]/settings/(private)/idp/[idpId]/layout.tsx

@@ -6,6 +6,11 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { HorizontalTabs, TabItem } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Identity Provider"
+};
 
 interface SettingsLayoutProps {
     children: React.ReactNode;

src/app/[orgId]/settings/(private)/idp/[idpId]/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Identity Provider"
+};
+
 export default async function IdpPage(props: {
     params: Promise<{ orgId: string; idpId: string }>;
 }) {

src/app/[orgId]/settings/(private)/idp/create/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Create Identity Provider"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/(private)/idp/create/page.tsx

@@ -91,7 +91,8 @@ export default function Page() {
         tenantId: z.string().optional(),
         autoProvision: z.boolean().default(false),
         roleMapping: z.string().nullable().optional(),
-        roleId: z.number().nullable().optional()
+        roleId: z.number().nullable().optional(),
+        orgMapping: z.string().optional()
     });
 
     type CreateIdpFormValues = z.infer<typeof createIdpFormSchema>;
@@ -112,7 +113,8 @@ export default function Page() {
             tenantId: "",
             autoProvision: false,
             roleMapping: null,
-            roleId: null
+            roleId: null,
+            orgMapping: ""
         }
     });
 
@@ -177,7 +179,7 @@ export default function Page() {
                 return;
             }
 
-            const payload = {
+            const payload: Record<string, unknown> = {
                 name: data.name,
                 clientId: data.clientId,
                 clientSecret: data.clientSecret,
@@ -191,6 +193,10 @@ export default function Page() {
                 scopes: data.scopes,
                 variant: data.type
             };
+            const trimmedOrgMapping = data.orgMapping?.trim();
+            if (trimmedOrgMapping) {
+                payload.orgMapping = trimmedOrgMapping;
+            }
 
             // Use the appropriate endpoint based on provider type
             const endpoint = "oidc";
@@ -336,6 +342,10 @@ export default function Page() {
                                     }
                                     rawExpression={rawRoleExpression}
                                     onRawExpressionChange={setRawRoleExpression}
+                                    orgMappingField={{
+                                        control: form.control,
+                                        name: "orgMapping"
+                                    }}
                                 />
                             </form>
                         </Form>

src/app/[orgId]/settings/(private)/idp/page.tsx

@@ -7,6 +7,11 @@ import { getTranslations } from "next-intl/server";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { IdpGlobalModeBanner } from "@app/components/IdpGlobalModeBanner";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Identity Providers"
+};
 
 type OrgIdpPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/(private)/license/page.tsx

@@ -3,6 +3,11 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListGeneratedLicenseKeysResponse } from "@server/routers/generatedLicense/types";
 import { AxiosResponse } from "axios";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Enterprise Licenses"
+};
 
 type Props = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Remote Exit Node"
+};
+
 export default async function RemoteExitNodePage(props: {
     params: Promise<{ orgId: string; remoteExitNodeId: string }>;
 }) {

src/app/[orgId]/settings/(private)/remote-exit-nodes/create/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Create Remote Exit Node"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/(private)/remote-exit-nodes/page.tsx

@@ -7,6 +7,11 @@ import ExitNodesTable, {
 } from "@app/components/ExitNodesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Remote Exit Nodes"
+};
 
 type RemoteExitNodesPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/access/invitations/page.tsx

@@ -3,15 +3,19 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import InvitationsTable, {
     InvitationRow
-} from "../../../../../components/InvitationsTable";
+} from "@app/components/InvitationsTable";
 import { GetOrgResponse } from "@server/routers/org";
 import { cache } from "react";
 import OrgProvider from "@app/providers/OrgProvider";
 import UserProvider from "@app/providers/UserProvider";
 import { verifySession } from "@app/lib/auth/verifySession";
-import AccessPageHeaderAndNav from "../../../../../components/AccessPageHeaderAndNav";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Invitations"
+};
 
 type InvitationsPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/access/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Access"
+};
+
 type AccessPageProps = {
     params: Promise<{ orgId: string }>;
 };

src/app/[orgId]/settings/access/roles/page.tsx

@@ -8,6 +8,11 @@ import RolesTable, { type RoleRow } from "@app/components/RolesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
 import { getCachedOrg } from "@app/lib/api/getCachedOrg";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Roles"
+};
 
 type RolesPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/access/users/[userId]/layout.tsx

@@ -8,6 +8,11 @@ import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import { cache } from "react";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "User"
+};
 
 interface UserLayoutProps {
     children: React.ReactNode;

src/app/[orgId]/settings/access/users/[userId]/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "User"
+};
+
 export default async function UserPage(props: {
     params: Promise<{ orgId: string; userId: string }>;
 }) {

src/app/[orgId]/settings/access/users/create/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Create User"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/access/users/create/page.tsx

@@ -46,7 +46,7 @@ import { Checkbox } from "@app/components/ui/checkbox";
 import { ListIdpsResponse } from "@server/routers/idp";
 import { useTranslations } from "next-intl";
 import { build } from "@server/build";
-import Image from "next/image";
+import IdpTypeIcon from "@app/components/IdpTypeIcon";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import OrgRolesTagField from "@app/components/OrgRolesTagField";
@@ -152,31 +152,8 @@ export default function Page() {
 
     const getIdpIcon = (variant: string | null) => {
         if (!variant) return null;
-
-        switch (variant.toLowerCase()) {
-            case "google":
-                return (
-                    <Image
-                        src="/idp/google.png"
-                        alt={t("idpGoogleAlt")}
-                        width={24}
-                        height={24}
-                        className="rounded"
-                    />
-                );
-            case "azure":
-                return (
-                    <Image
-                        src="/idp/azure.png"
-                        alt={t("idpAzureAlt")}
-                        width={24}
-                        height={24}
-                        className="rounded"
-                    />
-                );
-            default:
-                return null;
-        }
+        const type = variant.toLowerCase();
+        return <IdpTypeIcon type={type} size={24} />;
     };
 
     const validFor = [
@@ -340,15 +317,16 @@ export default function Page() {
 
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
-        const res = await api.post<AxiosResponse<InviteUserResponse>>(
-            `/org/${orgId}/create-invite`,
-            {
-                email: values.email,
-                roleIds,
-                validHours: parseInt(values.validForHours),
-                sendEmail
-            }
-        )
+        const res = await api
+            .post<AxiosResponse<InviteUserResponse>>(
+                `/org/${orgId}/create-invite`,
+                {
+                    email: values.email,
+                    roleIds,
+                    validHours: parseInt(values.validForHours),
+                    sendEmail
+                }
+            )
             .catch((e) => {
                 if (e.response?.status === 409) {
                     toast({
@@ -489,7 +467,7 @@ export default function Page() {
 
             <div>
                 <SettingsContainer>
-                    {!inviteLink ? (
+                    {!inviteLink && userOptions.length > 1 ? (
                         <SettingsSection>
                             <SettingsSectionHeader>
                                 <SettingsSectionTitle>
@@ -512,7 +490,7 @@ export default function Page() {
                                             genericOidcForm.reset();
                                         }
                                     }}
-                                    cols={2}
+                                    cols={3}
                                 />
                             </SettingsSectionBody>
                         </SettingsSection>

src/app/[orgId]/settings/access/users/page.tsx

@@ -11,6 +11,11 @@ import UserProvider from "@app/providers/UserProvider";
 import { verifySession } from "@app/lib/auth/verifySession";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Users"
+};
 
 type UsersPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/api-keys/[apiKeyId]/layout.tsx

@@ -7,6 +7,11 @@ import { GetApiKeyResponse } from "@server/routers/apiKeys";
 import ApiKeyProvider from "@app/providers/ApiKeyProvider";
 import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "API Key"
+};
 
 interface SettingsLayoutProps {
     children: React.ReactNode;

src/app/[orgId]/settings/api-keys/[apiKeyId]/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "API Key"
+};
+
 export default async function ApiKeysPage(props: {
     params: Promise<{ orgId: string; apiKeyId: string }>;
 }) {

src/app/[orgId]/settings/api-keys/create/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Create API Key"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/api-keys/page.tsx

@@ -2,11 +2,14 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import OrgApiKeysTable, {
-    OrgApiKeyRow
-} from "../../../../components/OrgApiKeysTable";
+import OrgApiKeysTable, { OrgApiKeyRow } from "@app/components/OrgApiKeysTable";
 import { ListOrgApiKeysResponse } from "@server/routers/apiKeys";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "API Keys"
+};
 
 type ApiKeyPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/blueprints/[blueprintId]/page.tsx

@@ -17,7 +17,7 @@ type BluePrintsPageProps = {
 };
 
 export const metadata: Metadata = {
-    title: "Blueprint Detail"
+    title: "Edit Blueprint"
 };
 
 export default async function BluePrintDetailPage(props: BluePrintsPageProps) {

src/app/[orgId]/settings/blueprints/create/page.tsx

@@ -12,7 +12,7 @@ export interface CreateBlueprintPageProps {
 }
 
 export const metadata: Metadata = {
-    title: "Create blueprint"
+    title: "Create Blueprint"
 };
 
 export default async function CreateBlueprintPage(

src/app/[orgId]/settings/clients/machine/[niceId]/layout.tsx

@@ -8,6 +8,11 @@ import { GetClientResponse } from "@server/routers/client";
 import { AxiosResponse } from "axios";
 import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Machine Client"
+};
 
 type SettingsLayoutProps = {
     children: React.ReactNode;

src/app/[orgId]/settings/clients/machine/[niceId]/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Machine Client"
+};
+
 export default async function ClientPage(props: {
     params: Promise<{ orgId: string; niceId: number | string }>;
 }) {

src/app/[orgId]/settings/clients/machine/create/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Create Machine Client"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/clients/machine/page.tsx

@@ -8,6 +8,11 @@ import { ListClientsResponse } from "@server/routers/client";
 import { AxiosResponse } from "axios";
 import { getTranslations } from "next-intl/server";
 import type { Pagination } from "@server/types/Pagination";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Machine Clients"
+};
 
 type ClientsPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/clients/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Clients"
+};
+
 type ClientsPageProps = {
     params: Promise<{ orgId: string }>;
     searchParams: Promise<{ view?: string }>;

src/app/[orgId]/settings/clients/user/[niceId]/layout.tsx

@@ -8,6 +8,11 @@ import { GetClientResponse } from "@server/routers/client";
 import { AxiosResponse } from "axios";
 import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "User Device"
+};
 
 type SettingsLayoutProps = {
     children: React.ReactNode;

src/app/[orgId]/settings/clients/user/[niceId]/page.tsx

@@ -1,10 +1,13 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "User Device"
+};
+
 export default async function ClientPage(props: {
     params: Promise<{ orgId: string; niceId: number | string }>;
 }) {
     const params = await props.params;
-    redirect(
-        `/${params.orgId}/settings/clients/user/${params.niceId}/general`
-    );
+    redirect(`/${params.orgId}/settings/clients/user/${params.niceId}/general`);
 }

src/app/[orgId]/settings/clients/user/page.tsx

@@ -7,6 +7,11 @@ import { type ListUserDevicesResponse } from "@server/routers/client";
 import type { Pagination } from "@server/types/Pagination";
 import { AxiosResponse } from "axios";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "User Devices"
+};
 
 type ClientsPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/domains/[domainId]/page.tsx

@@ -1,15 +1,13 @@
-import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import DomainInfoCard from "@app/components/DomainInfoCard";
-import RestartDomainButton from "@app/components/RestartDomainButton";
+import DomainPageClient from "@app/components/DomainPageClient";
 import { GetDomainResponse } from "@server/routers/domain/getDomain";
-import { pullEnv } from "@app/lib/pullEnv";
-import { getTranslations } from "next-intl/server";
-import RefreshButton from "@app/components/RefreshButton";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { GetDNSRecordsResponse } from "@server/routers/domain";
-import DNSRecordsTable from "@app/components/DNSRecordTable";
-import DomainCertForm from "@app/components/DomainCertForm";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Domain"
+};
 
 interface DomainSettingsPageProps {
     params: Promise<{ domainId: string; orgId: string }>;
@@ -19,8 +17,6 @@ export default async function DomainSettingsPage({
     params
 }: DomainSettingsPageProps) {
     const { domainId, orgId } = await params;
-    const t = await getTranslations();
-    const env = pullEnv();
 
     let domain: GetDomainResponse | null = null;
     try {
@@ -33,55 +29,27 @@ export default async function DomainSettingsPage({
         return null;
     }
 
-    let dnsRecords;
+    let dnsRecords: GetDNSRecordsResponse | null = null;
     try {
         const response = await internal.get(
             `/org/${orgId}/domain/${domainId}/dns-records`,
             await authCookieHeader()
         );
         dnsRecords = response.data.data;
-    } catch (error) {
+    } catch {
         return null;
     }
 
-    if (!domain) {
+    if (!domain || !dnsRecords) {
         return null;
     }
 
     return (
-        <>
-            <div className="flex justify-between">
-                <SettingsSectionTitle
-                    title={domain.baseDomain}
-                    description={t("domainSettingDescription")}
-                />
-                {env.flags.usePangolinDns && domain.failed ? (
-                    <RestartDomainButton
-                        orgId={orgId}
-                        domainId={domain.domainId}
-                    />
-                ) : (
-                    <RefreshButton />
-                )}
-            </div>
-            <div className="space-y-6">
-                <DomainInfoCard
-                    failed={domain.failed}
-                    verified={domain.verified}
-                    type={domain.type}
-                    errorMessage={domain.errorMessage}
-                />
-
-                <DNSRecordsTable records={dnsRecords} type={domain.type} />
-
-                {domain.type == "wildcard" && !domain.configManaged && (
-                    <DomainCertForm
-                        orgId={orgId}
-                        domainId={domain.domainId}
-                        domain={domain}
-                    />
-                )}
-            </div>
-        </>
+        <DomainPageClient
+            initialDomain={domain}
+            initialDnsRecords={dnsRecords}
+            orgId={orgId}
+            domainId={domainId}
+        />
     );
-}
+}

src/app/[orgId]/settings/domains/page.tsx

@@ -2,7 +2,7 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import DomainsTable, { DomainRow } from "../../../../components/DomainsTable";
+import DomainsTable, { DomainRow } from "@app/components/DomainsTable";
 import { getTranslations } from "next-intl/server";
 import { cache } from "react";
 import { GetOrgResponse } from "@server/routers/org";
@@ -11,6 +11,11 @@ import OrgProvider from "@app/providers/OrgProvider";
 import { ListDomainsResponse } from "@server/routers/domain";
 import { toUnicode } from "punycode";
 import { getCachedOrg } from "@app/lib/api/getCachedOrg";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Domains"
+};
 
 type Props = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/general/auth-page/page.tsx

@@ -11,6 +11,7 @@ import {
     GetLoginPageResponse
 } from "@server/routers/loginPage/types";
 import { AxiosResponse } from "axios";
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
 export interface AuthPageProps {

src/app/[orgId]/settings/general/layout.tsx

@@ -11,6 +11,11 @@ import { getCachedOrg } from "@app/lib/api/getCachedOrg";
 import { getCachedOrgUser } from "@app/lib/api/getCachedOrgUser";
 import { build } from "@server/build";
 import { pullEnv } from "@app/lib/pullEnv";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Organization"
+};
 
 type GeneralSettingsProps = {
     children: React.ReactNode;

src/app/[orgId]/settings/logs/access/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Access Logs"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/logs/action/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Action Logs"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/logs/analytics/page.tsx

@@ -2,6 +2,11 @@ import { LogAnalyticsData } from "@app/components/LogAnalyticsData";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
 import { Suspense } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Log Analytics"
+};
 
 export interface AnalyticsPageProps {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/logs/connection/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Connection Logs"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/logs/connection/page.tsx

@@ -491,7 +491,7 @@ export default function ConnectionLogsPage() {
                 );
             },
             cell: ({ row }) => {
-                const clientType = row.original.clientType === "olm" ? "machine" : "user";
+                const clientType = row.original.userId ? "user" : "machine";
                 if (row.original.clientName && row.original.clientNiceId) {
                     return (
                         <Link

src/app/[orgId]/settings/logs/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Logs"
+};
+
 export default function GeneralPage() {
     return null;
 }

src/app/[orgId]/settings/logs/request/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Request Logs"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/logs/streaming/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Streaming Logs"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/logs/streaming/page.tsx

@@ -0,0 +1,485 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useParams } from "next/navigation";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import { Button } from "@app/components/ui/button";
+import { Switch } from "@app/components/ui/switch";
+import { Globe, MoreHorizontal, Plus } from "lucide-react";
+import { AxiosResponse } from "axios";
+import { build } from "@server/build";
+import Image from "next/image";
+import { StrategySelect, StrategyOption } from "@app/components/StrategySelect";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
+import {
+    Destination,
+    HttpDestinationCredenza,
+    parseHttpConfig
+} from "@app/components/HttpDestinationCredenza";
+import { useTranslations } from "next-intl";
+
+// ── Re-export Destination so the rest of the file can use it ──────────────────
+
+interface ListDestinationsResponse {
+    destinations: Destination[];
+    pagination: {
+        total: number;
+        limit: number;
+        offset: number;
+    };
+}
+
+// ── Destination card ───────────────────────────────────────────────────────────
+
+interface DestinationCardProps {
+    destination: Destination;
+    onToggle: (id: number, enabled: boolean) => void;
+    onEdit: (destination: Destination) => void;
+    onDelete: (destination: Destination) => void;
+    isToggling: boolean;
+    disabled?: boolean;
+}
+
+function DestinationCard({
+    destination,
+    onToggle,
+    onEdit,
+    onDelete,
+    isToggling,
+    disabled = false
+}: DestinationCardProps) {
+    const t = useTranslations();
+    const cfg = parseHttpConfig(destination.config);
+
+    return (
+        <div className="relative flex flex-col rounded-lg border bg-card text-card-foreground p-5 gap-3">
+            {/* Top row: icon + name/type + toggle */}
+            <div className="flex items-start justify-between gap-3">
+                <div className="flex items-center gap-3 min-w-0">
+                    {/* Squirkle icon: gray outer → white inner → black globe */}
+                    <div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-2xl bg-muted">
+                        <div className="flex items-center justify-center w-6 h-6 rounded-xl bg-white shadow-sm">
+                            <Globe className="h-3.5 w-3.5 text-black" />
+                        </div>
+                    </div>
+                    <div className="min-w-0">
+                        <p className="font-semibold text-sm leading-tight truncate">
+                            {cfg.name || t("streamingUnnamedDestination")}
+                        </p>
+                        <p className="text-xs text-muted-foreground truncate mt-0.5">
+                            HTTP
+                        </p>
+                    </div>
+                </div>
+                <Switch
+                    checked={destination.enabled}
+                    onCheckedChange={(v) =>
+                        onToggle(destination.destinationId, v)
+                    }
+                    disabled={isToggling || disabled}
+                    className="shrink-0 mt-0.5"
+                />
+            </div>
+
+            {/* URL preview */}
+            <p className="text-xs text-muted-foreground truncate">
+                {cfg.url || (
+                    <span className="italic">
+                        {t("streamingNoUrlConfigured")}
+                    </span>
+                )}
+            </p>
+
+            {/* Footer: edit button + three-dots menu */}
+            <div className="mt-auto pt-5 flex gap-2">
+                <Button
+                    variant="outline"
+                    onClick={() => onEdit(destination)}
+                    disabled={disabled}
+                    className="flex-1"
+                >
+                    {t("edit")}
+                </Button>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            className="h-9 w-9 shrink-0"
+                            disabled={disabled}
+                        >
+                            <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                            className="text-destructive focus:text-destructive"
+                            onClick={() => onDelete(destination)}
+                        >
+                            {t("delete")}
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </div>
+    );
+}
+
+// ── Add destination card ───────────────────────────────────────────────────────
+
+function AddDestinationCard({ onClick }: { onClick: () => void }) {
+    const t = useTranslations();
+
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-transparent transition-colors p-5 min-h-35 w-full text-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5 cursor-pointer"
+        >
+            <div className="flex flex-col items-center gap-2">
+                <div className="flex items-center justify-center w-9 h-9 rounded-md border-2 border-dashed border-current">
+                    <Plus className="h-4 w-4" />
+                </div>
+                <span className="text-sm font-medium">
+                    {t("streamingAddDestination")}
+                </span>
+            </div>
+        </button>
+    );
+}
+
+// ── Destination type picker ────────────────────────────────────────────────────
+
+type DestinationType = "http" | "s3" | "datadog";
+
+interface DestinationTypePickerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSelect: (type: DestinationType) => void;
+    isPaywalled?: boolean;
+}
+
+function DestinationTypePicker({
+    open,
+    onOpenChange,
+    onSelect,
+    isPaywalled = false
+}: DestinationTypePickerProps) {
+    const t = useTranslations();
+    const [selected, setSelected] = useState<DestinationType>("http");
+
+    const destinationTypeOptions: ReadonlyArray<
+        StrategyOption<DestinationType>
+    > = [
+        {
+            id: "http",
+            title: t("streamingHttpWebhookTitle"),
+            description: t("streamingHttpWebhookDescription"),
+            icon: <Globe className="h-6 w-6" />
+        },
+        {
+            id: "s3",
+            title: t("streamingS3Title"),
+            description: t("streamingS3Description"),
+            disabled: true,
+            icon: (
+                <Image
+                    src="/third-party/s3.png"
+                    alt={t("streamingS3Title")}
+                    width={24}
+                    height={24}
+                    className="rounded-sm"
+                />
+            )
+        },
+        {
+            id: "datadog",
+            title: t("streamingDatadogTitle"),
+            description: t("streamingDatadogDescription"),
+            disabled: true,
+            icon: (
+                <Image
+                    src="/third-party/dd.png"
+                    alt={t("streamingDatadogTitle")}
+                    width={24}
+                    height={24}
+                    className="rounded-sm"
+                />
+            )
+        }
+    ];
+
+    useEffect(() => {
+        if (open) setSelected("http");
+    }, [open]);
+
+    return (
+        <Credenza open={open} onOpenChange={onOpenChange}>
+            <CredenzaContent className="sm:max-w-lg">
+                <CredenzaHeader>
+                    <CredenzaTitle>
+                        {t("streamingAddDestination")}
+                    </CredenzaTitle>
+                    <CredenzaDescription>
+                        {t("streamingTypePickerDescription")}
+                    </CredenzaDescription>
+                </CredenzaHeader>
+                <CredenzaBody>
+                    <div
+                        className={
+                            isPaywalled ? "pointer-events-none opacity-50" : ""
+                        }
+                    >
+                        <StrategySelect
+                            options={destinationTypeOptions}
+                            value={selected}
+                            onChange={setSelected}
+                            cols={1}
+                        />
+                    </div>
+                </CredenzaBody>
+                <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button variant="outline">{t("cancel")}</Button>
+                    </CredenzaClose>
+                    <Button
+                        onClick={() => onSelect(selected)}
+                        disabled={isPaywalled}
+                    >
+                        {t("continue")}
+                    </Button>
+                </CredenzaFooter>
+            </CredenzaContent>
+        </Credenza>
+    );
+}
+
+// ── Main page ──────────────────────────────────────────────────────────────────
+
+export default function StreamingDestinationsPage() {
+    const { orgId } = useParams() as { orgId: string };
+    const api = createApiClient(useEnvContext());
+    const { isPaidUser } = usePaidStatus();
+    const isEnterprise = isPaidUser(tierMatrix[TierFeature.SIEM]);
+    const t = useTranslations();
+
+    const [destinations, setDestinations] = useState<Destination[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [modalOpen, setModalOpen] = useState(false);
+    const [typePickerOpen, setTypePickerOpen] = useState(false);
+    const [editingDestination, setEditingDestination] =
+        useState<Destination | null>(null);
+    const [togglingIds, setTogglingIds] = useState<Set<number>>(new Set());
+
+    // Delete state
+    const [deleteTarget, setDeleteTarget] = useState<Destination | null>(null);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+
+    const loadDestinations = useCallback(async () => {
+        if (build == "oss") {
+            setDestinations([]);
+            setLoading(false);
+            return;
+        }
+        try {
+            const res = await api.get<AxiosResponse<ListDestinationsResponse>>(
+                `/org/${orgId}/event-streaming-destinations`
+            );
+            setDestinations(res.data.data.destinations ?? []);
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("streamingFailedToLoad"),
+                description: formatAxiosError(e, t("streamingUnexpectedError"))
+            });
+        } finally {
+            setLoading(false);
+        }
+    }, [orgId]);
+
+    useEffect(() => {
+        loadDestinations();
+    }, [loadDestinations]);
+
+    const handleToggle = async (destinationId: number, enabled: boolean) => {
+        // Optimistic update
+        setDestinations((prev) =>
+            prev.map((d) =>
+                d.destinationId === destinationId ? { ...d, enabled } : d
+            )
+        );
+        setTogglingIds((prev) => new Set(prev).add(destinationId));
+
+        try {
+            await api.post(
+                `/org/${orgId}/event-streaming-destination/${destinationId}`,
+                { enabled }
+            );
+        } catch (e) {
+            // Revert on failure
+            setDestinations((prev) =>
+                prev.map((d) =>
+                    d.destinationId === destinationId
+                        ? { ...d, enabled: !enabled }
+                        : d
+                )
+            );
+            toast({
+                variant: "destructive",
+                title: t("streamingFailedToUpdate"),
+                description: formatAxiosError(e, t("streamingUnexpectedError"))
+            });
+        } finally {
+            setTogglingIds((prev) => {
+                const next = new Set(prev);
+                next.delete(destinationId);
+                return next;
+            });
+        }
+    };
+
+    const handleDeleteCard = (destination: Destination) => {
+        setDeleteTarget(destination);
+        setDeleteDialogOpen(true);
+    };
+
+    const handleDeleteConfirm = async () => {
+        if (!deleteTarget) return;
+        setDeleting(true);
+        try {
+            await api.delete(
+                `/org/${orgId}/event-streaming-destination/${deleteTarget.destinationId}`
+            );
+            toast({ title: t("streamingDeletedSuccess") });
+            setDeleteDialogOpen(false);
+            setDeleteTarget(null);
+            loadDestinations();
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("streamingFailedToDelete"),
+                description: formatAxiosError(e, t("streamingUnexpectedError"))
+            });
+        } finally {
+            setDeleting(false);
+        }
+    };
+
+    const openCreate = () => {
+        setTypePickerOpen(true);
+    };
+
+    const handleTypePicked = (_type: DestinationType) => {
+        setTypePickerOpen(false);
+        setEditingDestination(null);
+        setModalOpen(true);
+    };
+
+    const openEdit = (destination: Destination) => {
+        setEditingDestination(destination);
+        setModalOpen(true);
+    };
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("streamingTitle")}
+                description={t("streamingDescription")}
+            />
+
+            <PaidFeaturesAlert tiers={tierMatrix[TierFeature.SIEM]} />
+
+            {loading ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                    {Array.from({ length: 4 }).map((_, i) => (
+                        <div
+                            key={i}
+                            className="rounded-lg border bg-card p-5 min-h-36 animate-pulse"
+                        />
+                    ))}
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                    {destinations.map((dest) => (
+                        <DestinationCard
+                            key={dest.destinationId}
+                            destination={dest}
+                            onToggle={handleToggle}
+                            onEdit={openEdit}
+                            onDelete={handleDeleteCard}
+                            isToggling={togglingIds.has(dest.destinationId)}
+                            disabled={!isEnterprise}
+                        />
+                    ))}
+                    {/* Add card is always clickable — paywall is enforced inside the picker */}
+                    <AddDestinationCard onClick={openCreate} />
+                </div>
+            )}
+
+            <DestinationTypePicker
+                open={typePickerOpen}
+                onOpenChange={setTypePickerOpen}
+                onSelect={handleTypePicked}
+                isPaywalled={!isEnterprise}
+            />
+
+            <HttpDestinationCredenza
+                open={modalOpen}
+                onOpenChange={setModalOpen}
+                editing={editingDestination}
+                orgId={orgId}
+                onSaved={loadDestinations}
+            />
+
+            {deleteTarget && (
+                <ConfirmDeleteDialog
+                    open={deleteDialogOpen}
+                    setOpen={(v) => {
+                        setDeleteDialogOpen(v);
+                        if (!v) setDeleteTarget(null);
+                    }}
+                    string={
+                        parseHttpConfig(deleteTarget.config).name ||
+                        t("streamingDeleteDialogThisDestination")
+                    }
+                    title={t("streamingDeleteTitle")}
+                    dialog={
+                        <p>
+                            {t("streamingDeleteDialogAreYouSure")}{" "}
+                            <span>
+                                {parseHttpConfig(deleteTarget.config).name ||
+                                    t("streamingDeleteDialogThisDestination")}
+                            </span>
+                            {t("streamingDeleteDialogPermanentlyRemoved")}
+                        </p>
+                    }
+                    buttonText={t("streamingDeleteButtonText")}
+                    onConfirm={handleDeleteConfirm}
+                />
+            )}
+        </>
+    );
+}

src/app/[orgId]/settings/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Settings"
+};
+
 type OrgPageProps = {
     params: Promise<{ orgId: string }>;
 };

src/app/[orgId]/settings/provisioning/keys/page.tsx

@@ -4,7 +4,7 @@ import { AxiosResponse } from "axios";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import SiteProvisioningKeysTable, {
     SiteProvisioningKeyRow
-} from "../../../../../components/SiteProvisioningKeysTable";
+} from "@app/components/SiteProvisioningKeysTable";
 import { ListSiteProvisioningKeysResponse } from "@server/routers/siteProvisioning/types";
 import { getTranslations } from "next-intl/server";
 import { TierFeature, tierMatrix } from "@server/lib/billing/tierMatrix";
@@ -12,6 +12,11 @@ import DismissableBanner from "@app/components/DismissableBanner";
 import Link from "next/link";
 import { Button } from "@app/components/ui/button";
 import { ArrowRight, Plug } from "lucide-react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Provisioning Keys"
+};
 
 type ProvisioningKeysPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/provisioning/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Provisioning"
+};
+
 type ProvisioningPageProps = {
     params: Promise<{ orgId: string }>;
 };
@@ -7,4 +12,4 @@ type ProvisioningPageProps = {
 export default async function ProvisioningPage(props: ProvisioningPageProps) {
     const params = await props.params;
     redirect(`/${params.orgId}/settings/provisioning/keys`);
-}
+}

src/app/[orgId]/settings/provisioning/pending/page.tsx

@@ -9,6 +9,13 @@ import DismissableBanner from "@app/components/DismissableBanner";
 import Link from "next/link";
 import { Button } from "@app/components/ui/button";
 import { ArrowRight, Plug } from "lucide-react";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { TierFeature, tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Pending Sites"
+};
 
 type PendingSitesPageProps = {
     params: Promise<{ orgId: string }>;
@@ -96,6 +103,10 @@ export default async function PendingSitesPage(props: PendingSitesPageProps) {
                     </Button>
                 </Link>
             </DismissableBanner>
+            <PaidFeaturesAlert
+                tiers={tierMatrix[TierFeature.SiteProvisioningKeys]}
+            />
+
             <PendingSitesTable
                 sites={siteRows}
                 orgId={params.orgId}

src/app/[orgId]/settings/resources/client/page.tsx

@@ -10,8 +10,13 @@ import type { ListResourcesResponse } from "@server/routers/resource";
 import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
 import type { AxiosResponse } from "axios";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Private Resources"
+};
+
 export interface ClientResourcesPageProps {
     params: Promise<{ orgId: string }>;
     searchParams: Promise<Record<string, string>>;

src/app/[orgId]/settings/resources/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Public Resources"
+};
+
 export interface ResourcesPageProps {
     params: Promise<{ orgId: string }>;
 }

src/app/[orgId]/settings/resources/proxy/[niceId]/authentication/page.tsx

@@ -133,8 +133,7 @@ export default function ResourceAuthenticationPage() {
         ...orgQueries.identityProviders({
             orgId: org.org.orgId,
             useOrgOnlyIdp: env.app.identityProviderMode === "org"
-        }),
-        enabled: isPaidUser(tierMatrix.orgOidc)
+        })
     });
 
     const pageLoading =

src/app/[orgId]/settings/resources/proxy/[niceId]/layout.tsx

@@ -14,6 +14,11 @@ import OrgProvider from "@app/providers/OrgProvider";
 import { cache } from "react";
 import ResourceInfoBox from "@app/components/ResourceInfoBox";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Public Resource"
+};
 
 export const dynamic = "force-dynamic";
 

src/app/[orgId]/settings/resources/proxy/[niceId]/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Public Resource"
+};
+
 export default async function ResourcePage(props: {
     params: Promise<{ niceId: string; orgId: string }>;
 }) {

src/app/[orgId]/settings/resources/proxy/[niceId]/proxy/page.tsx

@@ -400,7 +400,11 @@ function ProxyResourceTargetsForm({
                                     pathMatchType: row.original.pathMatchType
                                 }}
                                 onChange={(config) =>
-                                    updateTarget(row.original.targetId, config)
+                                    updateTarget(row.original.targetId,
+                                        config.path === null && config.pathMatchType === null
+                                            ? { ...config, rewritePath: null, rewritePathType: null }
+                                            : config
+                                    )
                                 }
                                 trigger={
                                     <Button
@@ -424,7 +428,11 @@ function ProxyResourceTargetsForm({
                                     pathMatchType: row.original.pathMatchType
                                 }}
                                 onChange={(config) =>
-                                    updateTarget(row.original.targetId, config)
+                                    updateTarget(row.original.targetId,
+                                        config.path === null && config.pathMatchType === null
+                                            ? { ...config, rewritePath: null, rewritePathType: null }
+                                            : config
+                                    )
                                 }
                                 trigger={
                                     <Button
@@ -670,6 +678,7 @@ function ProxyResourceTargetsForm({
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
+        getRowId: (row) => String(row.targetId),
         state: {
             pagination: {
                 pageIndex: 0,
@@ -774,8 +783,12 @@ function ProxyResourceTargetsForm({
             }
 
             toast({
-                title: t("settingsUpdated"),
-                description: t("settingsUpdatedDescription")
+                title: targets.length === 0
+                    ? t("targetTargetsCleared")
+                    : t("settingsUpdated"),
+                description: targets.length === 0
+                    ? t("targetTargetsClearedDescription")
+                    : t("settingsUpdatedDescription")
             });
 
             setTargetsToRemove([]);

src/app/[orgId]/settings/resources/proxy/create/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Create Public Resource"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/resources/proxy/create/page.tsx

@@ -776,7 +776,17 @@ export default function Page() {
                                     pathMatchType: row.original.pathMatchType
                                 }}
                                 onChange={(config) =>
-                                    updateTarget(row.original.targetId, config)
+                                    updateTarget(
+                                        row.original.targetId,
+                                        config.path === null &&
+                                            config.pathMatchType === null
+                                            ? {
+                                                  ...config,
+                                                  rewritePath: null,
+                                                  rewritePathType: null
+                                              }
+                                            : config
+                                    )
                                 }
                                 trigger={
                                     <Button
@@ -800,7 +810,17 @@ export default function Page() {
                                     pathMatchType: row.original.pathMatchType
                                 }}
                                 onChange={(config) =>
-                                    updateTarget(row.original.targetId, config)
+                                    updateTarget(
+                                        row.original.targetId,
+                                        config.path === null &&
+                                            config.pathMatchType === null
+                                            ? {
+                                                  ...config,
+                                                  rewritePath: null,
+                                                  rewritePathType: null
+                                              }
+                                            : config
+                                    )
                                 }
                                 trigger={
                                     <Button
@@ -991,6 +1011,7 @@ export default function Page() {
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
+        getRowId: (row) => String(row.targetId),
         state: {
             pagination: {
                 pageIndex: 0,
@@ -1052,7 +1073,7 @@ export default function Page() {
                                                                 : null
                                                         );
                                                     }}
-                                                    cols={2}
+                                                    cols={3}
                                                 />
                                             </>
                                         )}
@@ -1109,28 +1130,30 @@ export default function Page() {
                                         </SettingsSectionDescription>
                                     </SettingsSectionHeader>
                                     <SettingsSectionBody>
-                                        <DomainPicker
-                                            orgId={orgId as string}
-                                            warnOnProvidedDomain={
-                                                remoteExitNodes.length >= 1
-                                            }
-                                            onDomainChange={(res) => {
-                                                if (!res) return;
+                                        <SettingsSectionForm>
+                                            <DomainPicker
+                                                orgId={orgId as string}
+                                                warnOnProvidedDomain={
+                                                    remoteExitNodes.length >= 1
+                                                }
+                                                onDomainChange={(res) => {
+                                                    if (!res) return;
 
-                                                httpForm.setValue(
-                                                    "subdomain",
-                                                    res.subdomain
-                                                );
-                                                httpForm.setValue(
-                                                    "domainId",
-                                                    res.domainId
-                                                );
-                                                console.log(
-                                                    "Domain changed:",
-                                                    res
-                                                );
-                                            }}
-                                        />
+                                                    httpForm.setValue(
+                                                        "subdomain",
+                                                        res.subdomain
+                                                    );
+                                                    httpForm.setValue(
+                                                        "domainId",
+                                                        res.domainId
+                                                    );
+                                                    console.log(
+                                                        "Domain changed:",
+                                                        res
+                                                    );
+                                                }}
+                                            />
+                                        </SettingsSectionForm>
                                     </SettingsSectionBody>
                                 </SettingsSection>
                             ) : (
@@ -1146,98 +1169,101 @@ export default function Page() {
                                         </SettingsSectionDescription>
                                     </SettingsSectionHeader>
                                     <SettingsSectionBody>
-                                        <Form {...tcpUdpForm}>
-                                            <form
-                                                onKeyDown={(e) => {
-                                                    if (e.key === "Enter") {
-                                                        e.preventDefault(); // block default enter refresh
-                                                    }
-                                                }}
-                                                className="space-y-4 grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
-                                                id="tcp-udp-settings-form"
-                                            >
-                                                <Controller
-                                                    control={tcpUdpForm.control}
-                                                    name="protocol"
-                                                    render={({ field }) => (
-                                                        <FormItem>
-                                                            <FormLabel>
-                                                                {t("protocol")}
-                                                            </FormLabel>
-                                                            <Select
-                                                                onValueChange={
-                                                                    field.onChange
-                                                                }
-                                                                {...field}
-                                                            >
-                                                                <FormControl>
-                                                                    <SelectTrigger>
-                                                                        <SelectValue
-                                                                            placeholder={t(
-                                                                                "protocolSelect"
-                                                                            )}
-                                                                        />
-                                                                    </SelectTrigger>
-                                                                </FormControl>
-                                                                <SelectContent>
-                                                                    <SelectItem value="tcp">
-                                                                        TCP
-                                                                    </SelectItem>
-                                                                    <SelectItem value="udp">
-                                                                        UDP
-                                                                    </SelectItem>
-                                                                </SelectContent>
-                                                            </Select>
-                                                            <FormMessage />
-                                                        </FormItem>
-                                                    )}
-                                                />
+                                        <SettingsSectionForm>
+                                            <Form {...tcpUdpForm}>
+                                                <form
+                                                    onKeyDown={(e) => {
+                                                        if (e.key === "Enter") {
+                                                            e.preventDefault(); // block default enter refresh
+                                                        }
+                                                    }}
+                                                    className="space-y-4 grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
+                                                    id="tcp-udp-settings-form"
+                                                >
+                                                    <Controller
+                                                        control={
+                                                            tcpUdpForm.control
+                                                        }
+                                                        name="protocol"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormLabel>
+                                                                    {t(
+                                                                        "protocol"
+                                                                    )}
+                                                                </FormLabel>
+                                                                <Select
+                                                                    onValueChange={
+                                                                        field.onChange
+                                                                    }
+                                                                    {...field}
+                                                                >
+                                                                    <FormControl>
+                                                                        <SelectTrigger>
+                                                                            <SelectValue
+                                                                                placeholder={t(
+                                                                                    "protocolSelect"
+                                                                                )}
+                                                                            />
+                                                                        </SelectTrigger>
+                                                                    </FormControl>
+                                                                    <SelectContent>
+                                                                        <SelectItem value="tcp">
+                                                                            TCP
+                                                                        </SelectItem>
+                                                                        <SelectItem value="udp">
+                                                                            UDP
+                                                                        </SelectItem>
+                                                                    </SelectContent>
+                                                                </Select>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
 
-                                                <FormField
-                                                    control={tcpUdpForm.control}
-                                                    name="proxyPort"
-                                                    render={({ field }) => (
-                                                        <FormItem>
-                                                            <FormLabel>
-                                                                {t(
-                                                                    "resourcePortNumber"
-                                                                )}
-                                                            </FormLabel>
-                                                            <FormControl>
-                                                                <Input
-                                                                    type="number"
-                                                                    value={
-                                                                        field.value ??
-                                                                        ""
-                                                                    }
-                                                                    onChange={(
-                                                                        e
-                                                                    ) =>
-                                                                        field.onChange(
+                                                    <FormField
+                                                        control={
+                                                            tcpUdpForm.control
+                                                        }
+                                                        name="proxyPort"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormLabel>
+                                                                    {t(
+                                                                        "resourcePortNumber"
+                                                                    )}
+                                                                </FormLabel>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        type="number"
+                                                                        value={
+                                                                            field.value ??
+                                                                            ""
+                                                                        }
+                                                                        onChange={(
                                                                             e
-                                                                                .target
-                                                                                .value
-                                                                                ? parseInt(
-                                                                                      e
-                                                                                          .target
-                                                                                          .value
-                                                                                  )
-                                                                                : undefined
-                                                                        )
-                                                                    }
-                                                                />
-                                                            </FormControl>
-                                                            <FormMessage />
-                                                            <FormDescription>
-                                                                {t(
-                                                                    "resourcePortNumberDescription"
-                                                                )}
-                                                            </FormDescription>
-                                                        </FormItem>
-                                                    )}
-                                                />
-                                            </form>
-                                        </Form>
+                                                                        ) =>
+                                                                            field.onChange(
+                                                                                e
+                                                                                    .target
+                                                                                    .value
+                                                                                    ? parseInt(
+                                                                                          e
+                                                                                              .target
+                                                                                              .value
+                                                                                      )
+                                                                                    : undefined
+                                                                            )
+                                                                        }
+                                                                    />
+                                                                </FormControl>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                </form>
+                                            </Form>
+                                        </SettingsSectionForm>
                                     </SettingsSectionBody>
                                 </SettingsSection>
                             )}

src/app/[orgId]/settings/resources/proxy/page.tsx

@@ -13,6 +13,11 @@ import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { toUnicode } from "punycode";
 import { cache } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Public Resources"
+};
 
 export interface ProxyResourcesPageProps {
     params: Promise<{ orgId: string }>;
@@ -95,7 +100,8 @@ export default async function ProxyResourcesPage(
                 ip: target.ip,
                 port: target.port,
                 enabled: target.enabled,
-                healthStatus: target.healthStatus
+                healthStatus: target.healthStatus,
+                siteName: target.siteName
             }))
         };
     });

src/app/[orgId]/settings/share-links/page.tsx

@@ -7,10 +7,13 @@ import { cache } from "react";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
 import { ListAccessTokensResponse } from "@server/routers/accessToken";
-import ShareLinksTable, {
-    ShareLinkRow
-} from "../../../../components/ShareLinksTable";
+import ShareLinksTable, { ShareLinkRow } from "@app/components/ShareLinksTable";
 import { getTranslations } from "next-intl/server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Shareable Links"
+};
 
 type ShareLinksPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/sites/[niceId]/layout.tsx

@@ -6,9 +6,13 @@ import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import SiteInfoCard from "../../../../../components/SiteInfoCard";
+import SiteInfoCard from "@app/components/SiteInfoCard";
 import { getTranslations } from "next-intl/server";
-import { build } from "@server/build";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Site"
+};
 
 interface SettingsLayoutProps {
     children: React.ReactNode;

src/app/[orgId]/settings/sites/[niceId]/page.tsx

@@ -1,5 +1,10 @@
+import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
+export const metadata: Metadata = {
+    title: "Site"
+};
+
 export default async function SitePage(props: {
     params: Promise<{ orgId: string; niceId: string }>;
 }) {

src/app/[orgId]/settings/sites/[niceId]/wireguardConfig.ts

@@ -1,7 +1,5 @@
-/*! SPDX-License-Identifier: GPL-2.0
- *
- * Copyright (C) 2015-2020 Jason A. Donenfeld <Jason@zx2c4.com>. All Rights Reserved.
- */
+// SPDX-License-Identifier: GPL-2.0
+// Copyright (C) 2015-2020 Jason A. Donenfeld <Jason@zx2c4.com>. All Rights Reserved.
 
 function gf(init: number[] | undefined = undefined) {
     var r = new Float64Array(16);

src/app/[orgId]/settings/sites/create/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+    title: "Create Site"
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

src/app/[orgId]/settings/sites/create/page.tsx

@@ -161,16 +161,13 @@ export default function Page() {
             description: t("siteNewtTunnelDescription"),
             disabled: true
         },
-        ...(env.flags.disableBasicWireguardSites
+        ...(env.flags.disableBasicWireguardSites || build == "saas"
             ? []
             : [
                   {
                       id: "wireguard" as SiteType,
                       title: t("siteWg"),
-                      description:
-                          build == "saas"
-                              ? t("siteWgDescriptionSaas")
-                              : t("siteWgDescription"),
+                      description: t("siteWgDescription"),
                       disabled: true
                   }
               ]),
@@ -426,9 +423,22 @@ export default function Page() {
                                 }));
 
                         setRemoteExitNodeOptions(exitNodeOptions);
+
+                        if (exitNodeOptions.length === 0) {
+                            // No remote exit nodes available — remove local option and default to newt
+                            setTunnelTypes((prev: any) =>
+                                prev.filter((item: any) => item.id !== "local")
+                            );
+                            form.setValue("method", "newt");
+                        }
                     }
                 } catch (error) {
                     console.error("Failed to fetch remote exit nodes:", error);
+                    // If fetch fails, no remote exit nodes available — remove local option and default to newt
+                    setTunnelTypes((prev: any) =>
+                        prev.filter((item: any) => item.id !== "local")
+                    );
+                    form.setValue("method", "newt");
                 }
             }
 

src/app/[orgId]/settings/sites/page.tsx

@@ -5,8 +5,13 @@ import { AxiosResponse } from "axios";
 import SitesTable, { SiteRow } from "@app/components/SitesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import SitesBanner from "@app/components/SitesBanner";
+import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 
+export const metadata: Metadata = {
+    title: "Sites"
+};
+
 type SitesPageProps = {
     params: Promise<{ orgId: string }>;
     searchParams: Promise<Record<string, string>>;

src/app/admin/api-keys/page.tsx

@@ -3,7 +3,7 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { ListRootApiKeysResponse } from "@server/routers/apiKeys";
-import ApiKeysTable, { ApiKeyRow } from "../../../components/ApiKeysTable";
+import ApiKeysTable, { ApiKeyRow } from "@app/components/ApiKeysTable";
 import { getTranslations } from "next-intl/server";
 
 type ApiKeyPageProps = {};

src/app/admin/idp/[idpId]/policies/page.tsx

@@ -20,7 +20,6 @@ import {
 import {
     Form,
     FormControl,
-    FormDescription,
     FormField,
     FormItem,
     FormLabel,
@@ -31,7 +30,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { InfoIcon, ExternalLink, CheckIcon } from "lucide-react";
-import PolicyTable, { PolicyRow } from "../../../../../components/PolicyTable";
+import PolicyTable, { PolicyRow } from "@app/components/PolicyTable";
 import { AxiosResponse } from "axios";
 import { ListOrgsResponse } from "@server/routers/org";
 import { ListRolesResponse } from "@server/routers/role";
@@ -63,7 +62,7 @@ import {
     SettingsSectionForm
 } from "@app/components/Settings";
 import { useTranslations } from "next-intl";
-import RoleMappingConfigFields from "@app/components/RoleMappingConfigFields";
+import AutoProvisionConfigWidget from "@app/components/AutoProvisionConfigWidget";
 import {
     compileRoleMappingExpression,
     createMappingBuilderRule,
@@ -499,9 +498,17 @@ export default function PoliciesPage() {
                                 id="policy-default-mappings-form"
                                 className="space-y-6"
                             >
-                                <RoleMappingConfigFields
-                                    fieldIdPrefix="admin-idp-default-role"
-                                    showFreeformRoleNamesHint={true}
+                                <AutoProvisionConfigWidget
+                                    showAutoProvisionSwitch={false}
+                                    autoProvision={true}
+                                    onAutoProvisionChange={() => {}}
+                                    orgMappingField={{
+                                        control: defaultMappingsForm.control,
+                                        name: "defaultOrgMapping",
+                                        labelKey: "defaultMappingsOrg"
+                                    }}
+                                    roleMappingFieldIdPrefix="admin-idp-default-role"
+                                    showFreeformRoleNamesHint
                                     roleMappingMode={defaultRoleMappingMode}
                                     onRoleMappingModeChange={
                                         setDefaultRoleMappingMode
@@ -528,27 +535,6 @@ export default function PoliciesPage() {
                                         setDefaultRawRoleExpression
                                     }
                                 />
-
-                                <FormField
-                                    control={defaultMappingsForm.control}
-                                    name="defaultOrgMapping"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>
-                                                {t("defaultMappingsOrg")}
-                                            </FormLabel>
-                                            <FormControl>
-                                                <Input {...field} />
-                                            </FormControl>
-                                            <FormDescription>
-                                                {t(
-                                                    "defaultMappingsOrgDescription"
-                                                )}
-                                            </FormDescription>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
                             </form>
                         </Form>
                         <SettingsSectionFooter>
@@ -687,9 +673,15 @@ export default function PoliciesPage() {
                                     )}
                                 />
 
-                                <RoleMappingConfigFields
-                                    fieldIdPrefix="admin-idp-policy-role"
-                                    showFreeformRoleNamesHint={false}
+                                <AutoProvisionConfigWidget
+                                    showAutoProvisionSwitch={false}
+                                    autoProvision={true}
+                                    onAutoProvisionChange={() => {}}
+                                    orgMappingField={{
+                                        control: form.control,
+                                        name: "orgMapping"
+                                    }}
+                                    roleMappingFieldIdPrefix="admin-idp-policy-role"
                                     roleMappingMode={policyRoleMappingMode}
                                     onRoleMappingModeChange={
                                         setPolicyRoleMappingMode
@@ -716,27 +708,6 @@ export default function PoliciesPage() {
                                         setPolicyRawRoleExpression
                                     }
                                 />
-
-                                <FormField
-                                    control={form.control}
-                                    name="orgMapping"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>
-                                                {t("orgMappingPathOptional")}
-                                            </FormLabel>
-                                            <FormControl>
-                                                <Input {...field} />
-                                            </FormControl>
-                                            <FormDescription>
-                                                {t(
-                                                    "defaultMappingsOrgDescription"
-                                                )}
-                                            </FormDescription>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
                             </form>
                         </Form>
                     </CredenzaBody>

src/app/admin/idp/create/page.tsx

@@ -24,7 +24,6 @@ import {
 import HeaderTitle from "@app/components/SettingsSectionTitle";
 import IdpAutoProvisionUsersDescription from "@app/components/IdpAutoProvisionUsersDescription";
 import { SwitchInput } from "@app/components/SwitchInput";
-import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { Button } from "@app/components/ui/button";
 import { Input } from "@app/components/ui/input";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
@@ -34,7 +33,6 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { applyOidcIdpProviderType } from "@app/lib/idp/oidcIdpProviderDefaults";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { InfoIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -220,23 +218,6 @@ export default function Page() {
                                             )}
                                         />
 
-                                        <div className="flex items-start mb-0">
-                                            <SwitchInput
-                                                id="auto-provision-toggle"
-                                                label={t(
-                                                    "idpAutoProvisionUsers"
-                                                )}
-                                                defaultChecked={form.getValues(
-                                                    "autoProvision"
-                                                )}
-                                                onCheckedChange={(checked) => {
-                                                    form.setValue(
-                                                        "autoProvision",
-                                                        checked
-                                                    );
-                                                }}
-                                            />
-                                        </div>
                                     </form>
                                 </Form>
                             </SettingsSectionForm>
@@ -244,6 +225,32 @@ export default function Page() {
                     </SettingsSectionBody>
                 </SettingsSection>
 
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            {t("idpAutoProvisionUsers")}
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            <IdpAutoProvisionUsersDescription />
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+                    <SettingsSectionBody>
+                        <div className="space-y-2">
+                            <SwitchInput
+                                id="auto-provision-toggle"
+                                label={t("idpAutoProvisionUsers")}
+                                defaultChecked={form.getValues("autoProvision")}
+                                onCheckedChange={(checked) => {
+                                    form.setValue("autoProvision", checked);
+                                }}
+                            />
+                            <p className="text-sm text-muted-foreground">
+                                {t("idpAutoProvisionConfigureAfterCreate")}
+                            </p>
+                        </div>
+                    </SettingsSectionBody>
+                </SettingsSection>
+
                 <fieldset
                     disabled={templatesLocked}
                     className="min-w-0 border-0 p-0 m-0 disabled:pointer-events-none disabled:opacity-60"

src/app/admin/idp/page.tsx

@@ -2,7 +2,7 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import IdpTable, { IdpRow } from "../../../components/AdminIdpTable";
+import IdpTable, { IdpRow } from "@app/components/AdminIdpTable";
 import { getTranslations } from "next-intl/server";
 
 export default async function IdpPage() {

src/app/admin/license/page.tsx

@@ -6,7 +6,7 @@ import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
-import { LicenseKeysDataTable } from "../../../components/LicenseKeysDataTable";
+import { LicenseKeysDataTable } from "@app/components/LicenseKeysDataTable";
 import { AxiosResponse } from "axios";
 import { Button } from "@app/components/ui/button";
 import {
@@ -42,15 +42,21 @@ import {
     SettingsSectionFooter
 } from "@app/components/Settings";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { Check, Heart, InfoIcon } from "lucide-react";
+import { ArrowRight, Check, ExternalLink, Heart, InfoIcon, TicketCheck } from "lucide-react";
+import Link from "next/link";
+import DismissableBanner from "@app/components/DismissableBanner";
 import CopyTextBox from "@app/components/CopyTextBox";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { SitePriceCalculator } from "../../../components/SitePriceCalculator";
+import { SitePriceCalculator } from "@app/components/SitePriceCalculator";
 import { Checkbox } from "@app/components/ui/checkbox";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { useSupporterStatusContext } from "@app/hooks/useSupporterStatusContext";
 import { useTranslations } from "next-intl";
 
+const ENTERPRISE_DOCS_URL =
+    "https://docs.pangolin.net/self-host/enterprise-edition";
+const ENTERPRISE_PRICING_URL = "https://pangolin.net/pricing#Self-Hosted";
+
 function obfuscateLicenseKey(key: string): string {
     if (key.length <= 8) return key;
     const firstPart = key.substring(0, 4);
@@ -336,6 +342,47 @@ export default function LicensePage() {
                 description={t("licenseTitleDescription")}
             />
 
+            {!licenseStatus?.isLicenseValid && (
+                <DismissableBanner
+                    storageKey="license-banner-dismissed"
+                    version={1}
+                    title={t("licenseBannerTitle")}
+                    titleIcon={
+                        <TicketCheck className="w-5 h-5 text-primary" />
+                    }
+                    description={t("licenseBannerDescription")}
+                >
+                    <Link
+                        href={ENTERPRISE_DOCS_URL}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                        >
+                            {t("licenseBannerViewDocs")}
+                            <ExternalLink className="w-4 h-4" />
+                        </Button>
+                    </Link>
+                    <Link
+                        href={ENTERPRISE_PRICING_URL}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                        >
+                            {t("licenseBannerGetLicense")}
+                            <ArrowRight className="w-4 h-4" />
+                        </Button>
+                    </Link>
+                </DismissableBanner>
+            )}
+
             {/* <Alert variant="neutral" className="mb-6"> */}
             {/*     <InfoIcon className="h-4 w-4" /> */}
             {/*     <AlertTitle className="font-semibold"> */}

src/app/admin/users/page.tsx

@@ -3,7 +3,7 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { AdminListUsersResponse } from "@server/routers/user/adminListUsers";
-import UsersTable, { GlobalUserRow } from "../../../components/AdminUsersTable";
+import UsersTable, { GlobalUserRow } from "@app/components/AdminUsersTable";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { InfoIcon } from "lucide-react";
 import { getTranslations } from "next-intl/server";

src/app/auth/layout.tsx

@@ -66,18 +66,23 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
                                 © {new Date().getFullYear()} Fossorial, Inc.
                             </span>
                         </a>
-                        <Separator orientation="vertical" />
-                        <a
-                            href="https://pangolin.net"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            aria-label="Built by Fossorial"
-                            className="flex items-center space-x-2 whitespace-nowrap"
-                        >
-                            <span>
-                                {process.env.BRANDING_APP_NAME || "Pangolin"}
-                            </span>
-                        </a>
+                        {build !== "saas" && (
+                            <>
+                                <Separator orientation="vertical" />
+                                <a
+                                    href="https://pangolin.net"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    aria-label="Built by Fossorial"
+                                    className="flex items-center space-x-2 whitespace-nowrap"
+                                >
+                                    <span>
+                                        {process.env.BRANDING_APP_NAME ||
+                                            "Pangolin"}
+                                    </span>
+                                </a>
+                            </>
+                        )}
                         <Separator orientation="vertical" />
                         <span>
                             {build === "oss"

src/app/globals.css

@@ -6,7 +6,7 @@
 
 :root {
     --radius: 0.75rem;
-    --background: oklch(0.985 0 0);
+    --background: oklch(1 0 0);
     --foreground: oklch(0.141 0.005 285.823);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.141 0.005 285.823);
@@ -22,30 +22,30 @@
     --accent-foreground: oklch(0.21 0.006 285.885);
     --destructive: oklch(0.577 0.245 27.325);
     --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(0.91 0.004 286.32);
-    --input: oklch(0.92 0.004 286.32);
+    --border: oklch(0.88 0.004 286.32);
+    --input: oklch(0.88 0.004 286.32);
     --ring: oklch(0.705 0.213 47.604);
     --chart-1: oklch(0.646 0.222 41.116);
     --chart-2: oklch(0.6 0.118 184.704);
     --chart-3: oklch(0.398 0.07 227.392);
     --chart-4: oklch(0.828 0.189 84.429);
     --chart-5: oklch(0.769 0.188 70.08);
-    --sidebar: oklch(0.985 0 0);
+    --sidebar: #fafafa;
     --sidebar-foreground: oklch(0.141 0.005 285.823);
     --sidebar-primary: oklch(0.705 0.213 47.604);
     --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
-    --sidebar-accent: oklch(0.967 0.001 286.375);
+    --sidebar-accent: #eaeaea;
     --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
     --sidebar-border: oklch(0.92 0.004 286.32);
     --sidebar-ring: oklch(0.705 0.213 47.604);
 }
 
 .dark {
-    --background: oklch(0.19 0.006 285.885);
+    --background: #0d0d0f;
     --foreground: oklch(0.985 0 0);
-    --card: oklch(0.21 0.006 285.885);
+    --card: #0d0d0f;
     --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.21 0.006 285.885);
+    --popover: #0d0d0f;
     --popover-foreground: oklch(0.985 0 0);
     --primary: oklch(0.6717 0.1946 41.93);
     --primary-foreground: oklch(0.98 0.016 73.684);
@@ -57,7 +57,7 @@
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.5382 0.1949 22.216);
     --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 13%);
+    --border: oklch(1 0 0 / 15%);
     --input: oklch(1 0 0 / 18%);
     --ring: oklch(0.646 0.222 41.116);
     --chart-1: oklch(0.488 0.243 264.376);
@@ -65,11 +65,11 @@
     --chart-3: oklch(0.769 0.188 70.08);
     --chart-4: oklch(0.627 0.265 303.9);
     --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.21 0.006 285.885);
+    --sidebar: #040404;
     --sidebar-foreground: oklch(0.985 0 0);
     --sidebar-primary: oklch(0.646 0.222 41.116);
     --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
-    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent: #131317;
     --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.646 0.222 41.116);
@@ -110,6 +110,15 @@
     --color-chart-4: var(--chart-4);
     --color-chart-5: var(--chart-5);
 
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+
     --radius-lg: var(--radius);
     --radius-md: calc(var(--radius) - 2px);
     --radius-sm: calc(var(--radius) - 4px);
@@ -166,7 +175,9 @@ p {
 }
 
 @keyframes dot-pulse {
-    0%, 80%, 100% {
+    0%,
+    80%,
+    100% {
         opacity: 0.3;
         transform: scale(0.8);
     }
@@ -189,7 +200,10 @@ p {
     /* Only apply custom viewport height on mobile */
     @media (max-width: 767px) {
         .h-screen-safe {
-            height: var(--vh, 100vh); /* Use CSS variable set by ViewportHeightFix on mobile */
+            height: var(
+                --vh,
+                100vh
+            ); /* Use CSS variable set by ViewportHeightFix on mobile */
         }
     }
 }

src/app/layout.tsx

@@ -23,7 +23,7 @@ import { TanstackQueryProvider } from "@app/components/TanstackQueryProvider";
 import { TailwindIndicator } from "@app/components/TailwindIndicator";
 import { ViewportHeightFix } from "@app/components/ViewportHeightFix";
 import StoreInternalRedirect from "@app/components/StoreInternalRedirect";
-import { Inter } from "next/font/google";
+import { Inter, Mona_Sans } from "next/font/google";
 
 export const metadata: Metadata = {
     title: `Dashboard - ${process.env.BRANDING_APP_NAME || "Pangolin"}`,
@@ -36,7 +36,11 @@ const inter = Inter({
     subsets: ["latin"]
 });
 
-const fontClassName = inter.className;
+const monaSans = Mona_Sans({
+    subsets: ["latin"]
+});
+
+const fontClassName = monaSans.className;
 
 export default async function RootLayout({
     children

src/app/navigation.tsx

@@ -23,6 +23,7 @@ import {
     Settings,
     SquareMousePointer,
     TicketCheck,
+    Unplug,
     User,
     UserCog,
     Users,
@@ -196,6 +197,11 @@ export const orgNavSections = (
                                   title: "sidebarLogsConnection",
                                   href: "/{orgId}/settings/logs/connection",
                                   icon: <Cable className="size-4 flex-none" />
+                              },
+                              {
+                                  title: "sidebarLogsStreaming",
+                                  href: "/{orgId}/settings/logs/streaming",
+                                  icon: <Unplug className="size-4 flex-none" />
                               }
                           ]
                         : [])

src/components/AutoProvisionConfigWidget.tsx

@@ -1,19 +1,33 @@
 "use client";
 
-import IdpAutoProvisionUsersDescription from "@app/components/IdpAutoProvisionUsersDescription";
-import { FormDescription } from "@app/components/ui/form";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import RoleMappingConfigFields from "@app/components/RoleMappingConfigFields";
 import { SwitchInput } from "@app/components/SwitchInput";
-import { useTranslations } from "next-intl";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import { MappingBuilderRule, RoleMappingMode } from "@app/lib/idpRoleMapping";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { MappingBuilderRule, RoleMappingMode } from "@app/lib/idpRoleMapping";
-import RoleMappingConfigFields from "@app/components/RoleMappingConfigFields";
+import { useTranslations } from "next-intl";
+import type { Control } from "react-hook-form";
 
 type Role = {
     roleId: number;
     name: string;
 };
 
+export type IdpOrgMappingFieldBinding = {
+    control: unknown;
+    name: string;
+    labelKey?: string;
+};
+
 type AutoProvisionConfigWidgetProps = {
     autoProvision: boolean;
     onAutoProvisionChange: (checked: boolean) => void;
@@ -28,6 +42,11 @@ type AutoProvisionConfigWidgetProps = {
     onMappingBuilderRulesChange: (rules: MappingBuilderRule[]) => void;
     rawExpression: string;
     onRawExpressionChange: (expression: string) => void;
+    orgMappingField: IdpOrgMappingFieldBinding;
+    showAutoProvisionSwitch?: boolean;
+    roleMappingFieldIdPrefix?: string;
+    showFreeformRoleNamesHint?: boolean;
+    autoProvisionSwitchId?: string;
 };
 
 export default function AutoProvisionConfigWidget({
@@ -43,41 +62,95 @@ export default function AutoProvisionConfigWidget({
     mappingBuilderRules,
     onMappingBuilderRulesChange,
     rawExpression,
-    onRawExpressionChange
+    onRawExpressionChange,
+    orgMappingField,
+    showAutoProvisionSwitch = true,
+    roleMappingFieldIdPrefix = "org-idp-auto-provision",
+    showFreeformRoleNamesHint = false,
+    autoProvisionSwitchId = "auto-provision-toggle"
 }: AutoProvisionConfigWidgetProps) {
     const t = useTranslations();
     const { isPaidUser } = usePaidStatus();
 
+    const showMappingTabs = showAutoProvisionSwitch === false || autoProvision;
+
+    const orgMappingLabelKey =
+        orgMappingField.labelKey ?? "orgMappingPathOptional";
+
     return (
         <div className="space-y-4">
-            <div className="mb-4">
-                <SwitchInput
-                    id="auto-provision-toggle"
-                    label={t("idpAutoProvisionUsers")}
-                    defaultChecked={autoProvision}
-                    onCheckedChange={onAutoProvisionChange}
-                    disabled={!isPaidUser(tierMatrix.autoProvisioning)}
-                />
-            </div>
+            {showAutoProvisionSwitch && (
+                <div className="mb-4">
+                    <SwitchInput
+                        id={autoProvisionSwitchId}
+                        label={t("idpAutoProvisionUsers")}
+                        defaultChecked={autoProvision}
+                        onCheckedChange={onAutoProvisionChange}
+                        disabled={!isPaidUser(tierMatrix.autoProvisioning)}
+                    />
+                </div>
+            )}
 
-            {autoProvision && (
-                <RoleMappingConfigFields
-                    fieldIdPrefix="org-idp-auto-provision"
-                    showFreeformRoleNamesHint={false}
-                    roleMappingMode={roleMappingMode}
-                    onRoleMappingModeChange={onRoleMappingModeChange}
-                    roles={roles}
-                    fixedRoleNames={fixedRoleNames}
-                    onFixedRoleNamesChange={onFixedRoleNamesChange}
-                    mappingBuilderClaimPath={mappingBuilderClaimPath}
-                    onMappingBuilderClaimPathChange={
-                        onMappingBuilderClaimPathChange
-                    }
-                    mappingBuilderRules={mappingBuilderRules}
-                    onMappingBuilderRulesChange={onMappingBuilderRulesChange}
-                    rawExpression={rawExpression}
-                    onRawExpressionChange={onRawExpressionChange}
-                />
+            {showMappingTabs && (
+                <HorizontalTabs
+                    clientSide
+                    defaultTab={0}
+                    items={[
+                        { title: t("roleMapping"), href: "#" },
+                        { title: t("orgMapping"), href: "#" }
+                    ]}
+                >
+                    <div className="space-y-4 mt-4 p-1">
+                        <RoleMappingConfigFields
+                            fieldIdPrefix={roleMappingFieldIdPrefix}
+                            showFreeformRoleNamesHint={
+                                showFreeformRoleNamesHint
+                            }
+                            roleMappingMode={roleMappingMode}
+                            onRoleMappingModeChange={onRoleMappingModeChange}
+                            roles={roles}
+                            fixedRoleNames={fixedRoleNames}
+                            onFixedRoleNamesChange={onFixedRoleNamesChange}
+                            mappingBuilderClaimPath={mappingBuilderClaimPath}
+                            onMappingBuilderClaimPathChange={
+                                onMappingBuilderClaimPathChange
+                            }
+                            mappingBuilderRules={mappingBuilderRules}
+                            onMappingBuilderRulesChange={
+                                onMappingBuilderRulesChange
+                            }
+                            rawExpression={rawExpression}
+                            onRawExpressionChange={onRawExpressionChange}
+                        />
+                    </div>
+                    <div className="space-y-4 mt-4 p-1">
+                        <div className="space-y-4">
+                            <p className="text-sm text-muted-foreground">
+                                {t("defaultMappingsOrgDescription")}
+                            </p>
+                            <FormField
+                                control={
+                                    orgMappingField.control as Control<any>
+                                }
+                                name={orgMappingField.name}
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>
+                                            {t(orgMappingLabelKey)}
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                {...field}
+                                                placeholder="e.g., ends_with(email, '@organization.com')"
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </div>
+                </HorizontalTabs>
             )}
         </div>
     );

src/components/CreateDomainForm.tsx

@@ -154,7 +154,7 @@ export default function CreateDomainForm({
 
     const punycodePreview = useMemo(() => {
         if (!baseDomain) return "";
-        const punycode = toPunycode(baseDomain);
+        const punycode = toPunycode(baseDomain.toLowerCase());
         return punycode !== baseDomain.toLowerCase() ? punycode : "";
     }, [baseDomain]);
 
@@ -239,21 +239,24 @@ export default function CreateDomainForm({
                             className="space-y-4"
                             id="create-domain-form"
                         >
-                            <FormField
-                                control={form.control}
-                                name="type"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <StrategySelect
-                                            options={domainOptions}
-                                            defaultValue={field.value}
-                                            onChange={field.onChange}
-                                            cols={1}
-                                        />
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
+                            {build != "oss" && env.flags.usePangolinDns ? (
+                                <FormField
+                                    control={form.control}
+                                    name="type"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <StrategySelect
+                                                options={domainOptions}
+                                                defaultValue={field.value}
+                                                onChange={field.onChange}
+                                                cols={1}
+                                            />
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            ) : null}
+
                             <FormField
                                 control={form.control}
                                 name="baseDomain"

src/components/DeviceLoginForm.tsx

@@ -319,6 +319,7 @@ export default function DeviceLoginForm({
                                         <div className="flex justify-center">
                                             <InputOTP
                                                 maxLength={9}
+                                                pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
                                                 {...field}
                                                 value={field.value
                                                     .replace(/-/g, "")

src/components/DomainPageClient.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { domainQueries } from "@app/lib/queries";
+import { GetDomainResponse } from "@server/routers/domain/getDomain";
+import { GetDNSRecordsResponse } from "@server/routers/domain";
+import DomainInfoCard from "@app/components/DomainInfoCard";
+import DNSRecordsTable from "@app/components/DNSRecordTable";
+import RestartDomainButton from "@app/components/RestartDomainButton";
+import RefreshButton from "@app/components/RefreshButton";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import DomainCertForm from "@app/components/DomainCertForm";
+import { build } from "@server/build";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useTranslations } from "next-intl";
+
+interface DomainPageClientProps {
+    initialDomain: GetDomainResponse;
+    initialDnsRecords: GetDNSRecordsResponse;
+    orgId: string;
+    domainId: string;
+}
+
+export default function DomainPageClient({
+    initialDomain,
+    initialDnsRecords,
+    orgId,
+    domainId
+}: DomainPageClientProps) {
+    const t = useTranslations();
+    const { env } = useEnvContext();
+
+    const { data: domain, refetch: refetchDomain } = useQuery({
+        ...domainQueries.getDomain({ orgId, domainId }),
+        initialData: initialDomain
+    });
+
+    const { data: dnsRecords, refetch: refetchDnsRecords } = useQuery({
+        ...domainQueries.getDNSRecords({ orgId, domainId }),
+        initialData: initialDnsRecords
+    });
+
+    const refetchAll = () => {
+        refetchDomain();
+        refetchDnsRecords();
+    };
+
+    return (
+        <>
+            <div className="flex justify-between">
+                <SettingsSectionTitle
+                    title={domain.baseDomain}
+                    description={t("domainSettingDescription")}
+                />
+                {env.flags.usePangolinDns && domain.failed ? (
+                    <RestartDomainButton
+                        orgId={orgId}
+                        domainId={domain.domainId}
+                        onSuccess={refetchAll}
+                    />
+                ) : (
+                    <RefreshButton onRefresh={refetchAll} />
+                )}
+            </div>
+            <div className="space-y-6">
+                {build !== "oss" && env.flags.usePangolinDns ? (
+                    <DomainInfoCard
+                        failed={domain.failed}
+                        verified={domain.verified}
+                        type={domain.type}
+                        errorMessage={domain.errorMessage}
+                    />
+                ) : null}
+
+                <DNSRecordsTable
+                    records={dnsRecords.map((r) => ({
+                        ...r,
+                        id: String(r.id)
+                    }))}
+                    type={domain.type}
+                />
+
+                {domain.type === "wildcard" && !domain.configManaged && (
+                    <DomainCertForm
+                        orgId={orgId}
+                        domainId={domain.domainId}
+                        domain={domain}
+                    />
+                )}
+            </div>
+        </>
+    );
+}

src/components/DomainPicker.tsx

@@ -2,6 +2,7 @@
 
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
     Command,
     CommandEmpty,
@@ -40,11 +41,15 @@ import {
     Check,
     CheckCircle2,
     ChevronsUpDown,
+    KeyRound,
     Zap
 } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { usePaidStatus } from "@/hooks/usePaidStatus";
+import { TierFeature, tierMatrix } from "@server/lib/billing/tierMatrix";
 import { toUnicode } from "punycode";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useUserContext } from "@app/hooks/useUserContext";
 
 type AvailableOption = {
     domainNamespaceId: string;
@@ -93,8 +98,15 @@ export default function DomainPicker({
     warnOnProvidedDomain = false
 }: DomainPickerProps) {
     const { env } = useEnvContext();
+    const { user } = useUserContext();
     const api = createApiClient({ env });
     const t = useTranslations();
+    const { hasSaasSubscription } = usePaidStatus();
+
+    const requiresPaywall =
+        build === "saas" &&
+        !hasSaasSubscription(tierMatrix[TierFeature.DomainNamespaces]) &&
+        new Date(user.dateCreated) > new Date("2026-04-13");
 
     const { data = [], isLoading: loadingDomains } = useQuery(
         orgQueries.domains({ orgId })
@@ -509,9 +521,11 @@ export default function DomainPicker({
                                         <span className="truncate">
                                             {selectedBaseDomain.domain}
                                         </span>
-                                        {selectedBaseDomain.verified && (
-                                            <CheckCircle2 className="h-3 w-3 text-green-500 shrink-0" />
-                                        )}
+                                        {selectedBaseDomain.verified &&
+                                            selectedBaseDomain.domainType !==
+                                                "wildcard" && (
+                                                <CheckCircle2 className="h-3 w-3 text-green-500 shrink-0" />
+                                            )}
                                     </div>
                                 ) : (
                                     t("domainPickerSelectBaseDomain")
@@ -574,14 +588,23 @@ export default function DomainPicker({
                                                                     }
                                                                 </span>
                                                                 <span className="text-xs text-muted-foreground">
-                                                                    {orgDomain.type.toUpperCase()}{" "}
-                                                                    •{" "}
-                                                                    {orgDomain.verified
+                                                                    {orgDomain.type ===
+                                                                    "wildcard"
                                                                         ? t(
-                                                                              "domainPickerVerified"
+                                                                              "domainPickerManual"
                                                                           )
-                                                                        : t(
-                                                                              "domainPickerUnverified"
+                                                                        : (
+                                                                              <>
+                                                                                  {orgDomain.type.toUpperCase()}{" "}
+                                                                                  •{" "}
+                                                                                  {orgDomain.verified
+                                                                                      ? t(
+                                                                                            "domainPickerVerified"
+                                                                                        )
+                                                                                      : t(
+                                                                                            "domainPickerUnverified"
+                                                                                        )}
+                                                                              </>
                                                                           )}
                                                                 </span>
                                                             </div>
@@ -640,6 +663,7 @@ export default function DomainPicker({
                                                         })
                                                     }
                                                     className="mx-2 rounded-md"
+                                                    disabled={requiresPaywall}
                                                 >
                                                     <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 mr-3">
                                                         <Zap className="h-4 w-4 text-primary" />
@@ -680,6 +704,19 @@ export default function DomainPicker({
                 </div>
             </div>
 
+            {requiresPaywall && !hideFreeDomain && (
+                    <Card className="mt-3 border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
+                        <CardContent className="py-3 px-4">
+                            <div className="flex items-center gap-2.5 text-sm text-muted-foreground">
+                                <KeyRound className="size-4 shrink-0 text-black-500" />
+                                <span>
+                                    {t("domainPickerFreeDomainsPaidFeature")}
+                                </span>
+                            </div>
+                        </CardContent>
+                    </Card>
+                )}
+
             {/*showProvidedDomainSearch && build === "saas" && (
                 <Alert>
                     <AlertCircle className="h-4 w-4" />

src/components/DomainsTable.tsx

@@ -10,13 +10,12 @@ import {
     MoreHorizontal,
     RefreshCw
 } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { Badge } from "@app/components/ui/badge";
-import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import CreateDomainForm from "@app/components/CreateDomainForm";
 import { useToast } from "@app/hooks/useToast";
@@ -34,6 +33,10 @@ import {
     TooltipTrigger
 } from "./ui/tooltip";
 import Link from "next/link";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { orgQueries } from "@app/lib/queries";
+import { toUnicode } from "punycode";
+import { durationToMs } from "@app/lib/durationToMs";
 
 export type DomainRow = {
     domainId: string;
@@ -59,32 +62,32 @@ export default function DomainsTable({ domains, orgId }: Props) {
     const [selectedDomain, setSelectedDomain] = useState<DomainRow | null>(
         null
     );
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [restartingDomains, setRestartingDomains] = useState<Set<string>>(
         new Set()
     );
     const env = useEnvContext();
     const api = createApiClient(env);
-    const router = useRouter();
     const t = useTranslations();
     const { toast } = useToast();
     const { org } = useOrgContext();
+    const queryClient = useQueryClient();
 
-    const refreshData = async () => {
-        setIsRefreshing(true);
-        try {
-            await new Promise((resolve) => setTimeout(resolve, 200));
-            router.refresh();
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
+    const { data: rawDomains, isRefetching, refetch } = useQuery({
+        ...orgQueries.domains({ orgId }),
+        initialData: domains as any,
+        refetchInterval: durationToMs(10, "seconds")
+    });
+
+    const tableData = useMemo(
+        () =>
+            (rawDomains ?? []).map((d) => ({
+                ...d,
+                baseDomain: toUnicode(d.baseDomain),
+                type: d.type ?? "",
+                errorMessage: d.errorMessage ?? null
+            } as DomainRow)),
+        [rawDomains]
+    );
 
     const deleteDomain = async (domainId: string) => {
         try {
@@ -94,7 +97,7 @@ export default function DomainsTable({ domains, orgId }: Props) {
                 description: t("domainDeletedDescription")
             });
             setIsDeleteModalOpen(false);
-            refreshData();
+            refetch();
         } catch (e) {
             toast({
                 title: t("error"),
@@ -114,7 +117,7 @@ export default function DomainsTable({ domains, orgId }: Props) {
                     fallback: "Domain verification restarted successfully"
                 })
             });
-            refreshData();
+            refetch();
         } catch (e) {
             toast({
                 title: t("error"),
@@ -361,16 +364,16 @@ export default function DomainsTable({ domains, orgId }: Props) {
                 open={isCreateModalOpen}
                 setOpen={setIsCreateModalOpen}
                 onCreated={(domain) => {
-                    refreshData();
+                    refetch();
                 }}
             />
 
             <DomainsDataTable
                 columns={columns}
-                data={domains}
+                data={tableData}
                 onAdd={() => setIsCreateModalOpen(true)}
-                onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                onRefresh={refetch}
+                isRefreshing={isRefetching}
             />
         </>
     );

src/components/GenerateLicenseKeysTable.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl";
 import { ColumnDef } from "@tanstack/react-table";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Button } from "./ui/button";
-import { ArrowUpDown } from "lucide-react";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
 import CopyToClipboard from "./CopyToClipboard";
 import { Badge } from "./ui/badge";
 import moment from "moment";
@@ -16,6 +16,12 @@ import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import NewPricingLicenseForm from "./NewPricingLicenseForm";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
 
 type GnerateLicenseKeysTableProps = {
     licenseKeys: GeneratedLicenseKey[];
@@ -44,6 +50,7 @@ export default function GenerateLicenseKeysTable({
 
     const [isRefreshing, setIsRefreshing] = useState(false);
     const [showGenerateForm, setShowGenerateForm] = useState(false);
+    const [isClearingInstanceName, setIsClearingInstanceName] = useState(false);
 
     useEffect(() => {
         if (searchParams.get(GENERATE_QUERY) !== null) {
@@ -63,6 +70,28 @@ export default function GenerateLicenseKeysTable({
         refreshData();
     };
 
+    const clearInstanceName = async (licenseKey: string) => {
+        setIsClearingInstanceName(true);
+        try {
+            await api.post(
+                `/org/${orgId}/license/${encodeURIComponent(licenseKey)}/clear-instance-name`
+            );
+            toast({
+                title: t("success"),
+                description: "Instance name cleared successfully"
+            });
+            await refreshData();
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(error, "Failed to clear instance name"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsClearingInstanceName(false);
+        }
+    };
+
     const refreshData = async () => {
         console.log("Data refreshed");
         setIsRefreshing(true);
@@ -236,6 +265,39 @@ export default function GenerateLicenseKeysTable({
                 const termianteAt = row.original.expiresAt;
                 return moment(termianteAt).format("lll");
             }
+        },
+        {
+            id: "actions",
+            enableHiding: false,
+            header: () => <span className="p-3"></span>,
+            cell: ({ row }) => {
+                const key = row.original;
+                return (
+                    <div className="flex items-center gap-2 justify-end">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" className="h-8 w-8 p-0">
+                                    <span className="sr-only">Open menu</span>
+                                    <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                <DropdownMenuItem
+                                    disabled={
+                                        !key.instanceName ||
+                                        isClearingInstanceName
+                                    }
+                                    onClick={() =>
+                                        clearInstanceName(key.licenseKey)
+                                    }
+                                >
+                                    Clear Instance Name
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                );
+            }
         }
     ];
 
@@ -254,6 +316,7 @@ export default function GenerateLicenseKeysTable({
                 onAdd={() => {
                     setShowGenerateForm(true);
                 }}
+                stickyRightColumn="actions"
             />
 
             <NewPricingLicenseForm

src/components/HttpDestinationCredenza.tsx

@@ -0,0 +1,773 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import { Button } from "@app/components/ui/button";
+import { Input } from "@app/components/ui/input";
+import { Label } from "@app/components/ui/label";
+import { Switch } from "@app/components/ui/switch";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
+import { Textarea } from "@app/components/ui/textarea";
+import { Checkbox } from "@app/components/ui/checkbox";
+import { Plus, X } from "lucide-react";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { build } from "@server/build";
+import { useTranslations } from "next-intl";
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+export type AuthType = "none" | "bearer" | "basic" | "custom";
+
+export type PayloadFormat = "json_array" | "ndjson" | "json_single";
+
+export interface HttpConfig {
+    name: string;
+    url: string;
+    authType: AuthType;
+    bearerToken?: string;
+    basicCredentials?: string;
+    customHeaderName?: string;
+    customHeaderValue?: string;
+    headers: Array<{ key: string; value: string }>;
+    format: PayloadFormat;
+    useBodyTemplate: boolean;
+    bodyTemplate?: string;
+}
+
+export interface Destination {
+    destinationId: number;
+    orgId: string;
+    type: string;
+    config: string;
+    enabled: boolean;
+    sendAccessLogs: boolean;
+    sendActionLogs: boolean;
+    sendConnectionLogs: boolean;
+    sendRequestLogs: boolean;
+    createdAt: number;
+    updatedAt: number;
+}
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+export const defaultHttpConfig = (): HttpConfig => ({
+    name: "",
+    url: "",
+    authType: "none",
+    bearerToken: "",
+    basicCredentials: "",
+    customHeaderName: "",
+    customHeaderValue: "",
+    headers: [],
+    format: "json_array",
+    useBodyTemplate: false,
+    bodyTemplate: ""
+});
+
+export function parseHttpConfig(raw: string): HttpConfig {
+    try {
+        return { ...defaultHttpConfig(), ...JSON.parse(raw) };
+    } catch {
+        return defaultHttpConfig();
+    }
+}
+
+// ── Headers editor ─────────────────────────────────────────────────────────────
+
+interface HeadersEditorProps {
+    headers: Array<{ key: string; value: string }>;
+    onChange: (headers: Array<{ key: string; value: string }>) => void;
+}
+
+function HeadersEditor({ headers, onChange }: HeadersEditorProps) {
+    const t = useTranslations();
+
+    const addRow = () => onChange([...headers, { key: "", value: "" }]);
+
+    const removeRow = (i: number) =>
+        onChange(headers.filter((_, idx) => idx !== i));
+
+    const updateRow = (i: number, field: "key" | "value", val: string) => {
+        const next = [...headers];
+        next[i] = { ...next[i], [field]: val };
+        onChange(next);
+    };
+
+    return (
+        <div className="space-y-3">
+            {headers.length === 0 && (
+                <p className="text-xs text-muted-foreground">
+                    {t("httpDestNoHeadersConfigured")}
+                </p>
+            )}
+            {headers.map((h, i) => (
+                <div key={i} className="flex gap-2 items-center">
+                    <Input
+                        value={h.key}
+                        onChange={(e) => updateRow(i, "key", e.target.value)}
+                        placeholder={t("httpDestHeaderNamePlaceholder")}
+                        className="flex-1"
+                    />
+                    <Input
+                        value={h.value}
+                        onChange={(e) =>
+                            updateRow(i, "value", e.target.value)
+                        }
+                        placeholder={t("httpDestHeaderValuePlaceholder")}
+                        className="flex-1"
+                    />
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removeRow(i)}
+                        className="shrink-0 h-9 w-9"
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                </div>
+            ))}
+            <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={addRow}
+                className="gap-1.5"
+            >
+                <Plus className="h-3.5 w-3.5" />
+                {t("httpDestAddHeader")}
+            </Button>
+        </div>
+    );
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+export interface HttpDestinationCredenzaProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    editing: Destination | null;
+    orgId: string;
+    onSaved: () => void;
+}
+
+export function HttpDestinationCredenza({
+    open,
+    onOpenChange,
+    editing,
+    orgId,
+    onSaved
+}: HttpDestinationCredenzaProps) {
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+
+    const [saving, setSaving] = useState(false);
+    const [cfg, setCfg] = useState<HttpConfig>(defaultHttpConfig());
+    const [sendAccessLogs, setSendAccessLogs] = useState(false);
+    const [sendActionLogs, setSendActionLogs] = useState(false);
+    const [sendConnectionLogs, setSendConnectionLogs] = useState(false);
+    const [sendRequestLogs, setSendRequestLogs] = useState(false);
+
+    useEffect(() => {
+        if (open) {
+            setCfg(
+                editing ? parseHttpConfig(editing.config) : defaultHttpConfig()
+            );
+            setSendAccessLogs(editing?.sendAccessLogs ?? false);
+            setSendActionLogs(editing?.sendActionLogs ?? false);
+            setSendConnectionLogs(editing?.sendConnectionLogs ?? false);
+            setSendRequestLogs(editing?.sendRequestLogs ?? false);
+        }
+    }, [open, editing]);
+
+    const update = (patch: Partial<HttpConfig>) =>
+        setCfg((prev) => ({ ...prev, ...patch }));
+
+    const urlError: string | null = (() => {
+        const raw = cfg.url.trim();
+        if (!raw) return null;
+        try {
+            const parsed = new URL(raw);
+            if (
+                parsed.protocol !== "http:" &&
+                parsed.protocol !== "https:"
+            ) {
+                return t("httpDestUrlErrorHttpRequired");
+            }
+            if (build === "saas" && parsed.protocol !== "https:") {
+                return t("httpDestUrlErrorHttpsRequired");
+            }
+            return null;
+        } catch {
+            return t("httpDestUrlErrorInvalid");
+        }
+    })();
+
+    const isValid =
+        cfg.name.trim() !== "" &&
+        cfg.url.trim() !== "" &&
+        urlError === null;
+
+    async function handleSave() {
+        if (!isValid) return;
+        setSaving(true);
+        try {
+            const payload = {
+                type: "http",
+                config: JSON.stringify(cfg),
+                sendAccessLogs,
+                sendActionLogs,
+                sendConnectionLogs,
+                sendRequestLogs
+            };
+            if (editing) {
+                await api.post(
+                    `/org/${orgId}/event-streaming-destination/${editing.destinationId}`,
+                    payload
+                );
+                toast({ title: t("httpDestUpdatedSuccess") });
+            } else {
+                await api.put(
+                    `/org/${orgId}/event-streaming-destination`,
+                    payload
+                );
+                toast({ title: t("httpDestCreatedSuccess") });
+            }
+            onSaved();
+            onOpenChange(false);
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: editing
+                    ? t("httpDestUpdateFailed")
+                    : t("httpDestCreateFailed"),
+                description: formatAxiosError(
+                    e,
+                    t("streamingUnexpectedError")
+                )
+            });
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <Credenza open={open} onOpenChange={onOpenChange}>
+            <CredenzaContent className="sm:max-w-2xl">
+                <CredenzaHeader>
+                    <CredenzaTitle>
+                        {editing
+                            ? t("httpDestEditTitle")
+                            : t("httpDestAddTitle")}
+                    </CredenzaTitle>
+                    <CredenzaDescription>
+                        {editing
+                            ? t("httpDestEditDescription")
+                            : t("httpDestAddDescription")}
+                    </CredenzaDescription>
+                </CredenzaHeader>
+
+                <CredenzaBody>
+                    <HorizontalTabs
+                        clientSide
+                        items={[
+                            { title: t("httpDestTabSettings"), href: "" },
+                            { title: t("httpDestTabHeaders"), href: "" },
+                            { title: t("httpDestTabBody"), href: "" },
+                            { title: t("httpDestTabLogs"), href: "" }
+                        ]}
+                    >
+                        {/* ── Settings tab ────────────────────────────── */}
+                        <div className="space-y-6 mt-4 p-1">
+                            {/* Name */}
+                            <div className="space-y-2">
+                                <Label htmlFor="dest-name">{t("name")}</Label>
+                                <Input
+                                    id="dest-name"
+                                    placeholder={t("httpDestNamePlaceholder")}
+                                    value={cfg.name}
+                                    onChange={(e) =>
+                                        update({ name: e.target.value })
+                                    }
+                                />
+                            </div>
+
+                            {/* URL */}
+                            <div className="space-y-2">
+                                <Label htmlFor="dest-url">
+                                    {t("httpDestUrlLabel")}
+                                </Label>
+                                <Input
+                                    id="dest-url"
+                                    placeholder="https://example.com/webhook"
+                                    value={cfg.url}
+                                    onChange={(e) =>
+                                        update({ url: e.target.value })
+                                    }
+                                />
+                                {urlError && (
+                                    <p className="text-xs text-destructive">
+                                        {urlError}
+                                    </p>
+                                )}
+                            </div>
+
+                            {/* Authentication */}
+                            <div className="space-y-3">
+                                <div>
+                                    <label className="font-medium block">
+                                        {t("httpDestAuthTitle")}
+                                    </label>
+                                    <p className="text-sm text-muted-foreground mt-0.5">
+                                        {t("httpDestAuthDescription")}
+                                    </p>
+                                </div>
+
+                                <RadioGroup
+                                    value={cfg.authType}
+                                    onValueChange={(v) =>
+                                        update({ authType: v as AuthType })
+                                    }
+                                    className="gap-2"
+                                >
+                                    {/* None */}
+                                    <div className="flex items-start gap-3 rounded-md border p-3 transition-colors">
+                                        <RadioGroupItem
+                                            value="none"
+                                            id="auth-none"
+                                            className="mt-0.5"
+                                        />
+                                        <div>
+                                            <Label
+                                                htmlFor="auth-none"
+                                                className="cursor-pointer font-medium"
+                                            >
+                                                {t("httpDestAuthNoneTitle")}
+                                            </Label>
+                                            <p className="text-xs text-muted-foreground mt-0.5">
+                                                {t("httpDestAuthNoneDescription")}
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    {/* Bearer */}
+                                    <div className="flex items-start gap-3 rounded-md border p-3">
+                                        <RadioGroupItem
+                                            value="bearer"
+                                            id="auth-bearer"
+                                            className="mt-0.5"
+                                        />
+                                        <div className="flex-1 space-y-3">
+                                            <div>
+                                                <Label
+                                                    htmlFor="auth-bearer"
+                                                    className="cursor-pointer font-medium"
+                                                >
+                                                    {t("httpDestAuthBearerTitle")}
+                                                </Label>
+                                                <p className="text-xs text-muted-foreground mt-0.5">
+                                                    {t("httpDestAuthBearerDescription")}
+                                                </p>
+                                            </div>
+                                            {cfg.authType === "bearer" && (
+                                                <Input
+                                                    placeholder={t("httpDestAuthBearerPlaceholder")}
+                                                    value={
+                                                        cfg.bearerToken ?? ""
+                                                    }
+                                                    onChange={(e) =>
+                                                        update({
+                                                            bearerToken:
+                                                                e.target.value
+                                                        })
+                                                    }
+                                                />
+                                            )}
+                                        </div>
+                                    </div>
+
+                                    {/* Basic */}
+                                    <div className="flex items-start gap-3 rounded-md border p-3">
+                                        <RadioGroupItem
+                                            value="basic"
+                                            id="auth-basic"
+                                            className="mt-0.5"
+                                        />
+                                        <div className="flex-1 space-y-3">
+                                            <div>
+                                                <Label
+                                                    htmlFor="auth-basic"
+                                                    className="cursor-pointer font-medium"
+                                                >
+                                                    {t("httpDestAuthBasicTitle")}
+                                                </Label>
+                                                <p className="text-xs text-muted-foreground mt-0.5">
+                                                    {t("httpDestAuthBasicDescription")}
+                                                </p>
+                                            </div>
+                                            {cfg.authType === "basic" && (
+                                                <Input
+                                                    placeholder={t("httpDestAuthBasicPlaceholder")}
+                                                    value={
+                                                        cfg.basicCredentials ??
+                                                        ""
+                                                    }
+                                                    onChange={(e) =>
+                                                        update({
+                                                            basicCredentials:
+                                                                e.target.value
+                                                        })
+                                                    }
+                                                />
+                                            )}
+                                        </div>
+                                    </div>
+
+                                    {/* Custom */}
+                                    <div className="flex items-start gap-3 rounded-md border p-3">
+                                        <RadioGroupItem
+                                            value="custom"
+                                            id="auth-custom"
+                                            className="mt-0.5"
+                                        />
+                                        <div className="flex-1 space-y-3">
+                                            <div>
+                                                <Label
+                                                    htmlFor="auth-custom"
+                                                    className="cursor-pointer font-medium"
+                                                >
+                                                    {t("httpDestAuthCustomTitle")}
+                                                </Label>
+                                                <p className="text-xs text-muted-foreground mt-0.5">
+                                                    {t("httpDestAuthCustomDescription")}
+                                                </p>
+                                            </div>
+                                            {cfg.authType === "custom" && (
+                                                <div className="flex gap-2">
+                                                    <Input
+                                                        placeholder={t("httpDestAuthCustomHeaderNamePlaceholder")}
+                                                        value={
+                                                            cfg.customHeaderName ??
+                                                            ""
+                                                        }
+                                                        onChange={(e) =>
+                                                            update({
+                                                                customHeaderName:
+                                                                    e.target
+                                                                        .value
+                                                            })
+                                                        }
+                                                        className="flex-1"
+                                                    />
+                                                    <Input
+                                                        placeholder={t("httpDestAuthCustomHeaderValuePlaceholder")}
+                                                        value={
+                                                            cfg.customHeaderValue ??
+                                                            ""
+                                                        }
+                                                        onChange={(e) =>
+                                                            update({
+                                                                customHeaderValue:
+                                                                    e.target
+                                                                        .value
+                                                            })
+                                                        }
+                                                        className="flex-1"
+                                                    />
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </RadioGroup>
+                            </div>
+                        </div>
+
+                        {/* ── Headers tab ──────────────────────────────── */}
+                        <div className="space-y-6 mt-4 p-1">
+                            <div>
+                                <label className="font-medium block">
+                                    {t("httpDestCustomHeadersTitle")}
+                                </label>
+                                <p className="text-sm text-muted-foreground mt-0.5">
+                                    {t("httpDestCustomHeadersDescription")}
+                                </p>
+                            </div>
+                            <HeadersEditor
+                                headers={cfg.headers}
+                                onChange={(headers) => update({ headers })}
+                            />
+                        </div>
+
+                        {/* ── Body tab ─────────────────────────── */}
+                        <div className="space-y-6 mt-4 p-1">
+                            <div>
+                                <label className="font-medium block">
+                                    {t("httpDestBodyTemplateTitle")}
+                                </label>
+                                <p className="text-sm text-muted-foreground mt-0.5">
+                                    {t("httpDestBodyTemplateDescription")}
+                                </p>
+                            </div>
+
+                            <div className="flex items-center gap-3">
+                                <Switch
+                                    id="use-body-template"
+                                    checked={cfg.useBodyTemplate}
+                                    onCheckedChange={(v) =>
+                                        update({ useBodyTemplate: v })
+                                    }
+                                />
+                                <Label
+                                    htmlFor="use-body-template"
+                                    className="cursor-pointer"
+                                >
+                                    {t("httpDestEnableBodyTemplate")}
+                                </Label>
+                            </div>
+
+                            {cfg.useBodyTemplate && (
+                                <div className="space-y-2">
+                                    <Label htmlFor="body-template">
+                                        {t("httpDestBodyTemplateLabel")}
+                                    </Label>
+                                    <Textarea
+                                        id="body-template"
+                                        placeholder={
+                                            '{\n  "event": "{{event}}",\n  "timestamp": "{{timestamp}}",\n  "data": {{data}}\n}'
+                                        }
+                                        value={cfg.bodyTemplate ?? ""}
+                                        onChange={(e) =>
+                                            update({
+                                                bodyTemplate: e.target.value
+                                            })
+                                        }
+                                        className="font-mono text-xs min-h-45 resize-y"
+                                    />
+                                    <p className="text-xs text-muted-foreground">
+                                        {t("httpDestBodyTemplateHint")}
+                                    </p>
+                                </div>
+                            )}
+
+                            {/* Payload Format */}
+                            <div className="space-y-3">
+                                <div>
+                                    <label className="font-medium block">
+                                        {t("httpDestPayloadFormatTitle")}
+                                    </label>
+                                    <p className="text-sm text-muted-foreground mt-0.5">
+                                        {t("httpDestPayloadFormatDescription")}
+                                    </p>
+                                </div>
+
+                                <RadioGroup
+                                    value={cfg.format ?? "json_array"}
+                                    onValueChange={(v) =>
+                                        update({
+                                            format: v as PayloadFormat
+                                        })
+                                    }
+                                    className="gap-2"
+                                >
+                                    {/* JSON Array */}
+                                    <div className="flex items-start gap-3 rounded-md border p-3 transition-colors">
+                                        <RadioGroupItem
+                                            value="json_array"
+                                            id="fmt-json-array"
+                                            className="mt-0.5"
+                                        />
+                                        <div>
+                                            <Label
+                                                htmlFor="fmt-json-array"
+                                                className="cursor-pointer font-medium"
+                                            >
+                                                {t("httpDestFormatJsonArrayTitle")}
+                                            </Label>
+                                            <p className="text-xs text-muted-foreground mt-0.5">
+                                                {t("httpDestFormatJsonArrayDescription")}
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    {/* NDJSON */}
+                                    <div className="flex items-start gap-3 rounded-md border p-3 transition-colors">
+                                        <RadioGroupItem
+                                            value="ndjson"
+                                            id="fmt-ndjson"
+                                            className="mt-0.5"
+                                        />
+                                        <div>
+                                            <Label
+                                                htmlFor="fmt-ndjson"
+                                                className="cursor-pointer font-medium"
+                                            >
+                                                {t("httpDestFormatNdjsonTitle")}
+                                            </Label>
+                                            <p className="text-xs text-muted-foreground mt-0.5">
+                                                {t("httpDestFormatNdjsonDescription")}
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    {/* Single event per request */}
+                                    <div className="flex items-start gap-3 rounded-md border p-3 transition-colors">
+                                        <RadioGroupItem
+                                            value="json_single"
+                                            id="fmt-json-single"
+                                            className="mt-0.5"
+                                        />
+                                        <div>
+                                            <Label
+                                                htmlFor="fmt-json-single"
+                                                className="cursor-pointer font-medium"
+                                            >
+                                                {t("httpDestFormatSingleTitle")}
+                                            </Label>
+                                            <p className="text-xs text-muted-foreground mt-0.5">
+                                                {t("httpDestFormatSingleDescription")}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </RadioGroup>
+                            </div>
+                        </div>
+
+                        {/* ── Logs tab ──────────────────────────────────── */}
+                        <div className="space-y-6 mt-4 p-1">
+                            <div>
+                                <label className="font-medium block">
+                                    {t("httpDestLogTypesTitle")}
+                                </label>
+                                <p className="text-sm text-muted-foreground mt-0.5">
+                                    {t("httpDestLogTypesDescription")}
+                                </p>
+                            </div>
+
+                            <div className="space-y-3">
+                                <div className="flex items-start gap-3 rounded-md border p-3">
+                                    <Checkbox
+                                        id="log-access"
+                                        checked={sendAccessLogs}
+                                        onCheckedChange={(v) =>
+                                            setSendAccessLogs(v === true)
+                                        }
+                                        className="mt-0.5"
+                                    />
+                                    <div>
+                                        <label
+                                            htmlFor="log-access"
+                                            className="text-sm font-medium cursor-pointer"
+                                        >
+                                            {t("httpDestAccessLogsTitle")}
+                                        </label>
+                                        <p className="text-xs text-muted-foreground mt-0.5">
+                                            {t("httpDestAccessLogsDescription")}
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div className="flex items-start gap-3 rounded-md border p-3">
+                                    <Checkbox
+                                        id="log-action"
+                                        checked={sendActionLogs}
+                                        onCheckedChange={(v) =>
+                                            setSendActionLogs(v === true)
+                                        }
+                                        className="mt-0.5"
+                                    />
+                                    <div>
+                                        <label
+                                            htmlFor="log-action"
+                                            className="text-sm font-medium cursor-pointer"
+                                        >
+                                            {t("httpDestActionLogsTitle")}
+                                        </label>
+                                        <p className="text-xs text-muted-foreground mt-0.5">
+                                            {t("httpDestActionLogsDescription")}
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div className="flex items-start gap-3 rounded-md border p-3">
+                                    <Checkbox
+                                        id="log-connection"
+                                        checked={sendConnectionLogs}
+                                        onCheckedChange={(v) =>
+                                            setSendConnectionLogs(v === true)
+                                        }
+                                        className="mt-0.5"
+                                    />
+                                    <div>
+                                        <label
+                                            htmlFor="log-connection"
+                                            className="text-sm font-medium cursor-pointer"
+                                        >
+                                            {t("httpDestConnectionLogsTitle")}
+                                        </label>
+                                        <p className="text-xs text-muted-foreground mt-0.5">
+                                            {t("httpDestConnectionLogsDescription")}
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div className="flex items-start gap-3 rounded-md border p-3">
+                                    <Checkbox
+                                        id="log-request"
+                                        checked={sendRequestLogs}
+                                        onCheckedChange={(v) =>
+                                            setSendRequestLogs(v === true)
+                                        }
+                                        className="mt-0.5"
+                                    />
+                                    <div>
+                                        <label
+                                            htmlFor="log-request"
+                                            className="text-sm font-medium cursor-pointer"
+                                        >
+                                            {t("httpDestRequestLogsTitle")}
+                                        </label>
+                                        <p className="text-xs text-muted-foreground mt-0.5">
+                                            {t("httpDestRequestLogsDescription")}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </HorizontalTabs>
+                </CredenzaBody>
+
+                <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            disabled={saving}
+                        >
+                            {t("cancel")}
+                        </Button>
+                    </CredenzaClose>
+                    <Button
+                        type="button"
+                        onClick={handleSave}
+                        loading={saving}
+                        disabled={!isValid || saving}
+                    >
+                        {editing ? t("httpDestSaveChanges") : t("httpDestCreateDestination")}
+                    </Button>
+                </CredenzaFooter>
+            </CredenzaContent>
+        </Credenza>
+    );
+}

src/components/IdpGlobalModeBanner.tsx

@@ -8,23 +8,25 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { build } from "@server/build";
+import type { Env } from "@app/lib/types/env";
+
+export function isIdpGlobalModeBannerVisible(env: Env): boolean {
+    if (build === "saas") {
+        return false;
+    }
+    return env.app.identityProviderMode === undefined;
+}
 
 export function IdpGlobalModeBanner() {
     const t = useTranslations();
     const { env } = useEnvContext();
     const { isPaidUser, hasEnterpriseLicense } = usePaidStatus();
 
-    const identityProviderModeUndefined =
-        env.app.identityProviderMode === undefined;
     const paidUserForOrgOidc = isPaidUser(tierMatrix.orgOidc);
     const enterpriseUnlicensed =
         build === "enterprise" && !hasEnterpriseLicense;
 
-    if (build === "saas") {
-        return null;
-    }
-
-    if (!identityProviderModeUndefined) {
+    if (!isIdpGlobalModeBannerVisible(env)) {
         return null;
     }
 

src/components/IdpLoginButtons.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { Button } from "@app/components/ui/button";
 import { Alert, AlertDescription } from "@app/components/ui/alert";
 import { useTranslations } from "next-intl";
-import Image from "next/image";
+import IdpTypeIcon from "@app/components/IdpTypeIcon";
 import {
     generateOidcUrlProxy,
     type GenerateOidcUrlResponse
@@ -135,24 +135,7 @@ export default function IdpLoginButtons({
                                     disabled={loading}
                                     loading={loading}
                                 >
-                                    {effectiveType === "google" && (
-                                        <Image
-                                            src="/idp/google.png"
-                                            alt="Google"
-                                            width={16}
-                                            height={16}
-                                            className="rounded"
-                                        />
-                                    )}
-                                    {effectiveType === "azure" && (
-                                        <Image
-                                            src="/idp/azure.png"
-                                            alt="Azure"
-                                            width={16}
-                                            height={16}
-                                            className="rounded"
-                                        />
-                                    )}
+                                    <IdpTypeIcon type={effectiveType} size={16} />
                                     <span>{idp.name}</span>
                                 </Button>
                             );

src/components/IdpTypeBadge.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Badge } from "@app/components/ui/badge";
-import Image from "next/image";
+import IdpTypeIcon from "@app/components/IdpTypeIcon";
 
 type IdpTypeBadgeProps = {
     type: string;
@@ -29,34 +29,8 @@ export default function IdpTypeBadge({
             variant="secondary"
             className="inline-flex items-center space-x-1 w-fit"
         >
-            {effectiveType === "google" && (
-                <>
-                    <Image
-                        src="/idp/google.png"
-                        alt="Google"
-                        width={16}
-                        height={16}
-                        className="rounded"
-                    />
-                    <span>{effectiveName}</span>
-                </>
-            )}
-            {effectiveType === "azure" && (
-                <>
-                    <Image
-                        src="/idp/azure.png"
-                        alt="Azure"
-                        width={16}
-                        height={16}
-                        className="rounded"
-                    />
-                    <span>{effectiveName}</span>
-                </>
-            )}
-            {effectiveType === "oidc" && <span>{effectiveName}</span>}
-            {!["google", "azure", "oidc"].includes(effectiveType) && (
-                <span>{effectiveName}</span>
-            )}
+            <IdpTypeIcon type={effectiveType} size={16} />
+            <span>{effectiveName}</span>
         </Badge>
     );
 }

src/components/IdpTypeIcon.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { cn } from "@app/lib/cn";
+import Image from "next/image";
+import { ReactNode } from "react";
+
+type Props = {
+    type?: string | null;
+    variant?: string | null;
+    size?: number;
+    className?: string;
+    alt?: string;
+    fallback?: ReactNode;
+};
+
+export default function IdpTypeIcon({
+    type,
+    variant,
+    size = 16,
+    className,
+    alt,
+    fallback = null
+}: Props) {
+    const effectiveType = (variant || type || "").toLowerCase();
+
+    let src: string | null = null;
+    let defaultAlt = "";
+
+    if (effectiveType === "google") {
+        src = "/idp/google.png";
+        defaultAlt = "Google";
+    } else if (effectiveType === "azure") {
+        src = "/idp/azure.png";
+        defaultAlt = "Azure";
+    } else if (effectiveType === "oidc") {
+        src = "/idp/openid.png";
+        defaultAlt = "OAuth2/OIDC";
+    }
+
+    if (!src) {
+        return <>{fallback}</>;
+    }
+
+    return (
+        <Image
+            src={src}
+            alt={alt ?? defaultAlt}
+            width={size}
+            height={size}
+            className={cn("shrink-0 rounded", className)}
+        />
+    );
+}

src/components/InternalResourceForm.tsx

@@ -566,19 +566,21 @@ export function InternalResourceForm({
                             </FormItem>
                         )}
                     />
-                    <FormField
-                        control={form.control}
-                        name="niceId"
-                        render={({ field }) => (
-                            <FormItem>
-                                <FormLabel>{t("identifier")}</FormLabel>
-                                <FormControl>
-                                    <Input {...field} />
-                                </FormControl>
-                                <FormMessage />
-                            </FormItem>
-                        )}
-                    />
+                    {variant === "edit" && (
+                        <FormField
+                            control={form.control}
+                            name="niceId"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{t("identifier")}</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                    )}
                     <FormField
                         control={form.control}
                         name="siteId"
@@ -612,6 +614,7 @@ export function InternalResourceForm({
                                         <SitesSelector
                                             orgId={orgId}
                                             selectedSite={selectedSite}
+                                            filterTypes={["newt"]}
                                             onSelectSite={(site) => {
                                                 setSelectedSite(site);
                                                 field.onChange(site.siteId);
@@ -1173,7 +1176,7 @@ export function InternalResourceForm({
                                                                             </span>
                                                                         )
                                                                     )}
-                                                                    <span className="pl-1">
+                                                                    <span className="pl-1 font-normal">
                                                                         {t(
                                                                             "accessClientSelect"
                                                                         )}

src/components/InviteStatusCard.tsx

@@ -39,7 +39,11 @@ export default function InviteStatusCard({
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState("");
     const [type, setType] = useState<
-        "rejected" | "wrong_user" | "user_does_not_exist" | "not_logged_in" | "user_limit_exceeded"
+        | "rejected"
+        | "wrong_user"
+        | "user_does_not_exist"
+        | "not_logged_in"
+        | "user_limit_exceeded"
     >("rejected");
 
     useEffect(() => {
@@ -90,12 +94,12 @@ export default function InviteStatusCard({
 
             if (!user && type === "user_does_not_exist") {
                 const redirectUrl = email
-                    ? `/auth/signup?redirect=/invite?token=${tokenParam}&email=${encodeURIComponent(email)}`
+                    ? `/auth/signup?redirect=/invite?token=${tokenParam}&email=${email}`
                     : `/auth/signup?redirect=/invite?token=${tokenParam}`;
                 router.push(redirectUrl);
             } else if (!user && type === "not_logged_in") {
                 const redirectUrl = email
-                    ? `/auth/login?redirect=/invite?token=${tokenParam}&email=${encodeURIComponent(email)}`
+                    ? `/auth/login?redirect=/invite?token=${tokenParam}&email=${email}`
                     : `/auth/login?redirect=/invite?token=${tokenParam}`;
                 router.push(redirectUrl);
             } else {
@@ -109,7 +113,7 @@ export default function InviteStatusCard({
     async function goToLogin() {
         await api.post("/auth/logout", {});
         const redirectUrl = email
-            ? `/auth/login?redirect=/invite?token=${tokenParam}&email=${encodeURIComponent(email)}`
+            ? `/auth/login?redirect=/invite?token=${tokenParam}&email=${email}`
             : `/auth/login?redirect=/invite?token=${tokenParam}`;
         router.push(redirectUrl);
     }
@@ -117,7 +121,7 @@ export default function InviteStatusCard({
     async function goToSignup() {
         await api.post("/auth/logout", {});
         const redirectUrl = email
-            ? `/auth/signup?redirect=/invite?token=${tokenParam}&email=${encodeURIComponent(email)}`
+            ? `/auth/signup?redirect=/invite?token=${tokenParam}&email=${email}`
             : `/auth/signup?redirect=/invite?token=${tokenParam}`;
         router.push(redirectUrl);
     }
@@ -157,7 +161,9 @@ export default function InviteStatusCard({
                         Cannot Accept Invite
                     </p>
                     <p className="text-center text-sm">
-                        This organization has reached its user limit. Please contact the organization administrator to upgrade their plan before accepting this invite.
+                        This organization has reached its user limit. Please
+                        contact the organization administrator to upgrade their
+                        plan before accepting this invite.
                     </p>
                 </div>
             );

src/components/LayoutHeader.tsx

@@ -49,7 +49,7 @@ export function LayoutHeader({ showTopBar }: LayoutHeaderProps) {
 
     return (
         <div className="absolute top-0 left-0 right-0 z-50 hidden md:block">
-            <div className="absolute inset-0 bg-background/83 backdrop-blur-sm" />
+            <div className="absolute inset-0 bg-background backdrop-blur-sm" />
             <div className="relative z-10 px-6 py-2">
                 <div className="container mx-auto max-w-12xl">
                     <div className="h-16 flex items-center justify-between">

src/components/LayoutSidebar.tsx

@@ -24,10 +24,8 @@ import dynamic from "next/dynamic";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
-import { FaGithub } from "react-icons/fa";
 import SidebarLicenseButton from "./SidebarLicenseButton";
 import { SidebarSupportButton } from "./SidebarSupportButton";
-import { is } from "drizzle-orm";
 
 const ProductUpdates = dynamic(() => import("./ProductUpdates"), {
     ssr: false
@@ -127,7 +125,7 @@ export function LayoutSidebar({
     return (
         <div
             className={cn(
-                "hidden md:flex border-r bg-card flex-col h-full shrink-0 relative",
+                "hidden md:flex border-r bg-sidebar flex-col h-full shrink-0 relative",
                 isSidebarCollapsed ? "w-16" : "w-64"
             )}
         >
@@ -156,7 +154,7 @@ export function LayoutSidebar({
                             <Link
                                 href="/admin"
                                 className={cn(
-                                    "flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-secondary/80 dark:hover:bg-secondary/50 rounded-md",
+                                    "flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 rounded-md",
                                     isSidebarCollapsed
                                         ? "px-2 py-2 justify-center"
                                         : "px-3 py-1.5"
@@ -193,7 +191,7 @@ export function LayoutSidebar({
                     />
                 </div>
                 {/* Fade gradient at bottom to indicate scrollable content */}
-                <div className="sticky bottom-0 left-0 right-0 h-8 pointer-events-none bg-gradient-to-t from-card to-transparent" />
+                <div className="sticky bottom-0 left-0 right-0 h-8 pointer-events-none bg-gradient-to-t from-sidebar to-transparent" />
             </div>
 
             {isSidebarCollapsed && (
@@ -208,7 +206,7 @@ export function LayoutSidebar({
                                         setHasManualToggle(true);
                                         setSidebarStateCookie(false);
                                     }}
-                                    className="rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 transition-colors"
+                                    className="rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 transition-colors"
                                     aria-label={t("sidebarExpand")}
                                 >
                                     <PanelRightOpen className="h-4 w-4" />
@@ -222,12 +220,17 @@ export function LayoutSidebar({
                 </div>
             )}
 
-            <div className="pt-1 flex flex-col shrink-0 gap-2 w-full border-t border-border">
-                {canShowProductUpdates && (
+            <div
+                className={cn(
+                    "pt-1 flex flex-col shrink-0 gap-2 w-full border-t border-border",
+                    isSidebarCollapsed && "pb-2"
+                )}
+            >
+                {canShowProductUpdates ? (
                     <div className="px-4">
                         <ProductUpdates isCollapsed={isSidebarCollapsed} />
                     </div>
-                )}
+                ) : <div className="mt-0.2"></div>}
 
                 {build === "enterprise" && (
                     <div className="px-4">
@@ -291,7 +294,6 @@ export function LayoutSidebar({
                                             : build === "enterprise"
                                               ? t("enterpriseEdition")
                                               : "Pangolin Cloud"}
-                                        <FaGithub size={12} />
                                     </Link>
                                 </div>
                                 {build === "enterprise" &&

src/components/LocaleSwitcherSelect.tsx

@@ -53,7 +53,7 @@ export default function LocaleSwitcherSelect({
                     )}
                     aria-label={label}
                 >
-                    <Languages className="h-4 w-4" />
+                    <Languages className="text-muted-foreground h-4 w-4" />
                     <span className="text-left flex-1">
                         {selected?.label ?? label}
                     </span>

src/components/LoginForm.tsx

@@ -27,7 +27,6 @@ import { LockIcon } from "lucide-react";
 import SecurityKeyAuthButton from "@app/components/SecurityKeyAuthButton";
 import { createApiClient } from "@app/lib/api";
 import Link from "next/link";
-import Image from "next/image";
 import { GenerateOidcUrlResponse } from "@server/routers/idp";
 import { Separator } from "./ui/separator";
 import { useTranslations } from "next-intl";
@@ -37,6 +36,7 @@ import {
 } from "@app/actions/server";
 import { redirect as redirectTo } from "next/navigation";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import IdpTypeIcon from "@app/components/IdpTypeIcon";
 // @ts-ignore
 import { loadReoScript } from "reodotdev";
 import { build } from "@server/build";
@@ -393,24 +393,7 @@ export default function LoginForm({
                                                 loginWithIdp(idp.idpId);
                                             }}
                                         >
-                                            {effectiveType === "google" && (
-                                                <Image
-                                                    src="/idp/google.png"
-                                                    alt="Google"
-                                                    width={16}
-                                                    height={16}
-                                                    className="rounded"
-                                                />
-                                            )}
-                                            {effectiveType === "azure" && (
-                                                <Image
-                                                    src="/idp/azure.png"
-                                                    alt="Azure"
-                                                    width={16}
-                                                    height={16}
-                                                    className="rounded"
-                                                />
-                                            )}
+                                            <IdpTypeIcon type={effectiveType} size={16} />
                                             <span>{idp.name}</span>
                                         </Button>
                                     );

src/components/OrgIdpDataTable.tsx

@@ -1,19 +1,26 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { DataTable } from "@app/components/ui/data-table";
+import {
+    DataTable,
+    type DataTableAddAction
+} from "@app/components/ui/data-table";
 import { useTranslations } from "next-intl";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     onAdd?: () => void;
+    addActions?: DataTableAddAction[];
+    addButtonDisabled?: boolean;
 }
 
 export function IdpDataTable<TData, TValue>({
     columns,
     data,
-    onAdd
+    onAdd,
+    addActions,
+    addButtonDisabled
 }: DataTableProps<TData, TValue>) {
     const t = useTranslations();
 
@@ -27,6 +34,8 @@ export function IdpDataTable<TData, TValue>({
             searchColumn="name"
             addButtonText={t("idpAdd")}
             onAdd={onAdd}
+            addActions={addActions}
+            addButtonDisabled={addButtonDisabled}
             enableColumnVisibility={true}
             stickyRightColumn="actions"
         />

src/components/OrgIdpTable.tsx

@@ -4,13 +4,37 @@ import { ColumnDef } from "@tanstack/react-table";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { IdpDataTable } from "@app/components/OrgIdpDataTable";
 import { Button } from "@app/components/ui/button";
-import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
-import { useState } from "react";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import {
+    ArrowRight,
+    ArrowUpDown,
+    KeyRound,
+    MoreHorizontal
+} from "lucide-react";
+import { useMemo, useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useUserContext } from "@app/hooks/useUserContext";
 import { useRouter } from "next/navigation";
 import {
     DropdownMenu,
@@ -21,6 +45,14 @@ import {
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import IdpTypeBadge from "@app/components/IdpTypeBadge";
+import IdpTypeIcon from "@app/components/IdpTypeIcon";
+import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import type { ListUserAdminOrgIdpsResponse } from "@server/routers/orgIdp/types";
+import { cn } from "@app/lib/cn";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { isIdpGlobalModeBannerVisible } from "@app/components/IdpGlobalModeBanner";
 
 export type IdpRow = {
     idpId: number;
@@ -29,6 +61,15 @@ export type IdpRow = {
     variant?: string;
 };
 
+type AdminIdpRow = ListUserAdminOrgIdpsResponse["idps"][number];
+
+function IdpImportRowIcon({
+    type,
+    variant
+}: Pick<AdminIdpRow, "type" | "variant">) {
+    return <IdpTypeIcon type={type} variant={variant} size={20} />;
+}
+
 type Props = {
     idps: IdpRow[];
     orgId: string;
@@ -37,10 +78,53 @@ type Props = {
 export default function IdpTable({ idps, orgId }: Props) {
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedIdp, setSelectedIdp] = useState<IdpRow | null>(null);
-    const api = createApiClient(useEnvContext());
+    const [isUnassociateModalOpen, setIsUnassociateModalOpen] = useState(false);
+    const [selectedUnassociateIdp, setSelectedUnassociateIdp] =
+        useState<IdpRow | null>(null);
+    const [importDialogOpen, setImportDialogOpen] = useState(false);
+    const [importSearchQuery, setImportSearchQuery] = useState("");
+    const [importSubmitting, setImportSubmitting] = useState(false);
+    const [debouncedImportSearch] = useDebounce(importSearchQuery, 150);
+
+    const envContext = useEnvContext();
+    const api = createApiClient(envContext);
+    const { user } = useUserContext();
+    const { isPaidUser } = usePaidStatus();
     const router = useRouter();
     const t = useTranslations();
 
+    const canImportOrgOidcIdp = isPaidUser(tierMatrix.orgOidc);
+    const addIdpDisabled = isIdpGlobalModeBannerVisible(envContext.env);
+
+    const { data: adminIdpsRaw = [] } = useQuery({
+        queryKey: ["admin-org-idps", user.userId],
+        queryFn: async () => {
+            const res = await api.get<{
+                data: ListUserAdminOrgIdpsResponse;
+            }>(`/user/${user.userId}/admin-org-idps`);
+            return res.data.data.idps;
+        },
+        enabled: importDialogOpen && !!user?.userId
+    });
+
+    const importableIdps = useMemo(() => {
+        const localIds = new Set(idps.map((i) => i.idpId));
+        return adminIdpsRaw.filter(
+            (row) => row.orgId !== orgId && !localIds.has(row.idpId)
+        );
+    }, [adminIdpsRaw, orgId, idps]);
+
+    const shownImportIdps = useMemo(() => {
+        const q = debouncedImportSearch.trim().toLowerCase();
+        if (!q) {
+            return importableIdps;
+        }
+        return importableIdps.filter((row) => {
+            const hay = `${row.orgName} ${row.name}`.toLowerCase();
+            return hay.includes(q);
+        });
+    }, [importableIdps, debouncedImportSearch]);
+
     const deleteIdp = async (idpId: number) => {
         try {
             await api.delete(`/org/${orgId}/idp/${idpId}`);
@@ -59,24 +143,50 @@ export default function IdpTable({ idps, orgId }: Props) {
         }
     };
 
+    const importIdp = async (row: AdminIdpRow) => {
+        setImportSubmitting(true);
+        try {
+            await api.post(`/org/${orgId}/idp/${row.idpId}/import`, {
+                sourceOrgId: row.orgId
+            });
+            toast({
+                title: t("success"),
+                description: t("idpImportedDescription")
+            });
+            setImportDialogOpen(false);
+            setImportSearchQuery("");
+            router.refresh();
+            router.push(`/${orgId}/settings/idp/${row.idpId}/general`);
+        } catch (e) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(e),
+                variant: "destructive"
+            });
+        } finally {
+            setImportSubmitting(false);
+        }
+    };
+
+    const unassociateIdp = async (idpId: number) => {
+        try {
+            await api.delete(`/org/${orgId}/idp/${idpId}/association`);
+            toast({
+                title: t("success"),
+                description: t("idpUnassociatedDescription")
+            });
+            setIsUnassociateModalOpen(false);
+            router.refresh();
+        } catch (e) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(e),
+                variant: "destructive"
+            });
+        }
+    };
+
     const columns: ExtendedColumnDef<IdpRow>[] = [
-        {
-            accessorKey: "idpId",
-            friendlyName: "ID",
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        ID
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
         {
             accessorKey: "name",
             friendlyName: t("name"),
@@ -142,6 +252,14 @@ export default function IdpTable({ idps, orgId }: Props) {
                                         {t("viewSettings")}
                                     </DropdownMenuItem>
                                 </Link>
+                                <DropdownMenuItem
+                                    onClick={() => {
+                                        setSelectedUnassociateIdp(siteRow);
+                                        setIsUnassociateModalOpen(true);
+                                    }}
+                                >
+                                    {t("idpUnassociateMenu")}
+                                </DropdownMenuItem>
                                 <DropdownMenuItem
                                     onClick={() => {
                                         setSelectedIdp(siteRow);
@@ -149,7 +267,7 @@ export default function IdpTable({ idps, orgId }: Props) {
                                     }}
                                 >
                                     <span className="text-red-500">
-                                        {t("delete")}
+                                        {t("idpDeleteAllOrgsMenu")}
                                     </span>
                                 </DropdownMenuItem>
                             </DropdownMenuContent>
@@ -179,8 +297,8 @@ export default function IdpTable({ idps, orgId }: Props) {
                     }}
                     dialog={
                         <div className="space-y-2">
-                            <p>{t("idpQuestionRemove")}</p>
-                            <p>{t("idpMessageRemove")}</p>
+                            <p>{t("idpDeleteGlobalQuestion")}</p>
+                            <p>{t("idpDeleteGlobalDescription")}</p>
                         </div>
                     }
                     buttonText={t("idpConfirmDelete")}
@@ -189,11 +307,127 @@ export default function IdpTable({ idps, orgId }: Props) {
                     title={t("idpDelete")}
                 />
             )}
+            {selectedUnassociateIdp && (
+                <ConfirmDeleteDialog
+                    open={isUnassociateModalOpen}
+                    setOpen={(val) => {
+                        setIsUnassociateModalOpen(val);
+                        setSelectedUnassociateIdp(null);
+                    }}
+                    dialog={
+                        <div className="space-y-2">
+                            <p>{t("idpUnassociateQuestion")}</p>
+                            <p>{t("idpUnassociateDescription")}</p>
+                        </div>
+                    }
+                    buttonText={t("idpUnassociateConfirm")}
+                    onConfirm={async () =>
+                        unassociateIdp(selectedUnassociateIdp.idpId)
+                    }
+                    string={selectedUnassociateIdp.name}
+                    title={t("idpUnassociateTitle")}
+                    warningText={t("idpUnassociateWarning")}
+                />
+            )}
+
+            <Credenza
+                open={importDialogOpen}
+                onOpenChange={(open) => {
+                    setImportDialogOpen(open);
+                    if (!open) {
+                        setImportSearchQuery("");
+                    }
+                }}
+            >
+                <CredenzaContent className="sm:max-w-lg">
+                    <CredenzaHeader>
+                        <CredenzaTitle>
+                            {t("idpImportDialogTitle")}
+                        </CredenzaTitle>
+                        <CredenzaDescription>
+                            {t("idpImportDialogDescription")}
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody
+                        className={cn(
+                            importSubmitting && "pointer-events-none opacity-60"
+                        )}
+                    >
+                        <Command shouldFilter={false}>
+                            <CommandInput
+                                placeholder={t("idpImportSearchPlaceholder")}
+                                value={importSearchQuery}
+                                onValueChange={setImportSearchQuery}
+                            />
+                            <CommandList>
+                                <CommandEmpty>
+                                    {t("idpImportEmpty")}
+                                </CommandEmpty>
+                                <CommandGroup>
+                                    {shownImportIdps.map((row) => (
+                                        <CommandItem
+                                            key={`${row.idpId}:${row.orgId}`}
+                                            className="items-start gap-3 py-2.5"
+                                            value={`${row.idpId}:${row.orgId}:${row.orgName}:${row.name}`}
+                                            disabled={!canImportOrgOidcIdp}
+                                            onSelect={() => {
+                                                if (!canImportOrgOidcIdp) {
+                                                    return;
+                                                }
+                                                void importIdp(row);
+                                            }}
+                                        >
+                                            <div className="mt-0.5 shrink-0">
+                                                <IdpImportRowIcon
+                                                    type={row.type}
+                                                    variant={row.variant}
+                                                />
+                                            </div>
+                                            <div className="min-w-0 flex-1 text-left">
+                                                <div className="truncate font-medium leading-tight">
+                                                    {row.orgName}
+                                                </div>
+                                                <div className="truncate text-sm leading-tight text-muted-foreground">
+                                                    {row.name}
+                                                </div>
+                                            </div>
+                                        </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                            </CommandList>
+                        </Command>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button
+                                variant="outline"
+                                disabled={importSubmitting}
+                            >
+                                {t("cancel")}
+                            </Button>
+                        </CredenzaClose>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
 
             <IdpDataTable
                 columns={columns}
                 data={idps}
-                onAdd={() => router.push(`/${orgId}/settings/idp/create`)}
+                addButtonDisabled={addIdpDisabled}
+                addActions={[
+                    {
+                        label: t("idpAddActionCreateNew"),
+                        onSelect: () => {
+                            router.push(`/${orgId}/settings/idp/create`);
+                        }
+                    },
+                    {
+                        label: t("idpAddActionImportFromOrg"),
+                        onSelect: () => {
+                            setImportDialogOpen(true);
+                        }
+                    }
+                ]}
             />
         </>
     );

src/components/OrgSelector.tsx

@@ -76,8 +76,8 @@ export function OrgSelector({
                     className={cn(
                         "cursor-pointer transition-colors",
                         isCollapsed
-                            ? "w-full h-16 flex items-center justify-center hover:bg-muted"
-                            : "w-full px-5 py-4 hover:bg-muted"
+                            ? "w-full h-16 flex items-center justify-center hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50"
+                            : "w-full px-5 py-4 hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50"
                     )}
                 >
                     {isCollapsed ? (
@@ -172,7 +172,7 @@ export function OrgSelector({
                         <Button
                             variant="ghost"
                             size="sm"
-                            className="w-full justify-start h-8 font-normal text-muted-foreground hover:text-foreground"
+                            className="w-full justify-start h-8 font-normal text-muted-foreground"
                             onClick={() => {
                                 setOpen(false);
                                 router.push("/setup");

src/components/PaidFeaturesAlert.tsx

@@ -10,7 +10,8 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { Tier } from "@server/types/Tiers";
 import { useParams } from "next/navigation";
 
-const TIER_ORDER: Tier[] = ["tier1", "tier2", "tier3", "enterprise"];
+// const TIER_ORDER: Tier[] = ["tier1", "tier2", "tier3", "enterprise"];
+const TIER_ORDER: Tier[] = ["tier2", "tier3", "enterprise"];
 
 const TIER_TRANSLATION_KEYS: Record<
     Tier,