Merge branch 'main' into feature/slack-secret-sync-error-notification

frontend/.storybook/decorators/DocumentDecorator.tsx

@@ -3,7 +3,7 @@ import type { Decorator } from "@storybook/react-vite";
 
 export const DocumentDecorator: Decorator = (Story) => {
   useEffect(() => {
-    const root = document.getElementsByTagName("html")[0];
+    const root = document.documentElement;
 
     root.setAttribute("class", "overflow-visible");
   }, []);

frontend/package.json

@@ -147,10 +147,10 @@
     "tailwindcss": "^4.1.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.15.0",
-    "vite": "^5.4.18",
-    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite": "^6.2.0",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-top-level-await": "^1.4.4",
-    "vite-plugin-wasm": "^3.3.0",
+    "vite-plugin-wasm": "^3.4.0",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

frontend/src/components/app-connections/AppConnectionOption.tsx

@@ -1,9 +1,11 @@
 import { components, OptionProps } from "react-select";
 import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
-import { faBuilding, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Badge, Tooltip } from "@app/components/v2";
+import { Tooltip } from "@app/components/v2";
+import { Badge, OrgIcon, SubOrgIcon } from "@app/components/v3";
+import { useOrganization } from "@app/context";
 import { TAvailableAppConnection } from "@app/hooks/api/appConnections";
 
 export const AppConnectionOption = ({
@@ -13,6 +15,8 @@ export const AppConnectionOption = ({
 }: OptionProps<TAvailableAppConnection>) => {
   const isCreateOption = props.data.id === "_create";
 
+  const { isSubOrganization } = useOrganization();
+
   return (
     <components.Option isSelected={isSelected} {...props}>
       <div className="flex flex-row items-center justify-between">
@@ -23,15 +27,22 @@ export const AppConnectionOption = ({
           </div>
         ) : (
           <>
-            <p className="truncate">{children}</p>
+            <p className="mr-auto truncate">{children}</p>
             {!props.data.projectId && (
-              <Tooltip content="This connection belongs to your organization.">
-                <div className="mr-auto ml-2">
-                  <Badge className="flex h-5 w-min items-center gap-1 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300 hover:text-bunker-300">
-                    <FontAwesomeIcon icon={faBuilding} size="sm" />
+              <Tooltip
+                content={`This connection belongs to your ${isSubOrganization ? "sub-" : ""}organization.`}
+              >
+                {isSubOrganization ? (
+                  <Badge variant="sub-org">
+                    <SubOrgIcon />
+                    Sub-Organization
+                  </Badge>
+                ) : (
+                  <Badge variant="org">
+                    <OrgIcon />
                     Organization
                   </Badge>
-                </div>
+                )}
               </Tooltip>
             )}
             {isSelected && (

frontend/src/components/pki-syncs/CertificateManagementModal.tsx

@@ -0,0 +1,444 @@
+import React, { useEffect, useState } from "react";
+import { faSearch, faX } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  Checkbox,
+  EmptyState,
+  Input,
+  Modal,
+  ModalContent,
+  Pagination,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { useProject } from "@app/context";
+import {
+  CertStatus,
+  useAddCertificatesToPkiSync,
+  useListPkiSyncCertificates,
+  useRemoveCertificatesFromPkiSync
+} from "@app/hooks/api";
+import { TPkiSync } from "@app/hooks/api/pkiSyncs";
+import { useListWorkspaceCertificates } from "@app/hooks/api/projects";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  pkiSync?: TPkiSync;
+  onCertificatesUpdated?: () => void;
+  selectedCertificateIds?: string[];
+  onCertificateSelectionChange?: (certificateIds: string[]) => void;
+  title?: string;
+  subtitle?: string;
+  saveButtonText?: string;
+};
+
+export const CertificateManagementModal = ({
+  isOpen,
+  onClose,
+  pkiSync,
+  onCertificatesUpdated,
+  selectedCertificateIds,
+  onCertificateSelectionChange,
+  title = "Manage Certificate Sync",
+  subtitle = "Select which certificates should be synced.",
+  saveButtonText = "Save Changes"
+}: Props) => {
+  const { currentProject } = useProject();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const pageSize = 10;
+
+  const isCreateMode = !pkiSync;
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+      setCurrentPage(1);
+    }, 300);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  const { data } = useListWorkspaceCertificates({
+    projectId: currentProject?.id || "",
+    offset: (currentPage - 1) * pageSize,
+    limit: pageSize,
+    commonName: debouncedSearchTerm || undefined,
+    friendlyName: debouncedSearchTerm || undefined,
+    forPkiSync: true
+  });
+
+  const allCertificates = data?.certificates || [];
+  const totalCount = data?.totalCount || 0;
+
+  const { data: syncData } = useListPkiSyncCertificates(pkiSync?.id || "");
+  const syncCertificates = syncData?.certificates || [];
+  const addCertificatesToSync = useAddCertificatesToPkiSync();
+  const removeCertificatesFromSync = useRemoveCertificatesFromPkiSync();
+
+  const syncedCertificateIds = isCreateMode
+    ? selectedCertificateIds || []
+    : syncCertificates.map((sc) => sc.certificateId);
+
+  const totalPages = Math.ceil(totalCount / pageSize);
+
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  React.useEffect(() => {
+    setSelectedIds(syncedCertificateIds);
+  }, [JSON.stringify(syncedCertificateIds)]);
+
+  const handleToggleSelection = (certId: string) => {
+    setSelectedIds((prev) =>
+      prev.includes(certId) ? prev.filter((id) => id !== certId) : [...prev, certId]
+    );
+  };
+
+  const handleSelectAll = () => {
+    const currentPageIds = allCertificates.map((cert) => cert.id);
+    const allCurrentPageSelected = currentPageIds.every((id) => selectedIds.includes(id));
+
+    if (allCurrentPageSelected) {
+      setSelectedIds((prev) => prev.filter((id) => !currentPageIds.includes(id)));
+    } else {
+      setSelectedIds((prev) => [...new Set([...prev, ...currentPageIds])]);
+    }
+  };
+
+  const clearSearch = () => {
+    setSearchTerm("");
+    setCurrentPage(1);
+  };
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setCurrentPage(1);
+      setSearchTerm("");
+    }
+  }, [isOpen]);
+
+  const handleSaveCertificates = async () => {
+    try {
+      if (isCreateMode) {
+        if (onCertificateSelectionChange) {
+          onCertificateSelectionChange(selectedIds);
+          onClose();
+        }
+        return;
+      }
+
+      if (!pkiSync) return;
+
+      const certificatesToAdd = selectedIds.filter((id) => !syncedCertificateIds.includes(id));
+      const certificatesToRemove = syncedCertificateIds.filter((id) => !selectedIds.includes(id));
+
+      const invalidCertificates = certificatesToAdd
+        .map((id) => allCertificates.find((cert) => cert.id === id))
+        .filter((cert) => {
+          if (!cert) return false;
+          const isExpired = new Date(cert.notAfter) < new Date();
+          const isRevoked = cert.status === CertStatus.REVOKED;
+          return isExpired || isRevoked;
+        });
+
+      if (invalidCertificates.length > 0) {
+        const invalidNames = invalidCertificates.map((cert) => cert?.commonName).join(", ");
+        createNotification({
+          text: `Cannot add expired or revoked certificates: ${invalidNames}`,
+          type: "error"
+        });
+        return;
+      }
+
+      const operations = [];
+
+      if (certificatesToAdd.length > 0) {
+        operations.push(
+          addCertificatesToSync
+            .mutateAsync({
+              pkiSyncId: pkiSync.id,
+              certificateIds: certificatesToAdd
+            })
+            .then(() => ({
+              type: "add",
+              count: certificatesToAdd.length,
+              success: true
+            }))
+            .catch((error) => ({
+              type: "add",
+              count: certificatesToAdd.length,
+              success: false,
+              error
+            }))
+        );
+      }
+
+      if (certificatesToRemove.length > 0) {
+        operations.push(
+          removeCertificatesFromSync
+            .mutateAsync({
+              pkiSyncId: pkiSync.id,
+              certificateIds: certificatesToRemove
+            })
+            .then(() => ({
+              type: "remove",
+              count: certificatesToRemove.length,
+              success: true
+            }))
+            .catch((error) => ({
+              type: "remove",
+              count: certificatesToRemove.length,
+              success: false,
+              error
+            }))
+        );
+      }
+
+      if (operations.length === 0) {
+        createNotification({
+          text: "No changes to save",
+          type: "info"
+        });
+        onClose();
+        return;
+      }
+
+      const results = await Promise.all(operations);
+      const failures = results.filter((r) => !r.success);
+      const successes = results.filter((r) => r.success);
+
+      if (failures.length === 0) {
+        const addCount = successes.find((r) => r.type === "add")?.count || 0;
+        const removeCount = successes.find((r) => r.type === "remove")?.count || 0;
+
+        let message = "Certificate selection updated successfully";
+        if (addCount > 0 && removeCount > 0) {
+          message = `Added ${addCount} and removed ${removeCount} certificate(s)`;
+        } else if (addCount > 0) {
+          message = `Added ${addCount} certificate(s)`;
+        } else if (removeCount > 0) {
+          message = `Removed ${removeCount} certificate(s)`;
+        }
+
+        createNotification({
+          text: message,
+          type: "success"
+        });
+
+        if (onCertificatesUpdated) {
+          onCertificatesUpdated();
+        }
+        onClose();
+      } else {
+        const partialSuccess = successes.length > 0;
+        console.error("Certificate sync operation failures:", failures);
+
+        createNotification({
+          text: partialSuccess
+            ? "Some certificate changes failed. Check console for details."
+            : "Failed to update certificate selection",
+          type: partialSuccess ? "warning" : "error"
+        });
+
+        if (partialSuccess && onCertificatesUpdated) {
+          onCertificatesUpdated();
+        }
+      }
+    } catch (error) {
+      console.error("Unexpected error during certificate sync operation:", error);
+      createNotification({
+        text: "An unexpected error occurred while updating certificates",
+        type: "error"
+      });
+    }
+  };
+
+  const isLoading = addCertificatesToSync.isPending || removeCertificatesFromSync.isPending;
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <ModalContent title={title} subTitle={subtitle} className="max-w-4xl">
+        <div className="space-y-4">
+          <div className="space-y-3">
+            <div className="relative">
+              <Input
+                placeholder="Search by common name, serial number, or SAN..."
+                value={searchTerm}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  setCurrentPage(1);
+                }}
+                className="pl-9"
+              />
+              <FontAwesomeIcon
+                icon={faSearch}
+                className="absolute top-1/2 left-3 h-3 w-3 -translate-y-1/2 transform text-bunker-300"
+              />
+              {searchTerm && (
+                <button
+                  type="button"
+                  onClick={clearSearch}
+                  className="absolute top-1/2 right-3 -translate-y-1/2 transform text-bunker-300 hover:text-bunker-100"
+                >
+                  <FontAwesomeIcon icon={faX} className="h-3 w-3" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          <TableContainer>
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="w-12">
+                    <Checkbox
+                      id="select-all-certificates"
+                      isChecked={
+                        allCertificates.length > 0 &&
+                        allCertificates.every((cert) => selectedIds.includes(cert.id))
+                      }
+                      onCheckedChange={handleSelectAll}
+                    />
+                  </Th>
+                  <Th className="w-1/3">SAN / CN</Th>
+                  <Th className="w-1/4">Serial Number</Th>
+                  <Th className="w-1/6">Issued At</Th>
+                  <Th className="w-1/6">Expires At</Th>
+                </Tr>
+              </THead>
+              <TBody>
+                {allCertificates.map((cert) => {
+                  const isExpired = new Date(cert.notAfter) < new Date();
+                  const isRevoked = cert.status === CertStatus.REVOKED;
+                  const cannotBeAdded = isExpired || isRevoked;
+                  const isAlreadySynced = syncedCertificateIds.includes(cert.id);
+
+                  let originalDisplayName = "—";
+                  if (cert.altNames && cert.altNames.trim()) {
+                    originalDisplayName = cert.altNames.trim();
+                  } else if (cert.commonName && cert.commonName.trim()) {
+                    originalDisplayName = cert.commonName.trim();
+                  }
+
+                  let displayName = originalDisplayName;
+                  let isTruncated = false;
+                  if (originalDisplayName.length > 34) {
+                    displayName = `${originalDisplayName.substring(0, 34)}...`;
+                    isTruncated = true;
+                  }
+
+                  const truncatedSerial =
+                    cert.serialNumber.length > 8
+                      ? `${cert.serialNumber.slice(0, 4)}...${cert.serialNumber.slice(-4)}`
+                      : cert.serialNumber;
+
+                  return (
+                    <Tr
+                      key={cert.id}
+                      className={`cursor-pointer hover:bg-mineshaft-700 ${
+                        cannotBeAdded && !isAlreadySynced ? "opacity-50" : ""
+                      }`}
+                      onClick={() => {
+                        if (!cannotBeAdded || isAlreadySynced) {
+                          handleToggleSelection(cert.id);
+                        }
+                      }}
+                    >
+                      <Td className="max-w-0" onClick={(e) => e.stopPropagation()}>
+                        <Checkbox
+                          id={cert.id}
+                          isChecked={selectedIds.includes(cert.id)}
+                          onCheckedChange={() => {
+                            if (!cannotBeAdded || isAlreadySynced) {
+                              handleToggleSelection(cert.id);
+                            }
+                          }}
+                          isDisabled={cannotBeAdded && !isAlreadySynced}
+                        />
+                      </Td>
+                      <Td className="max-w-0">
+                        {isTruncated ? (
+                          <Tooltip content={originalDisplayName} className="max-w-lg">
+                            <div className="truncate">{displayName}</div>
+                          </Tooltip>
+                        ) : (
+                          <div className="truncate">{displayName}</div>
+                        )}
+                      </Td>
+                      <Td className="max-w-0">
+                        <div
+                          className="font-mono text-xs text-bunker-300"
+                          title={cert.serialNumber}
+                        >
+                          {truncatedSerial}
+                        </div>
+                      </Td>
+                      <Td className="max-w-0">
+                        <span className="text-sm text-bunker-300">
+                          {new Date(cert.notBefore).toLocaleDateString()}
+                        </span>
+                      </Td>
+                      <Td className="max-w-0">
+                        <span
+                          className={`text-sm ${isExpired ? "text-red-400" : "text-bunker-300"}`}
+                        >
+                          {new Date(cert.notAfter).toLocaleDateString()}
+                        </span>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+              </TBody>
+            </Table>
+            {allCertificates.length === 0 && (
+              <EmptyState title="No certificates found">
+                {searchTerm
+                  ? "No certificates match your search criteria."
+                  : "No certificates available for sync."}
+              </EmptyState>
+            )}
+          </TableContainer>
+
+          {totalPages > 1 && (
+            <div className="mt-4 flex justify-center">
+              <Pagination
+                count={totalCount}
+                page={currentPage}
+                perPage={pageSize}
+                onChangePage={(page: number) => setCurrentPage(page)}
+                onChangePerPage={() => {}}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 flex justify-end gap-2">
+          <Button variant="outline_bg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="solid"
+            colorSchema="primary"
+            onClick={handleSaveCertificates}
+            isLoading={isLoading}
+          >
+            {saveButtonText}
+          </Button>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/pki-syncs/CreatePkiSyncModal.tsx

@@ -11,21 +11,24 @@ type Props = {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   selectSync?: PkiSync | null;
+  initialData?: any;
 };
 
 type ContentProps = {
   onComplete: (pkiSync: TPkiSync) => void;
   selectedSync: PkiSync | null;
   setSelectedSync: (selectedSync: PkiSync | null) => void;
+  initialData?: any;
 };
 
-const Content = ({ onComplete, setSelectedSync, selectedSync }: ContentProps) => {
+const Content = ({ onComplete, setSelectedSync, selectedSync, initialData }: ContentProps) => {
   if (selectedSync) {
     return (
       <CreatePkiSyncForm
         onComplete={onComplete}
         onCancel={() => setSelectedSync(null)}
         destination={selectedSync}
+        initialData={initialData}
       />
     );
   }
@@ -33,7 +36,12 @@ const Content = ({ onComplete, setSelectedSync, selectedSync }: ContentProps) =>
   return <PkiSyncSelect onSelect={setSelectedSync} />;
 };
 
-export const CreatePkiSyncModal = ({ onOpenChange, selectSync = null, ...props }: Props) => {
+export const CreatePkiSyncModal = ({
+  onOpenChange,
+  selectSync = null,
+  initialData,
+  ...props
+}: Props) => {
   const [selectedSync, setSelectedSync] = useState<PkiSync | null>(selectSync);
 
   useEffect(() => {
@@ -69,6 +77,7 @@ export const CreatePkiSyncModal = ({ onOpenChange, selectSync = null, ...props }
           }}
           selectedSync={selectedSync}
           setSelectedSync={setSelectedSync}
+          initialData={initialData}
         />
       </ModalContent>
     </Modal>

frontend/src/components/pki-syncs/PkiSyncImportStatusBadge.tsx

@@ -1,27 +1,20 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import {
-  faCheck,
-  faDownload,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { differenceInSeconds } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { CheckIcon, DownloadIcon, LucideIcon, TriangleAlertIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Tooltip } from "@app/components/v2";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { PkiSyncStatus, TPkiSync } from "@app/hooks/api/pkiSyncs";
 
 type Props = {
   pkiSync: TPkiSync;
-  className?: string;
   mini?: boolean;
 };
 
-export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) => {
+export const PkiSyncImportStatusBadge = ({ pkiSync, mini }: Props) => {
   const { importStatus, lastImportMessage, lastImportedAt, destination } = pkiSync;
   const [hide, setHide] = useState(importStatus === PkiSyncStatus.Succeeded);
   const destinationName = PKI_SYNC_MAP[destination].name;
@@ -50,24 +43,24 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) =>
 
   if (!importStatus || hide) return null;
 
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let label: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
   let tooltipContent: ReactNode;
 
   switch (importStatus) {
     case PkiSyncStatus.Pending:
     case PkiSyncStatus.Running:
-      variant = "primary";
+      variant = "warning";
       label = "Importing Certificates...";
       tooltipContent = `Importing certificates from ${destinationName}. This may take a moment.`;
-      icon = faDownload;
+      Icon = DownloadIcon;
 
       break;
     case PkiSyncStatus.Failed:
       variant = "danger";
       label = "Failed to Import Certificates";
-      icon = faTriangleExclamation;
+      Icon = TriangleAlertIcon;
       tooltipContent = (
         <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
@@ -93,20 +86,15 @@ export const PkiSyncImportStatusBadge = ({ pkiSync, className, mini }: Props) =>
       tooltipContent = "Successfully imported certificates.";
       variant = "success";
       label = "Certificates Imported";
-      icon = faCheck;
+      Icon = CheckIcon;
   }
 
   return (
     <Tooltip position="bottom" className="max-w-sm" content={tooltipContent}>
-      <div>
-        <Badge
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          variant={variant}
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
+      <Badge isSquare={mini} variant={variant}>
+        <Icon />
+        {!mini && label}
+      </Badge>
     </Tooltip>
   );
 };

frontend/src/components/pki-syncs/PkiSyncModalHeader.tsx

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { PkiSync } from "@app/hooks/api/pkiSyncs";
 
@@ -20,23 +18,11 @@ export const PkiSyncModalHeader = ({ destination, isConfigured }: Props) => {
         className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {destinationDetails.name} Certificate Sync
-          <a
-            target="_blank"
-            href={`https://infisical.com/docs/integrations/pki-syncs/${destination}`}
-            className="mb-1 ml-1"
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
+          <DocumentationLinkBadge
+            href={`https://infisical.com/docs/documentation/platform/pki/certificate-syncs/${destination}`}
+          />
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured

frontend/src/components/pki-syncs/PkiSyncRemoveStatusBadge.tsx

@@ -1,27 +1,20 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import {
-  faCheck,
-  faEraser,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { differenceInSeconds } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { AlertTriangleIcon, CheckIcon, EraserIcon, LucideIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Tooltip } from "@app/components/v2";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { PkiSyncStatus, TPkiSync } from "@app/hooks/api/pkiSyncs";
 
 type Props = {
   pkiSync: TPkiSync;
-  className?: string;
   mini?: boolean;
 };
 
-export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) => {
+export const PkiSyncRemoveStatusBadge = ({ pkiSync, mini }: Props) => {
   const { removeStatus, lastRemoveMessage, lastRemovedAt, destination } = pkiSync;
   const [hide, setHide] = useState(removeStatus === PkiSyncStatus.Succeeded);
   const destinationName = PKI_SYNC_MAP[destination].name;
@@ -50,24 +43,24 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) =>
 
   if (!removeStatus || hide) return null;
 
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let label: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
   let tooltipContent: ReactNode;
 
   switch (removeStatus) {
     case PkiSyncStatus.Pending:
     case PkiSyncStatus.Running:
-      variant = "primary";
+      variant = "warning";
       label = "Removing Certificates...";
       tooltipContent = `Removing certificates from ${destinationName}. This may take a moment.`;
-      icon = faEraser;
+      Icon = EraserIcon;
 
       break;
     case PkiSyncStatus.Failed:
       variant = "danger";
       label = "Failed to Remove Certificates";
-      icon = faTriangleExclamation;
+      Icon = AlertTriangleIcon;
       tooltipContent = (
         <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
@@ -93,20 +86,15 @@ export const PkiSyncRemoveStatusBadge = ({ pkiSync, className, mini }: Props) =>
       tooltipContent = "Successfully removed certificates.";
       variant = "success";
       label = "Certificates Removed";
-      icon = faCheck;
+      Icon = CheckIcon;
   }
 
   return (
     <Tooltip position="bottom" className="max-w-sm" content={tooltipContent}>
-      <div>
-        <Badge
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          variant={variant}
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
+      <Badge isSquare={mini} variant={variant}>
+        <Icon />
+        {!mini && label}
+      </Badge>
     </Tooltip>
   );
 };

frontend/src/components/pki-syncs/PkiSyncSelect.tsx

@@ -69,7 +69,10 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
               type="button"
               onClick={() =>
                 enterprise && !subscription.enterpriseCertificateSyncs
-                  ? handlePopUpOpen("upgradePlan")
+                  ? handlePopUpOpen("upgradePlan", {
+                      isEnterpriseFeature: true,
+                      text: "All Certificate Syncs can be unlocked if you switch to Infisical Enterprise plan."
+                    })
                   : onSelect(destination)
               }
               className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
@@ -148,7 +151,8 @@ export const PkiSyncSelect = ({ onSelect }: Props) => {
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can use every Certificate Sync if you switch to Infisical's Enterprise plan."
+        isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
+        text={popUp.upgradePlan.data?.text}
       />
     </div>
   );

frontend/src/components/pki-syncs/PkiSyncStatusBadge.tsx

@@ -1,55 +1,51 @@
 import {
-  faCheck,
-  faExclamationTriangle,
-  faHourglass,
-  faRotate,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+  AlertTriangleIcon,
+  CheckIcon,
+  HourglassIcon,
+  LucideIcon,
+  RefreshCwIcon
+} from "lucide-react";
 
-import { Badge, BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { PkiSyncStatus } from "@app/hooks/api/pkiSyncs";
 
 type Props = {
   status: PkiSyncStatus;
-} & Omit<BadgeProps, "children" | "variant">;
+} & Omit<TBadgeProps, "children" | "variant">;
 
 export const PkiSyncStatusBadge = ({ status }: Props) => {
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let text: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
 
   switch (status) {
     case PkiSyncStatus.Failed:
       variant = "danger";
       text = "Failed to Sync";
-      icon = faExclamationTriangle;
+      Icon = AlertTriangleIcon;
       break;
     case PkiSyncStatus.Succeeded:
       variant = "success";
       text = "Synced";
-      icon = faCheck;
+      Icon = CheckIcon;
       break;
     case PkiSyncStatus.Pending:
-      variant = "primary";
+      variant = "info";
       text = "Queued";
-      icon = faHourglass;
+      Icon = HourglassIcon;
       break;
     case PkiSyncStatus.Running:
     default:
-      variant = "primary";
+      variant = "info";
       text = "Syncing";
-      icon = faRotate;
+      Icon = RefreshCwIcon;
       break;
   }
 
   return (
-    <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap" variant={variant}>
-      <FontAwesomeIcon
-        icon={icon}
-        className={status === PkiSyncStatus.Running ? "animate-spin" : ""}
-      />
-      <span>{text}</span>
+    <Badge variant={variant}>
+      <Icon className={status === PkiSyncStatus.Running ? "animate-spin" : ""} />
+      {text}
     </Badge>
   );
 };

frontend/src/components/pki-syncs/PkiSyncTable.tsx

@@ -2,7 +2,6 @@ import { faPlug, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
-  Badge,
   EmptyState,
   IconButton,
   Table,
@@ -13,6 +12,7 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { TPkiSync } from "@app/hooks/api/pkiSyncs";
 
 type Props = {
@@ -29,10 +29,10 @@ const getSyncStatusBadge = (status?: string) => {
     case "FAILED":
       return <Badge variant="danger">Failed</Badge>;
     case "RUNNING":
-      return <Badge variant="primary">Running</Badge>;
+      return <Badge variant="warning">Running</Badge>;
     case "PENDING":
     default:
-      return <Badge variant="primary">Pending</Badge>;
+      return <Badge variant="warning">Pending</Badge>;
   }
 };
 
@@ -71,7 +71,7 @@ export const PkiSyncTable = ({ pkiSyncs, onEdit, onDelete, onTrigger }: Props) =
               <Td>{pkiSync.name}</Td>
               <Td>
                 <div className="flex items-center space-x-2">
-                  <Badge variant="primary">{pkiSync.destination}</Badge>
+                  <Badge variant="warning">{pkiSync.destination}</Badge>
                 </div>
               </Td>
               <Td>{pkiSync.appConnectionName || "Unknown"}</Td>

frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx

@@ -13,27 +13,28 @@ import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
 import { PkiSync, TPkiSync, useCreatePkiSync, usePkiSyncOption } from "@app/hooks/api/pkiSyncs";
 
 import { PkiSyncFormSchema, TPkiSyncForm } from "./schemas/pki-sync-schema";
+import { PkiSyncCertificatesFields } from "./PkiSyncCertificatesFields";
 import { PkiSyncDestinationFields } from "./PkiSyncDestinationFields";
 import { PkiSyncDetailsFields } from "./PkiSyncDetailsFields";
 import { PkiSyncOptionsFields } from "./PkiSyncOptionsFields";
 import { PkiSyncReviewFields } from "./PkiSyncReviewFields";
-import { PkiSyncSourceFields } from "./PkiSyncSourceFields";
 
 type Props = {
   onComplete: (pkiSync: TPkiSync) => void;
   destination: PkiSync;
   onCancel: () => void;
+  initialData?: any;
 };
 
 const FORM_TABS: { name: string; key: string; fields: (keyof TPkiSyncForm)[] }[] = [
-  { name: "Source", key: "source", fields: ["subscriberId"] },
   { name: "Destination", key: "destination", fields: ["connection", "destinationConfig"] },
   { name: "Sync Options", key: "options", fields: ["syncOptions"] },
   { name: "Details", key: "details", fields: ["name", "description"] },
+  { name: "Certificates", key: "certificates", fields: ["certificateIds"] },
   { name: "Review", key: "review", fields: [] }
 ];
 
-export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props) => {
+export const CreatePkiSyncForm = ({ destination, onComplete, onCancel, initialData }: Props) => {
   const createPkiSync = useCreatePkiSync();
   const { currentProject } = useProject();
   const { name: destinationName } = PKI_SYNC_MAP[destination];
@@ -49,34 +50,47 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
     defaultValues: {
       destination,
       isAutoSyncEnabled: false,
+      certificateIds: [],
       syncOptions: {
         canImportCertificates: false,
         canRemoveCertificates: false,
+        preserveArn: true,
         certificateNameSchema: syncOption?.defaultCertificateNameSchema
-      }
+      },
+      ...initialData
     } as Partial<TPkiSyncForm>,
     reValidateMode: "onChange"
   });
 
-  const onSubmit = async ({ connection, destinationConfig, ...formData }: TPkiSyncForm) => {
+  const onSubmit = async ({
+    connection,
+    destinationConfig,
+    certificateIds,
+    ...formData
+  }: TPkiSyncForm) => {
     try {
       const pkiSync = await createPkiSync.mutateAsync({
         ...formData,
         connectionId: connection.id,
         projectId: currentProject.id,
-        destinationConfig
+        destinationConfig,
+        certificateIds: certificateIds || []
       });
 
       createNotification({
-        text: `Successfully added ${destinationName} Certificate Sync`,
+        text: `Successfully created ${destinationName} Certificate Sync${
+          certificateIds && certificateIds.length > 0
+            ? ` with ${certificateIds.length} certificate(s)`
+            : ""
+        }`,
         type: "success"
       });
       onComplete(pkiSync);
     } catch (err: Error | unknown) {
-      console.error(err);
+      console.error("PKI sync creation failed:", err);
       setShowConfirmation(false);
       createNotification({
-        title: `Failed to add ${destinationName} Certificate Sync`,
+        title: `Failed to create ${destinationName} Certificate Sync`,
         text: err instanceof Error ? err.message : "An unknown error occurred",
         type: "error"
       });
@@ -184,9 +198,6 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
             ))}
           </Tab.List>
           <Tab.Panels>
-            <Tab.Panel>
-              <PkiSyncSourceFields />
-            </Tab.Panel>
             <Tab.Panel>
               <PkiSyncDestinationFields />
             </Tab.Panel>
@@ -200,8 +211,8 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
                     <FormControl
                       helperText={
                         value
-                          ? "Certificates will automatically be synced when changes occur in the source subscriber."
-                          : "Certificates will not automatically be synced when changes occur in the source subscriber. You can still trigger syncs manually."
+                          ? "Certificates will automatically be synced when changes occur in the selected certificates."
+                          : "Certificates will not automatically be synced when changes occur. You can still trigger syncs manually."
                       }
                       isError={Boolean(error)}
                       errorText={error?.message}
@@ -223,6 +234,9 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel }: Props)
             <Tab.Panel>
               <PkiSyncDetailsFields />
             </Tab.Panel>
+            <Tab.Panel>
+              <PkiSyncCertificatesFields />
+            </Tab.Panel>
             <Tab.Panel>
               <PkiSyncReviewFields />
             </Tab.Panel>

frontend/src/components/pki-syncs/forms/EditPkiSyncForm.tsx

@@ -27,12 +27,16 @@ export const EditPkiSyncForm = ({ pkiSync, fields, onComplete }: Props) => {
   const formMethods = useForm<TUpdatePkiSyncForm>({
     resolver: zodResolver(UpdatePkiSyncFormSchema),
     defaultValues: {
-      ...pkiSync,
+      name: pkiSync.name,
+      destination: pkiSync.destination,
       description: pkiSync.description ?? "",
       connection: {
         id: pkiSync.connectionId,
         name: pkiSync.appConnectionName
-      }
+      },
+      syncOptions: pkiSync.syncOptions,
+      destinationConfig: pkiSync.destinationConfig,
+      isAutoSyncEnabled: pkiSync.isAutoSyncEnabled
     } as Partial<TUpdatePkiSyncForm>,
     reValidateMode: "onChange"
   });

frontend/src/components/pki-syncs/forms/PkiSyncCertificatesFields.tsx

@@ -0,0 +1,189 @@
+import { useMemo, useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { faCertificate, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  EmptyState,
+  FormControl,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { useProject } from "@app/context";
+import { CertStatus } from "@app/hooks/api";
+import { useListWorkspaceCertificates } from "@app/hooks/api/projects";
+
+import { CertificateManagementModal } from "../CertificateManagementModal";
+import { TPkiSyncForm } from "./schemas/pki-sync-schema";
+
+export const PkiSyncCertificatesFields = () => {
+  const { control, watch, setValue } = useFormContext<TPkiSyncForm>();
+  const { currentProject } = useProject();
+  const [isSelectionModalOpen, setIsSelectionModalOpen] = useState(false);
+
+  const certificateIds = watch("certificateIds") || [];
+
+  const { data, isLoading } = useListWorkspaceCertificates({
+    projectId: currentProject?.id || "",
+    offset: 0,
+    limit: 100,
+    forPkiSync: true
+  });
+
+  const certificates = data?.certificates || [];
+
+  const activeCertificates = useMemo(
+    () => certificates.filter((cert) => cert.status === CertStatus.ACTIVE),
+    [certificates]
+  );
+
+  const selectedCertificates = useMemo(
+    () => activeCertificates.filter((cert) => certificateIds.includes(cert.id)),
+    [activeCertificates, certificateIds]
+  );
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <div className="text-sm text-bunker-300">Loading certificates...</div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <p className="mb-4 text-sm text-bunker-300">
+        Select certificates to sync with this integration. Only active certificates can be synced.
+        You can modify this selection after creating the sync.
+      </p>
+
+      <Controller
+        control={control}
+        name="certificateIds"
+        render={({ field: { value = [], onChange }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message}>
+            <div className="space-y-4">
+              <Button
+                variant="outline_bg"
+                leftIcon={<FontAwesomeIcon icon={faEdit} />}
+                onClick={() => setIsSelectionModalOpen(true)}
+              >
+                Add Certificates
+              </Button>
+              <div className="max-h-64 overflow-y-auto">
+                <TableContainer>
+                  <Table>
+                    <THead>
+                      <Tr>
+                        <Th className="w-1/3">SAN / CN</Th>
+                        <Th className="w-1/4">Serial Number</Th>
+                        <Th className="w-1/6">Issued At</Th>
+                        <Th className="w-1/6">Expires At</Th>
+                        <Th className="w-12">Remove</Th>
+                      </Tr>
+                    </THead>
+                    <TBody>
+                      {selectedCertificates.map((cert) => {
+                        let originalDisplayName = "—";
+                        if (cert.altNames && cert.altNames.trim()) {
+                          originalDisplayName = cert.altNames.trim();
+                        } else if (cert.commonName && cert.commonName.trim()) {
+                          originalDisplayName = cert.commonName.trim();
+                        }
+
+                        let displayName = originalDisplayName;
+                        let isTruncated = false;
+                        if (originalDisplayName.length > 34) {
+                          displayName = `${originalDisplayName.substring(0, 34)}...`;
+                          isTruncated = true;
+                        }
+
+                        const truncatedSerial =
+                          cert.serialNumber.length > 8
+                            ? `${cert.serialNumber.slice(0, 4)}...${cert.serialNumber.slice(-4)}`
+                            : cert.serialNumber;
+
+                        const isExpired = new Date(cert.notAfter) < new Date();
+
+                        return (
+                          <Tr key={cert.id}>
+                            <Td className="max-w-0">
+                              {isTruncated ? (
+                                <Tooltip content={originalDisplayName} className="max-w-lg">
+                                  <div className="truncate">{displayName}</div>
+                                </Tooltip>
+                              ) : (
+                                <div className="truncate">{displayName}</div>
+                              )}
+                            </Td>
+                            <Td className="max-w-0">
+                              <div
+                                className="font-mono text-xs text-bunker-300"
+                                title={cert.serialNumber}
+                              >
+                                {truncatedSerial}
+                              </div>
+                            </Td>
+                            <Td className="max-w-0">
+                              <span className="text-sm text-bunker-300">
+                                {new Date(cert.notBefore).toLocaleDateString()}
+                              </span>
+                            </Td>
+                            <Td className="max-w-0">
+                              <span
+                                className={`text-sm ${isExpired ? "text-red-400" : "text-bunker-300"}`}
+                              >
+                                {new Date(cert.notAfter).toLocaleDateString()}
+                              </span>
+                            </Td>
+                            <Td>
+                              <Button
+                                size="xs"
+                                variant="plain"
+                                colorSchema="secondary"
+                                className="pl-5"
+                                aria-label="Remove certificate"
+                                onClick={() => {
+                                  const newIds = value.filter((id: string) => id !== cert.id);
+                                  onChange(newIds);
+                                }}
+                              >
+                                <FontAwesomeIcon icon={faTrash} />
+                              </Button>
+                            </Td>
+                          </Tr>
+                        );
+                      })}
+                    </TBody>
+                  </Table>
+                  {selectedCertificates.length === 0 && (
+                    <EmptyState title="No certificates selected" icon={faCertificate} />
+                  )}
+                </TableContainer>
+              </div>
+            </div>
+          </FormControl>
+        )}
+      />
+
+      <CertificateManagementModal
+        isOpen={isSelectionModalOpen}
+        onClose={() => setIsSelectionModalOpen(false)}
+        selectedCertificateIds={certificateIds}
+        onCertificateSelectionChange={(newCertificateIds) => {
+          setValue("certificateIds", newCertificateIds);
+        }}
+        title="Select Certificates for Sync"
+        subtitle="Choose which certificates you want to include in this sync. You can modify this selection after creating the sync."
+        saveButtonText="Update Selection"
+      />
+    </>
+  );
+};

frontend/src/components/pki-syncs/forms/PkiSyncConnectionField.tsx

@@ -1,14 +1,18 @@
 import { Controller, useFormContext } from "react-hook-form";
+import { SingleValue } from "react-select";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link } from "@tanstack/react-router";
+import { useRouterState } from "@tanstack/react-router";
 
+import { AppConnectionOption } from "@app/components/app-connections";
 import { FilterableSelect, FormControl } from "@app/components/v2";
 import { ProjectPermissionSub, useProject, useProjectPermission } from "@app/context";
 import { ProjectPermissionAppConnectionActions } from "@app/context/ProjectPermissionContext/types";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
 import { PKI_SYNC_CONNECTION_MAP } from "@app/helpers/pkiSyncs";
+import { usePopUp } from "@app/hooks";
 import { useListAvailableAppConnections } from "@app/hooks/api/appConnections";
+import { AddAppConnectionModal } from "@app/pages/organization/AppConnections/AppConnectionsPage/components";
 
 import { TPkiSyncForm } from "./schemas/pki-sync-schema";
 
@@ -18,12 +22,30 @@ type Props = {
 
 export const PkiSyncConnectionField = ({ onChange: callback }: Props) => {
   const { permission } = useProjectPermission();
-  const { control, watch } = useFormContext<TPkiSyncForm>();
-  const { currentProject } = useProject();
+  const { control, watch, setValue } = useFormContext<TPkiSyncForm>();
+
+  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["addConnection"] as const);
 
   const destination = watch("destination");
   const app = PKI_SYNC_CONNECTION_MAP[destination];
 
+  const { currentProject } = useProject();
+
+  const {
+    location: { pathname }
+  } = useRouterState();
+
+  const getPkiSyncReturnUrl = () => {
+    if (pathname.includes("selectedTab=secret-syncs")) {
+      return pathname.replace("selectedTab=secret-syncs", "selectedTab=pki-syncs");
+    }
+    if (!pathname.includes("selectedTab=")) {
+      const separator = pathname.includes("?") ? "&" : "?";
+      return `${pathname}${separator}selectedTab=pki-syncs`;
+    }
+    return pathname;
+  };
+
   const { data: availableConnections, isPending } = useListAvailableAppConnections(
     app,
     currentProject.id
@@ -47,6 +69,7 @@ export const PkiSyncConnectionField = ({ onChange: callback }: Props) => {
       <Controller
         render={({ field: { value, onChange }, fieldState: { error } }) => (
           <FormControl
+            tooltipText="App Connections can be created from the Project Settings page."
             isError={Boolean(error)}
             errorText={error?.message}
             label={`${connectionName} Connection`}
@@ -54,36 +77,54 @@ export const PkiSyncConnectionField = ({ onChange: callback }: Props) => {
             <FilterableSelect
               value={value}
               onChange={(newValue) => {
+                if ((newValue as SingleValue<{ id: string; name: string }>)?.id === "_create") {
+                  handlePopUpOpen("addConnection");
+                  onChange(null);
+                  const formData = { ...watch(), returnUrl: getPkiSyncReturnUrl() };
+                  localStorage.setItem("pkiSyncFormData", JSON.stringify(formData));
+                  if (callback) callback();
+                  return;
+                }
+
                 onChange(newValue);
                 if (callback) callback();
               }}
               isLoading={isPending}
-              options={availableConnections}
+              options={[
+                ...(canCreateConnection ? [{ id: "_create", name: "Create Connection" }] : []),
+                ...(availableConnections ?? [])
+              ]}
               placeholder="Select connection..."
               getOptionLabel={(option) => option.name}
               getOptionValue={(option) => option.id}
+              components={{ Option: AppConnectionOption }}
             />
           </FormControl>
         )}
         control={control}
         name="connection"
       />
-      {availableConnections?.length === 0 && (
+      {!isPending && !availableConnections?.length && !canCreateConnection && (
         <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
           <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
-          {canCreateConnection ? (
-            <>
-              You do not have access to any {appName} Connections. Create one from the{" "}
-              <Link to="/organization/app-connections" className="underline">
-                App Connections
-              </Link>{" "}
-              page.
-            </>
-          ) : (
-            `You do not have access to any ${appName} Connections. Contact an admin to create one.`
-          )}
+          You do not have access to any {appName} Connections. Contact an admin to create one.
         </p>
       )}
+      <AddAppConnectionModal
+        isOpen={popUp.addConnection.isOpen}
+        onOpenChange={(isOpen) => {
+          localStorage.removeItem("pkiSyncFormData");
+          handlePopUpToggle("addConnection", isOpen);
+        }}
+        projectType={currentProject.type}
+        projectId={currentProject.id}
+        app={app}
+        onComplete={(connection) => {
+          if (connection) {
+            setValue("connection", connection);
+          }
+        }}
+      />
     </>
   );
 };

frontend/src/components/pki-syncs/forms/PkiSyncOptionsFields/PkiSyncOptionsFields.tsx

@@ -71,14 +71,14 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
               isChecked={value}
             >
               <p>
-                Enable Certificate Removal{" "}
+                Enable Removal of Expired/Revoked Certificates{" "}
                 <Tooltip
                   className="max-w-md"
                   content={
                     <>
                       <p>
                         When enabled, Infisical will remove certificates from the destination during
-                        a sync if they are no longer managed by Infisical.
+                        a sync if they are no longer active in Infisical.
                       </p>
                       <p className="mt-4">
                         Disable this option if you intend to manage some certificates manually
@@ -95,6 +95,94 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
         )}
       />
 
+      {currentDestination === PkiSync.AwsCertificateManager && (
+        <Controller
+          control={control}
+          name="syncOptions.preserveArn"
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Switch
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                id="preserve-arn"
+                thumbClassName="bg-mineshaft-800"
+                onCheckedChange={onChange}
+                isChecked={value}
+              >
+                <p>
+                  Preserve ARN on Renewal{" "}
+                  <Tooltip
+                    className="max-w-md"
+                    content={
+                      <>
+                        <p>
+                          When enabled, Infisical will replace the contents of existing certificates
+                          while preserving the same ARN during certificate renewal syncs.
+                        </p>
+                        <p className="mt-4">
+                          This allows consuming services like load balancers to continue using the
+                          same ARN without requiring manual updates.
+                        </p>
+                        <p className="mt-4">
+                          When disabled, new certificates will be created with new ARNs, and old
+                          certificates will be removed.
+                        </p>
+                      </>
+                    }
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                  </Tooltip>
+                </p>
+              </Switch>
+            </FormControl>
+          )}
+        />
+      )}
+
+      {currentDestination === PkiSync.AzureKeyVault && (
+        <Controller
+          control={control}
+          name="syncOptions.enableVersioning"
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Switch
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                id="preserve-version"
+                thumbClassName="bg-mineshaft-800"
+                onCheckedChange={onChange}
+                isChecked={value}
+              >
+                <p>
+                  Enable Versioning on Renewal{" "}
+                  <Tooltip
+                    className="max-w-md"
+                    content={
+                      <>
+                        <p>
+                          When enabled, Infisical will create a new version of the existing
+                          certificate in Azure Key Vault during certificate renewal syncs,
+                          preserving the original certificate name.
+                        </p>
+                        <p className="mt-4">
+                          This allows consuming services to continue using the same certificate name
+                          while automatically using the latest version without requiring manual
+                          updates.
+                        </p>
+                        <p className="mt-4">
+                          When disabled, new certificates will be created with new names, and old
+                          certificates will be removed.
+                        </p>
+                      </>
+                    }
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                  </Tooltip>
+                </p>
+              </Switch>
+            </FormControl>
+          )}
+        />
+      )}
+
       <Controller
         control={control}
         name="syncOptions.certificateNameSchema"

frontend/src/components/pki-syncs/forms/PkiSyncReviewFields.tsx

@@ -1,9 +1,20 @@
 import { useFormContext } from "react-hook-form";
 
-import { Badge, GenericFieldLabel } from "@app/components/v2";
+import {
+  GenericFieldLabel,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useProject } from "@app/context";
 import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
-import { useListWorkspacePkiSubscribers } from "@app/hooks/api";
+import { useListWorkspaceCertificates } from "@app/hooks/api/projects";
 
 import { TPkiSyncForm } from "./schemas/pki-sync-schema";
 
@@ -11,18 +22,24 @@ export const PkiSyncReviewFields = () => {
   const { watch } = useFormContext<TPkiSyncForm>();
   const { currentProject } = useProject();
 
-  const { data: pkiSubscribers = [] } = useListWorkspacePkiSubscribers(currentProject?.id || "");
+  const { data } = useListWorkspaceCertificates({
+    projectId: currentProject?.id || "",
+    offset: 0,
+    limit: 100
+  });
 
-  const getSubscriberName = (subscriberId?: string) => {
-    const subscriber = pkiSubscribers.find((sub) => sub.id === subscriberId);
-    return subscriber?.name || "Unknown";
+  const certificates = data?.certificates || [];
+
+  const getSelectedCertificates = (certificateIds?: string[]) => {
+    if (!certificateIds || certificateIds.length === 0) return [];
+    return certificates.filter((cert) => certificateIds.includes(cert.id));
   };
 
   const {
     name,
     description,
     connection,
-    subscriberId,
+    certificateIds,
     syncOptions,
     destination,
     destinationConfig,
@@ -30,17 +47,79 @@ export const PkiSyncReviewFields = () => {
   } = watch();
 
   const destinationName = PKI_SYNC_MAP[destination].name;
+  const selectedCertificates = getSelectedCertificates(certificateIds);
 
   return (
     <div className="mb-4 flex flex-col gap-6">
       <div className="flex flex-col gap-3">
         <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Source</span>
+          <span className="text-sm text-mineshaft-300">Certificates</span>
         </div>
-        <div className="flex flex-wrap gap-x-8 gap-y-2">
-          <GenericFieldLabel label="PKI Subscriber">
-            {getSubscriberName(subscriberId)}
-          </GenericFieldLabel>
+        <div className="w-full">
+          {selectedCertificates.length === 0 ? (
+            <span className="text-bunker-400">No certificates selected</span>
+          ) : (
+            <TableContainer>
+              <Table>
+                <THead>
+                  <Tr>
+                    <Th className="w-1/2">SAN / CN</Th>
+                    <Th className="w-1/4">Serial Number</Th>
+                    <Th className="w-1/4">Expires At</Th>
+                  </Tr>
+                </THead>
+                <TBody>
+                  {selectedCertificates.map((cert) => {
+                    let originalDisplayName = "—";
+                    if (cert.altNames && cert.altNames.trim()) {
+                      originalDisplayName = cert.altNames.trim();
+                    } else if (cert.commonName && cert.commonName.trim()) {
+                      originalDisplayName = cert.commonName.trim();
+                    }
+
+                    let displayName = originalDisplayName;
+                    let isTruncated = false;
+                    if (originalDisplayName.length > 34) {
+                      displayName = `${originalDisplayName.substring(0, 34)}...`;
+                      isTruncated = true;
+                    }
+
+                    const truncatedSerial =
+                      cert.serialNumber.length > 8
+                        ? `${cert.serialNumber.slice(0, 4)}...${cert.serialNumber.slice(-4)}`
+                        : cert.serialNumber;
+
+                    return (
+                      <Tr key={cert.id}>
+                        <Td className="max-w-0">
+                          {isTruncated ? (
+                            <Tooltip content={originalDisplayName} className="max-w-lg">
+                              <div className="truncate">{displayName}</div>
+                            </Tooltip>
+                          ) : (
+                            <div className="truncate">{displayName}</div>
+                          )}
+                        </Td>
+                        <Td className="max-w-0">
+                          <div
+                            className="font-mono text-xs text-bunker-300"
+                            title={cert.serialNumber}
+                          >
+                            {truncatedSerial}
+                          </div>
+                        </Td>
+                        <Td className="max-w-0">
+                          <span className="text-sm text-bunker-300">
+                            {new Date(cert.notAfter).toLocaleDateString()}
+                          </span>
+                        </Td>
+                      </Tr>
+                    );
+                  })}
+                </TBody>
+              </Table>
+            </TableContainer>
+          )}
         </div>
       </div>
       <div className="flex flex-col gap-3">
@@ -61,11 +140,13 @@ export const PkiSyncReviewFields = () => {
         <div className="w-full border-b border-mineshaft-600">
           <span className="text-sm text-mineshaft-300">Sync Options</span>
         </div>
-        <div className="flex flex-wrap gap-x-8 gap-y-2">
+        <div className="flex flex-wrap gap-x-8 gap-y-3">
           <GenericFieldLabel label="Auto-Sync">
-            <Badge variant={isAutoSyncEnabled ? "success" : "danger"}>
-              {isAutoSyncEnabled ? "Enabled" : "Disabled"}
-            </Badge>
+            <div className="mt-1">
+              <Badge variant={isAutoSyncEnabled ? "success" : "danger"}>
+                {isAutoSyncEnabled ? "Enabled" : "Disabled"}
+              </Badge>
+            </div>
           </GenericFieldLabel>
           {/* Hidden for now - Import certificates functionality disabled
           {syncOptions?.canImportCertificates !== undefined && (
@@ -78,9 +159,11 @@ export const PkiSyncReviewFields = () => {
           */}
           {syncOptions?.canRemoveCertificates !== undefined && (
             <GenericFieldLabel label="Remove Certificates">
-              <Badge variant={syncOptions.canRemoveCertificates ? "success" : "danger"}>
-                {syncOptions.canRemoveCertificates ? "Enabled" : "Disabled"}
-              </Badge>
+              <div className="mt-1">
+                <Badge variant={syncOptions.canRemoveCertificates ? "success" : "danger"}>
+                  {syncOptions.canRemoveCertificates ? "Enabled" : "Disabled"}
+                </Badge>
+              </div>
             </GenericFieldLabel>
           )}
         </div>

frontend/src/components/pki-syncs/forms/schemas/aws-certificate-manager-pki-sync-destination-schema.ts

@@ -7,6 +7,7 @@ import { BasePkiSyncSchema } from "./base-pki-sync-schema";
 const AwsCertificateManagerSyncOptionsSchema = z.object({
   canImportCertificates: z.boolean().default(false),
   canRemoveCertificates: z.boolean().default(false),
+  preserveArn: z.boolean().default(true),
   certificateNameSchema: z
     .string()
     .optional()

frontend/src/components/pki-syncs/forms/schemas/azure-key-vault-pki-sync-destination-schema.ts

@@ -4,7 +4,46 @@ import { PkiSync } from "@app/hooks/api/pkiSyncs";
 
 import { BasePkiSyncSchema } from "./base-pki-sync-schema";
 
-export const AzureKeyVaultPkiSyncDestinationSchema = BasePkiSyncSchema().merge(
+const AzureKeyVaultSyncOptionsSchema = z.object({
+  canImportCertificates: z.boolean().default(false),
+  canRemoveCertificates: z.boolean().default(true),
+  enableVersioning: z.boolean().default(true),
+  certificateNameSchema: z
+    .string()
+    .optional()
+    .refine(
+      (val) => {
+        if (!val) return true;
+
+        const allowedOptionalPlaceholders = ["{{environment}}"];
+
+        const allowedPlaceholdersRegexPart = ["{{certificateId}}", ...allowedOptionalPlaceholders]
+          .map((p) => p.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"))
+          .join("|");
+
+        const allowedContentRegex = new RegExp(
+          `^([a-zA-Z0-9_\\-/]|${allowedPlaceholdersRegexPart})*$`
+        );
+        const contentIsValid = allowedContentRegex.test(val);
+
+        if (val.trim()) {
+          const certificateIdRegex = /\{\{certificateId\}\}/;
+          const certificateIdIsPresent = certificateIdRegex.test(val);
+          return contentIsValid && certificateIdIsPresent;
+        }
+
+        return contentIsValid;
+      },
+      {
+        message:
+          "Certificate name schema must include exactly one {{certificateId}} placeholder. It can also include {{environment}} placeholders. Only alphanumeric characters (a-z, A-Z, 0-9), dashes (-), underscores (_), and slashes (/) are allowed besides the placeholders."
+      }
+    )
+});
+
+export const AzureKeyVaultPkiSyncDestinationSchema = BasePkiSyncSchema(
+  AzureKeyVaultSyncOptionsSchema
+).merge(
   z.object({
     destination: z.literal(PkiSync.AzureKeyVault),
     destinationConfig: z.object({

frontend/src/components/pki-syncs/forms/schemas/base-pki-sync-schema.ts

@@ -53,7 +53,8 @@ export const BasePkiSyncSchema = <T extends AnyZodObject | undefined = undefined
       .max(255, "Name must be less than 255 characters"),
     description: z.string().optional(),
     isAutoSyncEnabled: z.boolean().default(true),
-    subscriberId: z.string().min(1, "PKI Subscriber is required"),
+    subscriberId: z.string().nullable().optional(),
+    certificateIds: z.array(z.string()).optional(),
     connection: z.object({
       id: z.string().uuid("Invalid connection ID format"),
       name: z.string().max(255, "Connection name must be less than 255 characters")

frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx

@@ -1,6 +1,4 @@
 import { useEffect, useState } from "react";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 
 import { SecretRotationV2Form } from "@app/components/secret-rotations-v2/forms";
@@ -8,6 +6,7 @@ import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms
 import { SecretRotationV2ModalHeader } from "@app/components/secret-rotations-v2/SecretRotationV2ModalHeader";
 import { SecretRotationV2Select } from "@app/components/secret-rotations-v2/SecretRotationV2Select";
 import { Modal, ModalContent } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { ProjectEnv } from "@app/hooks/api/projects/types";
 import { SecretRotation, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
 
@@ -115,23 +114,9 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
           selectedRotation ? (
             <SecretRotationV2ModalHeader isConfigured={false} type={selectedRotation} />
           ) : (
-            <div className="flex items-center text-mineshaft-300">
+            <div className="flex items-center gap-x-2 text-mineshaft-300">
               Add Secret Rotation
-              <a
-                target="_blank"
-                href="https://infisical.com/docs/documentation/platform/secret-rotation/overview"
-                className="mb-1 ml-1"
-                rel="noopener noreferrer"
-              >
-                <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1 text-[10px]"
-                  />
-                </div>
-              </a>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/secret-rotation/overview" />
             </div>
           )
         }

frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 
@@ -20,23 +18,11 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
         className="h-12 w-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {destinationDetails.name} Rotation
-          <a
-            target="_blank"
+          <DocumentationLinkBadge
             href={`https://infisical.com/docs/documentation/platform/secret-rotation/${type}`}
-            className="mb-1 ml-1"
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
+          />
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured

frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx

@@ -1,18 +1,17 @@
-import { faBan, faRotate, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format, formatDistanceToNow } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { BanIcon, RefreshCwIcon, XIcon } from "lucide-react";
 
 import { Tooltip } from "@app/components/v2";
-import { Badge } from "@app/components/v2/Badge/Badge";
+import { Badge } from "@app/components/v3";
 import { SecretRotationStatus, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
 
 type Props = {
   secretRotation: TSecretRotationV2;
-  className?: string;
 };
 
-export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props) => {
+export const SecretRotationV2StatusBadge = ({ secretRotation }: Props) => {
   const { isAutoRotationEnabled, rotationStatus, nextRotationAt, lastRotationMessage } =
     secretRotation;
 
@@ -50,28 +49,18 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
           </div>
         }
       >
-        <div>
-          <Badge
-            variant="danger"
-            className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          >
-            <FontAwesomeIcon icon={faXmark} />
-            Rotation Failed
-          </Badge>
-        </div>
+        <Badge variant="danger">
+          <XIcon />
+          Rotation Failed
+        </Badge>
       </Tooltip>
     );
   }
 
   if (!isAutoRotationEnabled) {
     return (
-      <Badge
-        className={twMerge(
-          "flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300",
-          className
-        )}
-      >
-        <FontAwesomeIcon icon={faBan} />
+      <Badge variant="neutral">
+        <BanIcon />
         Auto-Rotation Disabled
       </Badge>
     );
@@ -92,20 +81,12 @@ export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props
         </>
       }
     >
-      <div>
-        <Badge
-          variant={daysToRotation >= 7 ? "success" : "primary"}
-          className={twMerge(
-            "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
-            className
-          )}
-        >
-          <FontAwesomeIcon icon={faRotate} />
-          {daysToRotation < 0
-            ? "Rotating"
-            : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`}
-        </Badge>
-      </div>
+      <Badge variant={daysToRotation >= 7 ? "info" : "warning"} className="capitalize">
+        <RefreshCwIcon />
+        {daysToRotation < 0
+          ? "Rotating"
+          : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`}
+      </Badge>
     </Tooltip>
   );
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx

@@ -1,8 +1,10 @@
 import { ReactNode } from "react";
-import { faArrowRight, faKey } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { KeyIcon } from "lucide-react";
 
-import { Badge, FormLabel } from "@app/components/v2";
+import { FormLabel } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 
 type Props = {
   items: { name: string; input: ReactNode }[];
@@ -32,9 +34,10 @@ export const SecretsMappingTable = ({ items }: Props) => {
             <tr key={name}>
               <td className="whitespace-nowrap">
                 <div className="mb-4 flex h-full items-start justify-center">
-                  <Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 border border-mineshaft-600 bg-mineshaft-600 whitespace-nowrap text-bunker-200">
-                    <FontAwesomeIcon icon={faKey} />
-                    <span>{name}</span>
+                  {/* TODO(scott): probably shouldn't be a badge */}
+                  <Badge variant="neutral" className="h-[36px] w-full justify-center text-xs">
+                    <KeyIcon />
+                    {name}
                   </Badge>
                 </div>
               </td>

frontend/src/components/secret-scanning/CreateSecretScanningDataSourceModal.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 
 import { TSecretScanningDataSourceForm } from "@app/components/secret-scanning/forms/schemas";
 import { Modal, ModalContent } from "@app/components/v2";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   SecretScanningDataSource,
   TSecretScanningDataSource
@@ -108,23 +107,9 @@ export const CreateSecretScanningDataSourceModal = ({ onOpenChange, isOpen, ...p
           selectedDataSource ? (
             <SecretScanningDataSourceModalHeader isConfigured={false} type={selectedDataSource} />
           ) : (
-            <div className="flex items-center text-mineshaft-300">
+            <div className="flex items-center gap-x-2 text-mineshaft-300">
               Add Data Source
-              <a
-                target="_blank"
-                href="https://infisical.com/docs/documentation/platform/secret-scanning/overview"
-                className="mb-1 ml-1"
-                rel="noopener noreferrer"
-              >
-                <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1 text-[10px]"
-                  />
-                </div>
-              </a>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/secret-scanning/overview" />
             </div>
           )
         }

frontend/src/components/secret-scanning/SecretScanningDataSourceModalHeader.tsx

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { SECRET_SCANNING_DATA_SOURCE_MAP } from "@app/helpers/secretScanningV2";
 import { SecretScanningDataSource } from "@app/hooks/api/secretScanningV2";
 
@@ -20,23 +18,11 @@ export const SecretScanningDataSourceModalHeader = ({ type, isConfigured }: Prop
         className="h-12 rounded-md bg-bunker-500 p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {dataSourceDetails.name} Data Source
-          <a
-            target="_blank"
+          <DocumentationLinkBadge
             href={`https://infisical.com/docs/documentation/platform/secret-scanning/${type}`}
-            className="mb-1 ml-1"
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
+          />
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured ? "Edit" : "Connect a"} {dataSourceDetails.name} Data Source

frontend/src/components/secret-scanning/SecretScanningScanStatus.tsx

@@ -1,22 +1,23 @@
-import { faArrowRotateForward, faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatDistance } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { CheckIcon, RotateCwIcon, XIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
+import { Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { SecretScanningScanStatus } from "@app/hooks/api/secretScanningV2";
 
 type Props = {
   status: SecretScanningScanStatus;
   statusMessage?: string | null;
-  className?: string;
+
   scannedAt?: string | null;
 };
 
 export const SecretScanningScanStatusBadge = ({
   status,
   statusMessage,
-  className,
+
   scannedAt
 }: Props) => {
   if (status === SecretScanningScanStatus.Failed) {
@@ -53,11 +54,8 @@ export const SecretScanningScanStatusBadge = ({
         }
       >
         <div>
-          <Badge
-            variant="danger"
-            className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          >
-            <FontAwesomeIcon icon={faXmark} />
+          <Badge variant="danger">
+            <XIcon />
             Scan Error
           </Badge>
         </div>
@@ -67,26 +65,17 @@ export const SecretScanningScanStatusBadge = ({
 
   if (status === SecretScanningScanStatus.Queued || status === SecretScanningScanStatus.Scanning) {
     return (
-      <Badge
-        className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-        variant="primary"
-      >
-        <FontAwesomeIcon icon={faArrowRotateForward} className="animate-spin" />
-        <span>Scanning</span>
+      <Badge variant="info">
+        <RotateCwIcon className="animate-spin" />
+        Scanning
       </Badge>
     );
   }
 
   return (
-    <Badge
-      variant="success"
-      className={twMerge(
-        "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
-        className
-      )}
-    >
-      <FontAwesomeIcon icon={faCheck} />
-      <span>Complete</span>
+    <Badge variant="success">
+      <CheckIcon />
+      Complete
     </Badge>
   );
 };

frontend/src/components/secret-syncs/SecretSyncImportStatusBadge.tsx

@@ -1,27 +1,20 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import {
-  faCheck,
-  faDownload,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { differenceInSeconds } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { AlertTriangleIcon, CheckIcon, DownloadIcon, LucideIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Tooltip } from "@app/components/v2";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs";
 
 type Props = {
   secretSync: TSecretSync;
-  className?: string;
   mini?: boolean;
 };
 
-export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Props) => {
+export const SecretSyncImportStatusBadge = ({ secretSync, mini }: Props) => {
   const { importStatus, lastImportMessage, lastImportedAt, destination } = secretSync;
   const [hide, setHide] = useState(importStatus === SecretSyncStatus.Succeeded);
   const destinationName = SECRET_SYNC_MAP[destination].name;
@@ -50,24 +43,24 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro
 
   if (!importStatus || hide) return null;
 
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let label: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
   let tooltipContent: ReactNode;
 
   switch (importStatus) {
     case SecretSyncStatus.Pending:
     case SecretSyncStatus.Running:
-      variant = "primary";
+      variant = "warning";
       label = "Importing Secrets...";
       tooltipContent = `Importing secrets from ${destinationName}. This may take a moment.`;
-      icon = faDownload;
+      Icon = DownloadIcon;
 
       break;
     case SecretSyncStatus.Failed:
       variant = "danger";
       label = "Failed to Import Secrets";
-      icon = faTriangleExclamation;
+      Icon = AlertTriangleIcon;
       tooltipContent = (
         <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
@@ -93,20 +86,15 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro
       tooltipContent = "Successfully imported secrets.";
       variant = "success";
       label = "Secrets Imported";
-      icon = faCheck;
+      Icon = CheckIcon;
   }
 
   return (
     <Tooltip position="bottom" className="max-w-sm" content={tooltipContent}>
-      <div>
-        <Badge
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          variant={variant}
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
+      <Badge isSquare={mini} variant={variant}>
+        <Icon />
+        {!mini && label}
+      </Badge>
     </Tooltip>
   );
 };

frontend/src/components/secret-syncs/SecretSyncModalHeader.tsx

@@ -1,6 +1,4 @@
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
+import { DocumentationLinkBadge } from "@app/components/v3";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -20,23 +18,11 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
         className="h-12 w-12 rounded-md bg-bunker-500 object-contain p-2"
       />
       <div>
-        <div className="flex items-center text-mineshaft-300">
+        <div className="flex items-center gap-x-2 text-mineshaft-300">
           {destinationDetails.name} Sync
-          <a
-            target="_blank"
+          <DocumentationLinkBadge
             href={`https://infisical.com/docs/integrations/secret-syncs/${destination}`}
-            className="mb-1 ml-1"
-            rel="noopener noreferrer"
-          >
-            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-              <FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
-              <span>Docs</span>
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.07rem] ml-1 text-[10px]"
-              />
-            </div>
-          </a>
+          />
         </div>
         <p className="text-sm leading-4 text-mineshaft-400">
           {isConfigured

frontend/src/components/secret-syncs/SecretSyncRemoveStatusBadge.tsx

@@ -1,27 +1,20 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import {
-  faCheck,
-  faEraser,
-  faTriangleExclamation,
-  faXmark,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { differenceInSeconds } from "date-fns";
-import { twMerge } from "tailwind-merge";
+import { AlertTriangleIcon, CheckIcon, EraserIcon, LucideIcon } from "lucide-react";
 
-import { Badge, Tooltip } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Tooltip } from "@app/components/v2";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs";
 
 type Props = {
   secretSync: TSecretSync;
-  className?: string;
   mini?: boolean;
 };
 
-export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Props) => {
+export const SecretSyncRemoveStatusBadge = ({ secretSync, mini }: Props) => {
   const { removeStatus, lastRemoveMessage, lastRemovedAt, destination } = secretSync;
   const [hide, setHide] = useState(removeStatus === SecretSyncStatus.Succeeded);
   const destinationName = SECRET_SYNC_MAP[destination].name;
@@ -50,24 +43,24 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro
 
   if (!removeStatus || hide) return null;
 
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let label: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
   let tooltipContent: ReactNode;
 
   switch (removeStatus) {
     case SecretSyncStatus.Pending:
     case SecretSyncStatus.Running:
-      variant = "primary";
+      variant = "warning";
       label = "Removing Secrets...";
       tooltipContent = `Removing secrets from ${destinationName}. This may take a moment.`;
-      icon = faEraser;
+      Icon = EraserIcon;
 
       break;
     case SecretSyncStatus.Failed:
       variant = "danger";
       label = "Failed to Remove Secrets";
-      icon = faTriangleExclamation;
+      Icon = AlertTriangleIcon;
       tooltipContent = (
         <div className="flex flex-col gap-2 py-1 whitespace-normal">
           {failureMessage && (
@@ -93,20 +86,15 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro
       tooltipContent = "Successfully removed secrets.";
       variant = "success";
       label = "Secrets Removed";
-      icon = faCheck;
+      Icon = CheckIcon;
   }
 
   return (
     <Tooltip position="bottom" className="max-w-sm" content={tooltipContent}>
-      <div>
-        <Badge
-          className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
-          variant={variant}
-        >
-          <FontAwesomeIcon icon={icon} />
-          {!mini && <span>{label}</span>}
-        </Badge>
-      </div>
+      <Badge isSquare={mini} variant={variant}>
+        <Icon />
+        {!mini && label}
+      </Badge>
     </Tooltip>
   );
 };

frontend/src/components/secret-syncs/SecretSyncSelect.tsx

@@ -67,7 +67,10 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
               type="button"
               onClick={() =>
                 enterprise && !subscription.enterpriseSecretSyncs
-                  ? handlePopUpOpen("upgradePlan")
+                  ? handlePopUpOpen("upgradePlan", {
+                      isEnterpriseFeature: true,
+                      text: "All Secret Syncs can be unlocked if you switch to Infisical Enterprise plan."
+                    })
                   : onSelect(destination)
               }
               className="group relative flex h-28 cursor-pointer flex-col items-center justify-center overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
@@ -145,8 +148,9 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
       )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
+        isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can use every Secret Sync if you switch to Infisical's Enterprise plan."
+        text={popUp.upgradePlan.data?.text}
       />
     </div>
   );

frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx

@@ -1,55 +1,51 @@
 import {
-  faCheck,
-  faExclamationTriangle,
-  faHourglass,
-  faRotate,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+  AlertTriangleIcon,
+  CheckIcon,
+  HourglassIcon,
+  LucideIcon,
+  RefreshCwIcon
+} from "lucide-react";
 
-import { Badge, BadgeProps } from "@app/components/v2/Badge/Badge";
+import { Badge, TBadgeProps } from "@app/components/v3";
 import { SecretSyncStatus } from "@app/hooks/api/secretSyncs";
 
 type Props = {
   status: SecretSyncStatus;
-} & Omit<BadgeProps, "children" | "variant">;
+} & Omit<TBadgeProps, "children" | "variant">;
 
 export const SecretSyncStatusBadge = ({ status }: Props) => {
-  let variant: BadgeProps["variant"];
+  let variant: TBadgeProps["variant"];
   let text: string;
-  let icon: IconDefinition;
+  let Icon: LucideIcon;
 
   switch (status) {
     case SecretSyncStatus.Failed:
       variant = "danger";
       text = "Failed to Sync";
-      icon = faExclamationTriangle;
+      Icon = AlertTriangleIcon;
       break;
     case SecretSyncStatus.Succeeded:
       variant = "success";
       text = "Synced";
-      icon = faCheck;
+      Icon = CheckIcon;
       break;
     case SecretSyncStatus.Pending:
-      variant = "primary";
+      variant = "info";
       text = "Queued";
-      icon = faHourglass;
+      Icon = HourglassIcon;
       break;
     case SecretSyncStatus.Running:
     default:
-      variant = "primary";
+      variant = "info";
       text = "Syncing";
-      icon = faRotate;
+      Icon = RefreshCwIcon;
       break;
   }
 
   return (
-    <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap" variant={variant}>
-      <FontAwesomeIcon
-        icon={icon}
-        className={[SecretSyncStatus.Running].includes(status) ? "animate-spin" : ""}
-      />
-      <span>{text}</span>
+    <Badge variant={variant}>
+      <Icon className={[SecretSyncStatus.Running].includes(status) ? "animate-spin" : ""} />
+      {text}
     </Badge>
   );
 };

frontend/src/components/secret-syncs/forms/CreateSecretSyncForm.tsx

@@ -8,13 +8,14 @@ import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Switch } from "@app/components/v2";
-import { useProject } from "@app/context";
+import { useOrganization, useProject } from "@app/context";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import {
   SecretSync,
   SecretSyncInitialSyncBehavior,
   TSecretSync,
   useCreateSecretSync,
+  useDuplicateDestinationCheck,
   useSecretSyncOption
 } from "@app/hooks/api/secretSyncs";
 
@@ -48,6 +49,7 @@ export const CreateSecretSyncForm = ({
 }: Props) => {
   const createSecretSync = useCreateSecretSync();
   const { currentProject } = useProject();
+  const { currentOrg } = useOrganization();
   const { name: destinationName } = SECRET_SYNC_MAP[destination];
 
   const [showConfirmation, setShowConfirmation] = useState(false);
@@ -106,11 +108,20 @@ export const CreateSecretSyncForm = ({
     setSelectedTabIndex((prev) => prev - 1);
   };
 
-  const { handleSubmit, trigger, control } = formMethods;
+  const { handleSubmit, trigger, control, watch } = formMethods;
+
+  const { hasDuplicate } = useDuplicateDestinationCheck({
+    destination,
+    projectId: currentProject?.id || "",
+    enabled: true,
+    destinationConfig: watch("destinationConfig")
+  });
 
   const isStepValid = async (index: number) => trigger(FORM_TABS[index].fields);
 
   const isFinalStep = selectedTabIndex === FORM_TABS.length - 1;
+  const isCreateButtonDisabled =
+    isFinalStep && hasDuplicate && currentOrg?.blockDuplicateSecretSyncDestinations;
 
   const handleNext = async () => {
     if (isFinalStep) {
@@ -245,7 +256,7 @@ export const CreateSecretSyncForm = ({
       </FormProvider>
 
       <div className="flex w-full flex-row-reverse justify-between gap-4 pt-4">
-        <Button onClick={handleNext} colorSchema="secondary">
+        <Button onClick={handleNext} colorSchema="secondary" isDisabled={isCreateButtonDisabled}>
           {isFinalStep ? "Create Sync" : "Next"}
         </Button>
         {selectedTabIndex > 0 && (

frontend/src/components/secret-syncs/forms/DuplicateDestinationConfirmationModal.tsx

@@ -6,6 +6,7 @@ type Props = {
   onConfirm: () => void;
   isLoading?: boolean;
   duplicateProjectId?: string;
+  isDisabled?: boolean;
 };
 
 export const DuplicateDestinationConfirmationModal = ({
@@ -13,7 +14,8 @@ export const DuplicateDestinationConfirmationModal = ({
   onOpenChange,
   onConfirm,
   isLoading,
-  duplicateProjectId
+  duplicateProjectId,
+  isDisabled
 }: Props) => {
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
@@ -21,7 +23,12 @@ export const DuplicateDestinationConfirmationModal = ({
         <div className="mb-4 text-sm">
           <p>
             Another secret sync in your organization is already configured with the same
-            destination. Proceeding may cause conflicts or overwrite existing data.
+            destination.{" "}
+            <span className={isDisabled ? "text-red-400" : ""}>
+              {isDisabled
+                ? "Your organization does not allow duplicate destination configurations."
+                : "Proceeding may cause conflicts or overwrite existing data."}
+            </span>
           </p>
           {duplicateProjectId && (
             <p className="mt-2 text-xs text-mineshaft-400">
@@ -31,26 +38,28 @@ export const DuplicateDestinationConfirmationModal = ({
               </code>
             </p>
           )}
-          <p className="mt-2">Are you sure you want to continue?</p>
+          {!isDisabled && <p className="mt-2">Are you sure you want to continue?</p>}
         </div>
 
-        <div className="flex items-center gap-4 pt-4">
-          <ModalClose asChild>
-            <Button
-              onClick={onConfirm}
-              colorSchema="danger"
-              isLoading={isLoading}
-              isDisabled={isLoading}
-            >
-              Continue
-            </Button>
-          </ModalClose>
-          <ModalClose asChild>
-            <Button colorSchema="secondary" variant="plain" isDisabled={isLoading}>
-              Cancel
-            </Button>
-          </ModalClose>
-        </div>
+        {!isDisabled && (
+          <div className="flex items-center gap-4 pt-4">
+            <ModalClose asChild>
+              <Button
+                onClick={onConfirm}
+                colorSchema="danger"
+                isLoading={isLoading}
+                isDisabled={isLoading}
+              >
+                Continue
+              </Button>
+            </ModalClose>
+            <ModalClose asChild>
+              <Button colorSchema="secondary" variant="plain" isDisabled={isLoading}>
+                Cancel
+              </Button>
+            </ModalClose>
+          </div>
+        )}
       </ModalContent>
     </Modal>
   );

frontend/src/components/secret-syncs/forms/EditSecretSyncForm.tsx

@@ -5,6 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { createNotification } from "@app/components/notifications";
 import { SecretSyncEditFields } from "@app/components/secret-syncs/types";
 import { Button, ModalClose } from "@app/components/v2";
+import { useOrganization } from "@app/context";
 import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import {
   TSecretSync,
@@ -30,6 +31,7 @@ export const EditSecretSyncForm = ({ secretSync, fields, onComplete }: Props) =>
   const { name: destinationName } = SECRET_SYNC_MAP[secretSync.destination];
   const [showDuplicateConfirmation, setShowDuplicateConfirmation] = useState(false);
   const [pendingFormData, setPendingFormData] = useState<TSecretSyncForm | null>(null);
+  const { currentOrg } = useOrganization();
 
   const formMethods = useForm<TSecretSyncForm>({
     resolver: zodResolver(UpdateSecretSyncFormSchema),
@@ -209,6 +211,7 @@ export const EditSecretSyncForm = ({ secretSync, fields, onComplete }: Props) =>
         onConfirm={handleConfirmDuplicate}
         isLoading={updateSecretSync.isPending}
         duplicateProjectId={storedDuplicateProjectId}
+        isDisabled={currentOrg?.blockDuplicateSecretSyncDestinations}
       />
     </>
   );

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/ChefSyncFields.tsx

@@ -0,0 +1,93 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl } from "@app/components/v2";
+import {
+  TChefDataBag,
+  TChefDataBagItem,
+  useChefConnectionListDataBagItems,
+  useChefConnectionListDataBags
+} from "@app/hooks/api/appConnections/chef";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const ChefSyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.Chef }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+  const dataBagName = useWatch({ name: "destinationConfig.dataBagName", control });
+
+  const { data: dataBags, isLoading: isDataBagsLoading } = useChefConnectionListDataBags(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  const { data: dataBagItems, isLoading: isDataBagItemsLoading } =
+    useChefConnectionListDataBagItems(connectionId, dataBagName, {
+      enabled: Boolean(connectionId && dataBagName)
+    });
+
+  const handleChangeConnection = () => {
+    setValue("destinationConfig.dataBagName", "");
+    setValue("destinationConfig.dataBagItemName", "");
+  };
+
+  return (
+    <>
+      <SecretSyncConnectionField onChange={handleChangeConnection} />
+
+      <Controller
+        name="destinationConfig.dataBagName"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message} label="Data Bag">
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isDataBagsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={dataBags?.find((dataBag) => dataBag.name === value) ?? null}
+              onChange={(option) => {
+                const selectedDataBag = option as SingleValue<TChefDataBag>;
+                onChange(selectedDataBag?.name ?? "");
+                setValue("destinationConfig.dataBagItemName", "");
+              }}
+              options={dataBags}
+              placeholder="Select a data bag..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.name}
+            />
+          </FormControl>
+        )}
+      />
+
+      <Controller
+        name="destinationConfig.dataBagItemName"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message} label="Data Bag Item">
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isDataBagItemsLoading && Boolean(connectionId && dataBagName)}
+              isDisabled={!connectionId || !dataBagName}
+              value={dataBagItems?.find((dataBagItem) => dataBagItem.name === value) ?? null}
+              onChange={(option) => {
+                const selectedDataBagItem = option as SingleValue<TChefDataBagItem>;
+                onChange(selectedDataBagItem?.name ?? "");
+              }}
+              options={dataBagItems}
+              placeholder="Select a data bag item..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.name}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx

@@ -5,14 +5,8 @@ import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
-import {
-  Badge,
-  FilterableSelect,
-  FormControl,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
+import { FilterableSelect, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { GCP_SYNC_SCOPES } from "@app/helpers/secretSyncs";
 import {
   useGcpConnectionListProjectLocations,
@@ -26,10 +20,7 @@ import { TSecretSyncForm } from "../schemas";
 
 const formatOptionLabel = ({ displayName, locationId }: TGcpLocation) => (
   <div className="flex w-full flex-row items-center gap-1">
-    <span>{displayName}</span>{" "}
-    <Badge className="h-5 leading-5" variant="success">
-      {locationId}
-    </Badge>
+    <span>{displayName}</span> <Badge variant="info">{locationId}</Badge>
   </div>
 );
 

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/NorthflankSyncFields.tsx

@@ -0,0 +1,123 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import {
+  TNorthflankProject,
+  TNorthflankSecretGroup,
+  useNorthflankConnectionListProjects,
+  useNorthflankConnectionListSecretGroups
+} from "@app/hooks/api/appConnections/northflank";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const NorthflankSyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.Northflank }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+  const projectId = useWatch({ name: "destinationConfig.projectId", control });
+
+  const { data: projects = [], isPending: isProjectsLoading } = useNorthflankConnectionListProjects(
+    connectionId,
+    {
+      enabled: Boolean(connectionId)
+    }
+  );
+
+  const { data: secretGroups = [], isPending: isSecretGroupsLoading } =
+    useNorthflankConnectionListSecretGroups(connectionId, projectId, {
+      enabled: Boolean(connectionId) && Boolean(projectId)
+    });
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.projectId", "");
+          setValue("destinationConfig.projectName", "");
+          setValue("destinationConfig.secretGroupId", "");
+          setValue("destinationConfig.secretGroupName", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.projectId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Project"
+            isRequired
+            helperText={
+              <Tooltip content="Ensure the project exists in the connection's Northflank team and the connection has access to it.">
+                <div>
+                  <span>Don&#39;t see the project you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isProjectsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={projects.find((p) => p.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TNorthflankProject>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.projectName", v?.name ?? "");
+                setValue("destinationConfig.secretGroupId", "");
+                setValue("destinationConfig.secretGroupName", "");
+              }}
+              options={projects}
+              placeholder="Select a project..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        name="destinationConfig.secretGroupId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Secret Group"
+            isRequired
+            helperText={
+              <Tooltip content="Ensure the secret group exists in the connection's Northflank project and the connection has access to it.">
+                <div>
+                  <span>Don&#39;t see the secret group you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              isLoading={isSecretGroupsLoading && Boolean(projectId)}
+              isDisabled={!projectId}
+              value={secretGroups.find((sg) => sg.id === value) ?? null}
+              onChange={(option) => {
+                const v = option as SingleValue<TNorthflankSecretGroup>;
+                onChange(v?.id ?? null);
+                setValue("destinationConfig.secretGroupName", v?.name ?? "");
+              }}
+              options={secretGroups}
+              placeholder="Select a secret group..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx

@@ -12,6 +12,7 @@ import { AzureKeyVaultSyncFields } from "./AzureKeyVaultSyncFields";
 import { BitbucketSyncFields } from "./BitbucketSyncFields";
 import { CamundaSyncFields } from "./CamundaSyncFields";
 import { ChecklySyncFields } from "./ChecklySyncFields";
+import { ChefSyncFields } from "./ChefSyncFields";
 import { CloudflarePagesSyncFields } from "./CloudflarePagesSyncFields";
 import { CloudflareWorkersSyncFields } from "./CloudflareWorkersSyncFields";
 import { DatabricksSyncFields } from "./DatabricksSyncFields";
@@ -25,6 +26,7 @@ import { HerokuSyncFields } from "./HerokuSyncFields";
 import { HumanitecSyncFields } from "./HumanitecSyncFields";
 import { LaravelForgeSyncFields } from "./LaravelForgeSyncFields";
 import { NetlifySyncFields } from "./NetlifySyncFields";
+import { NorthflankSyncFields } from "./NorthflankSyncFields";
 import { OCIVaultSyncFields } from "./OCIVaultSyncFields";
 import { RailwaySyncFields } from "./RailwaySyncFields";
 import { RenderSyncFields } from "./RenderSyncFields";
@@ -103,6 +105,10 @@ export const SecretSyncDestinationFields = () => {
       return <BitbucketSyncFields />;
     case SecretSync.LaravelForge:
       return <LaravelForgeSyncFields />;
+    case SecretSync.Chef:
+      return <ChefSyncFields />;
+    case SecretSync.Northflank:
+      return <NorthflankSyncFields />;
     default:
       throw new Error(`Unhandled Destination Config Field: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/shared/AwsRegionSelect.tsx

@@ -2,7 +2,8 @@ import { components, OptionProps, SingleValue } from "react-select";
 import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Badge, FilterableSelect } from "@app/components/v2";
+import { FilterableSelect } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 
 const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGIONS)[number]>) => {
@@ -10,7 +11,7 @@ const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGI
     <components.Option isSelected={isSelected} {...props}>
       <div className="flex flex-row items-center justify-between">
         <p className="truncate">{children}</p>
-        <Badge variant="success" className="mr-auto ml-1 cursor-pointer">
+        <Badge variant="neutral" className="mr-auto ml-1">
           {props.data.slug}
         </Badge>
         {isSelected && (

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx

@@ -68,8 +68,10 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
     case SecretSync.Supabase:
     case SecretSync.DigitalOceanAppPlatform:
     case SecretSync.Netlify:
+    case SecretSync.Northflank:
     case SecretSync.Bitbucket:
     case SecretSync.LaravelForge:
+    case SecretSync.Chef:
       AdditionalSyncOptionsFieldsComponent = null;
       break;
     default:

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx

@@ -1,10 +1,10 @@
 import { useFormContext } from "react-hook-form";
-import { faEye } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { EyeIcon } from "lucide-react";
 
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
+import { Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -41,11 +41,9 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                <FontAwesomeIcon icon={faEye} />
-                <span>
-                  {tags.length} Tag{tags.length > 1 ? "s" : ""}
-                </span>
+              <Badge variant="neutral">
+                <EyeIcon />
+                {tags.length} Tag{tags.length > 1 ? "s" : ""}
               </Badge>
             </div>
           </Tooltip>

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx

@@ -1,10 +1,10 @@
 import { useFormContext } from "react-hook-form";
-import { faEye } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { EyeIcon } from "lucide-react";
 
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
+import { Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { AwsSecretsManagerSyncMappingBehavior } from "@app/hooks/api/secretSyncs/types/aws-secrets-manager-sync";
@@ -26,7 +26,7 @@ export const AwsSecretsManagerSyncReviewFields = () => {
     <>
       <GenericFieldLabel label="Region">
         {awsRegion?.name}
-        <Badge className="ml-1" variant="success">
+        <Badge className="ml-1" variant="info">
           {awsRegion?.slug}{" "}
         </Badge>
       </GenericFieldLabel>
@@ -73,11 +73,9 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
             }
           >
             <div className="w-min">
-              <Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
-                <FontAwesomeIcon icon={faEye} />
-                <span>
-                  {tags.length} Tag{tags.length > 1 ? "s" : ""}
-                </span>
+              <Badge variant="neutral">
+                <EyeIcon />
+                {tags.length} Tag{tags.length > 1 ? "s" : ""}
               </Badge>
             </div>
           </Tooltip>

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/ChefSyncReviewFields.tsx

@@ -0,0 +1,18 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const ChefSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Chef }>();
+  const dataBagName = watch("destinationConfig.dataBagName");
+  const dataBagItemName = watch("destinationConfig.dataBagItemName");
+
+  return (
+    <>
+      <GenericFieldLabel label="Data Bag">{dataBagName}</GenericFieldLabel>
+      <GenericFieldLabel label="Data Bag Item">{dataBagItemName}</GenericFieldLabel>
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/NorthflankSyncReviewFields.tsx

@@ -0,0 +1,20 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const NorthflankSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Northflank }>();
+  const projectName = watch("destinationConfig.projectName");
+  const projectId = watch("destinationConfig.projectId");
+  const secretGroupName = watch("destinationConfig.secretGroupName");
+  const secretGroupId = watch("destinationConfig.secretGroupId");
+
+  return (
+    <>
+      <GenericFieldLabel label="Project">{projectName || projectId}</GenericFieldLabel>
+      <GenericFieldLabel label="Secret Group">{secretGroupName || secretGroupId}</GenericFieldLabel>
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/RenderSyncReviewFields.tsx

@@ -2,7 +2,7 @@ import { useFormContext } from "react-hook-form";
 
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { Badge } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { RenderSyncScope } from "@app/hooks/api/secretSyncs/types/render-sync";
 

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -5,8 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
-import { Badge } from "@app/components/v2";
-import { useProject } from "@app/context";
+import { Badge } from "@app/components/v3";
+import { useOrganization, useProject } from "@app/context";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP, SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSync, useDuplicateDestinationCheck } from "@app/hooks/api/secretSyncs";
 
@@ -24,6 +24,7 @@ import { AzureKeyVaultSyncReviewFields } from "./AzureKeyVaultSyncReviewFields";
 import { BitbucketSyncReviewFields } from "./BitbucketSyncReviewFields";
 import { CamundaSyncReviewFields } from "./CamundaSyncReviewFields";
 import { ChecklySyncReviewFields } from "./ChecklySyncReviewFields";
+import { ChefSyncReviewFields } from "./ChefSyncReviewFields";
 import { CloudflarePagesSyncReviewFields } from "./CloudflarePagesReviewFields";
 import { CloudflareWorkersSyncReviewFields } from "./CloudflareWorkersReviewFields";
 import { DatabricksSyncReviewFields } from "./DatabricksSyncReviewFields";
@@ -37,6 +38,7 @@ import { HerokuSyncReviewFields } from "./HerokuSyncReviewFields";
 import { HumanitecSyncReviewFields } from "./HumanitecSyncReviewFields";
 import { LaravelForgeSyncReviewFields } from "./LaravelForgeSyncReviewFields";
 import { NetlifySyncReviewFields } from "./NetlifySyncReviewFields";
+import { NorthflankSyncReviewFields } from "./NorthflankSyncReviewFields";
 import { OCIVaultSyncReviewFields } from "./OCIVaultSyncReviewFields";
 import { OnePassSyncReviewFields } from "./OnePassSyncReviewFields";
 import { RailwaySyncReviewFields } from "./RailwaySyncReviewFields";
@@ -51,6 +53,7 @@ import { ZabbixSyncReviewFields } from "./ZabbixSyncReviewFields";
 export const SecretSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm>();
   const { currentProject } = useProject();
+  const { currentOrg } = useOrganization();
 
   let DestinationFieldsComponent: ReactNode;
   let AdditionalSyncOptionsFieldsComponent: ReactNode;
@@ -166,12 +169,18 @@ export const SecretSyncReviewFields = () => {
     case SecretSync.Netlify:
       DestinationFieldsComponent = <NetlifySyncReviewFields />;
       break;
+    case SecretSync.Northflank:
+      DestinationFieldsComponent = <NorthflankSyncReviewFields />;
+      break;
     case SecretSync.Bitbucket:
       DestinationFieldsComponent = <BitbucketSyncReviewFields />;
       break;
     case SecretSync.LaravelForge:
       DestinationFieldsComponent = <LaravelForgeSyncReviewFields />;
       break;
+    case SecretSync.Chef:
+      DestinationFieldsComponent = <ChefSyncReviewFields />;
+      break;
     default:
       throw new Error(`Unhandled Destination Review Fields: ${destination}`);
   }
@@ -193,18 +202,50 @@ export const SecretSyncReviewFields = () => {
           {isChecking && <span className="text-xs text-mineshaft-400">Checking...</span>}
         </div>
         {hasDuplicate && (
-          <div className="mb-2 flex items-start rounded-md border border-yellow-600 bg-yellow-900/20 px-3 py-2">
-            <div className="flex text-sm text-yellow-100">
-              <FontAwesomeIcon icon={faWarning} className="mt-1 mr-2 text-yellow-600" />
+          <div
+            className={`mb-2 flex items-start rounded-md border px-3 py-2 ${
+              currentOrg?.blockDuplicateSecretSyncDestinations
+                ? "border-red-600 bg-red-900/20"
+                : "border-yellow-600 bg-yellow-900/20"
+            }`}
+          >
+            <div
+              className={`flex text-sm ${
+                currentOrg?.blockDuplicateSecretSyncDestinations
+                  ? "text-red-100"
+                  : "text-yellow-100"
+              }`}
+            >
+              <FontAwesomeIcon
+                icon={faWarning}
+                className={`mt-1 mr-2 ${
+                  currentOrg?.blockDuplicateSecretSyncDestinations
+                    ? "text-red-600"
+                    : "text-yellow-600"
+                }`}
+              />
               <div>
                 <p>
-                  Another secret sync in your organization is already configured with the same
-                  destination. This may lead to conflicts or unexpected behavior.
+                  {currentOrg?.blockDuplicateSecretSyncDestinations
+                    ? "Another secret sync in your organization is already configured with the same destination. Your organization does not allow duplicate destination configurations."
+                    : "Another secret sync in your organization is already configured with the same destination. This may lead to conflicts or unexpected behavior."}
                 </p>
                 {duplicateProjectId && (
-                  <p className="mt-1 text-xs text-yellow-200">
+                  <p
+                    className={`mt-1 text-xs ${
+                      currentOrg?.blockDuplicateSecretSyncDestinations
+                        ? "text-red-200"
+                        : "text-yellow-200"
+                    }`}
+                  >
                     Duplicate found in project ID:{" "}
-                    <code className="rounded-sm bg-yellow-800/50 px-1 py-0.5">
+                    <code
+                      className={`rounded-sm px-1 py-0.5 ${
+                        currentOrg?.blockDuplicateSecretSyncDestinations
+                          ? "bg-red-800/50"
+                          : "bg-yellow-800/50"
+                      }`}
+                    >
                       {duplicateProjectId}
                     </code>
                   </p>
@@ -224,7 +265,7 @@ export const SecretSyncReviewFields = () => {
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
           <GenericFieldLabel label="Auto-Sync">
-            <Badge variant={isAutoSyncEnabled ? "success" : "danger"}>
+            <Badge variant={isAutoSyncEnabled ? "success" : "neutral"}>
               {isAutoSyncEnabled ? "Enabled" : "Disabled"}
             </Badge>
           </GenericFieldLabel>
@@ -235,7 +276,7 @@ export const SecretSyncReviewFields = () => {
           {AdditionalSyncOptionsFieldsComponent}
           {disableSecretDeletion && (
             <GenericFieldLabel label="Secret Deletion">
-              <Badge variant="primary">Disabled</Badge>
+              <Badge variant="warning">Disabled</Badge>
             </GenericFieldLabel>
           )}
         </div>

frontend/src/components/secret-syncs/forms/schemas/chef-sync-destination-schema.ts

@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const ChefSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.Chef),
+    destinationConfig: z.object({
+      dataBagName: z.string().trim().min(1, "Data Bag required"),
+      dataBagItemName: z.string().trim().min(1, "Data Bag Item required")
+    })
+  })
+);

frontend/src/components/secret-syncs/forms/schemas/northflank-sync-destination-schema.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const NorthflankSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.Northflank),
+    destinationConfig: z.object({
+      projectId: z.string().trim().min(1, "Project ID is required"),
+      projectName: z.string().trim().optional(),
+      secretGroupId: z.string().trim().min(1, "Secret Group ID is required"),
+      secretGroupName: z.string().trim().optional()
+    })
+  })
+);

frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts

@@ -9,6 +9,7 @@ import { AzureKeyVaultSyncDestinationSchema } from "./azure-key-vault-sync-desti
 import { BitbucketSyncDestinationSchema } from "./bitbucket-sync-destination-schema";
 import { CamundaSyncDestinationSchema } from "./camunda-sync-destination-schema";
 import { ChecklySyncDestinationSchema } from "./checkly-sync-destination-schema";
+import { ChefSyncDestinationSchema } from "./chef-sync-destination-schema";
 import { CloudflarePagesSyncDestinationSchema } from "./cloudflare-pages-sync-destination-schema";
 import { CloudflareWorkersSyncDestinationSchema } from "./cloudflare-workers-sync-destination-schema";
 import { DatabricksSyncDestinationSchema } from "./databricks-sync-destination-schema";
@@ -22,6 +23,7 @@ import { HerokuSyncDestinationSchema } from "./heroku-sync-destination-schema";
 import { HumanitecSyncDestinationSchema } from "./humanitec-sync-destination-schema";
 import { LaravelForgeSyncDestinationSchema } from "./laravel-forge-sync-destination-schema";
 import { NetlifySyncDestinationSchema } from "./netlify-sync-destination-schema";
+import { NorthflankSyncDestinationSchema } from "./northflank-sync-destination-schema";
 import { OCIVaultSyncDestinationSchema } from "./oci-vault-sync-destination-schema";
 import { RailwaySyncDestinationSchema } from "./railway-sync-destination-schema";
 import { RenderSyncDestinationSchema } from "./render-sync-destination-schema";
@@ -62,8 +64,10 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   ChecklySyncDestinationSchema,
   DigitalOceanAppPlatformSyncDestinationSchema,
   NetlifySyncDestinationSchema,
+  NorthflankSyncDestinationSchema,
   BitbucketSyncDestinationSchema,
-  LaravelForgeSyncDestinationSchema
+  LaravelForgeSyncDestinationSchema,
+  ChefSyncDestinationSchema
 ]);
 
 export const SecretSyncFormSchema = SecretSyncUnionSchema;

frontend/src/components/utilities/certificateDisplayUtils.tsx

@@ -0,0 +1,100 @@
+import { ReactNode } from "react";
+
+import { Tooltip } from "@app/components/v2";
+
+interface CertificateNameData {
+  altNames?: string | null;
+  commonName?: string | null;
+  certificateAltNames?: string | null;
+  certificateCommonName?: string | null;
+}
+
+interface DisplayNameResult {
+  originalDisplayName: string;
+  displayName: string;
+  isTruncated: boolean;
+}
+
+/**
+ * Extracts and formats the display name for a certificate from SAN/CN data
+ * @param cert - Certificate object with potential altNames/commonName fields
+ * @param maxLength - Maximum length before truncating (default: 64)
+ * @param fallback - Fallback text when no name is found (default: "—")
+ * @returns Object with original name, truncated name, and truncation flag
+ */
+export const getCertificateDisplayName = (
+  cert: CertificateNameData,
+  maxLength: number = 64,
+  fallback: string = "—"
+): DisplayNameResult => {
+  // Extract original display name - prioritize SAN over CN
+  let originalDisplayName = fallback;
+
+  // Handle different property name variations
+  const altNames = cert.altNames || cert.certificateAltNames;
+  const commonName = cert.commonName || cert.certificateCommonName;
+
+  if (altNames && altNames.trim()) {
+    originalDisplayName = altNames.trim();
+  } else if (commonName && commonName.trim()) {
+    originalDisplayName = commonName.trim();
+  }
+
+  // Handle truncation
+  let displayName = originalDisplayName;
+  let isTruncated = false;
+
+  if (originalDisplayName.length > maxLength) {
+    displayName = `${originalDisplayName.substring(0, maxLength)}...`;
+    isTruncated = true;
+  }
+
+  return {
+    originalDisplayName,
+    displayName,
+    isTruncated
+  };
+};
+
+/**
+ * Renders a certificate display name with optional tooltip for truncated names
+ * @param cert - Certificate object with potential altNames/commonName fields
+ * @param maxLength - Maximum length before truncating (default: 64)
+ * @param fallback - Fallback text when no name is found (default: "—")
+ * @param className - Optional CSS class for the display element
+ * @param tooltipClassName - Optional CSS class for the tooltip (default: "max-w-lg")
+ * @returns JSX element with certificate name and optional tooltip
+ */
+export const CertificateDisplayName = ({
+  cert,
+  maxLength = 64,
+  fallback = "—",
+  className = "truncate",
+  tooltipClassName = "max-w-lg"
+}: {
+  cert: CertificateNameData;
+  maxLength?: number;
+  fallback?: string;
+  className?: string;
+  tooltipClassName?: string;
+}): ReactNode => {
+  const { originalDisplayName, displayName, isTruncated } = getCertificateDisplayName(
+    cert,
+    maxLength,
+    fallback
+  );
+
+  if (isTruncated) {
+    return (
+      <Tooltip content={originalDisplayName} className={tooltipClassName}>
+        <div className={className}>{displayName}</div>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div className={className} title={originalDisplayName}>
+      {displayName}
+    </div>
+  );
+};

frontend/src/components/v2/Badge/Badge.tsx

@@ -1,47 +0,0 @@
-import { forwardRef } from "react";
-import { cva, VariantProps } from "cva";
-import { twMerge } from "tailwind-merge";
-
-interface IProps {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-}
-
-const badgeVariants = cva(
-  [
-    "inline-block cursor-default rounded-md bg-yellow/20 px-1.5 py-0.5 text-xs text-yellow opacity-80 hover:opacity-100"
-  ],
-  {
-    variants: {
-      variant: {
-        primary: "bg-yellow/20 text-yellow",
-        danger: "bg-red/20 text-red",
-        success: "bg-green/20 text-green",
-        org: "bg-org-v1/20 text-org-v1 [&_svg]:text-org-v1 flex items-center opacity-100 hover:bg-org-v1/10 [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap",
-        namespace:
-          "bg-namespace-v1/20 text-namespace-v1 [&_svg]:text-namespace-v1 flex opacity-100 hover:bg-namespace-v1/10 items-center [&_svg]:size-3.5 gap-x-1.5 w-min whitespace-nowrap",
-        project:
-          "bg-primary/10 text-primary [&_svg]:text-primary opacity-100 hover:bg-primary/10 flex items-center [&_svg]:size-3 w-min gap-x-1.5 whitespace-nowrap",
-        instance:
-          "bg-mineshaft-200/20 text-mineshaft-200 [&_svg]:text-mineshaft-200 opacity-100 hover:bg-mineshaft-200/20 flex items-center [&_svg]:size-3 gap-x-1.5 w-min whitespace-nowrap"
-      }
-    }
-  }
-);
-
-export type BadgeProps = VariantProps<typeof badgeVariants> & IProps;
-
-export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
-  ({ children, className, variant, ...props }, ref) => {
-    return (
-      <div
-        className={twMerge(badgeVariants({ variant: variant || "primary" }), className)}
-        {...props}
-        ref={ref}
-      >
-        {children}
-      </div>
-    );
-  }
-);

frontend/src/components/v2/Badge/index.tsx

@@ -1 +0,0 @@
-export { Badge } from "./Badge";

frontend/src/components/v2/Modal/Modal.tsx

@@ -14,6 +14,7 @@ export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, "title"
   bodyClassName?: string;
   onClose?: () => void;
   overlayClassName?: string;
+  showCloseButton?: boolean;
 };
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
@@ -27,6 +28,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
       footerContent,
       bodyClassName,
       onClose,
+      showCloseButton = true,
       ...props
     },
     forwardedRef
@@ -57,15 +59,17 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             {children}
           </CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
-          <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
-            <IconButton
-              variant="plain"
-              ariaLabel="close"
-              className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
-            >
-              <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
-            </IconButton>
-          </DialogPrimitive.Close>
+          {showCloseButton && (
+            <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
+              <IconButton
+                variant="plain"
+                ariaLabel="close"
+                className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
+              >
+                <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
+              </IconButton>
+            </DialogPrimitive.Close>
+          )}
         </Card>
       </DialogPrimitive.Content>
     </DialogPrimitive.Portal>
@@ -74,7 +78,9 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
 
 ModalContent.displayName = "ModalContent";
 
-export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & { isOpen?: boolean };
+export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & {
+  isOpen?: boolean;
+};
 export const Modal = ({ isOpen, ...props }: ModalProps) => (
   <DialogPrimitive.Root open={isOpen} {...props} />
 );

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -1,11 +1,16 @@
-import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
-import { faCube, faCubes, faGlobe, faServer } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createElement } from "react";
 import { ReactNode } from "@tanstack/react-router";
+import { LucideIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
-import { Badge } from "@app/components/v2";
-import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import {
+  Badge,
+  InstanceIcon,
+  OrgIcon,
+  ProjectIcon,
+  SubOrgIcon,
+  TBadgeProps
+} from "@app/components/v3";
 import { ProjectType } from "@app/hooks/api/projects/types";
 
 type Props = {
@@ -16,19 +21,19 @@ type Props = {
   scope: "org" | "namespace" | "instance" | ProjectType | null;
 };
 
-const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: IconDefinition }> = {
-  org: { label: "Organization", icon: faGlobe },
-  [ProjectType.SecretManager]: { label: "Project", icon: faCube },
-  [ProjectType.CertificateManager]: { label: "Project", icon: faCube },
-  [ProjectType.SSH]: { label: "Project", icon: faCube },
-  [ProjectType.KMS]: { label: "Project", icon: faCube },
-  [ProjectType.PAM]: { label: "Project", icon: faCube },
-  [ProjectType.SecretScanning]: { label: "Project", icon: faCube },
-  namespace: { label: "Sub-Organization", icon: faCubes },
-  instance: { label: "Server", icon: faServer }
+const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: LucideIcon }> = {
+  org: { label: "Organization", icon: OrgIcon },
+  [ProjectType.SecretManager]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.CertificateManager]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.SSH]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.KMS]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.PAM]: { label: "Project", icon: ProjectIcon },
+  [ProjectType.SecretScanning]: { label: "Project", icon: ProjectIcon },
+  namespace: { label: "Sub-Organization", icon: SubOrgIcon },
+  instance: { label: "Server", icon: InstanceIcon }
 };
 
-const SCOPE_VARIANT: Record<NonNullable<Props["scope"]>, BadgeProps["variant"]> = {
+const SCOPE_VARIANT: Record<NonNullable<Props["scope"]>, TBadgeProps["variant"]> = {
   org: "org",
   [ProjectType.SecretManager]: "project",
   [ProjectType.CertificateManager]: "project",
@@ -36,8 +41,8 @@ const SCOPE_VARIANT: Record<NonNullable<Props["scope"]>, BadgeProps["variant"]>
   [ProjectType.KMS]: "project",
   [ProjectType.PAM]: "project",
   [ProjectType.SecretScanning]: "project",
-  namespace: "namespace",
-  instance: "instance"
+  namespace: "sub-org",
+  instance: "neutral"
 };
 
 export const PageHeader = ({ title, description, children, className, scope }: Props) => (
@@ -47,7 +52,7 @@ export const PageHeader = ({ title, description, children, className, scope }: P
         <h1 className="text-3xl font-medium text-white capitalize">{title}</h1>
         {scope && (
           <Badge variant={SCOPE_VARIANT[scope]} className="mt-1 ml-2.5">
-            <FontAwesomeIcon icon={SCOPE_NAME[scope].icon} />
+            {createElement(SCOPE_NAME[scope].icon)}
             {SCOPE_NAME[scope].label}
           </Badge>
         )}

frontend/src/components/v2/Select/Select.tsx

@@ -3,6 +3,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown, faCaretUp, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { LucideIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { Spinner } from "../Spinner";
@@ -19,6 +20,7 @@ type Props = {
   icon?: IconProp;
   isMulti?: boolean;
   iconClassName?: string;
+  LucideIcon?: LucideIcon;
   dropdownContainerStyle?: React.CSSProperties;
   side?: SelectPrimitive.SelectContentProps["side"];
 };
@@ -39,6 +41,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
       iconClassName,
       dropdownContainerStyle,
       side,
+      LucideIcon: Lucide,
       ...props
     },
     ref
@@ -65,6 +68,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           >
             <div className="flex items-center space-x-2 overflow-hidden text-ellipsis whitespace-nowrap">
               {props.icon && <FontAwesomeIcon icon={props.icon} className={iconClassName} />}
+              {Lucide && <Lucide className={twMerge("size-3.5", iconClassName)} />}
               <div className="flex-1 truncate">
                 <SelectPrimitive.Value placeholder={placeholder} />
               </div>

frontend/src/components/v2/index.tsx

@@ -2,7 +2,6 @@
 export * from "./AccessRestrictedBanner";
 export * from "./Accordion";
 export * from "./Alert";
-export * from "./Badge";
 export * from "./Breadcrumb";
 export * from "./Button";
 export * from "./Card";

frontend/src/components/v3/generic/Badge/Badge.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Link } from "@tanstack/react-router";
 import {
+  AlertTriangleIcon,
+  AsteriskIcon,
   BanIcon,
-  BoxesIcon,
-  BoxIcon,
   CheckIcon,
   ChevronsUpDownIcon,
   CircleXIcon,
@@ -11,9 +11,11 @@ import {
   GlobeIcon,
   InfoIcon,
   RadarIcon,
-  TriangleAlertIcon
+  TriangleAlertIcon,
+  UserIcon
 } from "lucide-react";
 
+import { OrgIcon, ProjectIcon, SubOrgIcon } from "../../platform";
 import { Badge } from "./Badge";
 
 /**
@@ -69,7 +71,29 @@ export const Neutral: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Use this variant when indicating neutral or disabled states."
+        story:
+          "Use this variant when indicating neutral or disabled states or when linking to external documents."
+      }
+    }
+  }
+};
+
+export const Ghost: Story = {
+  name: "Variant: Ghost",
+  args: {
+    variant: "ghost",
+    children: (
+      <>
+        <UserIcon />
+        User
+      </>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use this variant when indicating a configuration or property value. Avoid using this variant as an interactive element as it is not intuitive to interact with."
       }
     }
   }
@@ -109,8 +133,7 @@ export const Info: Story = {
   parameters: {
     docs: {
       description: {
-        story:
-          "Use this variant when indicating informational states or linking to external references."
+        story: "Use this variant when indicating informational states."
       }
     }
   }
@@ -162,7 +185,7 @@ export const Organization: Story = {
     variant: "org",
     children: (
       <>
-        <GlobeIcon />
+        <OrgIcon />
         Organization
       </>
     )
@@ -182,7 +205,7 @@ export const SubOrganization: Story = {
     variant: "sub-org",
     children: (
       <>
-        <BoxesIcon />
+        <SubOrgIcon />
         Sub-Organization
       </>
     )
@@ -202,7 +225,7 @@ export const Project: Story = {
     variant: "project",
     children: (
       <>
-        <BoxIcon />
+        <ProjectIcon />
         Project
       </>
     )
@@ -283,10 +306,11 @@ export const AsButton: Story = {
 export const IsTruncatable: Story = {
   name: "Example: isTruncatable",
   args: {
+    variant: "org",
     isTruncatable: true,
     children: (
       <>
-        <GlobeIcon />
+        <OrgIcon />
         <span>Infisical Infrastructure</span>
       </>
     )
@@ -295,7 +319,7 @@ export const IsTruncatable: Story = {
     docs: {
       description: {
         story:
-          "Use the `isTruncatable` prop with a `span` tag wrapping the text content to support truncation."
+          "Use the `isTruncatable` prop with a `span` tag wrapping the text content to support truncation. Parent `div` should have a fixed width and `flex` class."
       }
     }
   },
@@ -305,3 +329,48 @@ export const IsTruncatable: Story = {
     </div>
   )
 };
+
+export const IsSquare: Story = {
+  name: "Example: isSquare",
+  args: {
+    variant: "danger",
+    isSquare: true,
+    children: <AlertTriangleIcon />
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the `isSquare` prop when displaying a squared badge with 1-2 character text or only an icon."
+      }
+    }
+  }
+};
+
+export const IsFullWidth: Story = {
+  name: "Example: isFullWidth",
+  args: {
+    variant: "neutral",
+    isFullWidth: true,
+
+    children: (
+      <>
+        <AsteriskIcon />
+        Secret Value
+      </>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the `isFullWidth` prop to expand the badges width to fill it's parent container."
+      }
+    }
+  },
+  decorators: (Story) => (
+    <div className="w-32">
+      <Story />
+    </div>
+  )
+};

frontend/src/components/v3/generic/Badge/Badge.tsx

@@ -6,30 +6,37 @@ import { cn } from "@app/components/v3/utils";
 
 const badgeVariants = cva(
   [
-    "select-none items-center rounded-sm px-1.5 py-0.5 text-xs",
-    "gap-x-1 [a&,button&]:cursor-pointer inline-flex",
-    "[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-[2.25] [&>svg]:size-3",
+    "select-none items-center align-middle rounded-sm h-4.5 px-1.5 text-xs",
+    "gap-x-1 [a&,button&]:cursor-pointer inline-flex font-normal",
+    "[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-[2.25] [&_svg:not([class*='size-'])]:size-3",
     "transition duration-200 ease-in-out"
   ],
   {
     variants: {
       isTruncatable: {
         true: "[&>span,&>p]:truncate min-w-0",
-        false: "w-fit shrink-0 whitespace-nowrap overflow-hidden"
+        false: "w-fit shrink-0 min-w-fit whitespace-nowrap overflow-hidden"
+      },
+      isFullWidth: {
+        true: "w-full justify-center"
+      },
+      isSquare: {
+        true: "w-4.5 justify-center px-0.5"
       },
       variant: {
-        neutral: "bg-neutral/30 text-neutral [a&,button&]:hover:bg-neutral/40",
-        success: "bg-success/30 text-success [a&,button&]:hover:bg-success/40",
-        info: "bg-info/30 text-info [a&,button&]:hover:bg-info/40",
-        warning: "bg-warning/30 text-warning [a&,button&]:hover:bg-warning/40",
-        danger: "bg-danger/30 text-danger [a&,button&]:hover:bg-danger/40",
-        project: "bg-project/30 text-project [a&,button&]:hover:bg-project/40",
-        org: "bg-org/30 text-org [a&,button&]:hover:bg-org/40",
-        "sub-org": "bg-sub-org/30 text-sub-org [a&,button&]:hover:bg-sub-org/40"
+        ghost: "text-mineshaft-200 gap-x-2",
+        neutral: "bg-neutral/25 text-neutral [a&,button&]:hover:bg-neutral/35",
+        success: "bg-success/25 text-success [a&,button&]:hover:bg-success/35",
+        info: "bg-info/25 text-info [a&,button&]:hover:bg-info/35",
+        warning: "bg-warning/25 text-warning [a&,button&]:hover:bg-warning/35",
+        danger: "bg-danger/25 text-danger [a&,button&]:hover:bg-danger/35",
+        project: "bg-project/25 text-project [a&,button&]:hover:bg-project/35",
+        org: "bg-org/25 text-org [a&,button&]:hover:bg-org/35",
+        "sub-org": "bg-sub-org/25 text-sub-org [a&,button&]:hover:bg-sub-org/35"
       }
     },
     defaultVariants: {
-      variant: "success"
+      variant: "neutral"
     }
   }
 );
@@ -37,16 +44,28 @@ const badgeVariants = cva(
 type TBadgeProps = VariantProps<typeof badgeVariants> &
   React.ComponentProps<"span"> & {
     asChild?: boolean;
+    variant: NonNullable<VariantProps<typeof badgeVariants>["variant"]>; // TODO: REMOVE
   };
 
 const Badge = forwardRef<HTMLSpanElement, TBadgeProps>(
-  ({ className, variant, asChild = false, isTruncatable = false, ...props }, ref): JSX.Element => {
+  (
+    {
+      className,
+      variant,
+      asChild = false,
+      isTruncatable = false,
+      isFullWidth = false,
+      isSquare = false,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
     const Comp = asChild ? Slot : "span";
     return (
       <Comp
         ref={ref}
         data-slot="badge"
-        className={cn(badgeVariants({ variant, isTruncatable }), className)}
+        className={cn(badgeVariants({ variant, isTruncatable, isFullWidth, isSquare }), className)}
         {...props}
       />
     );

frontend/src/components/v3/index.ts

@@ -0,0 +1,2 @@
+export * from "./generic";
+export * from "./platform";

frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { DocumentationLinkBadge } from "./DocumentationLinkBadge";
+
+/**
+ * The documentation link badge is a re-usable component to link to Infisical documentation references.
+ */
+const meta = {
+  title: "Platform/Documentation Link Badge",
+  component: DocumentationLinkBadge,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+  args: { href: "https://infisical.com/docs/documentation/getting-started/introduction" }
+} satisfies Meta<typeof DocumentationLinkBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Example: Default"
+};

frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.tsx

@@ -0,0 +1,18 @@
+import { BookOpenIcon } from "lucide-react";
+
+import { Badge } from "@app/components/v3";
+
+type TDocumentationLinkBadgeProps = {
+  href: string;
+};
+
+export function DocumentationLinkBadge({ href }: TDocumentationLinkBadgeProps) {
+  return (
+    <Badge variant="neutral" asChild>
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        <BookOpenIcon />
+        Documentation
+      </a>
+    </Badge>
+  );
+}

frontend/src/components/v3/platform/DocumentationLinkBadge/index.ts

@@ -0,0 +1 @@
+export * from "./DocumentationLinkBadge";

frontend/src/components/v3/platform/ScopeIcons.tsx

@@ -0,0 +1,8 @@
+import { BoxesIcon, BoxIcon, Building2Icon, ServerIcon } from "lucide-react";
+
+const InstanceIcon = ServerIcon;
+const OrgIcon = Building2Icon;
+const SubOrgIcon = BoxesIcon;
+const ProjectIcon = BoxIcon;
+
+export { InstanceIcon, OrgIcon, ProjectIcon, SubOrgIcon };

frontend/src/components/v3/platform/index.ts

@@ -0,0 +1,2 @@
+export * from "./DocumentationLinkBadge";
+export * from "./ScopeIcons";

frontend/src/const/routes.ts

@@ -301,10 +301,6 @@ export const ROUTE_PATHS = Object.freeze({
       "/projects/cert-management/$projectId/subscribers",
       "/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/subscribers"
     ),
-    CertificatesPage: setRoute(
-      "/projects/cert-management/$projectId/certificates",
-      "/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/certificates"
-    ),
     CertificateAuthoritiesPage: setRoute(
       "/projects/cert-management/$projectId/certificate-authorities",
       "/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/certificate-authorities"

frontend/src/helpers/appConnections.ts

@@ -46,10 +46,12 @@ import {
 } from "@app/hooks/api/appConnections/types";
 import { BitbucketConnectionMethod } from "@app/hooks/api/appConnections/types/bitbucket-connection";
 import { ChecklyConnectionMethod } from "@app/hooks/api/appConnections/types/checkly-connection";
+import { ChefConnectionMethod } from "@app/hooks/api/appConnections/types/chef-connection";
 import { DigitalOceanConnectionMethod } from "@app/hooks/api/appConnections/types/digital-ocean";
 import { HerokuConnectionMethod } from "@app/hooks/api/appConnections/types/heroku-connection";
 import { LaravelForgeConnectionMethod } from "@app/hooks/api/appConnections/types/laravel-forge-connection";
 import { NetlifyConnectionMethod } from "@app/hooks/api/appConnections/types/netlify-connection";
+import { NorthflankConnectionMethod } from "@app/hooks/api/appConnections/types/northflank-connection";
 import { OCIConnectionMethod } from "@app/hooks/api/appConnections/types/oci-connection";
 import { RailwayConnectionMethod } from "@app/hooks/api/appConnections/types/railway-connection";
 import { RenderConnectionMethod } from "@app/hooks/api/appConnections/types/render-connection";
@@ -121,13 +123,15 @@ export const APP_CONNECTION_MAP: Record<
     name: "Netlify",
     image: "Netlify.png"
   },
+  [AppConnection.Northflank]: { name: "Northflank", image: "Northflank.png" },
   [AppConnection.Okta]: { name: "Okta", image: "Okta.png" },
   [AppConnection.Redis]: { name: "Redis", image: "Redis.png" },
   [AppConnection.LaravelForge]: {
     name: "Laravel Forge",
     image: "Laravel Forge.png",
     size: 65
-  }
+  },
+  [AppConnection.Chef]: { name: "Chef", image: "Chef.png" }
 };
 
 export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {
@@ -135,6 +139,8 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
     case GitHubConnectionMethod.App:
     case GitHubRadarConnectionMethod.App:
       return { name: "GitHub App", icon: faGithub };
+    case GitHubConnectionMethod.Pat:
+      return { name: "Personal Access Token", icon: faKey };
     case AzureKeyVaultConnectionMethod.OAuth:
     case AzureAppConfigurationConnectionMethod.OAuth:
     case AzureClientSecretsConnectionMethod.OAuth:
@@ -162,6 +168,7 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
     case BitbucketConnectionMethod.ApiToken:
     case ZabbixConnectionMethod.ApiToken:
     case DigitalOceanConnectionMethod.ApiToken:
+    case NorthflankConnectionMethod.ApiToken:
     case OktaConnectionMethod.ApiToken:
     case LaravelForgeConnectionMethod.ApiToken:
       return { name: "API Token", icon: faKey };
@@ -197,6 +204,8 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
     case RenderConnectionMethod.ApiKey:
     case ChecklyConnectionMethod.ApiKey:
       return { name: "API Key", icon: faKey };
+    case ChefConnectionMethod.UserKey:
+      return { name: "User Key", icon: faKey };
     case AzureClientSecretsConnectionMethod.ClientSecret:
     case AzureAppConfigurationConnectionMethod.ClientSecret:
     case AzureKeyVaultConnectionMethod.ClientSecret:

frontend/src/helpers/policies.ts

@@ -1,20 +1,20 @@
-import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
-import { faArrowRightToBracket, faEdit } from "@fortawesome/free-solid-svg-icons";
+import { LucideIcon, UserCheckIcon, UserPenIcon } from "lucide-react";
 
+import { TBadgeProps } from "@app/components/v3";
 import { PolicyType } from "@app/hooks/api/policies/enums";
 
 export const policyDetails: Record<
   PolicyType,
-  { name: string; className: string; icon: IconDefinition }
+  { name: string; variant: TBadgeProps["variant"]; Icon: LucideIcon }
 > = {
   [PolicyType.AccessPolicy]: {
-    className: "bg-green/20 text-green",
+    variant: "ghost",
     name: "Access Policy",
-    icon: faArrowRightToBracket
+    Icon: UserCheckIcon
   },
   [PolicyType.ChangePolicy]: {
-    className: "bg-yellow/20 text-yellow",
+    variant: "ghost",
     name: "Change Policy",
-    icon: faEdit
+    Icon: UserPenIcon
   }
 };

frontend/src/helpers/secretScanningV2.ts

@@ -1,10 +1,6 @@
-import {
-  faBan,
-  faCheck,
-  faMagnifyingGlassMinus,
-  faWarning
-} from "@fortawesome/free-solid-svg-icons";
+import { AlertTriangleIcon, BanIcon, CheckIcon, LucideIcon, SearchSlashIcon } from "lucide-react";
 
+import { TBadgeProps } from "@app/components/v3";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import {
   SecretScanningDataSource,
@@ -74,12 +70,28 @@ export const RESOURCE_DESCRIPTION_HELPER: Record<
   }
 };
 
-export const SECRET_SCANNING_FINDING_STATUS_ICON_MAP = {
-  [SecretScanningFindingStatus.Resolved]: { icon: faCheck, className: "text-green" },
-  [SecretScanningFindingStatus.Unresolved]: { icon: faWarning, className: "text-yellow" },
-  [SecretScanningFindingStatus.Ignore]: { icon: faBan, className: "text-mineshaft-400" },
+export const SECRET_SCANNING_FINDING_STATUS_MAP: Record<
+  SecretScanningFindingStatus,
+  { Icon: LucideIcon; variant: TBadgeProps["variant"]; className: string }
+> = {
+  [SecretScanningFindingStatus.Resolved]: {
+    Icon: CheckIcon,
+    variant: "success",
+    className: "text-success"
+  },
+  [SecretScanningFindingStatus.Unresolved]: {
+    Icon: AlertTriangleIcon,
+    variant: "warning",
+    className: "text-warning"
+  },
+  [SecretScanningFindingStatus.Ignore]: {
+    Icon: BanIcon,
+    variant: "neutral",
+    className: "text-neutral"
+  },
   [SecretScanningFindingStatus.FalsePositive]: {
-    icon: faMagnifyingGlassMinus,
-    className: "text-mineshaft-400"
+    Icon: SearchSlashIcon,
+    variant: "neutral",
+    className: "text-neutral"
   }
 };

frontend/src/helpers/secretSyncs.ts

@@ -114,9 +114,17 @@ export const SECRET_SYNC_MAP: Record<SecretSync, { name: string; image: string }
     name: "Bitbucket",
     image: "Bitbucket.png"
   },
+  [SecretSync.Northflank]: {
+    name: "Northflank",
+    image: "Northflank.png"
+  },
   [SecretSync.LaravelForge]: {
     name: "Laravel Forge",
     image: "Laravel Forge.png"
+  },
+  [SecretSync.Chef]: {
+    name: "Chef",
+    image: "Chef.png"
   }
 };
 
@@ -150,8 +158,10 @@ export const SECRET_SYNC_CONNECTION_MAP: Record<SecretSync, AppConnection> = {
   [SecretSync.Checkly]: AppConnection.Checkly,
   [SecretSync.DigitalOceanAppPlatform]: AppConnection.DigitalOcean,
   [SecretSync.Netlify]: AppConnection.Netlify,
+  [SecretSync.Northflank]: AppConnection.Northflank,
   [SecretSync.Bitbucket]: AppConnection.Bitbucket,
-  [SecretSync.LaravelForge]: AppConnection.LaravelForge
+  [SecretSync.LaravelForge]: AppConnection.LaravelForge,
+  [SecretSync.Chef]: AppConnection.Chef
 };
 
 export const SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP: Record<

frontend/src/hooks/api/appConnections/chef/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries";
+export * from "./types";

frontend/src/hooks/api/appConnections/chef/queries.tsx

@@ -0,0 +1,68 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { appConnectionKeys } from "@app/hooks/api/appConnections";
+
+import { TChefDataBag, TChefDataBagItem } from "./types";
+
+const chefConnectionKeys = {
+  all: [...appConnectionKeys.all, "chef"] as const,
+  listDataBags: (connectionId: string) =>
+    [...chefConnectionKeys.all, "data-bags", connectionId] as const,
+  listDataBagItems: (connectionId: string, dataBagName: string) =>
+    [...chefConnectionKeys.all, "data-bag-items", connectionId, dataBagName] as const
+};
+
+export const useChefConnectionListDataBags = (
+  connectionId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TChefDataBag[],
+      unknown,
+      TChefDataBag[],
+      ReturnType<typeof chefConnectionKeys.listDataBags>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: chefConnectionKeys.listDataBags(connectionId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TChefDataBag[]>(
+        `/api/v1/app-connections/chef/${connectionId}/data-bags`
+      );
+
+      return data;
+    },
+    ...options
+  });
+};
+
+export const useChefConnectionListDataBagItems = (
+  connectionId: string,
+  dataBagName: string,
+  options?: Omit<
+    UseQueryOptions<
+      TChefDataBagItem[],
+      unknown,
+      TChefDataBagItem[],
+      ReturnType<typeof chefConnectionKeys.listDataBagItems>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: chefConnectionKeys.listDataBagItems(connectionId, dataBagName),
+    queryFn: async () => {
+      const params = { dataBagName };
+      const { data } = await apiRequest.get<TChefDataBagItem[]>(
+        `/api/v1/app-connections/chef/${connectionId}/data-bag-items`,
+        { params }
+      );
+
+      return data;
+    },
+    enabled: Boolean(connectionId && dataBagName),
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/chef/types.ts

@@ -0,0 +1,7 @@
+export type TChefDataBag = {
+  name: string;
+};
+
+export type TChefDataBagItem = {
+  name: string;
+};

frontend/src/hooks/api/appConnections/enums.ts

@@ -36,7 +36,9 @@ export enum AppConnection {
   Supabase = "supabase",
   DigitalOcean = "digital-ocean",
   Netlify = "netlify",
+  Northflank = "northflank",
   Okta = "okta",
   Redis = "redis",
-  LaravelForge = "laravel-forge"
+  LaravelForge = "laravel-forge",
+  Chef = "chef"
 }

frontend/src/hooks/api/appConnections/gitlab/types.ts

@@ -10,5 +10,6 @@ export type TGitLabGroup = {
 
 export enum GitLabAccessTokenType {
   Personal = "personal",
-  Project = "project"
+  Project = "project",
+  Group = "group"
 }

frontend/src/hooks/api/appConnections/northflank/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries";
+export * from "./types";

frontend/src/hooks/api/appConnections/northflank/queries.tsx

@@ -0,0 +1,65 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { appConnectionKeys } from "@app/hooks/api/appConnections";
+
+import { TNorthflankProject, TNorthflankSecretGroup } from "./types";
+
+const northflankConnectionKeys = {
+  all: [...appConnectionKeys.all, "northflank"] as const,
+  listProjects: (connectionId: string) =>
+    [...northflankConnectionKeys.all, "projects", connectionId] as const,
+  listSecretGroups: (connectionId: string, projectId: string) =>
+    [...northflankConnectionKeys.all, "secret-groups", connectionId, projectId] as const
+};
+
+export const useNorthflankConnectionListProjects = (
+  connectionId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TNorthflankProject[],
+      unknown,
+      TNorthflankProject[],
+      ReturnType<typeof northflankConnectionKeys.listProjects>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: northflankConnectionKeys.listProjects(connectionId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ projects: TNorthflankProject[] }>(
+        `/api/v1/app-connections/northflank/${connectionId}/projects`
+      );
+
+      return data.projects;
+    },
+    ...options
+  });
+};
+
+export const useNorthflankConnectionListSecretGroups = (
+  connectionId: string,
+  projectId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TNorthflankSecretGroup[],
+      unknown,
+      TNorthflankSecretGroup[],
+      ReturnType<typeof northflankConnectionKeys.listSecretGroups>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: northflankConnectionKeys.listSecretGroups(connectionId, projectId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ secretGroups: TNorthflankSecretGroup[] }>(
+        `/api/v1/app-connections/northflank/${connectionId}/projects/${projectId}/secret-groups`
+      );
+
+      return data.secretGroups;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/northflank/types.ts

@@ -0,0 +1,9 @@
+export type TNorthflankProject = {
+  id: string;
+  name: string;
+};
+
+export type TNorthflankSecretGroup = {
+  id: string;
+  name: string;
+};

frontend/src/hooks/api/appConnections/types/app-options.ts

@@ -148,6 +148,10 @@ export type TChecklyConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.Checkly;
 };
 
+export type TChefConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.Chef;
+};
+
 export type TSupabaseConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.Supabase;
 };
@@ -168,6 +172,10 @@ export type TLaravelForgeConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.LaravelForge;
 };
 
+export type TNorthflankConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.Northflank;
+};
+
 export type TAzureAdCsConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.AzureADCS;
 };
@@ -213,9 +221,11 @@ export type TAppConnectionOption =
   | TSupabaseConnectionOption
   | TDigitalOceanConnectionOption
   | TNetlifyConnectionOption
+  | TNorthflankConnectionOption
   | TOktaConnectionOption
   | TAzureAdCsConnectionOption
-  | TLaravelForgeConnectionOption;
+  | TLaravelForgeConnectionOption
+  | TChefConnectionOption;
 
 export type TAppConnectionOptionMap = {
   [AppConnection.AWS]: TAwsConnectionOption;
@@ -254,8 +264,10 @@ export type TAppConnectionOptionMap = {
   [AppConnection.Supabase]: TSupabaseConnectionOption;
   [AppConnection.DigitalOcean]: TDigitalOceanConnectionOption;
   [AppConnection.Netlify]: TNetlifyConnectionOption;
+  [AppConnection.Northflank]: TNorthflankConnectionOption;
   [AppConnection.Okta]: TOktaConnectionOption;
   [AppConnection.AzureADCS]: TAzureAdCsConnectionOption;
   [AppConnection.Redis]: TRedisConnectionOption;
   [AppConnection.LaravelForge]: TLaravelForgeConnectionOption;
+  [AppConnection.Chef]: TChefConnectionOption;
 };

frontend/src/hooks/api/appConnections/types/chef-connection.ts

@@ -0,0 +1,16 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+export enum ChefConnectionMethod {
+  UserKey = "user-key"
+}
+
+export type TChefConnection = TRootAppConnection & { app: AppConnection.Chef } & {
+  method: ChefConnectionMethod.UserKey;
+  credentials: {
+    instanceUrl?: string;
+    orgName: string;
+    userName: string;
+    privateKey: string;
+  };
+};

frontend/src/hooks/api/appConnections/types/github-connection.ts

@@ -3,7 +3,8 @@ import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-con
 
 export enum GitHubConnectionMethod {
   App = "github-app",
-  OAuth = "oauth"
+  OAuth = "oauth",
+  Pat = "pat"
 }
 
 export type TGitHubConnection = TRootAppConnection & { app: AppConnection.GitHub } & (
@@ -24,4 +25,12 @@ export type TGitHubConnection = TRootAppConnection & { app: AppConnection.GitHub
           host?: string;
         };
       }
+    | {
+        method: GitHubConnectionMethod.Pat;
+        credentials: {
+          personalAccessToken: string;
+          instanceType?: "cloud" | "server";
+          host?: string;
+        };
+      }
   );

frontend/src/hooks/api/appConnections/types/index.ts

@@ -11,6 +11,7 @@ import { TAzureKeyVaultConnection } from "./azure-key-vault-connection";
 import { TBitbucketConnection } from "./bitbucket-connection";
 import { TCamundaConnection } from "./camunda-connection";
 import { TChecklyConnection } from "./checkly-connection";
+import { TChefConnection } from "./chef-connection";
 import { TCloudflareConnection } from "./cloudflare-connection";
 import { TDatabricksConnection } from "./databricks-connection";
 import { TDigitalOceanConnection } from "./digital-ocean";
@@ -27,6 +28,7 @@ import { TLdapConnection } from "./ldap-connection";
 import { TMsSqlConnection } from "./mssql-connection";
 import { TMySqlConnection } from "./mysql-connection";
 import { TNetlifyConnection } from "./netlify-connection";
+import { TNorthflankConnection } from "./northflank-connection";
 import { TOCIConnection } from "./oci-connection";
 import { TOktaConnection } from "./okta-connection";
 import { TOracleDBConnection } from "./oracledb-connection";
@@ -52,6 +54,7 @@ export * from "./azure-key-vault-connection";
 export * from "./bitbucket-connection";
 export * from "./camunda-connection";
 export * from "./checkly-connection";
+export * from "./chef-connection";
 export * from "./cloudflare-connection";
 export * from "./databricks-connection";
 export * from "./flyio-connection";
@@ -66,6 +69,8 @@ export * from "./laravel-forge-connection";
 export * from "./ldap-connection";
 export * from "./mssql-connection";
 export * from "./mysql-connection";
+export * from "./netlify-connection";
+export * from "./northflank-connection";
 export * from "./oci-connection";
 export * from "./okta-connection";
 export * from "./oracledb-connection";
@@ -119,8 +124,10 @@ export type TAppConnection =
   | TSupabaseConnection
   | TDigitalOceanConnection
   | TNetlifyConnection
+  | TNorthflankConnection
   | TOktaConnection
-  | TRedisConnection;
+  | TRedisConnection
+  | TChefConnection;
 
 export type TAvailableAppConnection = Pick<TAppConnection, "name" | "id" | "projectId">;
 

frontend/src/hooks/api/appConnections/types/northflank-connection.ts

@@ -0,0 +1,13 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+export enum NorthflankConnectionMethod {
+  ApiToken = "api-token"
+}
+
+export type TNorthflankConnection = TRootAppConnection & { app: AppConnection.Northflank } & {
+  method: NorthflankConnectionMethod.ApiToken;
+  credentials: {
+    apiToken: string;
+  };
+};

frontend/src/hooks/api/ca/constants.tsx

@@ -53,6 +53,6 @@ export const getCaStatusBadgeVariant = (status: CaStatus | SshCaStatus | SshCert
     case CaStatus.DISABLED:
       return "danger";
     default:
-      return "primary";
+      return "warning";
   }
 };

frontend/src/hooks/api/ca/mutations.tsx

@@ -152,7 +152,7 @@ export const useCreateCertificate = () => {
   });
 };
 
-export const useCreateCertificateV3 = () => {
+export const useCreateCertificateV3 = (options?: { projectId?: string }) => {
   const queryClient = useQueryClient();
   return useMutation<TCreateCertificateV3Response, object, TCreateCertificateV3DTO>({
     mutationFn: async (body) => {
@@ -167,6 +167,12 @@ export const useCreateCertificateV3 = () => {
         queryKey: projectKeys.forProjectCertificates(projectSlug)
       });
 
+      if (options?.projectId) {
+        queryClient.invalidateQueries({
+          queryKey: projectKeys.forProjectCertificates(options.projectId)
+        });
+      }
+
       queryClient.invalidateQueries({
         queryKey: ["certificate-profiles"]
       });

frontend/src/hooks/api/certificateProfiles/index.ts

@@ -8,7 +8,6 @@ export {
   useGetCertificateProfileById,
   useGetCertificateProfileBySlug,
   useGetProfileCertificates,
-  useGetProfileMetrics,
   useListCertificateProfiles
 } from "./queries";
 export type * from "./types";

frontend/src/hooks/api/certificateProfiles/queries.tsx

@@ -4,7 +4,6 @@ import { apiRequest } from "@app/config/request";
 
 import {
   TCertificateProfile,
-  TCertificateProfileMetrics,
   TCertificateProfileWithDetails,
   TGetCertificateProfileByIdDTO,
   TGetCertificateProfileBySlugDTO,
@@ -20,7 +19,6 @@ export const certificateProfileKeys = {
     limit?: number;
     offset?: number;
     search?: string;
-    includeMetrics?: boolean;
     includeConfigs?: boolean;
     enrollmentType?: string;
     expiringDays?: number;
@@ -51,10 +49,8 @@ export const useListCertificateProfiles = ({
   limit = 20,
   offset = 0,
   search,
-  includeMetrics = false,
   includeConfigs = false,
-  enrollmentType,
-  expiringDays = 7
+  enrollmentType
 }: TListCertificateProfilesDTO) => {
   return useQuery({
     queryKey: certificateProfileKeys.list({
@@ -62,10 +58,8 @@ export const useListCertificateProfiles = ({
       limit,
       offset,
       search,
-      includeMetrics,
       includeConfigs,
-      enrollmentType,
-      expiringDays
+      enrollmentType
     }),
     queryFn: async () => {
       const { data } = await apiRequest.get<{
@@ -77,10 +71,8 @@ export const useListCertificateProfiles = ({
           limit,
           offset,
           search,
-          includeMetrics,
           includeConfigs,
-          enrollmentType,
-          expiringDays
+          enrollmentType
         }
       });
       return data;
@@ -145,18 +137,3 @@ export const useGetProfileCertificates = ({
     enabled: Boolean(profileId)
   });
 };
-
-export const useGetProfileMetrics = ({ profileId, expiringDays = 7 }: TGetProfileMetricsDTO) => {
-  return useQuery({
-    queryKey: certificateProfileKeys.getMetrics(profileId, { expiringDays }),
-    queryFn: async () => {
-      const { data } = await apiRequest.get<{
-        metrics: TCertificateProfileMetrics;
-      }>(`/api/v1/pki/certificate-profiles/${profileId}/metrics`, {
-        params: { expiringDays }
-      });
-      return data.metrics;
-    },
-    enabled: Boolean(profileId)
-  });
-};

frontend/src/hooks/api/certificateProfiles/types.ts

@@ -10,7 +10,6 @@ export type TCertificateProfile = {
   apiConfigId?: string;
   createdAt: string;
   updatedAt: string;
-  metrics?: TCertificateProfileMetrics;
 };
 
 export type TCertificateProfileWithDetails = TCertificateProfile & {
@@ -35,7 +34,7 @@ export type TCertificateProfileWithDetails = TCertificateProfile & {
   apiConfig?: {
     id: string;
     autoRenew: boolean;
-    autoRenewDays?: number;
+    renewBeforeDays?: number;
   };
 };
 
@@ -53,7 +52,7 @@ export type TCreateCertificateProfileDTO = {
   };
   apiConfig?: {
     autoRenew?: boolean;
-    autoRenewDays?: number;
+    renewBeforeDays?: number;
   };
 };
 
@@ -68,7 +67,7 @@ export type TUpdateCertificateProfileDTO = {
   };
   apiConfig?: {
     autoRenew?: boolean;
-    autoRenewDays?: number;
+    renewBeforeDays?: number;
   };
 };
 
@@ -81,10 +80,8 @@ export type TListCertificateProfilesDTO = {
   limit?: number;
   offset?: number;
   search?: string;
-  includeMetrics?: boolean;
   includeConfigs?: boolean;
   enrollmentType?: "api" | "est";
-  expiringDays?: number;
 };
 
 export type TGetCertificateProfileByIdDTO = {
@@ -96,15 +93,6 @@ export type TGetCertificateProfileBySlugDTO = {
   slug: string;
 };
 
-export type TCertificateProfileMetrics = {
-  profileId: string;
-  totalCertificates: number;
-  activeCertificates: number;
-  expiredCertificates: number;
-  expiringCertificates: number;
-  revokedCertificates: number;
-};
-
 export type TProfileCertificate = {
   id: string;
   serialNumber: string;
@@ -126,5 +114,4 @@ export type TGetProfileCertificatesDTO = {
 
 export type TGetProfileMetricsDTO = {
   profileId: string;
-  expiringDays?: number;
 };

frontend/src/hooks/api/certificateTemplates/types.ts

@@ -42,8 +42,8 @@ export type TCreateCertificateTemplateDTO = {
   subjectAlternativeName: string;
   ttl: string;
   projectId: string;
-  keyUsages: CertKeyUsage[];
-  extendedKeyUsages: CertExtendedKeyUsage[];
+  keyUsages: string[];
+  extendedKeyUsages: string[];
 };
 
 export type TUpdateCertificateTemplateDTO = {
@@ -55,8 +55,8 @@ export type TUpdateCertificateTemplateDTO = {
   subjectAlternativeName?: string;
   ttl?: string;
   projectId: string;
-  keyUsages?: CertKeyUsage[];
-  extendedKeyUsages?: CertExtendedKeyUsage[];
+  keyUsages?: string[];
+  extendedKeyUsages?: string[];
 };
 
 export type TDeleteCertificateTemplateDTO = {
@@ -71,8 +71,8 @@ export type TCreateCertificateTemplateV2DTO = {
   subjectAlternativeName: string;
   ttl: string;
   projectId: string;
-  keyUsages: CertKeyUsage[];
-  extendedKeyUsages: CertExtendedKeyUsage[];
+  keyUsages: string[];
+  extendedKeyUsages: string[];
 };
 
 export type TUpdateCertificateTemplateV2DTO = {
@@ -83,8 +83,8 @@ export type TUpdateCertificateTemplateV2DTO = {
   subjectAlternativeName?: string;
   ttl?: string;
   projectId: string;
-  keyUsages?: CertKeyUsage[];
-  extendedKeyUsages?: CertExtendedKeyUsage[];
+  keyUsages?: string[];
+  extendedKeyUsages?: string[];
 };
 
 export type TDeleteCertificateTemplateV2DTO = {

frontend/src/hooks/api/certificates/index.tsx

@@ -1,2 +1,9 @@
-export { useDeleteCert, useImportCertificate, useRevokeCert } from "./mutations";
+export { CertStatus } from "./enums";
+export {
+  useDeleteCert,
+  useImportCertificate,
+  useRenewCertificate,
+  useRevokeCert,
+  useUpdateRenewalConfig
+} from "./mutations";
 export { useGetCert, useGetCertBody } from "./queries";

frontend/src/hooks/api/certificates/mutations.tsx

@@ -9,7 +9,10 @@ import {
   TDeleteCertDTO,
   TImportCertificateDTO,
   TImportCertificateResponse,
-  TRevokeCertDTO
+  TRenewCertificateDTO,
+  TRenewCertificateResponse,
+  TRevokeCertDTO,
+  TUpdateRenewalConfigDTO
 } from "./types";
 
 export const useDeleteCert = () => {
@@ -77,3 +80,57 @@ export const useImportCertificate = () => {
     }
   });
 };
+
+export const useRenewCertificate = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TRenewCertificateResponse, object, TRenewCertificateDTO>({
+    mutationFn: async ({ certificateId }) => {
+      const { data } = await apiRequest.post<TRenewCertificateResponse>(
+        `/api/v3/certificates/${certificateId}/renew`,
+        {}
+      );
+      return data;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: ["certificate-profiles", "list"]
+      });
+      queryClient.invalidateQueries({
+        queryKey: pkiSubscriberKeys.allPkiSubscriberCertificates()
+      });
+      queryClient.invalidateQueries({
+        queryKey: projectKeys.allProjectCertificates()
+      });
+      if (data.projectId) {
+        queryClient.invalidateQueries({
+          queryKey: projectKeys.forProjectCertificates(data.projectId)
+        });
+      }
+    }
+  });
+};
+
+export const useUpdateRenewalConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation<
+    { message: string; renewBeforeDays?: number },
+    object,
+    TUpdateRenewalConfigDTO
+  >({
+    mutationFn: async ({ certificateId, renewBeforeDays, enableAutoRenewal }) => {
+      const { data } = await apiRequest.patch<{ message: string; renewBeforeDays?: number }>(
+        `/api/v3/certificates/${certificateId}/config`,
+        { renewBeforeDays, enableAutoRenewal }
+      );
+      return data;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries({
+        queryKey: projectKeys.forProjectCertificates(projectSlug)
+      });
+      queryClient.invalidateQueries({
+        queryKey: projectKeys.allProjectCertificates()
+      });
+    }
+  });
+};

frontend/src/hooks/api/certificates/types.ts

@@ -4,15 +4,23 @@ export type TCertificate = {
   id: string;
   caId: string;
   certificateTemplateId?: string;
+  profileId?: string;
   status: CertStatus;
   friendlyName: string;
   commonName: string;
   subjectAltNames: string;
+  altNames?: string;
   serialNumber: string;
   notBefore: string;
   notAfter: string;
   keyUsages: CertKeyUsage[];
   extendedKeyUsages: CertExtendedKeyUsage[];
+  renewBeforeDays?: number;
+  renewedBy?: string;
+  renewedFromCertificateId?: string;
+  renewedByCertificateId?: string;
+  renewalError?: string;
+  hasPrivateKey?: boolean;
 };
 
 export type TDeleteCertDTO = {
@@ -43,3 +51,24 @@ export type TImportCertificateResponse = {
   privateKey: string;
   serialNumber: string;
 };
+
+export type TRenewCertificateDTO = {
+  certificateId: string;
+};
+
+export type TRenewCertificateResponse = {
+  certificate: string;
+  issuingCaCertificate: string;
+  certificateChain: string;
+  privateKey?: string;
+  serialNumber: string;
+  certificateId: string;
+  projectId: string;
+};
+
+export type TUpdateRenewalConfigDTO = {
+  certificateId: string;
+  renewBeforeDays?: number;
+  enableAutoRenewal?: boolean;
+  projectSlug: string;
+};

frontend/src/hooks/api/index.tsx

@@ -28,6 +28,7 @@ export * from "./organization";
 export * from "./pkiAlerts";
 export * from "./pkiCollections";
 export * from "./pkiSubscriber";
+export * from "./pkiSyncs";
 export * from "./projects";
 export * from "./projectUserAdditionalPrivilege";
 export * from "./rateLimit";

frontend/src/hooks/api/migration/queries.tsx

@@ -5,7 +5,8 @@ import { apiRequest } from "@app/config/request";
 import {
   ExternalMigrationProviders,
   TVaultExternalMigrationConfig,
-  VaultKubernetesAuthRole
+  VaultKubernetesAuthRole,
+  VaultKubernetesRole
 } from "./types";
 
 export const externalMigrationQueryKeys = {
@@ -31,6 +32,11 @@ export const externalMigrationQueryKeys = {
     "vault-kubernetes-auth-roles",
     namespace,
     mountPath
+  ],
+  vaultKubernetesRoles: (namespace?: string, mountPath?: string) => [
+    "vault-kubernetes-roles",
+    namespace,
+    mountPath
   ]
 };
 
@@ -172,3 +178,30 @@ export const useGetVaultKubernetesAuthRoles = (
     enabled: enabled && !!namespace && !!mountPath
   });
 };
+
+export const useGetVaultKubernetesRoles = (
+  enabled = true,
+  namespace?: string,
+  mountPath?: string
+) => {
+  return useQuery({
+    queryKey: externalMigrationQueryKeys.vaultKubernetesRoles(namespace, mountPath),
+    queryFn: async () => {
+      if (!namespace || !mountPath) {
+        throw new Error("Both namespace and mountPath are required");
+      }
+
+      const { data } = await apiRequest.get<{
+        roles: VaultKubernetesRole[];
+      }>("/api/v3/external-migration/vault/kubernetes-roles", {
+        params: {
+          namespace,
+          mountPath
+        }
+      });
+
+      return data.roles;
+    },
+    enabled: enabled && !!namespace && !!mountPath
+  });
+};

frontend/src/hooks/api/migration/types.ts

@@ -49,3 +49,24 @@ export type VaultKubernetesAuthRole = {
     disable_local_ca_jwt?: boolean;
   };
 };
+
+export type VaultKubernetesRole = {
+  name: string;
+  mountPath: string;
+  allowed_kubernetes_namespaces?: string[];
+  allowed_kubernetes_namespace_selector?: string;
+  token_max_ttl?: number;
+  token_default_ttl?: number;
+  token_default_audiences?: string[];
+  service_account_name?: string;
+  kubernetes_role_name?: string;
+  kubernetes_role_type?: string;
+  generated_role_rules?: string;
+  name_template?: string;
+  extra_annotations?: Record<string, string>;
+  extra_labels?: Record<string, string>;
+  config: {
+    kubernetes_host: string;
+    kubernetes_ca_cert?: string;
+  };
+};

frontend/src/hooks/api/organization/queries.tsx

@@ -125,7 +125,8 @@ export const useUpdateOrg = () => {
       scannerProductEnabled,
       shareSecretsProductEnabled,
       maxSharedSecretLifetime,
-      maxSharedSecretViewLimit
+      maxSharedSecretViewLimit,
+      blockDuplicateSecretSyncDestinations
     }) => {
       return apiRequest.patch(`/api/v1/organization/${orgId}`, {
         name,
@@ -146,7 +147,8 @@ export const useUpdateOrg = () => {
         scannerProductEnabled,
         shareSecretsProductEnabled,
         maxSharedSecretLifetime,
-        maxSharedSecretViewLimit
+        maxSharedSecretViewLimit,
+        blockDuplicateSecretSyncDestinations
       });
     },
     onSuccess: () => {

frontend/src/hooks/api/organization/types.ts

@@ -29,6 +29,7 @@ export type Organization = {
   shareSecretsProductEnabled: boolean;
   maxSharedSecretLifetime: number;
   maxSharedSecretViewLimit: number | null;
+  blockDuplicateSecretSyncDestinations: boolean;
 };
 
 export type UpdateOrgDTO = {
@@ -52,6 +53,7 @@ export type UpdateOrgDTO = {
   shareSecretsProductEnabled?: boolean;
   maxSharedSecretViewLimit?: number | null;
   maxSharedSecretLifetime?: number;
+  blockDuplicateSecretSyncDestinations?: boolean;
 };
 
 export type BillingDetails = {

frontend/src/hooks/api/pam/enums.ts

@@ -1,5 +1,6 @@
 export enum PamResourceType {
   Postgres = "postgres",
+  MySQL = "mysql",
   RDP = "rdp",
   SSH = "ssh",
   Kubernetes = "kubernetes"