Merge branch 'heads/main' into daniel/redis-secret-rotation-new

2026-10-20 21:18:18 +00:00 · 2025-09-24 00:17:57 +04:00
parent ac9202867f 4add86479a
commit 2641a74b39
196 changed files with 10535 additions and 919 deletions
@@ -64,7 +64,7 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {

  const { currentProject } = useProject();
  const { data, isPending } = useListWorkspaceCertificates({
-    projectId: currentProject?.slug ?? "",
+    projectId: currentProject?.id ?? "",
    offset: (page - 1) * perPage,
    limit: perPage
  });
@@ -0,0 +1,69 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { ProjectPermissionSub, useProject } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
+import { PkiSyncsTab } from "./components";
+
+export const IntegrationsListPage = () => {
+  const navigate = useNavigate();
+  const { currentProject } = useProject();
+  const { t } = useTranslation();
+
+  const { selectedTab } = useSearch({
+    from: ROUTE_PATHS.CertManager.IntegrationsListPage.id
+  });
+
+  const currentTab = selectedTab || IntegrationsListPageTabs.PkiSyncs;
+
+  const updateSelectedTab = (tab: string) => {
+    navigate({
+      to: ROUTE_PATHS.CertManager.IntegrationsListPage.path,
+      search: {
+        selectedTab: tab as IntegrationsListPageTabs
+      },
+      params: {
+        projectId: currentProject?.id
+      }
+    });
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>{t("common.head-title", { title: t("integrations.title") })}</title>
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content="Manage your certificates in seconds" />
+        <meta name="og:description" content="Sync and manage PKI certificates across services" />
+      </Helmet>
+      <div className="container relative mx-auto max-w-7xl pb-12 text-white">
+        <div className="mb-8">
+          <PageHeader
+            title="Integrations"
+            description="Manage integrations with third-party certificate services."
+          />
+          <Tabs value={currentTab} onValueChange={updateSelectedTab}>
+            <TabList>
+              <Tab value={IntegrationsListPageTabs.PkiSyncs}>Certificate Syncs</Tab>
+            </TabList>
+            <TabPanel value={IntegrationsListPageTabs.PkiSyncs}>
+              <ProjectPermissionCan
+                renderGuardBanner
+                I={ProjectPermissionPkiSyncActions.Read}
+                a={ProjectPermissionSub.PkiSyncs}
+              >
+                <PkiSyncsTab />
+              </ProjectPermissionCan>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,14 @@
+import { TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+import { getPkiSyncDestinationColValues } from "../helpers";
+import { PkiSyncTableCell } from "../PkiSyncTableCell";
+
+type Props = {
+  pkiSync: TPkiSync;
+};
+
+export const PkiSyncDestinationCol = ({ pkiSync }: Props) => {
+  const { primaryText, secondaryText } = getPkiSyncDestinationColValues(pkiSync);
+
+  return <PkiSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
+};
@@ -0,0 +1 @@
+export { PkiSyncDestinationCol } from "./PkiSyncDestinationCol";
@@ -0,0 +1,398 @@
+import { useCallback, useMemo } from "react";
+import { subject } from "@casl/ability";
+import {
+  faBan,
+  faCalendarCheck,
+  faCheck,
+  faCopy,
+  faDownload,
+  faEllipsisV,
+  faEraser,
+  faInfoCircle,
+  faRotate,
+  faToggleOff,
+  faToggleOn,
+  faTrash,
+  faTriangleExclamation,
+  faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { format } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  PkiSyncImportStatusBadge,
+  PkiSyncRemoveStatusBadge,
+  PkiSyncStatusBadge
+} from "@app/components/pki-syncs";
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton,
+  Td,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
+import { useToggle } from "@app/hooks";
+import { PkiSyncStatus, TPkiSync, usePkiSyncOption } from "@app/hooks/api/pkiSyncs";
+
+import { PkiSyncDestinationCol } from "./PkiSyncDestinationCol";
+import { PkiSyncTableCell } from "./PkiSyncTableCell";
+
+type Props = {
+  pkiSync: TPkiSync;
+  onDelete: (pkiSync: TPkiSync) => void;
+  onTriggerSyncCertificates: (pkiSync: TPkiSync) => void;
+  onTriggerImportCertificates: (pkiSync: TPkiSync) => void;
+  onTriggerRemoveCertificates: (pkiSync: TPkiSync) => void;
+  onToggleEnable: (pkiSync: TPkiSync) => void;
+};
+
+export const PkiSyncRow = ({
+  pkiSync,
+  onDelete,
+  onTriggerSyncCertificates,
+  onTriggerImportCertificates,
+  onTriggerRemoveCertificates,
+  onToggleEnable
+}: Props) => {
+  const navigate = useNavigate();
+  const {
+    id,
+    subscriberId,
+    lastSyncMessage,
+    destination,
+    lastSyncedAt,
+    name,
+    description,
+    syncStatus,
+    isAutoSyncEnabled,
+    projectId
+  } = pkiSync;
+
+  const destinationName = PKI_SYNC_MAP[destination].name;
+
+  const { syncOption } = usePkiSyncOption(destination);
+
+  const [isIdCopied, setIsIdCopied] = useToggle(false);
+
+  const handleCopyId = useCallback(() => {
+    setIsIdCopied.on();
+    navigator.clipboard.writeText(id);
+
+    createNotification({
+      text: "PKI Sync ID copied to clipboard",
+      type: "info"
+    });
+
+    const timer = setTimeout(() => setIsIdCopied.off(), 2000);
+
+    // eslint-disable-next-line consistent-return
+    return () => clearTimeout(timer);
+  }, [isIdCopied]);
+
+  const failureMessage = useMemo(() => {
+    if (syncStatus === PkiSyncStatus.Failed) {
+      if (lastSyncMessage)
+        try {
+          return JSON.stringify(JSON.parse(lastSyncMessage), null, 2);
+        } catch {
+          return lastSyncMessage;
+        }
+
+      return "An Unknown Error Occurred.";
+    }
+    return null;
+  }, [syncStatus, lastSyncMessage]);
+
+  const destinationDetails = PKI_SYNC_MAP[destination];
+
+  const permissionSubject = subject(ProjectPermissionSub.PkiSyncs, {
+    subscriberId: subscriberId || ""
+  });
+
+  return (
+    <Tr
+      onClick={() => {
+        // console.log("PKI Sync navigation:", { syncId: id, projectId });
+        navigate({
+          to: ROUTE_PATHS.CertManager.PkiSyncDetailsByIDPage.path,
+          params: {
+            syncId: id,
+            projectId
+          }
+        });
+      }}
+      className={twMerge(
+        "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
+        syncStatus === PkiSyncStatus.Failed && "bg-red/5 hover:bg-red/10"
+      )}
+      key={`sync-${id}`}
+    >
+      <Td>
+        <img
+          alt={`${destinationDetails.name} sync`}
+          src={`/images/integrations/${destinationDetails.image}`}
+          className="min-w-[1.75rem]"
+        />
+      </Td>
+      <Td className="!min-w-[8rem] max-w-0">
+        <div>
+          <div className="flex w-full items-center">
+            <p className="truncate">{name}</p>
+            {description && (
+              <Tooltip content={description}>
+                <FontAwesomeIcon
+                  icon={faInfoCircle}
+                  size="xs"
+                  className="ml-1 text-mineshaft-400"
+                />
+              </Tooltip>
+            )}
+          </div>
+          <p className="truncate text-xs leading-4 text-bunker-300">{destinationDetails.name}</p>
+        </div>
+      </Td>
+      {subscriberId ? (
+        <PkiSyncTableCell primaryText={pkiSync.subscriber?.name || subscriberId} secondaryText="PKI Subscriber" />
+      ) : (
+        <Td>
+          <Tooltip content="The PKI subscriber for this sync has been deleted. Configure a new source or remove this sync.">
+            <div className="w-min">
+              <Badge
+                className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
+                variant="primary"
+              >
+                <FontAwesomeIcon icon={faTriangleExclamation} />
+                <span>Source Deleted</span>
+              </Badge>
+            </div>
+          </Tooltip>
+        </Td>
+      )}
+      <PkiSyncDestinationCol pkiSync={pkiSync} />
+      <Td>
+        <div className="flex items-center gap-1">
+          {syncStatus && (
+            <Tooltip
+              position="left"
+              className="max-w-sm"
+              content={
+                [PkiSyncStatus.Succeeded, PkiSyncStatus.Failed].includes(syncStatus) ? (
+                  <div className="flex flex-col gap-2 whitespace-normal py-1">
+                    {lastSyncedAt && (
+                      <div>
+                        <div
+                          className={`mb-2 flex self-start ${syncStatus === PkiSyncStatus.Failed ? "text-yellow" : "text-green"}`}
+                        >
+                          <FontAwesomeIcon
+                            icon={faCalendarCheck}
+                            className="ml-1 pr-1.5 pt-0.5 text-sm"
+                          />
+                          <div className="text-xs">Last Synced</div>
+                        </div>
+                        <div className="rounded bg-mineshaft-600 p-2 text-xs">
+                          {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
+                        </div>
+                      </div>
+                    )}
+                    {failureMessage && (
+                      <div>
+                        <div className="mb-2 flex self-start text-red">
+                          <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
+                          <div className="text-xs">Failure Reason</div>
+                        </div>
+                        <div className="break-words rounded bg-mineshaft-600 p-2 text-xs">
+                          {failureMessage}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ) : undefined
+              }
+            >
+              <div>
+                <PkiSyncStatusBadge status={syncStatus} />
+              </div>
+            </Tooltip>
+          )}
+          {!isAutoSyncEnabled && (
+            <Tooltip
+              className="text-xs"
+              content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
+            >
+              <div>
+                <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                  <FontAwesomeIcon icon={faBan} />
+                  {!syncStatus && "Auto-Sync Disabled"}
+                </Badge>
+              </div>
+            </Tooltip>
+          )}
+          {syncOption?.canImportCertificates && <PkiSyncImportStatusBadge mini pkiSync={pkiSync} />}
+          <PkiSyncRemoveStatusBadge mini pkiSync={pkiSync} />
+        </div>
+      </Td>
+      <Td>
+        <Tooltip className="max-w-sm text-center" content="Options">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <IconButton
+                ariaLabel="Options"
+                colorSchema="secondary"
+                className="w-6"
+                variant="plain"
+              >
+                <FontAwesomeIcon icon={faEllipsisV} />
+              </IconButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent sideOffset={2} align="end">
+              <DropdownMenuItem
+                icon={<FontAwesomeIcon icon={isIdCopied ? faCheck : faCopy} />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleCopyId();
+                }}
+              >
+                Copy Sync ID
+              </DropdownMenuItem>
+              <ProjectPermissionCan
+                I={ProjectPermissionPkiSyncActions.SyncCertificates}
+                a={permissionSubject}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faRotate} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onTriggerSyncCertificates(pkiSync);
+                    }}
+                    isDisabled={!isAllowed}
+                  >
+                    <Tooltip
+                      position="left"
+                      sideOffset={42}
+                      content={`Manually trigger a sync for this ${destinationName} destination.`}
+                    >
+                      <div className="flex h-full w-full items-center justify-between gap-1">
+                        <span> Trigger Sync</span>
+                        <FontAwesomeIcon
+                          className="text-bunker-300"
+                          size="sm"
+                          icon={faInfoCircle}
+                        />
+                      </div>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+              {syncOption?.canImportCertificates && (
+                <ProjectPermissionCan
+                  I={ProjectPermissionPkiSyncActions.ImportCertificates}
+                  a={permissionSubject}
+                >
+                  {(isAllowed: boolean) => (
+                    <DropdownMenuItem
+                      icon={<FontAwesomeIcon icon={faDownload} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onTriggerImportCertificates(pkiSync);
+                      }}
+                      isDisabled={!isAllowed}
+                    >
+                      <Tooltip
+                        position="left"
+                        sideOffset={42}
+                        content={`Import certificates from this ${destinationName} destination into Infisical.`}
+                      >
+                        <div className="flex h-full w-full items-center justify-between gap-1">
+                          <span>Import Certificates</span>
+                          <FontAwesomeIcon
+                            className="text-bunker-300"
+                            size="sm"
+                            icon={faInfoCircle}
+                          />
+                        </div>
+                      </Tooltip>
+                    </DropdownMenuItem>
+                  )}
+                </ProjectPermissionCan>
+              )}
+              <ProjectPermissionCan
+                I={ProjectPermissionPkiSyncActions.RemoveCertificates}
+                a={permissionSubject}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faEraser} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onTriggerRemoveCertificates(pkiSync);
+                    }}
+                    isDisabled={!isAllowed}
+                  >
+                    <Tooltip
+                      position="left"
+                      sideOffset={42}
+                      content={`Remove certificates synced by Infisical from this ${destinationName} destination.`}
+                    >
+                      <div className="flex h-full w-full items-center justify-between gap-1">
+                        <span>Remove Certificates</span>
+                        <FontAwesomeIcon
+                          className="text-bunker-300"
+                          size="sm"
+                          icon={faInfoCircle}
+                        />
+                      </div>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+              <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    isDisabled={!isAllowed}
+                    icon={<FontAwesomeIcon icon={isAutoSyncEnabled ? faToggleOff : faToggleOn} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onToggleEnable(pkiSync);
+                    }}
+                  >
+                    {isAutoSyncEnabled ? "Disable" : "Enable"} Auto-Sync
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+              <ProjectPermissionCan
+                I={ProjectPermissionPkiSyncActions.Delete}
+                a={permissionSubject}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    isDisabled={!isAllowed}
+                    icon={<FontAwesomeIcon icon={faTrash} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDelete(pkiSync);
+                    }}
+                  >
+                    Delete Sync
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Tooltip>
+      </Td>
+    </Tr>
+  );
+};
@@ -0,0 +1,71 @@
+import { ReactNode } from "react";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { Td, Tooltip } from "@app/components/v2";
+
+export type PkiSyncTableCellProps = {
+  primaryText: string;
+  secondaryText?: string;
+  infoBadge?: "primary" | "secondary";
+  additionalTooltipContent?: ReactNode;
+  primaryClassName?: string;
+  secondaryClassName?: string;
+};
+
+export const PkiSyncTableCell = ({
+  primaryText,
+  secondaryText,
+  infoBadge,
+  additionalTooltipContent,
+  primaryClassName,
+  secondaryClassName
+}: PkiSyncTableCellProps) => {
+  return (
+    <Td className="!min-w-[8rem] max-w-0">
+      <Tooltip
+        side="left"
+        className="max-w-2xl break-words"
+        content={
+          <>
+            <p className="text-sm">{primaryText}</p>
+            {secondaryText && (
+              <p className={twMerge("text-xs leading-3 text-bunker-300", secondaryClassName)}>
+                {secondaryText}
+              </p>
+            )}
+            {additionalTooltipContent}
+          </>
+        }
+      >
+        <div>
+          <p className={twMerge("truncate text-sm", primaryClassName)}>
+            {primaryText}
+            {infoBadge === "primary" && (
+              <FontAwesomeIcon
+                size="xs"
+                icon={faInfoCircle}
+                className="ml-1 inline-block text-bunker-300"
+              />
+            )}
+          </p>
+          {secondaryText && (
+            <p
+              className={twMerge("truncate text-xs leading-4 text-bunker-300", secondaryClassName)}
+            >
+              {secondaryText}
+              {infoBadge === "secondary" && (
+                <FontAwesomeIcon
+                  size="xs"
+                  icon={faInfoCircle}
+                  className="ml-1 inline-block text-bunker-300"
+                />
+              )}
+            </p>
+          )}
+        </div>
+      </Tooltip>
+    </Td>
+  );
+};
@@ -0,0 +1,479 @@
+import { useMemo, useState } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faCheck,
+  faCheckCircle,
+  faFilter,
+  faMagnifyingGlass,
+  faRotate,
+  faSearch,
+  faWarning
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  DeletePkiSyncModal,
+  PkiSyncImportCertificatesModal,
+  PkiSyncRemoveCertificatesModal
+} from "@app/components/pki-syncs";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
+  Table,
+  TableContainer,
+  TBody,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import {
+  PkiSync,
+  PkiSyncStatus,
+  TPkiSync,
+  useTriggerPkiSyncSyncCertificates,
+  useUpdatePkiSync
+} from "@app/hooks/api/pkiSyncs";
+
+import { getPkiSyncDestinationColValues } from "./helpers";
+import { PkiSyncRow } from "./PkiSyncRow";
+
+enum PkiSyncsOrderBy {
+  Destination = "destination",
+  Source = "source",
+  Name = "name",
+  Status = "status"
+}
+
+type PkiSyncFilters = {
+  destinations: PkiSync[];
+  status: PkiSyncStatus[];
+};
+
+const getSyncStatusOrderValue = (syncStatus: PkiSyncStatus | null) => {
+  switch (syncStatus) {
+    case PkiSyncStatus.Failed:
+      return 0;
+    case PkiSyncStatus.Pending:
+    case PkiSyncStatus.Running:
+      return 1;
+    case PkiSyncStatus.Succeeded:
+      return 2;
+    default:
+      return 3;
+  }
+};
+
+type Props = {
+  pkiSyncs: TPkiSync[];
+};
+
+const STATUS_ICON_MAP = {
+  [PkiSyncStatus.Succeeded]: { icon: faCheck, className: "text-green", name: "Synced" },
+  [PkiSyncStatus.Failed]: { icon: faWarning, className: "text-red", name: "Not Synced" },
+  [PkiSyncStatus.Pending]: { icon: faRotate, className: "text-yellow", name: "Syncing" },
+  [PkiSyncStatus.Running]: { icon: faRotate, className: "text-yellow", name: "Syncing" }
+};
+
+export const PkiSyncsTable = ({ pkiSyncs }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "deleteSync",
+    "importCertificates",
+    "removeCertificates"
+  ] as const);
+  const triggerSync = useTriggerPkiSyncSyncCertificates();
+  const updateSync = useUpdatePkiSync();
+
+  const [filters, setFilters] = useState<PkiSyncFilters>({
+    destinations: [],
+    status: []
+  });
+
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    toggleOrderDirection,
+    orderBy,
+    setOrderDirection,
+    setOrderBy
+  } = usePagination<PkiSyncsOrderBy>(PkiSyncsOrderBy.Name, {
+    initPerPage: getUserTablePreference("pkiSyncTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("pkiSyncTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const filteredPkiSyncs = useMemo(
+    () =>
+      pkiSyncs
+        .filter((pkiSync) => {
+          const { destination, name, syncStatus } = pkiSync;
+
+          if (filters.destinations.length && !filters.destinations.includes(destination))
+            return false;
+
+          if (filters.status.length && (!syncStatus || !filters.status.includes(syncStatus))) {
+            return false;
+          }
+
+          const searchValue = search.trim().toLowerCase();
+
+          const destinationValues = getPkiSyncDestinationColValues(pkiSync);
+
+          return (
+            (PKI_SYNC_MAP[destination]?.name || "Unknown Service")
+              .toLowerCase()
+              .includes(searchValue) ||
+            name.toLowerCase().includes(searchValue) ||
+            (pkiSync.appConnectionName &&
+              pkiSync.appConnectionName.toLowerCase().includes(searchValue)) ||
+            destinationValues.primaryText.toLowerCase().includes(searchValue) ||
+            destinationValues.secondaryText?.toLowerCase().includes(searchValue)
+          );
+        })
+        .sort((a, b) => {
+          const [syncOne, syncTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+          switch (orderBy) {
+            case PkiSyncsOrderBy.Source:
+              return (syncOne.subscriber?.name ?? syncOne.subscriberId ?? "")
+                .toLowerCase()
+                .localeCompare(
+                  syncTwo.subscriber?.name?.toLowerCase() ??
+                    syncTwo.subscriberId?.toLowerCase() ??
+                    ""
+                );
+            case PkiSyncsOrderBy.Destination:
+              return getPkiSyncDestinationColValues(syncOne)
+                .primaryText.toLowerCase()
+                .localeCompare(getPkiSyncDestinationColValues(syncTwo).primaryText.toLowerCase());
+            case PkiSyncsOrderBy.Status:
+              if (!syncOne.syncStatus && syncTwo.syncStatus) return 1;
+              if (syncOne.syncStatus && !syncTwo.syncStatus) return -1;
+              if (!syncOne.syncStatus && !syncTwo.syncStatus) return 0;
+
+              return (
+                getSyncStatusOrderValue(syncOne.syncStatus) -
+                getSyncStatusOrderValue(syncTwo.syncStatus)
+              );
+            case PkiSyncsOrderBy.Name:
+            default:
+              return syncOne.name.toLowerCase().localeCompare(syncTwo.name.toLowerCase());
+          }
+        }),
+    [pkiSyncs, orderDirection, search, orderBy, filters]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredPkiSyncs.length,
+    offset,
+    setPage
+  });
+
+  const handleSort = (column: PkiSyncsOrderBy) => {
+    if (column === orderBy) {
+      toggleOrderDirection();
+      return;
+    }
+
+    setOrderBy(column);
+    setOrderDirection(OrderByDirection.ASC);
+  };
+
+  const getClassName = (col: PkiSyncsOrderBy) =>
+    twMerge("ml-2", orderBy === col ? "" : "opacity-30");
+
+  const getColSortIcon = (col: PkiSyncsOrderBy) =>
+    orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
+
+  const isTableFiltered = Boolean(filters.destinations.length || filters.status.length);
+
+  const handleDelete = (pkiSync: TPkiSync) => handlePopUpOpen("deleteSync", pkiSync);
+
+  const handleTriggerImportCertificates = (pkiSync: TPkiSync) =>
+    handlePopUpOpen("importCertificates", pkiSync);
+
+  const handleTriggerRemoveCertificates = (pkiSync: TPkiSync) =>
+    handlePopUpOpen("removeCertificates", pkiSync);
+
+  const handleToggleEnableSync = async (pkiSync: TPkiSync) => {
+    const destinationName = PKI_SYNC_MAP[pkiSync.destination].name;
+
+    const isAutoSyncEnabled = !pkiSync.isAutoSyncEnabled;
+
+    try {
+      await updateSync.mutateAsync({
+        syncId: pkiSync.id,
+        projectId: pkiSync.projectId,
+        destination: pkiSync.destination,
+        isAutoSyncEnabled
+      });
+
+      createNotification({
+        text: `Successfully ${isAutoSyncEnabled ? "enabled" : "disabled"} auto-sync for ${destinationName} Sync`,
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: `Failed to ${isAutoSyncEnabled ? "enable" : "disable"} auto-sync for ${destinationName} Sync`,
+        type: "error"
+      });
+    }
+  };
+
+  const handleTriggerSync = async (pkiSync: TPkiSync) => {
+    const destinationName = PKI_SYNC_MAP[pkiSync.destination].name;
+
+    try {
+      await triggerSync.mutateAsync({
+        syncId: pkiSync.id,
+        destination: pkiSync.destination,
+        projectId: pkiSync.projectId
+      });
+
+      createNotification({
+        text: `Successfully triggered ${destinationName} Sync`,
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: `Failed to trigger ${destinationName} Sync`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex gap-2">
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search PKI syncs..."
+          className="flex-1"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              ariaLabel="Filter PKI syncs"
+              variant="plain"
+              size="sm"
+              className={twMerge(
+                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                isTableFiltered && "border-primary/50 text-primary"
+              )}
+            >
+              <FontAwesomeIcon icon={faFilter} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
+            <DropdownMenuLabel>Status</DropdownMenuLabel>
+            {[PkiSyncStatus.Running, PkiSyncStatus.Succeeded, PkiSyncStatus.Failed].map(
+              (status) => (
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setFilters((prev) => ({
+                      ...prev,
+                      status: prev.status.includes(status)
+                        ? prev.status.filter((s) => s !== status)
+                        : [...prev.status, status]
+                    }));
+                  }}
+                  key={status}
+                  icon={
+                    filters.status.includes(status) && (
+                      <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                    )
+                  }
+                  iconPos="right"
+                >
+                  <div className="flex items-center gap-2">
+                    <FontAwesomeIcon
+                      icon={STATUS_ICON_MAP[status].icon}
+                      className={STATUS_ICON_MAP[status].className}
+                    />
+                    <span className="capitalize">{STATUS_ICON_MAP[status].name}</span>
+                  </div>
+                </DropdownMenuItem>
+              )
+            )}
+            <DropdownMenuLabel>Service</DropdownMenuLabel>
+            {pkiSyncs.length ? (
+              [...new Set(pkiSyncs.map(({ destination }) => destination))].map((destination) => {
+                const { name, image } = PKI_SYNC_MAP[destination];
+
+                return (
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setFilters((prev) => ({
+                        ...prev,
+                        destinations: prev.destinations.includes(destination)
+                          ? prev.destinations.filter((a) => a !== destination)
+                          : [...prev.destinations, destination]
+                      }));
+                    }}
+                    key={destination}
+                    icon={
+                      filters.destinations.includes(destination) && (
+                        <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                      )
+                    }
+                    iconPos="right"
+                  >
+                    <div className="flex items-center gap-2">
+                      <img
+                        alt={`${name} integration`}
+                        src={`/images/integrations/${image}`}
+                        className="h-4 w-4"
+                      />
+                      <span>{name}</span>
+                    </div>
+                  </DropdownMenuItem>
+                );
+              })
+            ) : (
+              <DropdownMenuItem isDisabled>No PKI Syncs Configured</DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th className="w-2" />
+              <Th className="w-1/4">
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(PkiSyncsOrderBy.Name)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(PkiSyncsOrderBy.Name)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(PkiSyncsOrderBy.Name)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Source
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(PkiSyncsOrderBy.Source)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(PkiSyncsOrderBy.Source)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(PkiSyncsOrderBy.Source)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Destination
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(PkiSyncsOrderBy.Destination)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(PkiSyncsOrderBy.Destination)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(PkiSyncsOrderBy.Destination)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th className="min-w-[10.5rem]">
+                <div className="flex items-center">
+                  Status
+                  <IconButton
+                    variant="plain"
+                    className={getClassName(PkiSyncsOrderBy.Status)}
+                    ariaLabel="sort"
+                    onClick={() => handleSort(PkiSyncsOrderBy.Status)}
+                  >
+                    <FontAwesomeIcon icon={getColSortIcon(PkiSyncsOrderBy.Status)} />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {filteredPkiSyncs.slice(offset, perPage * page).map((pkiSync) => (
+              <PkiSyncRow
+                key={pkiSync.id}
+                pkiSync={pkiSync}
+                onDelete={handleDelete}
+                onTriggerSyncCertificates={handleTriggerSync}
+                onTriggerImportCertificates={handleTriggerImportCertificates}
+                onTriggerRemoveCertificates={handleTriggerRemoveCertificates}
+                onToggleEnable={handleToggleEnableSync}
+              />
+            ))}
+          </TBody>
+        </Table>
+        {Boolean(filteredPkiSyncs.length) && (
+          <Pagination
+            count={filteredPkiSyncs.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={handlePerPageChange}
+          />
+        )}
+        {!filteredPkiSyncs?.length && (
+          <EmptyState
+            title={
+              pkiSyncs.length ? "No syncs match search..." : "This project has no syncs configured"
+            }
+            icon={pkiSyncs.length ? faSearch : faRotate}
+          />
+        )}
+      </TableContainer>
+      <DeletePkiSyncModal
+        onOpenChange={(isOpen) => handlePopUpToggle("deleteSync", isOpen)}
+        isOpen={popUp.deleteSync.isOpen}
+        pkiSync={popUp.deleteSync.data}
+      />
+      {popUp.importCertificates.data && (
+        <PkiSyncImportCertificatesModal
+          onOpenChange={(isOpen) => handlePopUpToggle("importCertificates", isOpen)}
+          isOpen={popUp.importCertificates.isOpen}
+          pkiSync={popUp.importCertificates.data}
+        />
+      )}
+      <PkiSyncRemoveCertificatesModal
+        onOpenChange={(isOpen) => handlePopUpToggle("removeCertificates", isOpen)}
+        isOpen={popUp.removeCertificates.isOpen}
+        pkiSync={popUp.removeCertificates.data}
+      />
+    </div>
+  );
+};
@@ -0,0 +1,13 @@
+import { TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+export const getPkiSyncDestinationColValues = (pkiSync: TPkiSync) => {
+  const { destination } = pkiSync;
+
+  switch (destination) {
+    default:
+      return {
+        primaryText: pkiSync.name,
+        secondaryText: pkiSync.appConnectionName || "Unknown Connection"
+      };
+  }
+};
@@ -0,0 +1 @@
+export { PkiSyncsTable } from "./PkiSyncsTable";
@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { CreatePkiSyncModal } from "@app/components/pki-syncs";
+import { Button, Spinner } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { ProjectPermissionSub, useProject } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { usePopUp } from "@app/hooks";
+import { useListPkiSyncs } from "@app/hooks/api/pkiSyncs";
+
+import { PkiSyncsTable } from "./PkiSyncTable";
+
+export const PkiSyncsTab = () => {
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addSync"] as const);
+
+  const { addSync, ...search } = useSearch({
+    from: ROUTE_PATHS.CertManager.IntegrationsListPage.id
+  });
+
+  const navigate = useNavigate();
+
+  const { currentProject } = useProject();
+
+  const memoizedSearch = useMemo(() => search, [search]);
+
+  const navigateToBase = useCallback(() => {
+    navigate({
+      to: ROUTE_PATHS.CertManager.IntegrationsListPage.path,
+      params: {
+        projectId: currentProject?.id
+      },
+      search: memoizedSearch
+    });
+  }, [navigate, currentProject?.id, memoizedSearch]);
+
+  useEffect(() => {
+    if (!addSync) return;
+
+    handlePopUpOpen("addSync", addSync);
+    navigateToBase();
+  }, [addSync, handlePopUpOpen, navigateToBase]);
+
+  const { data: pkiSyncs = [], isPending: isPkiSyncsPending } = useListPkiSyncs(
+    currentProject?.id || "",
+    {
+      refetchInterval: 30000
+    }
+  );
+
+  if (isPkiSyncsPending)
+    return (
+      <div className="flex h-[60vh] flex-col items-center justify-center gap-2">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <div className="flex items-start gap-1">
+              <p className="text-xl font-semibold text-mineshaft-100">Certificate Syncs</p>
+              <a
+                href="https://infisical.com/docs/integrations/pki-syncs/overview"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="ml-1 mt-[0.32rem] 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.5" />
+                  <span>Docs</span>
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="mb-[0.07rem] ml-1.5 text-[10px]"
+                  />
+                </div>
+              </a>
+            </div>
+            <p className="text-sm text-bunker-300">
+              Use App Connections to sync certificates to third-party services.
+            </p>
+          </div>
+          <ProjectPermissionCan
+            I={ProjectPermissionPkiSyncActions.Create}
+            a={ProjectPermissionSub.PkiSyncs}
+          >
+            {(isAllowed) => (
+              <Button
+                colorSchema="secondary"
+                type="button"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => handlePopUpOpen("addSync")}
+                isDisabled={!isAllowed}
+              >
+                Add Sync
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
+        <PkiSyncsTable pkiSyncs={pkiSyncs} />
+      </div>
+      <CreatePkiSyncModal
+        selectSync={popUp.addSync.data}
+        isOpen={popUp.addSync.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("addSync", isOpen)}
+      />
+    </>
+  );
+};
@@ -0,0 +1 @@
+export { PkiSyncsTab } from "./PkiSyncsTab";
@@ -0,0 +1 @@
+export { PkiSyncsTab } from "./PkiSyncsTab";
@@ -0,0 +1 @@
+export { IntegrationsListPage } from "./IntegrationsListPage";
@@ -0,0 +1,30 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { PkiSync } from "@app/hooks/api/pkiSyncs";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
+import { IntegrationsListPage } from "./IntegrationsListPage";
+
+const IntegrationsListPageQuerySchema = z.object({
+  selectedTab: z.nativeEnum(IntegrationsListPageTabs).optional(),
+  addSync: z.nativeEnum(PkiSync).optional()
+});
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/integrations/"
+)({
+  component: IntegrationsListPage,
+  validateSearch: zodValidator(IntegrationsListPageQuerySchema),
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations"
+        }
+      ]
+    };
+  }
+});
@@ -0,0 +1,146 @@
+import { Helmet } from "react-helmet";
+import { faBan, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useParams } from "@tanstack/react-router";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { EditPkiSyncModal } from "@app/components/pki-syncs";
+import { PkiSyncEditFields } from "@app/components/pki-syncs/types";
+import { Button, ContentLoader, EmptyState } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
+import { usePopUp } from "@app/hooks";
+import { useGetPkiSync } from "@app/hooks/api/pkiSyncs";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
+import {
+  PkiSyncActionTriggers,
+  PkiSyncAuditLogsSection,
+  PkiSyncDestinationSection,
+  PkiSyncDetailsSection,
+  PkiSyncOptionsSection,
+  PkiSyncSourceSection
+} from "./components";
+
+const PageContent = () => {
+  const navigate = useNavigate();
+  const { syncId, projectId } = useParams({
+    from: ROUTE_PATHS.CertManager.PkiSyncDetailsByIDPage.id
+  });
+
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["editSync"] as const);
+
+  const { data: pkiSync, isPending } = useGetPkiSync(
+    { syncId, projectId },
+    {
+      refetchInterval: 30000
+    }
+  );
+
+  if (isPending) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <ContentLoader />
+      </div>
+    );
+  }
+
+  if (!pkiSync) {
+    return (
+      <div className="flex h-full w-full items-center justify-center px-20">
+        <EmptyState
+          className="max-w-2xl rounded-md text-center"
+          icon={faBan}
+          title={`Could not find PKI Sync with ID ${syncId}`}
+        />
+      </div>
+    );
+  }
+
+  const destinationDetails = PKI_SYNC_MAP[pkiSync.destination];
+
+  const handleEditDetails = () => handlePopUpOpen("editSync", PkiSyncEditFields.Details);
+  const handleEditSource = () => handlePopUpOpen("editSync", PkiSyncEditFields.Source);
+  const handleEditOptions = () => handlePopUpOpen("editSync", PkiSyncEditFields.Options);
+  const handleEditDestination = () => handlePopUpOpen("editSync", PkiSyncEditFields.Destination);
+
+  return (
+    <>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <Button
+            variant="link"
+            type="submit"
+            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+            onClick={() => {
+              navigate({
+                to: ROUTE_PATHS.CertManager.IntegrationsListPage.path,
+                params: {
+                  projectId
+                },
+                search: {
+                  selectedTab: IntegrationsListPageTabs.PkiSyncs
+                }
+              });
+            }}
+          >
+            PKI Syncs
+          </Button>
+          <div className="mb-6 flex w-full items-center gap-3">
+            <img
+              alt={`${destinationDetails.name} sync`}
+              src={`/images/integrations/${destinationDetails.image}`}
+              className="ml-1 mt-3 w-16"
+            />
+            <div>
+              <p className="text-3xl font-semibold text-white">{pkiSync.name}</p>
+              <p className="leading-3 text-bunker-300">{destinationDetails.name} PKI Sync</p>
+            </div>
+            <PkiSyncActionTriggers pkiSync={pkiSync} />
+          </div>
+          <div className="flex justify-center">
+            <div className="mr-4 flex w-72 flex-col gap-4">
+              <PkiSyncDetailsSection pkiSync={pkiSync} onEditDetails={handleEditDetails} />
+              <PkiSyncSourceSection pkiSync={pkiSync} onEditSource={handleEditSource} />
+              <PkiSyncOptionsSection pkiSync={pkiSync} onEditOptions={handleEditOptions} />
+            </div>
+            <div className="flex flex-1 flex-col gap-4">
+              <PkiSyncDestinationSection
+                pkiSync={pkiSync}
+                onEditDestination={handleEditDestination}
+              />
+              <PkiSyncAuditLogsSection pkiSync={pkiSync} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <EditPkiSyncModal
+        isOpen={popUp.editSync.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("editSync", isOpen)}
+        fields={popUp.editSync.data}
+        pkiSync={pkiSync}
+      />
+    </>
+  );
+};
+
+export const PkiSyncDetailsByIDPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>PKI Sync | Infisical</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Helmet>
+      <ProjectPermissionCan
+        renderGuardBanner
+        passThrough={false}
+        I={ProjectPermissionPkiSyncActions.Read}
+        a={ProjectPermissionSub.PkiSyncs}
+      >
+        <PageContent />
+      </ProjectPermissionCan>
+    </>
+  );
+};
@@ -0,0 +1,321 @@
+import { useCallback } from "react";
+import { subject } from "@casl/ability";
+import {
+  faBan,
+  faCheck,
+  faCopy,
+  faDownload,
+  faEllipsisV,
+  faEraser,
+  faInfoCircle,
+  faRotate,
+  faToggleOff,
+  faToggleOn,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DeletePkiSyncModal,
+  PkiSyncImportCertificatesModal,
+  PkiSyncImportStatusBadge,
+  PkiSyncRemoveCertificatesModal,
+  PkiSyncRemoveStatusBadge
+} from "@app/components/pki-syncs";
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton,
+  Tooltip
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
+import { usePopUp, useToggle } from "@app/hooks";
+import {
+  TPkiSync,
+  usePkiSyncOption,
+  useTriggerPkiSyncSyncCertificates,
+  useUpdatePkiSync
+} from "@app/hooks/api/pkiSyncs";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
+type Props = {
+  pkiSync: TPkiSync;
+};
+
+export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
+  const { destination, subscriberId, projectId, id } = pkiSync;
+
+  const navigate = useNavigate();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "importCertificates",
+    "removeCertificates",
+    "deleteSync"
+  ] as const);
+
+  const [isIdCopied, setIsIdCopied] = useToggle(false);
+
+  // API mutations
+  const triggerSyncMutation = useTriggerPkiSyncSyncCertificates();
+  const updatePkiSyncMutation = useUpdatePkiSync();
+
+  const { syncOption } = usePkiSyncOption(destination);
+
+  const destinationName = PKI_SYNC_MAP[destination].name;
+
+  const handleCopyId = useCallback(() => {
+    setIsIdCopied.on();
+    navigator.clipboard.writeText(pkiSync.id);
+
+    createNotification({
+      text: "PKI Sync ID copied to clipboard",
+      type: "info"
+    });
+
+    const timer = setTimeout(() => setIsIdCopied.off(), 2000);
+    return () => clearTimeout(timer);
+  }, [pkiSync.id, setIsIdCopied]);
+
+  const handleTriggerSync = useCallback(async () => {
+    try {
+      await triggerSyncMutation.mutateAsync({
+        syncId: id,
+        destination,
+        projectId
+      });
+      createNotification({
+        text: "PKI sync job queued successfully",
+        type: "success"
+      });
+    } catch (error) {
+      console.error("Failed to trigger sync:", error);
+      createNotification({
+        text: "Failed to trigger PKI sync",
+        type: "error"
+      });
+    }
+  }, [triggerSyncMutation, id, destination, projectId]);
+
+  const handleToggleAutoSync = useCallback(async () => {
+    try {
+      await updatePkiSyncMutation.mutateAsync({
+        syncId: id,
+        projectId,
+        destination,
+        isAutoSyncEnabled: !pkiSync.isAutoSyncEnabled
+      });
+      createNotification({
+        text: `Auto-sync ${pkiSync.isAutoSyncEnabled ? "disabled" : "enabled"} successfully`,
+        type: "success"
+      });
+    } catch (error) {
+      console.error("Failed to toggle auto-sync:", error);
+      createNotification({
+        text: "Failed to toggle auto-sync",
+        type: "error"
+      });
+    }
+  }, [updatePkiSyncMutation, id, projectId, pkiSync.isAutoSyncEnabled]);
+
+  const permissionSubject = subject(ProjectPermissionSub.PkiSyncs, {
+    subscriberId: subscriberId || ""
+  });
+
+  return (
+    <>
+      <div className="ml-auto mt-4 flex flex-wrap items-center justify-end gap-2">
+        {syncOption?.canImportCertificates && <PkiSyncImportStatusBadge pkiSync={pkiSync} />}
+        <PkiSyncRemoveStatusBadge pkiSync={pkiSync} />
+        {pkiSync.isAutoSyncEnabled ? (
+          <Badge
+            variant="success"
+            className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
+          >
+            <FontAwesomeIcon icon={faRotate} />
+            <span>Auto-Sync Enabled</span>
+          </Badge>
+        ) : (
+          <Tooltip
+            className="text-xs"
+            content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
+          >
+            <div>
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                <FontAwesomeIcon icon={faBan} />
+                <span>Auto-Sync Disabled</span>
+              </Badge>
+            </div>
+          </Tooltip>
+        )}
+        <div>
+          <ProjectPermissionCan
+            I={ProjectPermissionPkiSyncActions.SyncCertificates}
+            a={permissionSubject}
+          >
+            {(isAllowed: boolean) => (
+              <Button
+                variant="outline_bg"
+                leftIcon={<FontAwesomeIcon icon={faRotate} />}
+                className="h-9 rounded-r-none bg-mineshaft-500"
+                isDisabled={!isAllowed || triggerSyncMutation.isPending}
+                isLoading={triggerSyncMutation.isPending}
+                onClick={handleTriggerSync}
+              >
+                Trigger Sync
+              </Button>
+            )}
+          </ProjectPermissionCan>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <IconButton
+                ariaLabel="add-folder-or-import"
+                variant="outline_bg"
+                className="h-9 w-10 rounded-l-none border-l-2 border-mineshaft border-l-mineshaft-700 bg-mineshaft-500"
+              >
+                <FontAwesomeIcon icon={faEllipsisV} />
+              </IconButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                icon={<FontAwesomeIcon icon={isIdCopied ? faCheck : faCopy} />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleCopyId();
+                }}
+              >
+                Copy Sync ID
+              </DropdownMenuItem>
+
+              {syncOption?.canImportCertificates && (
+                <ProjectPermissionCan
+                  I={ProjectPermissionPkiSyncActions.ImportCertificates}
+                  a={permissionSubject}
+                >
+                  {(isAllowed: boolean) => (
+                    <DropdownMenuItem
+                      icon={<FontAwesomeIcon icon={faDownload} />}
+                      onClick={() => handlePopUpOpen("importCertificates")}
+                      isDisabled={!isAllowed}
+                    >
+                      <Tooltip
+                        position="left"
+                        sideOffset={42}
+                        content={`Import certificates from this ${destinationName} destination into Infisical.`}
+                      >
+                        <div className="flex h-full w-full items-center justify-between gap-1">
+                          <span>Import Certificates</span>
+                          <FontAwesomeIcon
+                            className="text-bunker-300"
+                            size="sm"
+                            icon={faInfoCircle}
+                          />
+                        </div>
+                      </Tooltip>
+                    </DropdownMenuItem>
+                  )}
+                </ProjectPermissionCan>
+              )}
+
+              <ProjectPermissionCan
+                I={ProjectPermissionPkiSyncActions.RemoveCertificates}
+                a={permissionSubject}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faEraser} />}
+                    onClick={() => handlePopUpOpen("removeCertificates")}
+                    isDisabled={!isAllowed}
+                  >
+                    <Tooltip
+                      position="left"
+                      sideOffset={42}
+                      content={`Remove certificates synced by Infisical from this ${destinationName} destination.`}
+                    >
+                      <div className="flex h-full w-full items-center justify-between gap-1">
+                        <span>Remove Certificates</span>
+                        <FontAwesomeIcon
+                          className="text-bunker-300"
+                          size="sm"
+                          icon={faInfoCircle}
+                        />
+                      </div>
+                    </Tooltip>
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+
+              <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    isDisabled={!isAllowed || updatePkiSyncMutation.isPending}
+                    icon={
+                      <FontAwesomeIcon
+                        icon={pkiSync.isAutoSyncEnabled ? faToggleOff : faToggleOn}
+                      />
+                    }
+                    onClick={handleToggleAutoSync}
+                  >
+                    {pkiSync.isAutoSyncEnabled ? "Disable" : "Enable"} Auto-Sync
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+
+              <ProjectPermissionCan
+                I={ProjectPermissionPkiSyncActions.Delete}
+                a={permissionSubject}
+              >
+                {(isAllowed: boolean) => (
+                  <DropdownMenuItem
+                    isDisabled={!isAllowed}
+                    icon={<FontAwesomeIcon icon={faTrash} />}
+                    onClick={() => handlePopUpOpen("deleteSync")}
+                  >
+                    Delete Sync
+                  </DropdownMenuItem>
+                )}
+              </ProjectPermissionCan>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {syncOption?.canImportCertificates && (
+        <PkiSyncImportCertificatesModal
+          onOpenChange={(isOpen) => handlePopUpToggle("importCertificates", isOpen)}
+          isOpen={popUp.importCertificates.isOpen}
+          pkiSync={pkiSync}
+        />
+      )}
+      <PkiSyncRemoveCertificatesModal
+        onOpenChange={(isOpen) => handlePopUpToggle("removeCertificates", isOpen)}
+        isOpen={popUp.removeCertificates.isOpen}
+        pkiSync={pkiSync}
+      />
+      <DeletePkiSyncModal
+        onOpenChange={(isOpen) => handlePopUpToggle("deleteSync", isOpen)}
+        isOpen={popUp.deleteSync.isOpen}
+        pkiSync={pkiSync}
+        onComplete={() =>
+          navigate({
+            to: ROUTE_PATHS.CertManager.IntegrationsListPage.path,
+            params: {
+              projectId
+            },
+            search: {
+              selectedTab: IntegrationsListPageTabs.PkiSyncs
+            }
+          })
+        }
+      />
+    </>
+  );
+};
@@ -0,0 +1,78 @@
+import { faFingerprint } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "@tanstack/react-router";
+
+import { useProject, useSubscription } from "@app/context";
+import { EventType } from "@app/hooks/api/auditLogs/enums";
+import { TPkiSync } from "@app/hooks/api/pkiSyncs";
+import { LogsSection } from "@app/pages/organization/AuditLogsPage/components/LogsSection";
+
+const PKI_SYNC_EVENTS = [
+  EventType.PKI_SYNC_SYNC_CERTIFICATES,
+  EventType.PKI_SYNC_IMPORT_CERTIFICATES,
+  EventType.PKI_SYNC_REMOVE_CERTIFICATES
+];
+
+type Props = {
+  pkiSync: TPkiSync;
+};
+
+export const PkiSyncAuditLogsSection = ({ pkiSync }: Props) => {
+  const { subscription } = useSubscription();
+  const { currentProject } = useProject();
+
+  const auditLogsRetentionDays = subscription?.auditLogsRetentionDays ?? 30;
+
+  return (
+    <div className="flex max-h-full w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+        <h3 className="font-semibold text-mineshaft-100">Sync Logs</h3>
+        {subscription.auditLogs && (
+          <p className="text-xs text-bunker-300">
+            Displaying audit logs from the last {Math.min(auditLogsRetentionDays, 60)} days
+          </p>
+        )}
+      </div>
+      {subscription.auditLogs ? (
+        <LogsSection
+          refetchInterval={4000}
+          showFilters={false}
+          project={currentProject}
+          presets={{
+            eventMetadata: { syncId: pkiSync.id },
+            startDate: new Date(
+              new Date().setDate(new Date().getDate() - Math.min(auditLogsRetentionDays, 60))
+            ),
+            eventType: PKI_SYNC_EVENTS
+          }}
+        />
+      ) : (
+        <div className="flex h-full items-center justify-center rounded-lg bg-mineshaft-800 text-sm text-mineshaft-200">
+          <div className="flex flex-col items-center gap-4 py-20">
+            <FontAwesomeIcon size="2x" icon={faFingerprint} />
+            <p>
+              Please{" "}
+              {subscription && subscription.slug !== null ? (
+                <Link to="/organization/billing" target="_blank" rel="noopener noreferrer">
+                  <span className="cursor-pointer underline transition-all hover:text-white">
+                    upgrade your subscription
+                  </span>
+                </Link>
+              ) : (
+                <a
+                  href="https://infisical.com/scheduledemo"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="cursor-pointer underline transition-all hover:text-white"
+                >
+                  upgrade your subscription
+                </a>
+              )}{" "}
+              to view sync logs.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,73 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { ReactNode } from "react";
+import { subject } from "@casl/ability";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { IconButton } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { PKI_SYNC_MAP } from "@app/helpers/pkiSyncs";
+import { PkiSync, TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+import { AzureKeyVaultPkiSyncDestinationSection } from "./PkiSyncDestinationSection/index";
+
+const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div>
+    <label className="text-sm text-bunker-300">{label}</label>
+    <div className="mt-1">{children}</div>
+  </div>
+);
+
+type Props = {
+  pkiSync: TPkiSync;
+  onEditDestination: VoidFunction;
+};
+
+export const PkiSyncDestinationSection = ({ pkiSync, onEditDestination }: Props) => {
+  const { destination, subscriberId } = pkiSync;
+
+  const destinationDetails = PKI_SYNC_MAP[destination];
+
+  let DestinationComponents: ReactNode;
+  switch (destination) {
+    case PkiSync.AzureKeyVault:
+      DestinationComponents = <AzureKeyVaultPkiSyncDestinationSection pkiSync={pkiSync} />;
+      break;
+    default:
+      // For future destinations, return null (no additional fields to show)
+      DestinationComponents = null;
+  }
+
+  const permissionSubject = subject(ProjectPermissionSub.PkiSyncs, {
+    subscriberId: subscriberId || ""
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+        <h3 className="font-semibold text-mineshaft-100">Destination Configuration</h3>
+        <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
+          {(isAllowed) => (
+            <IconButton
+              variant="plain"
+              colorSchema="secondary"
+              isDisabled={!isAllowed}
+              ariaLabel="Edit destination"
+              onClick={onEditDestination}
+            >
+              <FontAwesomeIcon icon={faEdit} />
+            </IconButton>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <div className="flex w-full flex-wrap gap-8">
+        <GenericFieldLabel label={`${destinationDetails.name} Connection`}>
+          {pkiSync.appConnectionName || "Default Connection"}
+        </GenericFieldLabel>
+        {DestinationComponents}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,21 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { TAzureKeyVaultPkiSync } from "@app/hooks/api/pkiSyncs/types/azure-key-vault-sync";
+
+const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div>
+    <label className="text-sm text-bunker-300">{label}</label>
+    <div className="mt-1">{children}</div>
+  </div>
+);
+
+type Props = {
+  pkiSync: TAzureKeyVaultPkiSync;
+};
+
+export const AzureKeyVaultPkiSyncDestinationSection = ({ pkiSync }: Props) => {
+  return (
+    <GenericFieldLabel label="Key Vault URL">
+      {pkiSync.destinationConfig.vaultBaseUrl}
+    </GenericFieldLabel>
+  );
+};
@@ -0,0 +1 @@
+export { AzureKeyVaultPkiSyncDestinationSection } from "./AzureKeyVaultPkiSyncDestinationSection";
@@ -0,0 +1,101 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { useMemo } from "react";
+import { subject } from "@casl/ability";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { PkiSyncStatusBadge } from "@app/components/pki-syncs";
+import { IconButton } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { PkiSyncStatus, TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+const GenericFieldLabel = ({
+  label,
+  children,
+  labelClassName
+}: {
+  label: string;
+  children: React.ReactNode;
+  labelClassName?: string;
+}) => (
+  <div>
+    <label className={`text-sm text-bunker-300 ${labelClassName || ""}`}>{label}</label>
+    <div className="mt-1">{children}</div>
+  </div>
+);
+
+type Props = {
+  pkiSync: TPkiSync;
+  onEditDetails: VoidFunction;
+};
+
+export const PkiSyncDetailsSection = ({ pkiSync, onEditDetails }: Props) => {
+  const { syncStatus, lastSyncMessage, lastSyncedAt, name, description, subscriberId, subscriber } =
+    pkiSync;
+
+  const failureMessage = useMemo(() => {
+    if (syncStatus === PkiSyncStatus.Failed) {
+      if (lastSyncMessage)
+        try {
+          return JSON.stringify(JSON.parse(lastSyncMessage), null, 2);
+        } catch {
+          return lastSyncMessage;
+        }
+
+      return "An Unknown Error Occurred.";
+    }
+    return null;
+  }, [syncStatus, lastSyncMessage]);
+
+  const permissionSubject = subject(ProjectPermissionSub.PkiSyncs, {
+    subscriberId: subscriber?.id || subscriberId || ""
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+        <h3 className="font-semibold text-mineshaft-100">Details</h3>
+        <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
+          {(isAllowed) => (
+            <IconButton
+              variant="plain"
+              colorSchema="secondary"
+              isDisabled={!isAllowed}
+              ariaLabel="Edit sync details"
+              onClick={onEditDetails}
+            >
+              <FontAwesomeIcon icon={faEdit} />
+            </IconButton>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <div>
+        <div className="space-y-3">
+          <GenericFieldLabel label="Name">{name}</GenericFieldLabel>
+          <GenericFieldLabel label="Description">{description || "None"}</GenericFieldLabel>
+          <GenericFieldLabel label="Source Subscriber">
+            {subscriber ? subscriber.name : "Subscriber deleted"}
+          </GenericFieldLabel>
+          {syncStatus && (
+            <GenericFieldLabel label="Status">
+              <PkiSyncStatusBadge status={syncStatus} />
+            </GenericFieldLabel>
+          )}
+          {lastSyncedAt && (
+            <GenericFieldLabel label="Last Synced">
+              {format(new Date(lastSyncedAt), "yyyy-MM-dd, h:mm aaa")}
+            </GenericFieldLabel>
+          )}
+          {syncStatus === PkiSyncStatus.Failed && failureMessage && (
+            <GenericFieldLabel labelClassName="text-red" label="Last Sync Error">
+              <p className="break-words rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</p>
+            </GenericFieldLabel>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,64 @@
+import { subject } from "@casl/ability";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { Badge, IconButton } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+type Props = {
+  pkiSync: TPkiSync;
+  onEditOptions: VoidFunction;
+};
+
+export const PkiSyncOptionsSection = ({ pkiSync, onEditOptions }: Props) => {
+  const {
+    syncOptions: { canRemoveCertificates }
+  } = pkiSync;
+
+  const permissionSubject = subject(ProjectPermissionSub.PkiSyncs, {
+    subscriberId: pkiSync.subscriberId || ""
+  });
+
+  return (
+    <div>
+      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+          <h3 className="font-semibold text-mineshaft-100">Sync Options</h3>
+          <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
+            {(isAllowed) => (
+              <IconButton
+                variant="plain"
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+                ariaLabel="Edit sync options"
+                onClick={onEditOptions}
+              >
+                <FontAwesomeIcon icon={faEdit} />
+              </IconButton>
+            )}
+          </ProjectPermissionCan>
+        </div>
+        <div>
+          <div className="space-y-3">
+            {/* Hidden for now - Import certificates functionality disabled
+            <GenericFieldLabel label="Certificate Import">
+              <Badge variant={canImportCertificates ? "success" : "danger"}>
+                {canImportCertificates ? "Enabled" : "Disabled"}
+              </Badge>
+            </GenericFieldLabel>
+            */}
+            <GenericFieldLabel label="Certificate Removal">
+              <Badge variant={canRemoveCertificates ? "success" : "danger"}>
+                {canRemoveCertificates ? "Enabled" : "Disabled"}
+              </Badge>
+            </GenericFieldLabel>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { PkiSyncOptionsSection } from "./PkiSyncOptionsSection";
@@ -0,0 +1,75 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { subject } from "@casl/ability";
+import { faEdit, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Badge, IconButton, Tooltip } from "@app/components/v2";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div>
+    <label className="text-sm text-bunker-300">{label}</label>
+    <div className="mt-1">{children}</div>
+  </div>
+);
+
+type Props = {
+  pkiSync: TPkiSync;
+  onEditSource: VoidFunction;
+};
+
+export const PkiSyncSourceSection = ({ pkiSync, onEditSource }: Props) => {
+  const { subscriberId, subscriber } = pkiSync;
+
+  const permissionSubject = subject(ProjectPermissionSub.PkiSyncs, {
+    subscriberId: subscriberId || ""
+  });
+
+  return (
+    <div>
+      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+          <h3 className="font-semibold text-mineshaft-100">Source</h3>
+          <div>
+            {!subscriberId && (
+              <Tooltip content="The PKI subscriber for this sync has been deleted. Configure a new source or remove this sync.">
+                <div className="mr-1 inline-block w-min">
+                  <Badge
+                    className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
+                    variant="primary"
+                  >
+                    <FontAwesomeIcon icon={faTriangleExclamation} />
+                    <span>Source Deleted</span>
+                  </Badge>
+                </div>
+              </Tooltip>
+            )}
+            <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
+              {(isAllowed) => (
+                <IconButton
+                  variant="plain"
+                  colorSchema="secondary"
+                  isDisabled={!isAllowed}
+                  ariaLabel="Edit sync source"
+                  onClick={onEditSource}
+                >
+                  <FontAwesomeIcon icon={faEdit} />
+                </IconButton>
+              )}
+            </ProjectPermissionCan>
+          </div>
+        </div>
+        <div>
+          <div className="space-y-3">
+            <GenericFieldLabel label="PKI Subscriber">
+              {subscriber ? subscriber.name : "Deleted"}
+            </GenericFieldLabel>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,6 @@
+export { PkiSyncActionTriggers } from "./PkiSyncActionTriggers";
+export { PkiSyncAuditLogsSection } from "./PkiSyncAuditLogsSection";
+export { PkiSyncDestinationSection } from "./PkiSyncDestinationSection";
+export { PkiSyncDetailsSection } from "./PkiSyncDetailsSection";
+export { PkiSyncOptionsSection } from "./PkiSyncOptionsSection";
+export { PkiSyncSourceSection } from "./PkiSyncSourceSection";
@@ -0,0 +1 @@
+export { PkiSyncDetailsByIDPage } from "./PkiSyncDetailsByIDPage";
@@ -0,0 +1,31 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
+import { PkiSyncDetailsByIDPage } from "./index";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/integrations/$syncId"
+)({
+  component: PkiSyncDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/projects/cert-management/$projectId/integrations",
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.PkiSyncs
+            }
+          })
+        },
+        {
+          label: "PKI Sync"
+        }
+      ]
+    };
+  }
+});
@@ -42,7 +42,14 @@ const schema = z.object({
    message: "Access Token Max TTL cannot be greater than 315360000"
  }),
  accessTokenNumUsesLimit: z.string(),
-  oidcDiscoveryUrl: z.string().url().min(1),
+  oidcDiscoveryUrl: z
+    .string()
+    .url()
+    .min(1)
+    .refine(
+      (el) => !el.endsWith("/.well-known/openid-configuration"),
+      "Please remove /.well-known/openid-configuration."
+    ),
  caCert: z.string().trim().default(""),
  boundIssuer: z.string().min(1),
  boundAudiences: z.string().optional().default(""),
@@ -143,7 +143,7 @@ const CreateForm = ({ app, onComplete, projectId }: CreateFormProps) => {
    case AppConnection.OnePass:
      return <OnePassConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Heroku:
-      return <HerokuConnectionForm onSubmit={onSubmit} />;
+      return <HerokuConnectionForm onSubmit={onSubmit} projectId={projectId} />;
    case AppConnection.Render:
      return <RenderConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Flyio:
@@ -288,7 +288,13 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
    case AppConnection.OnePass:
      return <OnePassConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Heroku:
-      return <HerokuConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+      return (
+        <HerokuConnectionForm
+          onSubmit={onSubmit}
+          appConnection={appConnection}
+          projectId={appConnection.projectId}
+        />
+      );
    case AppConnection.Render:
      return <RenderConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Flyio:
@@ -39,7 +39,7 @@ import {
 } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";

-import { GithubFormData } from "../../../OauthCallbackPage/OauthCallbackPage.types";
+import { GitHubFormData } from "../../../OauthCallbackPage/OauthCallbackPage.types";
 import {
  genericAppConnectionFieldsSchema,
  GenericAppConnectionsFields
@@ -118,7 +118,7 @@ export const GitHubConnectionForm = ({ appConnection, projectId }: Props) => {
        connectionId: appConnection?.id,
        projectId,
        returnUrl
-      } as GithubFormData)
+      } as GitHubFormData)
    );

    const githubHost =
@@ -19,7 +19,7 @@ import {
 } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";

-import { GithubRadarFormData } from "../../../OauthCallbackPage/OauthCallbackPage.types";
+import { GitHubRadarFormData } from "../../../OauthCallbackPage/OauthCallbackPage.types";
 import {
  genericAppConnectionFieldsSchema,
  GenericAppConnectionsFields
@@ -76,7 +76,7 @@ export const GitHubRadarConnectionForm = ({ appConnection, projectId }: Props) =
        connectionId: appConnection?.id,
        projectId,
        returnUrl
-      } as GithubRadarFormData)
+      } as GitHubRadarFormData)
    );

    switch (formData.method) {
@@ -15,7 +15,11 @@ import {
  Select,
  SelectItem
 } from "@app/components/v2";
-import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import {
+  APP_CONNECTION_MAP,
+  getAppConnectionMethodDetails,
+  useGetAppConnectionOauthReturnUrl
+} from "@app/helpers/appConnections";
 import { isInfisicalCloud } from "@app/helpers/platform";
 import { useGetAppConnectionOption } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
@@ -32,6 +36,7 @@ import {
 type Props = {
  appConnection?: THerokuConnection;
  onSubmit: (formData: FormData) => Promise<void>;
+  projectId: string | undefined | null;
 };

 const formSchema = z.discriminatedUnion("method", [
@@ -53,10 +58,12 @@ const formSchema = z.discriminatedUnion("method", [

 type FormData = z.infer<typeof formSchema>;

-export const HerokuConnectionForm = ({ appConnection, onSubmit: formSubmit }: Props) => {
+export const HerokuConnectionForm = ({ appConnection, onSubmit: formSubmit, projectId }: Props) => {
  const isUpdate = Boolean(appConnection);
  const [isRedirecting, setIsRedirecting] = useState(false);

+  const returnUrl = useGetAppConnectionOauthReturnUrl();
+
  const {
    option: { oauthClientId },
    isLoading
@@ -110,7 +117,8 @@ export const HerokuConnectionForm = ({ appConnection, onSubmit: formSubmit }: Pr
            JSON.stringify({
              ...formData,
              connectionId: appConnection?.id,
-              isUpdate
+              returnUrl,
+              projectId
            })
          );

@@ -12,6 +12,7 @@ import {
  AzureKeyVaultConnectionMethod,
  GitHubConnectionMethod,
  GitLabConnectionMethod,
+  HerokuConnectionMethod,
  TAppConnection,
  useCreateAppConnection,
  useUpdateAppConnection
@@ -28,7 +29,8 @@ const formDataStorageFieldMap: Partial<Record<AppConnection, string>> = {
  [AppConnection.AzureKeyVault]: "azureKeyVaultConnectionFormData",
  [AppConnection.AzureAppConfiguration]: "azureAppConfigurationConnectionFormData",
  [AppConnection.AzureClientSecrets]: "azureClientSecretsConnectionFormData",
-  [AppConnection.AzureDevOps]: "azureDevOpsConnectionFormData"
+  [AppConnection.AzureDevOps]: "azureDevOpsConnectionFormData",
+  [AppConnection.Heroku]: "herokuConnectionFormData"
 };

 export const OAuthCallbackPage = () => {
@@ -83,7 +85,7 @@ export const OAuthCallbackPage = () => {
    }
  };

-  const handleGitlab = useCallback(async () => {
+  const handleGitLab = useCallback(async () => {
    const formData = getFormData(AppConnection.GitLab);
    if (formData === null) return null;

@@ -375,7 +377,7 @@ export const OAuthCallbackPage = () => {
    };
  }, []);

-  const handleGithub = useCallback(async () => {
+  const handleGitHub = useCallback(async () => {
    const formData = getFormData(AppConnection.GitHub);
    if (formData === null) return null;

@@ -463,7 +465,7 @@ export const OAuthCallbackPage = () => {
    };
  }, []);

-  const handleGithubRadar = useCallback(async () => {
+  const handleGitHubRadar = useCallback(async () => {
    const formData = getFormData(AppConnection.GitHubRadar);
    if (formData === null) return null;

@@ -520,6 +522,61 @@ export const OAuthCallbackPage = () => {
    };
  }, []);

+  const handleHeroku = useCallback(async () => {
+    const formData = getFormData(AppConnection.Heroku);
+    if (formData === null) return null;
+
+    clearState(AppConnection.Heroku);
+
+    const { connectionId, name, description, returnUrl, projectId } = formData;
+
+    let connection: TAppConnection;
+
+    try {
+      if (connectionId) {
+        connection = await updateAppConnection.mutateAsync({
+          app: AppConnection.Heroku,
+          connectionId,
+          credentials: {
+            code: code as string
+          }
+        });
+      } else {
+        connection = await createAppConnection.mutateAsync({
+          app: AppConnection.Heroku,
+          name,
+          description,
+          method: HerokuConnectionMethod.OAuth,
+          projectId,
+          credentials: {
+            code: code as string
+          }
+        });
+      }
+    } catch (e: any) {
+      createNotification({
+        title: `Failed to ${connectionId ? "update" : "add"} Heroku Connection`,
+        text: e.message,
+        type: "error"
+      });
+      navigate({
+        to: returnUrl,
+        params: {
+          projectId
+        }
+      });
+      return null;
+    }
+
+    return {
+      connectionId,
+      returnUrl,
+      appConnectionName: formData.app,
+      projectId,
+      connection
+    };
+  }, []);
+
  // Ensure that the localstorage is ready for use, to avoid the form data being malformed
  useEffect(() => {
    if (!isReady) {
@@ -540,11 +597,11 @@ export const OAuthCallbackPage = () => {
      } | null = null;

      if (appConnection === AppConnection.GitHub) {
-        data = await handleGithub();
+        data = await handleGitHub();
      } else if (appConnection === AppConnection.GitHubRadar) {
-        data = await handleGithubRadar();
+        data = await handleGitHubRadar();
      } else if (appConnection === AppConnection.GitLab) {
-        data = await handleGitlab();
+        data = await handleGitLab();
      } else if (appConnection === AppConnection.AzureKeyVault) {
        data = await handleAzureKeyVault();
      } else if (appConnection === AppConnection.AzureAppConfiguration) {
@@ -553,6 +610,8 @@ export const OAuthCallbackPage = () => {
        data = await handleAzureClientSecrets();
      } else if (appConnection === AppConnection.AzureDevOps) {
        data = await handleAzureDevOps();
+      } else if (appConnection === AppConnection.Heroku) {
+        data = await handleHeroku();
      }

      if (data) {
@@ -6,7 +6,8 @@ import {
  TAzureKeyVaultConnection,
  TGitHubConnection,
  TGitHubRadarConnection,
-  TGitLabConnection
+  TGitLabConnection,
+  THerokuConnection
 } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";

@@ -17,10 +18,10 @@ type BaseFormData = {
  projectId: string;
 };

-export type GithubFormData = BaseFormData &
+export type GitHubFormData = BaseFormData &
  Pick<TGitHubConnection, "name" | "method" | "description" | "gatewayId" | "credentials">;

-export type GithubRadarFormData = BaseFormData &
+export type GitHubRadarFormData = BaseFormData &
  Pick<TGitHubRadarConnection, "name" | "method" | "description">;

 export type GitLabFormData = BaseFormData &
@@ -51,9 +52,12 @@ export type AzureDevOpsFormData = BaseFormData &
  Pick<TAzureDevOpsConnection, "name" | "method" | "description"> &
  (Pick<OAuthCredentials, "tenantId" | "orgName"> | Pick<AccessTokenCredentials, "orgName">);

+export type HerokuFormData = BaseFormData &
+  Pick<THerokuConnection, "name" | "method" | "description">;
+
 export type FormDataMap = {
-  [AppConnection.GitHub]: GithubFormData & { app: AppConnection.GitHub };
-  [AppConnection.GitHubRadar]: GithubRadarFormData & { app: AppConnection.GitHubRadar };
+  [AppConnection.GitHub]: GitHubFormData & { app: AppConnection.GitHub };
+  [AppConnection.GitHubRadar]: GitHubRadarFormData & { app: AppConnection.GitHubRadar };
  [AppConnection.GitLab]: GitLabFormData & { app: AppConnection.GitLab };
  [AppConnection.AzureKeyVault]: AzureKeyVaultFormData & { app: AppConnection.AzureKeyVault };
  [AppConnection.AzureAppConfiguration]: AzureAppConfigurationFormData & {
@@ -65,4 +69,7 @@ export type FormDataMap = {
  [AppConnection.AzureDevOps]: AzureDevOpsFormData & {
    app: AppConnection.AzureDevOps;
  };
+  [AppConnection.Heroku]: HerokuFormData & {
+    app: AppConnection.Heroku;
+  };
 };
@@ -1,267 +0,0 @@
-import { useState } from "react";
-import { Helmet } from "react-helmet";
-import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faCopy,
-  faDoorClosed,
-  faEdit,
-  faEllipsisV,
-  faInfoCircle,
-  faMagnifyingGlass,
-  faSearch,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useQuery } from "@tanstack/react-query";
-import { formatRelative } from "date-fns";
-
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  DeleteActionModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  EmptyState,
-  IconButton,
-  Input,
-  Modal,
-  ModalContent,
-  PageHeader,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tooltip,
-  Tr
-} from "@app/components/v2";
-import {
-  OrgGatewayPermissionActions,
-  OrgPermissionAppConnectionActions,
-  OrgPermissionSubjects
-} from "@app/context/OrgPermissionContext/types";
-import { withPermission } from "@app/hoc";
-import { usePopUp } from "@app/hooks";
-import { gatewaysQueryKeys, useDeleteGatewayById } from "@app/hooks/api/gateways";
-import { useDeleteGatewayV2ById } from "@app/hooks/api/gateways-v2";
-
-import { EditGatewayDetailsModal } from "./components/EditGatewayDetailsModal";
-
-export const GatewayListPage = withPermission(
-  () => {
-    const [search, setSearch] = useState("");
-    const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
-
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-      "deleteGateway",
-      "editDetails"
-    ] as const);
-
-    const deleteGatewayById = useDeleteGatewayById();
-    const deleteGatewayV2ById = useDeleteGatewayV2ById();
-
-    const handleDeleteGateway = async () => {
-      const data = popUp.deleteGateway.data as { id: string; isV1: boolean };
-      if (data.isV1) {
-        await deleteGatewayById.mutateAsync(data.id);
-      } else {
-        await deleteGatewayV2ById.mutateAsync(data.id);
-      }
-
-      handlePopUpToggle("deleteGateway");
-      createNotification({
-        type: "success",
-        text: "Successfully deleted gateway"
-      });
-    };
-
-    const filteredGateway = gateways?.filter((el) =>
-      el.name.toLowerCase().includes(search.toLowerCase())
-    );
-
-    return (
-      <div className="bg-bunker-800">
-        <Helmet>
-          <title>Infisical | Gateways</title>
-          <meta property="og:image" content="/images/message.png" />
-        </Helmet>
-        <div className="flex w-full justify-center bg-bunker-800 text-white">
-          <div className="w-full max-w-7xl">
-            <PageHeader
-              className="w-full"
-              title={
-                <div className="flex w-full items-center">
-                  <span>Gateways</span>
-                  <a
-                    className="-mt-1.5"
-                    href="https://infisical.com/docs/documentation/platform/gateways/overview"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <div className="ml-2 inline-block rounded-md bg-yellow/20 px-1.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
-                      <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                      <span>Docs</span>
-                      <FontAwesomeIcon
-                        icon={faArrowUpRightFromSquare}
-                        className="mb-[0.07rem] ml-1.5 text-[10px]"
-                      />
-                    </div>
-                  </a>
-                </div>
-              }
-              description="Create and configure gateway to access private network resources from Infisical"
-            />
-            <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-              <div>
-                <div className="flex gap-2">
-                  <Input
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value)}
-                    leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-                    placeholder="Search gateway..."
-                    className="flex-1"
-                  />
-                </div>
-                <TableContainer className="mt-4">
-                  <Table>
-                    <THead>
-                      <Tr>
-                        <Th className="w-1/3">Name</Th>
-                        <Th>Identity</Th>
-                        <Th>
-                          Health Check
-                          <Tooltip
-                            asChild={false}
-                            className="normal-case"
-                            content="The last known healthcheck. Triggers every 1 hour."
-                          >
-                            <FontAwesomeIcon icon={faInfoCircle} className="ml-2" />
-                          </Tooltip>
-                        </Th>
-                        <Th className="w-5" />
-                      </Tr>
-                    </THead>
-                    <TBody>
-                      {isGatewaysLoading && (
-                        <TableSkeleton innerKey="gateway-table" columns={4} key="gateway-table" />
-                      )}
-                      {filteredGateway?.map((el) => (
-                        <Tr key={el.id}>
-                          <Td>
-                            <div className="flex items-center gap-2">
-                              <span>{el.name}</span>
-                              <span className="rounded bg-mineshaft-700 px-1.5 py-0.5 text-xs text-mineshaft-400">
-                                Gateway v{el.isV1 ? "1" : "2"}
-                              </span>
-                            </div>
-                          </Td>
-                          <Td>{el.identity.name}</Td>
-                          <Td>
-                            {el.heartbeat
-                              ? formatRelative(new Date(el.heartbeat), new Date())
-                              : "-"}
-                          </Td>
-                          <Td className="w-5">
-                            <Tooltip className="max-w-sm text-center" content="Options">
-                              <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                  <IconButton
-                                    ariaLabel="Options"
-                                    colorSchema="secondary"
-                                    className="w-6"
-                                    variant="plain"
-                                  >
-                                    <FontAwesomeIcon icon={faEllipsisV} />
-                                  </IconButton>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                  <DropdownMenuItem
-                                    icon={<FontAwesomeIcon icon={faCopy} />}
-                                    onClick={() => navigator.clipboard.writeText(el.id)}
-                                  >
-                                    Copy ID
-                                  </DropdownMenuItem>
-                                  {el.isV1 && (
-                                    <OrgPermissionCan
-                                      I={OrgGatewayPermissionActions.EditGateways}
-                                      a={OrgPermissionSubjects.Gateway}
-                                    >
-                                      {(isAllowed: boolean) => (
-                                        <DropdownMenuItem
-                                          isDisabled={!isAllowed}
-                                          icon={<FontAwesomeIcon icon={faEdit} />}
-                                          onClick={() => handlePopUpOpen("editDetails", el)}
-                                        >
-                                          Edit Details
-                                        </DropdownMenuItem>
-                                      )}
-                                    </OrgPermissionCan>
-                                  )}
-                                  <OrgPermissionCan
-                                    I={OrgPermissionAppConnectionActions.Delete}
-                                    a={OrgPermissionSubjects.AppConnections}
-                                  >
-                                    {(isAllowed: boolean) => (
-                                      <DropdownMenuItem
-                                        isDisabled={!isAllowed}
-                                        icon={<FontAwesomeIcon icon={faTrash} />}
-                                        className="text-red"
-                                        onClick={() => handlePopUpOpen("deleteGateway", el)}
-                                      >
-                                        Delete Gateway
-                                      </DropdownMenuItem>
-                                    )}
-                                  </OrgPermissionCan>
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            </Tooltip>
-                          </Td>
-                        </Tr>
-                      ))}
-                    </TBody>
-                  </Table>
-                  <Modal
-                    isOpen={popUp.editDetails.isOpen}
-                    onOpenChange={(isOpen) => handlePopUpToggle("editDetails", isOpen)}
-                  >
-                    <ModalContent title="Edit Gateway">
-                      <EditGatewayDetailsModal
-                        gatewayDetails={popUp.editDetails.data}
-                        onClose={() => handlePopUpToggle("editDetails")}
-                      />
-                    </ModalContent>
-                  </Modal>
-                  {!isGatewaysLoading && !filteredGateway?.length && (
-                    <EmptyState
-                      title={
-                        gateways?.length
-                          ? "No Gateways match search..."
-                          : "No Gateways have been configured"
-                      }
-                      icon={gateways?.length ? faSearch : faDoorClosed}
-                    />
-                  )}
-                  <DeleteActionModal
-                    isOpen={popUp.deleteGateway.isOpen}
-                    title={`Are you sure you want to delete gateway ${
-                      (popUp?.deleteGateway?.data as { name: string })?.name || ""
-                    }?`}
-                    onChange={(isOpen) => handlePopUpToggle("deleteGateway", isOpen)}
-                    deleteKey="confirm"
-                    onDeleteApproved={() => handleDeleteGateway()}
-                  />
-                </TableContainer>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-  { action: OrgGatewayPermissionActions.ListGateways, subject: OrgPermissionSubjects.Gateway }
-);
@@ -1,16 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-import { GatewayListPage } from "./GatewayListPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/gateways/"
-)({
-  component: GatewayListPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Gateways"
-      }
-    ]
-  })
-});
@@ -1,214 +0,0 @@
-import { useState } from "react";
-import { Helmet } from "react-helmet";
-import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faCopy,
-  faDoorClosed,
-  faEllipsisV,
-  faMagnifyingGlass,
-  faSearch,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { formatRelative } from "date-fns";
-
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  DeleteActionModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  EmptyState,
-  IconButton,
-  Input,
-  PageHeader,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tooltip,
-  Tr
-} from "@app/components/v2";
-import {
-  OrgPermissionSubjects,
-  OrgRelayPermissionActions
-} from "@app/context/OrgPermissionContext/types";
-import { withPermission } from "@app/hoc";
-import { usePopUp } from "@app/hooks";
-import { useDeleteRelayById, useGetRelays } from "@app/hooks/api/relays";
-
-export const RelayListPage = withPermission(
-  () => {
-    const [search, setSearch] = useState("");
-    const { data: relays, isPending: isRelaysLoading } = useGetRelays();
-
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteRelay"] as const);
-
-    const deleteRelayById = useDeleteRelayById();
-
-    const handleDeleteRelay = async () => {
-      const data = popUp.deleteRelay.data as { id: string };
-      await deleteRelayById.mutateAsync(data.id);
-
-      handlePopUpToggle("deleteRelay");
-      createNotification({
-        type: "success",
-        text: "Successfully deleted relay"
-      });
-    };
-
-    const filteredRelays = relays?.filter((el) =>
-      el.name.toLowerCase().includes(search.toLowerCase())
-    );
-
-    return (
-      <div className="bg-bunker-800">
-        <Helmet>
-          <title>Infisical | Relays</title>
-          <meta property="og:image" content="/images/message.png" />
-        </Helmet>
-        <div className="flex w-full justify-center bg-bunker-800 text-white">
-          <div className="w-full max-w-7xl">
-            <PageHeader
-              className="w-full"
-              title={
-                <div className="flex w-full items-center">
-                  <span>Relays</span>
-                  <a
-                    className="-mt-1.5"
-                    href="https://infisical.com/docs/documentation/platform/gateways/relay-deployment"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <div className="ml-2 inline-block rounded-md bg-yellow/20 px-1.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
-                      <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                      <span>Docs</span>
-                      <FontAwesomeIcon
-                        icon={faArrowUpRightFromSquare}
-                        className="mb-[0.07rem] ml-1.5 text-[10px]"
-                      />
-                    </div>
-                  </a>
-                </div>
-              }
-              description="Create and configure relays to securely access private network resources from Infisical"
-            />
-            <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-              <div>
-                <div className="flex gap-2">
-                  <Input
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value)}
-                    leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-                    placeholder="Search relay..."
-                    className="flex-1"
-                  />
-                </div>
-                <TableContainer className="mt-4">
-                  <Table>
-                    <THead>
-                      <Tr>
-                        <Th className="w-1/3">Name</Th>
-                        <Th>Host</Th>
-                        <Th>Created</Th>
-                        <Th className="w-5" />
-                      </Tr>
-                    </THead>
-                    <TBody>
-                      {isRelaysLoading && (
-                        <TableSkeleton innerKey="relay-table" columns={4} key="relay-table" />
-                      )}
-                      {filteredRelays?.map((el) => (
-                        <Tr key={el.id}>
-                          <Td>
-                            <div className="flex items-center gap-2">
-                              <span>{el.name}</span>
-                              {!el.orgId && (
-                                <Tooltip content="This is a managed relay provided by Infisical">
-                                  <span className="rounded bg-mineshaft-700 px-1.5 py-0.5 text-xs text-mineshaft-400">
-                                    Managed
-                                  </span>
-                                </Tooltip>
-                              )}
-                            </div>
-                          </Td>
-                          <Td>{el.host}</Td>
-                          <Td>{formatRelative(new Date(el.createdAt), new Date())}</Td>
-                          <Td className="w-5">
-                            <Tooltip className="max-w-sm text-center" content="Options">
-                              <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                  <IconButton
-                                    ariaLabel="Options"
-                                    colorSchema="secondary"
-                                    className="w-6"
-                                    variant="plain"
-                                  >
-                                    <FontAwesomeIcon icon={faEllipsisV} />
-                                  </IconButton>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                  <DropdownMenuItem
-                                    icon={<FontAwesomeIcon icon={faCopy} />}
-                                    onClick={() => navigator.clipboard.writeText(el.id)}
-                                  >
-                                    Copy ID
-                                  </DropdownMenuItem>
-                                  <OrgPermissionCan
-                                    I={OrgRelayPermissionActions.DeleteRelays}
-                                    a={OrgPermissionSubjects.Relay}
-                                  >
-                                    {(isAllowed: boolean) => (
-                                      <DropdownMenuItem
-                                        isDisabled={!isAllowed || !el.orgId}
-                                        icon={<FontAwesomeIcon icon={faTrash} />}
-                                        className="text-red"
-                                        onClick={() => handlePopUpOpen("deleteRelay", el)}
-                                      >
-                                        Delete Relay
-                                      </DropdownMenuItem>
-                                    )}
-                                  </OrgPermissionCan>
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            </Tooltip>
-                          </Td>
-                        </Tr>
-                      ))}
-                    </TBody>
-                  </Table>
-                  {!isRelaysLoading && !filteredRelays?.length && (
-                    <EmptyState
-                      title={
-                        relays?.length
-                          ? "No Relays match search..."
-                          : "No Relays have been configured"
-                      }
-                      icon={relays?.length ? faSearch : faDoorClosed}
-                    />
-                  )}
-                  <DeleteActionModal
-                    isOpen={popUp.deleteRelay.isOpen}
-                    title={`Are you sure you want to delete relay ${
-                      (popUp?.deleteRelay?.data as { name: string })?.name || ""
-                    }?`}
-                    onChange={(isOpen) => handlePopUpToggle("deleteRelay", isOpen)}
-                    deleteKey="confirm"
-                    onDeleteApproved={() => handleDeleteRelay()}
-                  />
-                </TableContainer>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-  { action: OrgRelayPermissionActions.ListRelays, subject: OrgPermissionSubjects.Relay }
-);
@@ -1,16 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-import { RelayListPage } from "./RelayListPage";
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/relays/"
-)({
-  component: RelayListPage,
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Relays"
-      }
-    ]
-  })
-});
@@ -0,0 +1,25 @@
+import { Helmet } from "react-helmet";
+
+import { PageHeader } from "@app/components/v2";
+
+import { NetworkingTabGroup } from "./components/NetworkingTabGroup/NetworkingTabGroup";
+
+export const NetworkingPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>Infisical | Networking</title>
+        <meta property="og:image" content="/images/message.png" />
+      </Helmet>
+      <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader
+            title="Networking"
+            description="Manage gateways and relays to securely access private network resources from Infisical"
+          />
+          <NetworkingTabGroup />
+        </div>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,266 @@
+import { useState } from "react";
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faCopy,
+  faDoorClosed,
+  faEdit,
+  faEllipsisV,
+  faInfoCircle,
+  faMagnifyingGlass,
+  faSearch,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useQuery } from "@tanstack/react-query";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import { withPermission } from "@app/hoc";
+import { usePopUp } from "@app/hooks";
+import { gatewaysQueryKeys, useDeleteGatewayById } from "@app/hooks/api/gateways";
+import { useDeleteGatewayV2ById } from "@app/hooks/api/gateways-v2";
+
+import { EditGatewayDetailsModal } from "./components/EditGatewayDetailsModal";
+
+const GatewayHealthStatus = ({ heartbeat }: { heartbeat?: string }) => {
+  const heartbeatDate = heartbeat ? new Date(heartbeat) : null;
+  const now = new Date();
+  const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);
+
+  const isHealthy = heartbeatDate && heartbeatDate >= oneHourAgo;
+  const tooltipContent = heartbeatDate
+    ? `Last heartbeat: ${heartbeatDate.toLocaleString()}`
+    : "No heartbeat data available";
+
+  return (
+    <Tooltip content={tooltipContent}>
+      <span className={`cursor-default ${isHealthy ? "text-green-400" : "text-red-400"}`}>
+        {isHealthy ? "Healthy" : "Unreachable"}
+      </span>
+    </Tooltip>
+  );
+};
+
+export const GatewayTab = withPermission(
+  () => {
+    const [search, setSearch] = useState("");
+    const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
+
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+      "deleteGateway",
+      "editDetails"
+    ] as const);
+
+    const deleteGatewayById = useDeleteGatewayById();
+    const deleteGatewayV2ById = useDeleteGatewayV2ById();
+
+    const handleDeleteGateway = async () => {
+      const data = popUp.deleteGateway.data as { id: string; isV1: boolean };
+      if (data.isV1) {
+        await deleteGatewayById.mutateAsync(data.id);
+      } else {
+        await deleteGatewayV2ById.mutateAsync(data.id);
+      }
+
+      handlePopUpToggle("deleteGateway");
+      createNotification({
+        type: "success",
+        text: "Successfully deleted gateway"
+      });
+    };
+
+    const filteredGateway = gateways?.filter((el) =>
+      el.name.toLowerCase().includes(search.toLowerCase())
+    );
+
+    return (
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-lg font-semibold text-mineshaft-100">Gateways</h3>
+            <a
+              href="https://infisical.com/docs/documentation/platform/gateways/overview"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="inline-block rounded-md bg-yellow/20 px-1.5 py-0.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
+                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                <span>Docs</span>
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mb-[0.07rem] ml-1.5 text-[10px]"
+                />
+              </div>
+            </a>
+          </div>
+        </div>
+        <p className="mb-4 text-sm text-mineshaft-400">
+          Create and configure gateway to access private network resources from Infisical
+        </p>
+        <div>
+          <div className="flex gap-2">
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+              placeholder="Search gateway..."
+              className="flex-1"
+            />
+          </div>
+          <TableContainer className="mt-4">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="w-1/2">Name</Th>
+                  <Th>
+                    Health Check
+                    <Tooltip
+                      asChild={false}
+                      className="normal-case"
+                      content="The last known healthcheck. Triggers every 1 hour."
+                    >
+                      <FontAwesomeIcon icon={faInfoCircle} className="ml-2" />
+                    </Tooltip>
+                  </Th>
+                  <Th className="w-5" />
+                </Tr>
+              </THead>
+              <TBody>
+                {isGatewaysLoading && (
+                  <TableSkeleton innerKey="gateway-table" columns={4} key="gateway-table" />
+                )}
+                {filteredGateway?.map((el) => (
+                  <Tr key={el.id}>
+                    <Td>
+                      <div className="flex items-center gap-2">
+                        <span>{el.name}</span>
+                        <span className="rounded bg-mineshaft-700 px-1.5 py-0.5 text-xs text-mineshaft-400">
+                          Gateway v{el.isV1 ? "1" : "2"}
+                        </span>
+                      </div>
+                    </Td>
+                    <Td>
+                      <GatewayHealthStatus heartbeat={el.heartbeat} />
+                    </Td>
+                    <Td className="w-5">
+                      <Tooltip className="max-w-sm text-center" content="Options">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <IconButton
+                              ariaLabel="Options"
+                              colorSchema="secondary"
+                              className="w-6"
+                              variant="plain"
+                            >
+                              <FontAwesomeIcon icon={faEllipsisV} />
+                            </IconButton>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              icon={<FontAwesomeIcon icon={faCopy} />}
+                              onClick={() => navigator.clipboard.writeText(el.id)}
+                            >
+                              Copy ID
+                            </DropdownMenuItem>
+                            {el.isV1 && (
+                              <OrgPermissionCan
+                                I={OrgGatewayPermissionActions.EditGateways}
+                                a={OrgPermissionSubjects.Gateway}
+                              >
+                                {(isAllowed: boolean) => (
+                                  <DropdownMenuItem
+                                    isDisabled={!isAllowed}
+                                    icon={<FontAwesomeIcon icon={faEdit} />}
+                                    onClick={() => handlePopUpOpen("editDetails", el)}
+                                  >
+                                    Edit Details
+                                  </DropdownMenuItem>
+                                )}
+                              </OrgPermissionCan>
+                            )}
+                            <OrgPermissionCan
+                              I={OrgGatewayPermissionActions.DeleteGateways}
+                              a={OrgPermissionSubjects.Gateway}
+                            >
+                              {(isAllowed: boolean) => (
+                                <DropdownMenuItem
+                                  isDisabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faTrash} />}
+                                  className="text-red"
+                                  onClick={() => handlePopUpOpen("deleteGateway", el)}
+                                >
+                                  Delete Gateway
+                                </DropdownMenuItem>
+                              )}
+                            </OrgPermissionCan>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </Tooltip>
+                    </Td>
+                  </Tr>
+                ))}
+              </TBody>
+            </Table>
+            <Modal
+              isOpen={popUp.editDetails.isOpen}
+              onOpenChange={(isOpen) => handlePopUpToggle("editDetails", isOpen)}
+            >
+              <ModalContent title="Edit Gateway">
+                <EditGatewayDetailsModal
+                  gatewayDetails={popUp.editDetails.data}
+                  onClose={() => handlePopUpToggle("editDetails")}
+                />
+              </ModalContent>
+            </Modal>
+            {!isGatewaysLoading && !filteredGateway?.length && (
+              <EmptyState
+                title={
+                  gateways?.length
+                    ? "No Gateways match search..."
+                    : "No Gateways have been configured"
+                }
+                icon={gateways?.length ? faSearch : faDoorClosed}
+              />
+            )}
+            <DeleteActionModal
+              isOpen={popUp.deleteGateway.isOpen}
+              title={`Are you sure you want to delete gateway ${
+                (popUp?.deleteGateway?.data as { name: string })?.name || ""
+              }?`}
+              onChange={(isOpen) => handlePopUpToggle("deleteGateway", isOpen)}
+              deleteKey="confirm"
+              onDeleteApproved={() => handleDeleteGateway()}
+            />
+          </TableContainer>
+        </div>
+      </div>
+    );
+  },
+  { action: OrgGatewayPermissionActions.ListGateways, subject: OrgPermissionSubjects.Gateway }
+);
@@ -0,0 +1 @@
+export { GatewayTab } from "./GatewayTab";
@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { useSearch } from "@tanstack/react-router";
+
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+
+import { GatewayTab } from "../GatewayTab/GatewayTab";
+import { RelayTab } from "../RelayTab/RelayTab";
+
+export const NetworkingTabGroup = () => {
+  const search = useSearch({
+    from: "/_authenticate/_inject-org-details/_org-layout/organization/networking/"
+  });
+
+  const tabs = [
+    { name: "Gateways", key: "gateways", component: GatewayTab },
+    { name: "Relays", key: "relays", component: RelayTab }
+  ];
+
+  const [selectedTab, setSelectedTab] = useState(search.selectedTab || tabs[0].key);
+
+  return (
+    <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+      <TabList>
+        {tabs.map((tab) => (
+          <Tab value={tab.key} key={tab.key}>
+            {tab.name}
+          </Tab>
+        ))}
+      </TabList>
+      {tabs.map(({ key, component: Component }) => (
+        <TabPanel value={key} key={`tab-panel-${key}`}>
+          <Component />
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+};
@@ -0,0 +1 @@
+export { NetworkingTabGroup } from "./NetworkingTabGroup";
@@ -0,0 +1,198 @@
+import { useState } from "react";
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faCopy,
+  faDoorClosed,
+  faEllipsisV,
+  faMagnifyingGlass,
+  faSearch,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { formatRelative } from "date-fns";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import {
+  OrgPermissionSubjects,
+  OrgRelayPermissionActions
+} from "@app/context/OrgPermissionContext/types";
+import { withPermission } from "@app/hoc";
+import { usePopUp } from "@app/hooks";
+import { useDeleteRelayById, useGetRelays } from "@app/hooks/api/relays";
+
+export const RelayTab = withPermission(
+  () => {
+    const [search, setSearch] = useState("");
+    const { data: relays, isPending: isRelaysLoading } = useGetRelays();
+
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteRelay"] as const);
+
+    const deleteRelayById = useDeleteRelayById();
+
+    const handleDeleteRelay = async () => {
+      const data = popUp.deleteRelay.data as { id: string };
+      await deleteRelayById.mutateAsync(data.id);
+
+      handlePopUpToggle("deleteRelay");
+      createNotification({
+        type: "success",
+        text: "Successfully deleted relay"
+      });
+    };
+
+    const filteredRelays = relays?.filter((el) =>
+      el.name.toLowerCase().includes(search.toLowerCase())
+    );
+
+    return (
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-lg font-semibold text-mineshaft-100">Relays</h3>
+            <a
+              href="https://infisical.com/docs/documentation/platform/gateways/relay-deployment"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="inline-block rounded-md bg-yellow/20 px-1.5 py-0.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
+                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                <span>Docs</span>
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mb-[0.07rem] ml-1.5 text-[10px]"
+                />
+              </div>
+            </a>
+          </div>
+        </div>
+        <p className="mb-4 text-sm text-mineshaft-400">
+          Create and configure relays to securely access private network resources from Infisical
+        </p>
+        <div>
+          <div className="flex gap-2">
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+              placeholder="Search relay..."
+              className="flex-1"
+            />
+          </div>
+          <TableContainer className="mt-4">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="w-1/3">Name</Th>
+                  <Th>Host</Th>
+                  <Th>Created</Th>
+                  <Th className="w-5" />
+                </Tr>
+              </THead>
+              <TBody>
+                {isRelaysLoading && (
+                  <TableSkeleton innerKey="relay-table" columns={4} key="relay-table" />
+                )}
+                {filteredRelays?.map((el) => (
+                  <Tr key={el.id}>
+                    <Td>
+                      <div className="flex items-center gap-2">
+                        <span>{el.name}</span>
+                        {!el.orgId && (
+                          <Tooltip content="This is a managed relay provided by Infisical">
+                            <span className="rounded bg-mineshaft-700 px-1.5 py-0.5 text-xs text-mineshaft-400">
+                              Managed
+                            </span>
+                          </Tooltip>
+                        )}
+                      </div>
+                    </Td>
+                    <Td>{el.host}</Td>
+                    <Td>{formatRelative(new Date(el.createdAt), new Date())}</Td>
+                    <Td className="w-5">
+                      <Tooltip className="max-w-sm text-center" content="Options">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <IconButton
+                              ariaLabel="Options"
+                              colorSchema="secondary"
+                              className="w-6"
+                              variant="plain"
+                            >
+                              <FontAwesomeIcon icon={faEllipsisV} />
+                            </IconButton>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              icon={<FontAwesomeIcon icon={faCopy} />}
+                              onClick={() => navigator.clipboard.writeText(el.id)}
+                            >
+                              Copy ID
+                            </DropdownMenuItem>
+                            <OrgPermissionCan
+                              I={OrgRelayPermissionActions.DeleteRelays}
+                              a={OrgPermissionSubjects.Relay}
+                            >
+                              {(isAllowed: boolean) => (
+                                <DropdownMenuItem
+                                  isDisabled={!isAllowed || !el.orgId}
+                                  icon={<FontAwesomeIcon icon={faTrash} />}
+                                  className="text-red"
+                                  onClick={() => handlePopUpOpen("deleteRelay", el)}
+                                >
+                                  Delete Relay
+                                </DropdownMenuItem>
+                              )}
+                            </OrgPermissionCan>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </Tooltip>
+                    </Td>
+                  </Tr>
+                ))}
+              </TBody>
+            </Table>
+            {!isRelaysLoading && !filteredRelays?.length && (
+              <EmptyState
+                title={
+                  relays?.length ? "No Relays match search..." : "No Relays have been configured"
+                }
+                icon={relays?.length ? faSearch : faDoorClosed}
+              />
+            )}
+            <DeleteActionModal
+              isOpen={popUp.deleteRelay.isOpen}
+              title={`Are you sure you want to delete relay ${
+                (popUp?.deleteRelay?.data as { name: string })?.name || ""
+              }?`}
+              onChange={(isOpen) => handlePopUpToggle("deleteRelay", isOpen)}
+              deleteKey="confirm"
+              onDeleteApproved={() => handleDeleteRelay()}
+            />
+          </TableContainer>
+        </div>
+      </div>
+    );
+  },
+  { action: OrgRelayPermissionActions.ListRelays, subject: OrgPermissionSubjects.Relay }
+);
@@ -0,0 +1 @@
+export { RelayTab } from "./RelayTab";
@@ -0,0 +1,3 @@
+export { GatewayTab } from "./GatewayTab/GatewayTab";
+export { NetworkingTabGroup } from "./NetworkingTabGroup/NetworkingTabGroup";
+export { RelayTab } from "./RelayTab/RelayTab";
@@ -0,0 +1,26 @@
+import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { NetworkingPage } from "./NetworkingPage";
+
+const NetworkingPageQueryParams = z.object({
+  selectedTab: z.string().catch("")
+});
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/networking/"
+)({
+  component: NetworkingPage,
+  validateSearch: zodValidator(NetworkingPageQueryParams),
+  search: {
+    middlewares: [stripSearchParams({ selectedTab: "" })]
+  },
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Networking"
+      }
+    ]
+  })
+});
@@ -41,12 +41,12 @@ export const ConditionsFields = ({
  } = useFormContext<TFormSchema>();
  const items = useFieldArray({
    control,
-    name: `permissions.${subject}.${position}.conditions`
+    name: `permissions.${subject}.${position}.conditions` as const
  });

  const conditionErrorMessage =
-    errors?.permissions?.[subject]?.[position]?.conditions?.message ||
-    errors?.permissions?.[subject]?.[position]?.conditions?.root?.message;
+    (errors?.permissions as any)?.[subject]?.[position]?.conditions?.message ||
+    (errors?.permissions as any)?.[subject]?.[position]?.conditions?.root?.message;

  return (
    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
@@ -91,7 +91,7 @@ export const ConditionsFields = ({
        {Boolean(items.fields.length) &&
          items.fields.map((el, index) => {
            const condition =
-              (watch(`permissions.${subject}.${position}.conditions.${index}`) as {
+              (watch(`permissions.${subject}.${position}.conditions.${index}` as const) as {
                lhs: string;
                rhs: string;
                operator: string;
@@ -104,7 +104,7 @@ export const ConditionsFields = ({
                <div className="w-1/4">
                  <Controller
                    control={control}
-                    name={`permissions.${subject}.${position}.conditions.${index}.lhs`}
+                    name={`permissions.${subject}.${position}.conditions.${index}.lhs` as const}
                    render={({ field, fieldState: { error } }) => (
                      <FormControl
                        isError={Boolean(error?.message)}
@@ -116,7 +116,7 @@ export const ConditionsFields = ({
                          {...field}
                          onValueChange={(e) => {
                            setValue(
-                              `permissions.${subject}.${position}.conditions.${index}.operator`,
+                              `permissions.${subject}.${position}.conditions.${index}.operator` as const,
                              PermissionConditionOperators.$IN as never
                            );
                            field.onChange(e);
@@ -137,7 +137,9 @@ export const ConditionsFields = ({
                <div className="flex w-44 items-center space-x-2">
                  <Controller
                    control={control}
-                    name={`permissions.${subject}.${position}.conditions.${index}.operator`}
+                    name={
+                      `permissions.${subject}.${position}.conditions.${index}.operator` as const
+                    }
                    render={({ field, fieldState: { error } }) => (
                      <FormControl
                        isError={Boolean(error?.message)}
@@ -171,7 +173,7 @@ export const ConditionsFields = ({
                <div className="flex-grow">
                  <Controller
                    control={control}
-                    name={`permissions.${subject}.${position}.conditions.${index}.rhs`}
+                    name={`permissions.${subject}.${position}.conditions.${index}.rhs` as const}
                    render={({ field, fieldState: { error } }) => (
                      <FormControl
                        isError={Boolean(error?.message)}
@@ -0,0 +1,19 @@
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
+
+import { ConditionsFields } from "./ConditionsFields";
+
+type Props = {
+  position?: number;
+  isDisabled?: boolean;
+};
+
+export const PkiSyncPermissionConditions = ({ position = 0, isDisabled }: Props) => {
+  return (
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.PkiSyncs}
+      position={position}
+      selectOptions={[{ value: "subscriberName", label: "Subscriber Name" }]}
+    />
+  );
+};
@@ -21,6 +21,7 @@ import {
  ProjectPermissionKmipActions,
  ProjectPermissionMemberActions,
  ProjectPermissionPkiSubscriberActions,
+  ProjectPermissionPkiSyncActions,
  ProjectPermissionPkiTemplateActions,
  ProjectPermissionSecretActions,
  ProjectPermissionSecretEventActions,
@@ -101,6 +102,16 @@ const SecretSyncPolicyActionSchema = z.object({
  [ProjectPermissionSecretSyncActions.RemoveSecrets]: z.boolean().optional()
 });

+const PkiSyncPolicyActionSchema = z.object({
+  [ProjectPermissionPkiSyncActions.Read]: z.boolean().optional(),
+  [ProjectPermissionPkiSyncActions.Create]: z.boolean().optional(),
+  [ProjectPermissionPkiSyncActions.Edit]: z.boolean().optional(),
+  [ProjectPermissionPkiSyncActions.Delete]: z.boolean().optional(),
+  [ProjectPermissionPkiSyncActions.SyncCertificates]: z.boolean().optional(),
+  [ProjectPermissionPkiSyncActions.ImportCertificates]: z.boolean().optional(),
+  [ProjectPermissionPkiSyncActions.RemoveCertificates]: z.boolean().optional()
+});
+
 const CommitPolicyActionSchema = z.object({
  [ProjectPermissionCommitsActions.Read]: z.boolean().optional(),
  [ProjectPermissionCommitsActions.PerformRollback]: z.boolean().optional()
@@ -326,6 +337,12 @@ export const projectRoleFormSchema = z.object({
      })
        .array()
        .default([]),
+      [ProjectPermissionSub.PkiSyncs]: PkiSyncPolicyActionSchema.extend({
+        inverted: z.boolean().optional(),
+        conditions: ConditionSchema
+      })
+        .array()
+        .default([]),

      [ProjectPermissionSub.Commits]: CommitPolicyActionSchema.array().default([]),
      [ProjectPermissionSub.Member]: MemberPolicyActionSchema.array().default([]),
@@ -408,6 +425,7 @@ type TConditionalFields =
  | ProjectPermissionSub.SecretRotation
  | ProjectPermissionSub.Identity
  | ProjectPermissionSub.SecretSyncs
+  | ProjectPermissionSub.PkiSyncs
  | ProjectPermissionSub.SecretEvents
  | ProjectPermissionSub.AppConnections;

@@ -424,6 +442,7 @@ export const isConditionalSubjects = (
  subject === ProjectPermissionSub.PkiSubscribers ||
  subject === ProjectPermissionSub.CertificateTemplates ||
  subject === ProjectPermissionSub.SecretSyncs ||
+  subject === ProjectPermissionSub.PkiSyncs ||
  subject === ProjectPermissionSub.SecretEvents ||
  subject === ProjectPermissionSub.AppConnections;

@@ -532,6 +551,7 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
        ProjectPermissionSub.SshCertificates,
        ProjectPermissionSub.SshHostGroups,
        ProjectPermissionSub.SecretSyncs,
+        ProjectPermissionSub.PkiSyncs,
        ProjectPermissionSub.SecretEvents,
        ProjectPermissionSub.AppConnections
      ].includes(subject)
@@ -594,6 +614,38 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
          return;
        }

+        if (subject === ProjectPermissionSub.PkiSyncs) {
+          const canRead = action.includes(ProjectPermissionPkiSyncActions.Read);
+          const canEdit = action.includes(ProjectPermissionPkiSyncActions.Edit);
+          const canDelete = action.includes(ProjectPermissionPkiSyncActions.Delete);
+          const canCreate = action.includes(ProjectPermissionPkiSyncActions.Create);
+          const canSyncCertificates = action.includes(
+            ProjectPermissionPkiSyncActions.SyncCertificates
+          );
+          const canImportCertificates = action.includes(
+            ProjectPermissionPkiSyncActions.ImportCertificates
+          );
+          const canRemoveCertificates = action.includes(
+            ProjectPermissionPkiSyncActions.RemoveCertificates
+          );
+
+          if (!formVal[subject]) formVal[subject] = [{ conditions: [], inverted: false }];
+
+          // from above statement we are sure it won't be undefined
+          formVal[subject]!.push({
+            [ProjectPermissionPkiSyncActions.Read]: canRead,
+            [ProjectPermissionPkiSyncActions.Create]: canCreate,
+            [ProjectPermissionPkiSyncActions.Edit]: canEdit,
+            [ProjectPermissionPkiSyncActions.Delete]: canDelete,
+            [ProjectPermissionPkiSyncActions.SyncCertificates]: canSyncCertificates,
+            [ProjectPermissionPkiSyncActions.ImportCertificates]: canImportCertificates,
+            [ProjectPermissionPkiSyncActions.RemoveCertificates]: canRemoveCertificates,
+            conditions: conditions ? convertCaslConditionToFormOperator(conditions) : [],
+            inverted
+          });
+          return;
+        }
+
        if (subject === ProjectPermissionSub.DynamicSecrets) {
          const canRead = action.includes(ProjectPermissionDynamicSecretActions.ReadRootCredential);
          const canEdit = action.includes(ProjectPermissionDynamicSecretActions.EditRootCredential);
@@ -1532,6 +1584,24 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
      }
    ]
  },
+  [ProjectPermissionSub.PkiSyncs]: {
+    title: "Certificate Syncs",
+    actions: [
+      { label: "Read", value: ProjectPermissionPkiSyncActions.Read },
+      { label: "Create", value: ProjectPermissionPkiSyncActions.Create },
+      { label: "Modify", value: ProjectPermissionPkiSyncActions.Edit },
+      { label: "Remove", value: ProjectPermissionPkiSyncActions.Delete },
+      { label: "Trigger Syncs", value: ProjectPermissionPkiSyncActions.SyncCertificates },
+      {
+        label: "Import Certificates from Destination",
+        value: ProjectPermissionPkiSyncActions.ImportCertificates
+      },
+      {
+        label: "Remove Certificates from Destination",
+        value: ProjectPermissionPkiSyncActions.RemoveCertificates
+      }
+    ]
+  },
  [ProjectPermissionSub.Kmip]: {
    title: "KMIP",
    actions: [
@@ -1703,6 +1773,7 @@ const CertificateManagerPermissionSubjects = (enabled = false) => ({
  [ProjectPermissionSub.PkiCollections]: enabled,
  [ProjectPermissionSub.PkiAlerts]: enabled,
  [ProjectPermissionSub.PkiSubscribers]: enabled,
+  [ProjectPermissionSub.PkiSyncs]: enabled,
  [ProjectPermissionSub.CertificateAuthorities]: enabled,
  [ProjectPermissionSub.CertificateTemplates]: enabled,
  [ProjectPermissionSub.Certificates]: enabled
@@ -1950,6 +2021,10 @@ export const RoleTemplates: Record<ProjectType, RoleTemplate[]> = {
            ProjectPermissionCertificateActions.Read,
            ProjectPermissionCertificateActions.ReadPrivateKey
          ]
+        },
+        {
+          subject: ProjectPermissionSub.PkiSyncs,
+          actions: [ProjectPermissionPkiSyncActions.Read]
        }
      ]
    },
@@ -1977,6 +2052,10 @@ export const RoleTemplates: Record<ProjectType, RoleTemplate[]> = {
        {
          subject: ProjectPermissionSub.Certificates,
          actions: Object.values(ProjectPermissionCertificateActions)
+        },
+        {
+          subject: ProjectPermissionSub.PkiSyncs,
+          actions: Object.values(ProjectPermissionPkiSyncActions)
        }
      ]
    },
@@ -23,6 +23,7 @@ import { GeneralPermissionPolicies } from "./GeneralPermissionPolicies";
 import { IdentityManagementPermissionConditions } from "./IdentityManagementPermissionConditions";
 import { PermissionEmptyState } from "./PermissionEmptyState";
 import { PkiSubscriberPermissionConditions } from "./PkiSubscriberPermissionConditions";
+import { PkiSyncPermissionConditions } from "./PkiSyncPermissionConditions";
 import { PkiTemplatePermissionConditions } from "./PkiTemplatePermissionConditions";
 import {
  EXCLUDED_PERMISSION_SUBS,
@@ -74,6 +75,10 @@ export const renderConditionalComponents = (
      return <SecretSyncPermissionConditions isDisabled={isDisabled} />;
    }

+    if (subject === ProjectPermissionSub.PkiSyncs) {
+      return <PkiSyncPermissionConditions isDisabled={isDisabled} />;
+    }
+
    if (subject === ProjectPermissionSub.SecretEvents) {
      return <SecretEventPermissionConditions isDisabled={isDisabled} />;
    }
@@ -28,7 +28,9 @@ export const IntegrationsListPage = () => {
  const updateSelectedTab = (tab: string) => {
    navigate({
      to: ROUTE_PATHS.SecretManager.IntegrationsListPage.path,
-      search: (prev) => ({ ...prev, selectedTab: tab as IntegrationsListPageTabs }),
+      search: {
+        selectedTab: tab as IntegrationsListPageTabs
+      },
      params: {
        projectId: currentProject.id
      }
@@ -113,7 +113,6 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
          projectId,
          secretPath,
          secretKey: secret.key,
-          secretValue: secret.value || "",
          type: SecretType.Shared,
          tagIds: secret.tags?.map((tag) => tag.id),
          secretComment: secret.comment,
@@ -23,6 +23,7 @@ export type Props = {
  newVersion?: Omit<TSecretApprovalSecChange, "tags"> & {
    tags?: WsTag[];
    secretMetadata?: { key: string; value: string }[];
+    skipMultilineEncoding?: boolean;
  };
  presentSecretVersionNumber: number;
  hasMerged?: boolean;
@@ -217,6 +218,14 @@ export const SecretApprovalRequestChangeItem = ({
                  )}
                </div>
              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Multi-line Encoding</div>
+                <div className="text-sm">
+                  {secretVersion?.skipMultilineEncoding?.toString() || (
+                    <span className="text-sm text-mineshaft-300">-</span>
+                  )}{" "}
+                </div>
+              </div>
            </div>
          ) : (
            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
@@ -263,7 +272,7 @@ export const SecretApprovalRequestChangeItem = ({
                        isReadOnly
                        valueAlwaysHidden={newVersion?.secretValueHidden}
                        isVisible={isNewSecretValueVisible}
-                        value={newVersion?.secretValue}
+                        value={newVersion?.secretValue ?? secretVersion?.secretValue}
                        containerClassName={twMerge(
                          "border border-mineshaft-600 bg-bunker-700 py-1.5 text-bunker-300 hover:border-primary-400/50",
                          newVersion?.secretValueHidden ? "pl-8 pr-2" : "px-2"
@@ -287,7 +296,7 @@ export const SecretApprovalRequestChangeItem = ({
              <div className="mb-2">
                <div className="text-sm font-medium text-mineshaft-300">Comment</div>
                <div className="thin-scrollbar max-h-[5rem] max-w-[34rem] overflow-y-auto break-words text-sm xl:max-w-[28rem]">
-                  {newVersion?.secretComment || (
+                  {(newVersion?.secretComment ?? secretVersion?.secretComment) || (
                    <span className="text-sm text-mineshaft-300">-</span>
                  )}{" "}
                </div>
@@ -315,9 +324,9 @@ export const SecretApprovalRequestChangeItem = ({
              </div>
              <div className="mb-2">
                <div className="text-sm font-medium text-mineshaft-300">Metadata</div>
-                {newVersion?.secretMetadata?.length ? (
+                {(newVersion?.secretMetadata ?? secretVersion?.secretMetadata)?.length ? (
                  <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
-                    {newVersion.secretMetadata?.map((el) => (
+                    {(newVersion?.secretMetadata ?? secretVersion?.secretMetadata)?.map((el) => (
                      <div key={el.key} className="flex items-center">
                        <Tag
                          size="xs"
@@ -353,6 +362,15 @@ export const SecretApprovalRequestChangeItem = ({
                  <p className="text-sm text-mineshaft-300">-</p>
                )}
              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Multi-line Encoding</div>
+                <div className="text-sm">
+                  {newVersion?.skipMultilineEncoding?.toString() ??
+                    secretVersion?.skipMultilineEncoding?.toString() ?? (
+                      <span className="text-sm text-mineshaft-300">-</span>
+                    )}{" "}
+                </div>
+              </div>
            </div>
          ) : (
            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
				`@@ -0,0 +1 @@`
				`export { PkiSyncDestinationCol } from "./PkiSyncDestinationCol";`
				`@@ -0,0 +1 @@`
				`export { PkiSyncsTable } from "./PkiSyncsTable";`
				`@@ -0,0 +1 @@`
				`export { PkiSyncsTab } from "./PkiSyncsTab";`
				`@@ -0,0 +1 @@`
				`export { IntegrationsListPage } from "./IntegrationsListPage";`
				`@@ -0,0 +1 @@`
				`export { AzureKeyVaultPkiSyncDestinationSection } from "./AzureKeyVaultPkiSyncDestinationSection";`
				`@@ -0,0 +1 @@`
				`export { PkiSyncOptionsSection } from "./PkiSyncOptionsSection";`
				`@@ -0,0 +1 @@`
				`export { PkiSyncDetailsByIDPage } from "./PkiSyncDetailsByIDPage";`
				`@@ -0,0 +1 @@`
				`export { NetworkingTabGroup } from "./NetworkingTabGroup";`