feat: removed routes and added kms, cert to pages setup

frontend-v2/src/const/routes.ts

@@ -39,5 +39,8 @@ export const ROUTE_PATHS = Object.freeze({
   SecretDashboardPage: setRoute(
     "/secret-manager/$projectId/secrets/$envSlug",
     "/_authenticate/_ctx-org-details/secret-manager/$projectId/_layout-secret-manager/secrets/$envSlug/"
-  )
+  ),
+  CertAuthDetailsByIDPage: setRoute("cert-auth", "cert-auth"),
+  CertCertificatesPage: setRoute("cert-list", "cert-list"),
+  CertPkiCollectionDetailsByIDPage: setRoute("cert-pki-collection", "cert-pki-collection")
 });

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx

@@ -0,0 +1,168 @@
+import { Helmet } from "react-helmet";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useDeleteCa, useGetCaById } from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { CaInstallCertModal } from "../CertificatesPage/components/CaTab/components/CaInstallCertModal";
+import { CaModal } from "../CertificatesPage/components/CaTab/components/CaModal";
+import { CertificateTemplatesSection } from "../CertificatesPage/components/CertificatesTab/components/CertificateTemplatesSection";
+import {
+  CaCertificatesSection,
+  CaCrlsSection,
+  CaDetailsSection,
+  CaRenewalModal
+} from "./components";
+
+const Page = () => {
+  const navigate = useNavigate();
+  const params = useParams({
+    from: ROUTE_PATHS.CertAuthDetailsByIDPage.id
+  });
+  const caId = params.caId as string;
+  const { data } = useGetCaById(caId);
+
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { mutateAsync: deleteCa } = useDeleteCa();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "ca",
+    "deleteCa",
+    "installCaCert",
+    "renewCa"
+  ] as const);
+
+  const onRemoveCaSubmit = async (caIdToDelete: string) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await deleteCa({ caId: caIdToDelete, projectSlug: currentWorkspace.slug });
+
+      createNotification({
+        text: "Successfully deleted CA",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteCa");
+      navigate({ to: `/${ProjectType.CertificateManager}/${projectId}/certificates` as const });
+    } catch {
+      createNotification({
+        text: "Failed to delete CA",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      {data && (
+        <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
+          <Button
+            variant="link"
+            type="submit"
+            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+            onClick={() =>
+              navigate({
+                to: `/${ProjectType.CertificateManager}/${projectId}/certificates` as const
+              })
+            }
+            className="mb-4"
+          >
+            Certificate Authorities
+          </Button>
+          <div className="mb-4 flex items-center justify-between">
+            <p className="text-3xl font-semibold text-white">{data.friendlyName}</p>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild className="rounded-lg">
+                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                  <Tooltip content="More options">
+                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                  </Tooltip>
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="p-1">
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Delete}
+                  a={ProjectPermissionSub.CertificateAuthorities}
+                >
+                  {(isAllowed) => (
+                    <DropdownMenuItem
+                      className={twMerge(
+                        isAllowed
+                          ? "hover:!bg-red-500 hover:!text-white"
+                          : "pointer-events-none cursor-not-allowed opacity-50"
+                      )}
+                      onClick={() =>
+                        handlePopUpOpen("deleteCa", {
+                          caId: data.id,
+                          dn: data.dn
+                        })
+                      }
+                      disabled={!isAllowed}
+                    >
+                      Delete CA
+                    </DropdownMenuItem>
+                  )}
+                </ProjectPermissionCan>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <div className="flex">
+            <div className="mr-4 w-96">
+              <CaDetailsSection caId={caId} handlePopUpOpen={handlePopUpOpen} />
+            </div>
+            <div className="w-full">
+              <CaCertificatesSection caId={caId} />
+              <CertificateTemplatesSection caId={caId} />
+              <CaCrlsSection caId={caId} />
+            </div>
+          </div>
+        </div>
+      )}
+      <CaModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CaRenewalModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CaInstallCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deleteCa.isOpen}
+        title={`Are you sure want to remove the CA ${
+          (popUp?.deleteCa?.data as { dn: string })?.dn || ""
+        } from the project?`}
+        subTitle="This action will delete other CAs and certificates below it in your CA hierarchy."
+        onChange={(isOpen) => handlePopUpToggle("deleteCa", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => onRemoveCaSubmit((popUp?.deleteCa?.data as { caId: string })?.caId)}
+      />
+    </div>
+  );
+};
+
+export const CertAuthDetailsByIDPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>Certificate Authority</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Helmet>
+      <Page />
+    </>
+  );
+};

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesSection.tsx

@@ -0,0 +1,28 @@
+import { CaCertificatesTable } from "./CaCertificatesTable";
+
+type Props = {
+  caId: string;
+};
+
+export const CaCertificatesSection = ({ caId }: Props) => {
+  return (
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">CA Certificates</h3>
+        {/* <IconButton
+          ariaLabel="copy icon"
+          variant="plain"
+          className="group relative"
+          onClick={() => {
+            // handlePopUpOpen("addIdentityToProject");
+          }}
+        >
+          <FontAwesomeIcon icon={faPlus} />
+        </IconButton> */}
+      </div>
+      <div className="py-4">
+        <CaCertificatesTable caId={caId} />
+      </div>
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/CaCertificatesTable.tsx

@@ -0,0 +1,133 @@
+import { faCertificate, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as x509 from "@peculiar/x509";
+import { format } from "date-fns";
+import FileSaver from "file-saver";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useGetCaCerts } from "@app/hooks/api";
+
+type Props = {
+  caId: string;
+};
+
+export const CaCertificatesTable = ({ caId }: Props) => {
+  const { data: caCerts, isPending } = useGetCaCerts(caId);
+
+  const downloadTxtFile = (filename: string, content: string) => {
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    FileSaver.saveAs(blob, filename);
+  };
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>CA Certificate #</Th>
+            <Th>Not Before</Th>
+            <Th>Not After</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={4} innerKey="ca-certificates" />}
+          {!isPending &&
+            caCerts?.map((caCert, index) => {
+              const isLastItem = index === caCerts.length - 1;
+              const caCertObj = new x509.X509Certificate(caCert.certificate);
+              return (
+                <Tr key={`ca-cert=${caCert.serialNumber}`}>
+                  <Td>
+                    <div className="flex items-center">
+                      CA Certificate {caCert.version}
+                      {isLastItem && (
+                        <Badge variant="success" className="ml-4">
+                          Current
+                        </Badge>
+                      )}
+                    </div>
+                  </Td>
+                  <Td>{format(new Date(caCertObj.notBefore), "yyyy-MM-dd")}</Td>
+                  <Td>{format(new Date(caCertObj.notAfter), "yyyy-MM-dd")}</Td>
+                  <Td>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild className="rounded-lg">
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="p-1">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Edit}
+                          a={ProjectPermissionSub.Identity}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                downloadTxtFile("cert.pem", caCert.certificate);
+                              }}
+                              disabled={!isAllowed}
+                            >
+                              Download CA Certificate
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Delete}
+                          a={ProjectPermissionSub.Identity}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                downloadTxtFile("chain.pem", caCert.certificateChain);
+                              }}
+                              disabled={!isAllowed}
+                            >
+                              Download CA Certificate Chain
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Td>
+                </Tr>
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isPending && !caCerts?.length && (
+        <EmptyState
+          title="This CA does not have any CA certificates installed"
+          icon={faCertificate}
+        />
+      )}
+    </TableContainer>
+  );
+};

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCertificatesSection/index.tsx

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

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCrlsSection/CaCrlsSection.tsx

@@ -0,0 +1,20 @@
+import { CaCrlsTable } from "./CaCrlsTable";
+
+type Props = {
+  caId: string;
+};
+
+export const CaCrlsSection = ({ caId }: Props) => {
+  return (
+    <div className="mt-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">
+          CA Certificate Revocation Lists (CRLs)
+        </h3>
+      </div>
+      <div className="py-4">
+        <CaCrlsTable caId={caId} />
+      </div>
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCrlsSection/CaCrlsTable.tsx

@@ -0,0 +1,88 @@
+import { faCertificate, faFileDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+// import * as x509 from "@peculiar/x509";
+// import { format } from "date-fns";
+import FileSaver from "file-saver";
+
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { useGetCaCrls } from "@app/hooks/api";
+
+type Props = {
+  caId: string;
+};
+
+export const CaCrlsTable = ({ caId }: Props) => {
+  const { data: caCrls, isPending } = useGetCaCrls(caId);
+
+  const downloadTxtFile = (filename: string, content: string) => {
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    FileSaver.saveAs(blob, filename);
+  };
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Distribution Point URL</Th>
+            {/* <Th>This Update</Th> */}
+            {/* <Th>Next Update</Th> */}
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={4} innerKey="ca-certificates" />}
+          {!isPending &&
+            caCrls?.map(({ id, crl }) => {
+              //   const caCrlObj = new x509.X509Crl(crl);
+              return (
+                <Tr key={`ca-crl-${id}`}>
+                  <Td>
+                    <div className="flex items-center">
+                      {`${window.origin}/api/v1/pki/crl/${id}`}
+                    </div>
+                  </Td>
+                  {/* <Td>{format(new Date(caCrlObj.thisUpdate), "yyyy-MM-dd")}</Td> */}
+                  {/* <Td>
+                    {caCrlObj.nextUpdate
+                      ? format(new Date(caCrlObj.nextUpdate), "yyyy-MM-dd")
+                      : "-"}
+                  </Td> */}
+                  <Td>
+                    <Tooltip content="Download CRL">
+                      <IconButton
+                        ariaLabel="copy icon"
+                        variant="plain"
+                        className="group relative"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          downloadTxtFile("crl.pem", crl);
+                        }}
+                      >
+                        <FontAwesomeIcon icon={faFileDownload} />
+                      </IconButton>
+                    </Tooltip>
+                  </Td>
+                </Tr>
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isPending && !caCrls?.length && (
+        <EmptyState title="This CA does not have any CRLs" icon={faCertificate} />
+      )}
+    </TableContainer>
+  );
+};

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaCrlsSection/index.tsx

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

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaDetailsSection.tsx

@@ -0,0 +1,208 @@
+import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, IconButton, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { CaStatus, CaType, useGetCaById } from "@app/hooks/api";
+import { caStatusToNameMap, caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import { certKeyAlgorithmToNameMap } from "@app/hooks/api/certificates/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  caId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["ca", "renewCa", "installCaCert"]>,
+    data?: object
+  ) => void;
+};
+
+export const CaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+  const [copyTextParentId, isCopyingParentId, setCopyTextParentId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  const { data: ca } = useGetCaById(caId);
+
+  return ca ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">CA Details</h3>
+        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Identity}>
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit CA">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("ca", {
+                      caId: ca.id
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </ProjectPermissionCan>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">CA Type</p>
+          <p className="text-sm text-mineshaft-300">{caTypeToNameMap[ca.type]}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">CA ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{ca.id}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextId}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(ca.id);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        {ca.type === CaType.INTERMEDIATE && ca.status !== CaStatus.PENDING_CERTIFICATE && (
+          <div className="mb-4">
+            <p className="text-sm font-semibold text-mineshaft-300">Parent CA ID</p>
+            <div className="group flex align-top">
+              <p className="text-sm text-mineshaft-300">
+                {ca.parentCaId ? ca.parentCaId : "N/A - External Parent CA"}
+              </p>
+              {ca.parentCaId && (
+                <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                  <Tooltip content={copyTextParentId}>
+                    <IconButton
+                      ariaLabel="copy icon"
+                      variant="plain"
+                      className="group relative ml-2"
+                      onClick={() => {
+                        navigator.clipboard.writeText(ca.parentCaId as string);
+                        setCopyTextParentId("Copied");
+                      }}
+                    >
+                      <FontAwesomeIcon icon={isCopyingParentId ? faCheck : faCopy} />
+                    </IconButton>
+                  </Tooltip>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Friendly Name</p>
+          <p className="text-sm text-mineshaft-300">{ca.friendlyName}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Status</p>
+          <p className="text-sm text-mineshaft-300">{caStatusToNameMap[ca.status]}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Key Algorithm</p>
+          <p className="text-sm text-mineshaft-300">{certKeyAlgorithmToNameMap[ca.keyAlgorithm]}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Max Path Length</p>
+          <p className="text-sm text-mineshaft-300">{ca.maxPathLength ?? "-"}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Not Before</p>
+          <p className="text-sm text-mineshaft-300">
+            {ca.notBefore ? format(new Date(ca.notBefore), "yyyy-MM-dd") : "-"}
+          </p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Not After</p>
+          <p className="text-sm text-mineshaft-300">
+            {ca.notAfter ? format(new Date(ca.notAfter), "yyyy-MM-dd") : "-"}
+          </p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Template Issuance Required</p>
+          <p className="text-sm text-mineshaft-300">
+            {ca.requireTemplateForIssuance ? "True" : "False"}
+          </p>
+        </div>
+        {ca.status === CaStatus.ACTIVE && (
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Edit}
+            a={ProjectPermissionSub.CertificateAuthorities}
+          >
+            {(isAllowed) => {
+              return (
+                <Button
+                  isDisabled={!isAllowed}
+                  className="mt-4 w-full"
+                  colorSchema="primary"
+                  type="submit"
+                  onClick={() => {
+                    if (ca.type === CaType.INTERMEDIATE && !ca.parentCaId) {
+                      // intermediate CA with external parent CA
+                      handlePopUpOpen("installCaCert", {
+                        caId,
+                        isParentCaExternal: true
+                      });
+                      return;
+                    }
+
+                    handlePopUpOpen("renewCa", {
+                      caId
+                    });
+                  }}
+                >
+                  Renew CA
+                </Button>
+              );
+            }}
+          </ProjectPermissionCan>
+        )}
+        {ca.status === CaStatus.PENDING_CERTIFICATE && (
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.CertificateAuthorities}
+          >
+            {(isAllowed) => {
+              return (
+                <Button
+                  isDisabled={!isAllowed}
+                  className="mt-4 w-full"
+                  colorSchema="primary"
+                  type="submit"
+                  onClick={() => {
+                    handlePopUpOpen("installCaCert", {
+                      caId
+                    });
+                  }}
+                >
+                  Install CA Certificate
+                </Button>
+              );
+            }}
+          </ProjectPermissionCan>
+        )}
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/components/CaRenewalModal.tsx

@@ -0,0 +1,182 @@
+// import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaRenewalType,
+  useRenewCa
+  //   useGetCaById,
+  // CaType,
+  //   CaStatus
+} from "@app/hooks/api/ca";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const caRenewalTypes = [{ label: "Renew with same key pair", value: CaRenewalType.EXISTING }];
+
+const isValidDate = (dateString: string) => {
+  const date = new Date(dateString);
+  return !Number.isNaN(date.getTime());
+};
+
+const schema = z
+  .object({
+    type: z.enum([CaRenewalType.EXISTING]),
+    notAfter: z.string().trim().refine(isValidDate, { message: "Invalid date format" })
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["renewCa"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["renewCa"]>, state?: boolean) => void;
+};
+
+export const CaRenewalModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const projectSlug = currentWorkspace?.slug || "";
+
+  const popUpData = popUp?.renewCa?.data as {
+    caId: string;
+  };
+
+  //   const { data: ca } = useGetCaById(popUpData?.caId || "");
+  //   const { data: parentCa } = useGetCaById(ca?.parentCaId || "");
+  const { mutateAsync: renewCa } = useRenewCa();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+    // setValue
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      type: CaRenewalType.EXISTING,
+      notAfter: "" // TODO: consider setting a default value
+    }
+  });
+
+  //   useEffect(() => {
+  //     if (ca && ca.status === CaStatus.ACTIVE) {
+  //       const notBeforeDate = new Date(ca.notBefore as string);
+  //       const notAfterDate = new Date(ca.notAfter as string);
+
+  //       const newNotAfterDate = new Date(
+  //         notAfterDate.getTime() + notAfterDate.getTime() - notBeforeDate.getTime()
+  //       );
+
+  //       setValue("notAfter", newNotAfterDate.toISOString().split("T")[0]);
+  //     }
+  //   }, [ca, parentCa]);
+
+  const onFormSubmit = async ({ type, notAfter }: FormData) => {
+    try {
+      if (!projectSlug || !popUpData.caId) return;
+
+      await renewCa({
+        projectSlug,
+        caId: popUpData.caId,
+        notAfter,
+        type
+      });
+
+      handlePopUpToggle("renewCa", false);
+
+      createNotification({
+        text: "Successfully renewed CA",
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.renewCa?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("renewCa", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Renew CA">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="type"
+            defaultValue={CaRenewalType.EXISTING}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="CA Renewal Method"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {caRenewalTypes.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="notAfter"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Valid Until"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="YYYY-MM-DD" />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Renew
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("renewCa", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/components/index.tsx

@@ -0,0 +1,4 @@
+export { CaCertificatesSection } from "./CaCertificatesSection/CaCertificatesSection";
+export { CaCrlsSection } from "./CaCrlsSection";
+export { CaDetailsSection } from "./CaDetailsSection";
+export { CaRenewalModal } from "./CaRenewalModal";

frontend-v2/src/pages/cert-manager/CertAuthDetailsByIDPage/route.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { CertAuthDetailsByIDPage } from "./CertAuthDetailsByIDPage";
+
+export const Route = createFileRoute("")({
+  component: CertAuthDetailsByIDPage
+});

frontend-v2/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx

@@ -0,0 +1,67 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+
+import { CaTab, CertificatesTab, PkiAlertsTab } from "./components";
+
+enum TabSections {
+  Ca = "certificate-authorities",
+  Certificates = "certificates",
+  Alerting = "alerting"
+}
+
+export const CertificatesPage = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Certificates" })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Helmet>
+      <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
+        <p className="mb-4 mr-4 text-3xl font-semibold text-white">Internal PKI</p>
+        <Tabs defaultValue={TabSections.Certificates}>
+          <TabList>
+            <Tab value={TabSections.Certificates}>Certificates</Tab>
+            <Tab value={TabSections.Ca}>Certificate Authorities</Tab>
+            <Tab value={TabSections.Alerting}>Alerting</Tab>
+          </TabList>
+          <TabPanel value={TabSections.Certificates}>
+            <ProjectPermissionCan
+              renderGuardBanner
+              passThrough={false}
+              I={ProjectPermissionActions.Read}
+              a={ProjectPermissionSub.Certificates}
+            >
+              <CertificatesTab />
+            </ProjectPermissionCan>
+          </TabPanel>
+          <TabPanel value={TabSections.Ca}>
+            <ProjectPermissionCan
+              renderGuardBanner
+              passThrough={false}
+              I={ProjectPermissionActions.Read}
+              a={ProjectPermissionSub.CertificateAuthorities}
+            >
+              <CaTab />
+            </ProjectPermissionCan>
+          </TabPanel>
+          <TabPanel value={TabSections.Alerting}>
+            <ProjectPermissionCan
+              renderGuardBanner
+              passThrough={false}
+              I={ProjectPermissionActions.Read}
+              a={ProjectPermissionSub.PkiAlerts}
+            >
+              <PkiAlertsTab />
+            </ProjectPermissionCan>
+          </TabPanel>
+        </Tabs>
+      </div>
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/CaTab.tsx

@@ -1,18 +1,17 @@
 import { motion } from "framer-motion";
 
-import { GroupsSection } from "./components";
+import { CaSection } from "./components";
 
-export const GroupsTab = () => {
+export const CaTab = () => {
   return (
     <motion.div
-      key="panel-groups"
+      key="panel-certificate-authorities"
       transition={{ duration: 0.15 }}
       initial={{ opacity: 0, translateX: 30 }}
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: 30 }}
     >
-      <GroupsSection />
+      <CaSection />
     </motion.div>
   );
 };
-

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaCertModal.tsx

@@ -0,0 +1,34 @@
+import { Modal, ModalContent } from "@app/components/v2";
+import { useGetCaCert } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { CertificateContent } from "../../CertificatesTab/components/CertificateContent";
+
+type Props = {
+  popUp: UsePopUpState<["caCert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["caCert"]>, state?: boolean) => void;
+};
+
+export const CaCertModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { data } = useGetCaCert((popUp?.caCert?.data as { caId: string })?.caId || "");
+  return (
+    <Modal
+      isOpen={popUp?.caCert?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("caCert", isOpen);
+      }}
+    >
+      <ModalContent title="CA Certificate">
+        {data ? (
+          <CertificateContent
+            serialNumber={data.serialNumber}
+            certificate={data.certificate}
+            certificateChain={data.certificateChain}
+          />
+        ) : (
+          <div />
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaInstallCertModal/CaInstallCertModal.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+
+import { FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { ExternalCaInstallForm } from "./ExternalCaInstallForm";
+import { InternalCaInstallForm } from "./InternalCaInstallForm";
+
+type Props = {
+  popUp: UsePopUpState<["installCaCert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["installCaCert"]>, state?: boolean) => void;
+};
+
+enum ParentCaType {
+  Internal = "internal",
+  External = "external"
+}
+
+export const CaInstallCertModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const popupData = popUp?.installCaCert?.data;
+  const caId = popupData?.caId || "";
+  const isParentCaExternal = popupData?.isParentCaExternal || false;
+  const [parentCaType, setParentCaType] = useState<ParentCaType>(ParentCaType.Internal);
+
+  useEffect(() => {
+    if (popupData?.isParentCaExternal) {
+      setParentCaType(ParentCaType.External);
+    }
+  }, [popupData]);
+
+  const renderForm = (parentCaTypeInput: ParentCaType) => {
+    switch (parentCaTypeInput) {
+      case ParentCaType.Internal:
+        return <InternalCaInstallForm caId={caId} handlePopUpToggle={handlePopUpToggle} />;
+      default:
+        return <ExternalCaInstallForm caId={caId} handlePopUpToggle={handlePopUpToggle} />;
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.installCaCert?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("installCaCert", isOpen);
+      }}
+    >
+      <ModalContent
+        title={`${isParentCaExternal ? "Renew" : "Install"} Intermediate CA certificate`}
+      >
+        <FormControl label="Parent CA Type">
+          <Select
+            value={parentCaType}
+            onValueChange={(e) => setParentCaType(e as ParentCaType)}
+            className="w-full"
+            isDisabled={isParentCaExternal}
+          >
+            <SelectItem
+              value={ParentCaType.Internal}
+              key={`parent-ca-type-${ParentCaType.Internal}`}
+            >
+              Infisical CA
+            </SelectItem>
+            <SelectItem
+              value={ParentCaType.External}
+              key={`parent-ca-type-${ParentCaType.External}`}
+            >
+              External CA
+            </SelectItem>
+          </Select>
+        </FormControl>
+        {renderForm(parentCaType)}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaInstallCertModal/ExternalCaInstallForm.tsx

@@ -0,0 +1,172 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import FileSaver from "file-saver";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, IconButton, TextArea, Tooltip } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetCaCsr, useImportCaCertificate } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  certificate: z.string().min(1),
+  certificateChain: z.string().min(1)
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  caId: string;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["installCaCert"]>, state?: boolean) => void;
+};
+
+export const ExternalCaInstallForm = ({ caId, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const [copyTextCaCsr, isCopyingCaCsr, setCopyTextCaCsr] = useTimedReset<string>({
+    initialState: "Copy to clipboard"
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const { data: csr } = useGetCaCsr(caId);
+  const { mutateAsync: importCaCertificate } = useImportCaCertificate();
+
+  useEffect(() => {
+    reset();
+  }, []);
+
+  const onFormSubmit = async ({ certificate, certificateChain }: FormData) => {
+    try {
+      if (!csr || !caId || !currentWorkspace?.slug) return;
+
+      await importCaCertificate({
+        caId,
+        projectSlug: currentWorkspace?.slug,
+        certificate,
+        certificateChain
+      });
+
+      reset();
+
+      createNotification({
+        text: "Successfully installed certificate for CA",
+        type: "success"
+      });
+      handlePopUpToggle("installCaCert", false);
+    } catch (err) {
+      createNotification({
+        text: "Failed to install certificate for CA",
+        type: "error"
+      });
+    }
+  };
+
+  const downloadTxtFile = (filename: string, content: string) => {
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    FileSaver.saveAs(blob, filename);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      {csr && (
+        <>
+          <div className="my-4 flex items-center justify-between">
+            <h2>CSR for this CA</h2>
+            <div className="flex">
+              <Tooltip content={copyTextCaCsr}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(csr);
+                    setCopyTextCaCsr("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingCaCsr ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+              <Tooltip content="Download">
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    downloadTxtFile("csr.pem", csr);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faDownload} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+          <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 whitespace-pre-wrap break-all">{csr}</p>
+          </div>
+        </>
+      )}
+      <Controller
+        control={control}
+        name="certificate"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Certificate Body" errorText={error?.message} isError={Boolean(error)}>
+            <TextArea
+              {...field}
+              placeholder="PEM-encoded certificate..."
+              reSize="none"
+              className="h-48"
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="certificateChain"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Certificate Chain"
+            errorText={error?.message}
+            isError={Boolean(error)}
+          >
+            <TextArea
+              {...field}
+              placeholder="PEM-encoded certificate chain..."
+              reSize="none"
+              className="h-48"
+            />
+          </FormControl>
+        )}
+      />
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          Install
+        </Button>
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("installCaCert", false)}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaInstallCertModal/InternalCaInstallForm.tsx

@@ -0,0 +1,236 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaStatus,
+  useGetCaById,
+  useGetCaCsr,
+  useImportCaCertificate,
+  useListWorkspaceCas,
+  useSignIntermediate
+} from "@app/hooks/api";
+import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const isValidDate = (dateString: string) => {
+  const date = new Date(dateString);
+  return !Number.isNaN(date.getTime());
+};
+
+const getMiddleDate = (date1: Date, date2: Date) => {
+  const timestamp1 = date1.getTime();
+  const timestamp2 = date2.getTime();
+
+  const middleTimestamp = (timestamp1 + timestamp2) / 2;
+
+  return new Date(middleTimestamp);
+};
+
+const schema = z.object({
+  parentCaId: z.string(),
+  notAfter: z.string().trim().refine(isValidDate, { message: "Invalid date format" }),
+  maxPathLength: z.string()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  caId: string;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["installCaCert"]>, state?: boolean) => void;
+};
+
+export const InternalCaInstallForm = ({ caId, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data: cas } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug ?? "",
+    status: CaStatus.ACTIVE
+  });
+  const { data: ca } = useGetCaById(caId);
+  const { data: csr } = useGetCaCsr(caId);
+
+  const { mutateAsync: signIntermediate } = useSignIntermediate();
+  const { mutateAsync: importCaCertificate } = useImportCaCertificate();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+    setValue,
+    watch
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      maxPathLength: "0"
+    }
+  });
+
+  useEffect(() => {
+    reset();
+  }, []);
+
+  useEffect(() => {
+    if (cas?.length) {
+      setValue("parentCaId", cas[0].id);
+    }
+  }, [cas, setValue]);
+
+  const parentCaId = watch("parentCaId");
+
+  const { data: parentCa } = useGetCaById(parentCaId);
+
+  useEffect(() => {
+    if (parentCa?.maxPathLength) {
+      setValue(
+        "maxPathLength",
+        (parentCa.maxPathLength === -1 ? 3 : parentCa.maxPathLength - 1).toString()
+      );
+    }
+
+    if (parentCa?.notAfter) {
+      const parentCaNotAfter = new Date(parentCa.notAfter);
+      const middleDate = getMiddleDate(new Date(), parentCaNotAfter);
+      setValue("notAfter", format(middleDate, "yyyy-MM-dd"));
+    }
+  }, [parentCa]);
+
+  const onFormSubmit = async ({ notAfter, maxPathLength }: FormData) => {
+    try {
+      if (!csr || !caId || !currentWorkspace?.slug) return;
+
+      const { certificate, certificateChain } = await signIntermediate({
+        caId: parentCaId,
+        csr,
+        maxPathLength: Number(maxPathLength),
+        notAfter,
+        notBefore: new Date().toISOString()
+      });
+
+      await importCaCertificate({
+        caId,
+        projectSlug: currentWorkspace?.slug,
+        certificate,
+        certificateChain
+      });
+
+      reset();
+
+      createNotification({
+        text: "Successfully installed certificate for CA",
+        type: "success"
+      });
+      handlePopUpToggle("installCaCert", false);
+    } catch (err) {
+      createNotification({
+        text: "Failed to install certificate for CA",
+        type: "error"
+      });
+    }
+  };
+
+  function generatePathLengthOpts(parentCaMaxPathLength: number): number[] {
+    if (parentCaMaxPathLength === -1) {
+      return [-1, 0, 1, 2, 3];
+    }
+
+    return Array.from({ length: parentCaMaxPathLength }, (_, index) => index);
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        name="parentCaId"
+        // defaultValue=""
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl
+            label="Parent CA"
+            errorText={error?.message}
+            isError={Boolean(error)}
+            isRequired
+          >
+            <Select
+              //   defaultValue={field.value}
+              {...field}
+              onValueChange={onChange}
+              className="w-full"
+            >
+              {(cas || [])
+                .filter((c) => {
+                  const isParentCaNotSelf = c.id !== ca?.id;
+                  const isParentCaActive = c.status === CaStatus.ACTIVE;
+                  const isParentCaAllowedChildrenCas = c.maxPathLength && c.maxPathLength !== 0;
+
+                  return isParentCaNotSelf && isParentCaActive && isParentCaAllowedChildrenCas;
+                })
+                .map(({ id, type, dn }) => (
+                  <SelectItem value={id} key={`parent-ca-${id}`}>
+                    {`${caTypeToNameMap[type]}: ${dn}`}
+                  </SelectItem>
+                ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="notAfter"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Valid Until"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isRequired
+          >
+            <Input {...field} placeholder="YYYY-MM-DD" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="maxPathLength"
+        // defaultValue="0"
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl label="Path Length" errorText={error?.message} isError={Boolean(error)}>
+            <Select
+              //   defaultValue={field.value}
+              {...field}
+              onValueChange={onChange}
+              className="w-full"
+            >
+              {generatePathLengthOpts(parentCa?.maxPathLength || 0).map((value) => (
+                <SelectItem value={String(value)} key={`ca-path-length-${value}`}>
+                  {`${value}`}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          Install
+        </Button>
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("installCaCert", false)}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaInstallCertModal/index.tsx

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

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaModal.tsx

@@ -0,0 +1,471 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Switch
+  // DatePicker
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { CaType, useCreateCa, useGetCaById, useUpdateCa } from "@app/hooks/api/ca";
+import { certKeyAlgorithms } from "@app/hooks/api/certificates/constants";
+import { CertKeyAlgorithm } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const isValidDate = (dateString: string) => {
+  const date = new Date(dateString);
+  return !Number.isNaN(date.getTime());
+};
+
+const getDateTenYearsFromToday = () => {
+  const date = new Date();
+  date.setFullYear(date.getFullYear() + 10);
+  return format(date, "yyyy-MM-dd");
+};
+
+const schema = z
+  .object({
+    type: z.enum([CaType.ROOT, CaType.INTERMEDIATE]),
+    friendlyName: z.string(),
+    organization: z.string(),
+    ou: z.string(),
+    country: z.string(),
+    province: z.string(),
+    locality: z.string(),
+    commonName: z.string(),
+    notAfter: z.string().trim().refine(isValidDate, { message: "Invalid date format" }),
+    maxPathLength: z.string(),
+    keyAlgorithm: z.enum([
+      CertKeyAlgorithm.RSA_2048,
+      CertKeyAlgorithm.RSA_4096,
+      CertKeyAlgorithm.ECDSA_P256,
+      CertKeyAlgorithm.ECDSA_P384
+    ]),
+    requireTemplateForIssuance: z.boolean()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["ca"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["ca"]>, state?: boolean) => void;
+};
+
+const caTypes = [
+  { label: "Root", value: CaType.ROOT },
+  { label: "Intermediate", value: CaType.INTERMEDIATE }
+];
+
+export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  // const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
+
+  const { data: ca } = useGetCaById((popUp?.ca?.data as { caId: string })?.caId || "");
+
+  const { mutateAsync: createMutateAsync } = useCreateCa();
+  const { mutateAsync: updateMutateAsync } = useUpdateCa();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+    watch
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      type: CaType.ROOT,
+      friendlyName: "",
+      organization: "",
+      ou: "",
+      country: "",
+      province: "",
+      locality: "",
+      commonName: "",
+      notAfter: getDateTenYearsFromToday(),
+      maxPathLength: "-1",
+      keyAlgorithm: CertKeyAlgorithm.RSA_2048
+    }
+  });
+
+  const caType = watch("type");
+
+  useEffect(() => {
+    if (ca) {
+      reset({
+        type: ca.type,
+        friendlyName: ca.friendlyName,
+        organization: ca.organization,
+        ou: ca.ou,
+        country: ca.country,
+        province: ca.province,
+        locality: ca.locality,
+        commonName: ca.commonName,
+        notAfter: ca.notAfter ? format(new Date(ca.notAfter), "yyyy-MM-dd") : "",
+        maxPathLength: ca.maxPathLength ? String(ca.maxPathLength) : "",
+        keyAlgorithm: ca.keyAlgorithm,
+        requireTemplateForIssuance: ca.requireTemplateForIssuance
+      });
+    } else {
+      reset({
+        type: CaType.ROOT,
+        friendlyName: "",
+        organization: "",
+        ou: "",
+        country: "",
+        province: "",
+        locality: "",
+        commonName: "",
+        notAfter: getDateTenYearsFromToday(),
+        maxPathLength: "-1",
+        keyAlgorithm: CertKeyAlgorithm.RSA_2048,
+        requireTemplateForIssuance: true
+      });
+    }
+  }, [ca]);
+
+  const onFormSubmit = async ({
+    type,
+    friendlyName,
+    commonName,
+    organization,
+    ou,
+    country,
+    locality,
+    province,
+    notAfter,
+    maxPathLength,
+    keyAlgorithm,
+    requireTemplateForIssuance
+  }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      if (ca) {
+        // update
+        await updateMutateAsync({
+          projectSlug: currentWorkspace.slug,
+          caId: ca.id,
+          requireTemplateForIssuance
+        });
+      } else {
+        // create
+        await createMutateAsync({
+          projectSlug: currentWorkspace.slug,
+          type,
+          friendlyName,
+          commonName,
+          organization,
+          ou,
+          country,
+          province,
+          locality,
+          notAfter,
+          maxPathLength: Number(maxPathLength),
+          keyAlgorithm,
+          requireTemplateForIssuance
+        });
+      }
+
+      reset();
+      handlePopUpToggle("ca", false);
+
+      createNotification({
+        text: `Successfully ${ca ? "updated" : "created"} CA`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create CA",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.ca?.isOpen}
+      onOpenChange={(isOpen) => {
+        reset();
+        handlePopUpToggle("ca", isOpen);
+      }}
+    >
+      <ModalContent title={`${ca ? "View" : "Create"} Private CA`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          {ca && (
+            <FormControl label="CA ID">
+              <Input value={ca.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            name="type"
+            defaultValue={CaType.ROOT}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl label="CA Type" errorText={error?.message} isError={Boolean(error)}>
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                  isDisabled={Boolean(ca)}
+                >
+                  {caTypes.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          {caType === CaType.ROOT && (
+            <>
+              {/* <Controller
+                name="notAfter"
+                control={control}
+                defaultValue={getDefaultNotAfterDate()}
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      label="Validity"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                      className="mr-4"
+                    >
+                      <DatePicker
+                        value={field.value || undefined}
+                        onChange={(date) => {
+                          onChange(date);
+                          setIsStartDatePickerOpen(false);
+                        }}
+                        popUpProps={{
+                          open: isStartDatePickerOpen,
+                          onOpenChange: setIsStartDatePickerOpen
+                        }}
+                        popUpContentProps={{}}
+                      />
+                    </FormControl>
+                  );
+                }}
+              /> */}
+              <Controller
+                control={control}
+                defaultValue=""
+                name="notAfter"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Valid Until"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    isRequired
+                  >
+                    <Input {...field} placeholder="YYYY-MM-DD" isDisabled={Boolean(ca)} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="maxPathLength"
+                defaultValue="-1"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl
+                    label="Path Length"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                    className="mt-4"
+                  >
+                    <Select
+                      defaultValue={field.value}
+                      {...field}
+                      onValueChange={(e) => onChange(e)}
+                      className="w-full"
+                      isDisabled={Boolean(ca)}
+                    >
+                      {[-1, 0, 1, 2, 3, 4].map((value) => (
+                        <SelectItem value={String(value)} key={`ca-path-length-${value}`}>
+                          {`${value}`}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+            </>
+          )}
+          <Controller
+            control={control}
+            name="keyAlgorithm"
+            defaultValue={CertKeyAlgorithm.RSA_2048}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Key Algorithm"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                  isDisabled={Boolean(ca)}
+                >
+                  {certKeyAlgorithms.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="friendlyName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Friendly Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="My CA" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="organization"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Organization (O)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="Acme Corp" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="ou"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Organization Unit (OU)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="Engineering" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="country"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Country Name (C)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="United States (US)" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="province"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="State or Province Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="California" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="locality"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Locality Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="San Francisco" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="commonName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Common Name (CN)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="Example CA" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="requireTemplateForIssuance"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message} className="my-8">
+                  <Switch
+                    id="is-active"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="w-full">Require Template for Certificate Issuance</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {popUp?.ca?.data ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("ca", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaSection.tsx

@@ -0,0 +1,132 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { CaStatus, useDeleteCa, useUpdateCa } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { CaCertModal } from "./CaCertModal";
+import { CaInstallCertModal } from "./CaInstallCertModal";
+import { CaModal } from "./CaModal";
+import { CaTable } from "./CaTable";
+
+export const CaSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync: deleteCa } = useDeleteCa();
+  const { mutateAsync: updateCa } = useUpdateCa();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "ca",
+    "caCert",
+    "installCaCert",
+    "deleteCa",
+    "caStatus", // enable / disable
+    "upgradePlan"
+  ] as const);
+
+  const onRemoveCaSubmit = async (caId: string) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await deleteCa({ caId, projectSlug: currentWorkspace.slug });
+
+      createNotification({
+        text: "Successfully deleted CA",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteCa");
+    } catch {
+      createNotification({
+        text: "Failed to delete CA",
+        type: "error"
+      });
+    }
+  };
+
+  const onUpdateCaStatus = async ({ caId, status }: { caId: string; status: CaStatus }) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await updateCa({ caId, projectSlug: currentWorkspace.slug, status });
+
+      createNotification({
+        text: `Successfully ${status === CaStatus.ACTIVE ? "enabled" : "disabled"} CA`,
+        type: "success"
+      });
+
+      handlePopUpClose("caStatus");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${status === CaStatus.ACTIVE ? "enabled" : "disabled"} CA`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Certificate Authorities</p>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.CertificateAuthorities}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("ca")}
+              isDisabled={!isAllowed}
+            >
+              Create CA
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <CaModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CaInstallCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CaCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CaTable handlePopUpOpen={handlePopUpOpen} />
+      <DeleteActionModal
+        isOpen={popUp.deleteCa.isOpen}
+        title={`Are you sure want to remove the CA ${
+          (popUp?.deleteCa?.data as { dn: string })?.dn || ""
+        } from the project?`}
+        subTitle="This action will delete other CAs and certificates below it in your CA hierarchy."
+        onChange={(isOpen) => handlePopUpToggle("deleteCa", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => onRemoveCaSubmit((popUp?.deleteCa?.data as { caId: string })?.caId)}
+      />
+      <DeleteActionModal
+        isOpen={popUp.caStatus.isOpen}
+        title={`Are you sure want to ${
+          (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
+            ? "enable"
+            : "disable"
+        } the CA ${(popUp?.caStatus?.data as { dn: string })?.dn || ""} from the project?`}
+        subTitle={
+          (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
+            ? "This action will allow the CA to start issuing certificates again."
+            : "This action will prevent the CA from issuing new certificates."
+        }
+        onChange={(isOpen) => handlePopUpToggle("caStatus", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onUpdateCaStatus(popUp?.caStatus?.data as { caId: string; status: CaStatus })
+        }
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
+      />
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/components/CaTable.tsx

@@ -0,0 +1,223 @@
+import { faBan, faCertificate, faEllipsis, faTrash } 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 { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { CaStatus, useListWorkspaceCas } from "@app/hooks/api";
+import {
+  caStatusToNameMap,
+  caTypeToNameMap,
+  getCaStatusBadgeVariant
+} from "@app/hooks/api/ca/constants";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["installCaCert", "caCert", "ca", "deleteCa", "caStatus", "upgradePlan"]
+    >,
+    data?: {
+      caId?: string;
+      dn?: string;
+      status?: CaStatus;
+      description?: string;
+    }
+  ) => void;
+};
+
+export const CaTable = ({ handlePopUpOpen }: Props) => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const { data, isPending } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug ?? ""
+  });
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Friendly Name</Th>
+              <Th>Status</Th>
+              <Th>Type</Th>
+              <Th>Valid Until</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={3} innerKey="project-cas" />}
+            {!isPending &&
+              data &&
+              data.length > 0 &&
+              data.map((ca) => {
+                return (
+                  <Tr
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    key={`ca-${ca.id}`}
+                    onClick={() =>
+                      navigate({
+                        to: `/${ProjectType.CertificateManager}/${currentWorkspace?.id}/ca/${ca.id}` as const
+                      })
+                    }
+                  >
+                    <Td>{ca.friendlyName}</Td>
+                    <Td>
+                      <Badge variant={getCaStatusBadgeVariant(ca.status)}>
+                        {caStatusToNameMap[ca.status]}
+                      </Badge>
+                    </Td>
+                    <Td>{caTypeToNameMap[ca.type]}</Td>
+                    <Td>
+                      <div className="flex items-center">
+                        <p>{ca.notAfter ? format(new Date(ca.notAfter), "yyyy-MM-dd") : "-"}</p>
+                      </div>
+                    </Td>
+                    <Td className="flex justify-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <Tooltip content="More options">
+                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                            </Tooltip>
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          {ca.status === CaStatus.PENDING_CERTIFICATE && (
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Create}
+                              a={ProjectPermissionSub.CertificateAuthorities}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("installCaCert", {
+                                      caId: ca.id
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faCertificate} />}
+                                >
+                                  Install CA Certificate
+                                </DropdownMenuItem>
+                              )}
+                            </ProjectPermissionCan>
+                          )}
+                          {ca.status !== CaStatus.PENDING_CERTIFICATE && (
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Read}
+                              a={ProjectPermissionSub.CertificateAuthorities}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("caCert", {
+                                      caId: ca.id
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faCertificate} />}
+                                >
+                                  View Certificate
+                                </DropdownMenuItem>
+                              )}
+                            </ProjectPermissionCan>
+                          )}
+                          {(ca.status === CaStatus.ACTIVE || ca.status === CaStatus.DISABLED) && (
+                            <ProjectPermissionCan
+                              I={ProjectPermissionActions.Edit}
+                              a={ProjectPermissionSub.CertificateAuthorities}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("caStatus", {
+                                      caId: ca.id,
+                                      status:
+                                        ca.status === CaStatus.ACTIVE
+                                          ? CaStatus.DISABLED
+                                          : CaStatus.ACTIVE
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faBan} />}
+                                >
+                                  {`${ca.status === CaStatus.ACTIVE ? "Disable" : "Enable"} CA`}
+                                </DropdownMenuItem>
+                              )}
+                            </ProjectPermissionCan>
+                          )}
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.CertificateAuthorities}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deleteCa", {
+                                    caId: ca.id,
+                                    dn: ca.dn
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} />}
+                              >
+                                Delete CA
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && data?.length === 0 && (
+          <EmptyState title="No certificate authorities have been created" icon={faCertificate} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/components/index.tsx

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

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CaTab/index.tsx

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

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/CertificatesTab.tsx

@@ -0,0 +1,21 @@
+import { motion } from "framer-motion";
+
+import { PkiCollectionSection } from "../PkiAlertsTab/components";
+// import { CertificateTemplatesSection } from "./components/CertificateTemplatesSection";
+import { CertificatesSection } from "./components";
+
+export const CertificatesTab = () => {
+  return (
+    <motion.div
+      key="panel-certificates"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <PkiCollectionSection />
+      {/* <CertificateTemplatesSection /> */}
+      <CertificatesSection />
+    </motion.div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateCertModal.tsx

@@ -0,0 +1,37 @@
+import { Modal, ModalContent } from "@app/components/v2";
+import { useGetCertBody } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { CertificateContent } from "./CertificateContent";
+
+type Props = {
+  popUp: UsePopUpState<["certificateCert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["certificateCert"]>, state?: boolean) => void;
+};
+
+export const CertificateCertModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { data } = useGetCertBody(
+    (popUp?.certificateCert?.data as { serialNumber: string })?.serialNumber || ""
+  );
+
+  return (
+    <Modal
+      isOpen={popUp?.certificateCert?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("certificateCert", isOpen);
+      }}
+    >
+      <ModalContent title="Export Certificate">
+        {data ? (
+          <CertificateContent
+            serialNumber={data.serialNumber}
+            certificate={data.certificate}
+            certificateChain={data.certificateChain}
+          />
+        ) : (
+          <div />
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateContent.tsx

@@ -0,0 +1,173 @@
+import { faCheck, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import FileSaver from "file-saver";
+
+import { IconButton, Tooltip } from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+
+type Props = {
+  serialNumber: string;
+  certificate: string;
+  certificateChain: string;
+  privateKey?: string;
+};
+
+export const CertificateContent = ({
+  serialNumber,
+  certificate,
+  certificateChain,
+  privateKey
+}: Props) => {
+  const [copyTextSerialNumber, isCopyingSerialNumber, setCopyTextSerialNumber] =
+    useTimedReset<string>({
+      initialState: "Copy to clipboard"
+    });
+  const [copyTextCertificate, isCopyingCertificate, setCopyTextCertificate] = useTimedReset<string>(
+    {
+      initialState: "Copy to clipboard"
+    }
+  );
+  const [copyTextCertificateChain, isCopyingCertificateChain, setCopyTextCertificateChain] =
+    useTimedReset<string>({
+      initialState: "Copy to clipboard"
+    });
+
+  const [copyTextCertificateSk, isCopyingCertificateSk, setCopyTextCertificateSk] =
+    useTimedReset<string>({
+      initialState: "Copy to clipboard"
+    });
+
+  const downloadTxtFile = (filename: string, content: string) => {
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    FileSaver.saveAs(blob, filename);
+  };
+
+  return (
+    <div>
+      <h2 className="mb-4">Serial Number</h2>
+      <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+        <p className="mr-4 break-all">{serialNumber}</p>
+        <Tooltip content={copyTextSerialNumber}>
+          <IconButton
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="group relative"
+            onClick={() => {
+              navigator.clipboard.writeText(serialNumber);
+              setCopyTextSerialNumber("Copied");
+            }}
+          >
+            <FontAwesomeIcon icon={isCopyingSerialNumber ? faCheck : faCopy} />
+          </IconButton>
+        </Tooltip>
+      </div>
+      <div className="mb-4 flex items-center justify-between">
+        <h2>Certificate Body</h2>
+        <div className="flex">
+          <Tooltip content={copyTextCertificate}>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={() => {
+                navigator.clipboard.writeText(certificate);
+                setCopyTextCertificate("Copied");
+              }}
+            >
+              <FontAwesomeIcon icon={isCopyingCertificate ? faCheck : faCopy} />
+            </IconButton>
+          </Tooltip>
+          <Tooltip content="Download">
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative ml-2"
+              onClick={() => {
+                downloadTxtFile("cert.pem", certificate);
+              }}
+            >
+              <FontAwesomeIcon icon={faDownload} />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </div>
+      <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+        <p className="mr-4 whitespace-pre-wrap break-all">{certificate}</p>
+      </div>
+      {certificateChain && (
+        <>
+          <div className="mb-4 flex items-center justify-between">
+            <h2>Certificate Chain</h2>
+            <div className="flex">
+              <Tooltip content={copyTextCertificateChain}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(certificateChain);
+                    setCopyTextCertificateChain("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingCertificateChain ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+              <Tooltip content="Download">
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    downloadTxtFile("chain.pem", certificateChain);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faDownload} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+          <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 whitespace-pre-wrap break-all">{certificateChain}</p>
+          </div>
+        </>
+      )}
+      {privateKey && (
+        <>
+          <div className="mb-4 flex items-center justify-between">
+            <h2>Certificate Private Key</h2>
+            <div className="flex">
+              <Tooltip content={copyTextCertificateSk}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(privateKey);
+                    setCopyTextCertificateSk("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingCertificateSk ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+              <Tooltip content={copyTextCertificateSk}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    downloadTxtFile("private_key.txt", privateKey);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faDownload} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+          <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 whitespace-pre-wrap break-all">{privateKey}</p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx

@@ -0,0 +1,538 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaStatus,
+  useCreateCertificate,
+  useGetCert,
+  useGetCertTemplate,
+  useListWorkspaceCas,
+  useListWorkspaceCertificateTemplates,
+  useListWorkspacePkiCollections
+} from "@app/hooks/api";
+import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import {
+  EXTENDED_KEY_USAGES_OPTIONS,
+  KEY_USAGES_OPTIONS
+} from "@app/hooks/api/certificates/constants";
+import { CertExtendedKeyUsage, CertKeyUsage } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { CertificateContent } from "./CertificateContent";
+
+const schema = z.object({
+  certificateTemplateId: z.string().optional(),
+  caId: z.string(),
+  collectionId: z.string().optional(),
+  friendlyName: z.string(),
+  commonName: z.string().trim().min(1),
+  altNames: z.string(),
+  ttl: z.string().trim(),
+  keyUsages: z.object({
+    [CertKeyUsage.DIGITAL_SIGNATURE]: z.boolean().optional(),
+    [CertKeyUsage.KEY_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.NON_REPUDIATION]: z.boolean().optional(),
+    [CertKeyUsage.DATA_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_AGREEMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_CERT_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.CRL_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.ENCIPHER_ONLY]: z.boolean().optional(),
+    [CertKeyUsage.DECIPHER_ONLY]: z.boolean().optional()
+  }),
+  extendedKeyUsages: z.object({
+    [CertExtendedKeyUsage.CLIENT_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.CODE_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.EMAIL_PROTECTION]: z.boolean().optional(),
+    [CertExtendedKeyUsage.OCSP_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.SERVER_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.TIMESTAMPING]: z.boolean().optional()
+  })
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["certificate"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["certificate"]>, state?: boolean) => void;
+};
+
+type TCertificateDetails = {
+  serialNumber: string;
+  certificate: string;
+  certificateChain: string;
+  privateKey: string;
+};
+
+const CERT_TEMPLATE_NONE_VALUE = "none";
+
+export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [certificateDetails, setCertificateDetails] = useState<TCertificateDetails | null>(null);
+  const { currentWorkspace } = useWorkspace();
+  const { data: cert } = useGetCert(
+    (popUp?.certificate?.data as { serialNumber: string })?.serialNumber || ""
+  );
+
+  const { data: cas } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug ?? "",
+    status: CaStatus.ACTIVE
+  });
+
+  const { data } = useListWorkspacePkiCollections({
+    workspaceId: currentWorkspace?.id || ""
+  });
+
+  const { data: templatesData } = useListWorkspaceCertificateTemplates({
+    workspaceId: currentWorkspace?.id || ""
+  });
+
+  const { mutateAsync: createCertificate } = useCreateCertificate();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+    setValue,
+    watch
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      keyUsages: {
+        [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+        [CertKeyUsage.KEY_ENCIPHERMENT]: true
+      },
+      extendedKeyUsages: {}
+    }
+  });
+
+  const selectedCertTemplateId = watch("certificateTemplateId");
+  const hasCertTemplateSelected =
+    selectedCertTemplateId !== "" && selectedCertTemplateId !== CERT_TEMPLATE_NONE_VALUE;
+
+  const { data: selectedCertTemplate } = useGetCertTemplate(
+    hasCertTemplateSelected ? (selectedCertTemplateId as string) : ""
+  );
+
+  useEffect(() => {
+    if (cert) {
+      reset({
+        caId: cert.caId,
+        friendlyName: cert.friendlyName,
+        commonName: cert.commonName,
+        altNames: cert.altNames,
+        certificateTemplateId: cert.certificateTemplateId ?? CERT_TEMPLATE_NONE_VALUE,
+        ttl: "",
+        keyUsages: Object.fromEntries((cert.keyUsages || []).map((name) => [name, true])),
+        extendedKeyUsages: Object.fromEntries(
+          (cert.extendedKeyUsages || []).map((name) => [name, true])
+        )
+      });
+    } else {
+      reset({
+        caId: "",
+        friendlyName: "",
+        commonName: "",
+        altNames: "",
+        ttl: "",
+        certificateTemplateId: CERT_TEMPLATE_NONE_VALUE,
+        keyUsages: {
+          [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+          [CertKeyUsage.KEY_ENCIPHERMENT]: true
+        },
+        extendedKeyUsages: {}
+      });
+    }
+  }, [cert]);
+
+  useEffect(() => {
+    if (!cert && selectedCertTemplate) {
+      setValue("ttl", selectedCertTemplate.ttl);
+      setValue(
+        "keyUsages",
+        Object.fromEntries(selectedCertTemplate.keyUsages.map((name) => [name, true]))
+      );
+      setValue(
+        "extendedKeyUsages",
+        Object.fromEntries(selectedCertTemplate.extendedKeyUsages.map((name) => [name, true]))
+      );
+    }
+  }, [selectedCertTemplate, cert]);
+
+  const onFormSubmit = async ({
+    caId,
+    friendlyName,
+    collectionId,
+    commonName,
+    altNames,
+    ttl,
+    keyUsages,
+    extendedKeyUsages
+  }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      const { serialNumber, certificate, certificateChain, privateKey } = await createCertificate({
+        caId: !selectedCertTemplate ? caId : undefined,
+        certificateTemplateId: selectedCertTemplate ? selectedCertTemplateId : undefined,
+        projectSlug: currentWorkspace.slug,
+        pkiCollectionId: collectionId,
+        friendlyName,
+        commonName,
+        altNames,
+        ttl,
+        keyUsages: Object.entries(keyUsages)
+          .filter(([, value]) => value)
+          .map(([key]) => key as CertKeyUsage),
+        extendedKeyUsages: Object.entries(extendedKeyUsages)
+          .filter(([, value]) => value)
+          .map(([key]) => key as CertExtendedKeyUsage)
+      });
+
+      reset();
+
+      setCertificateDetails({
+        serialNumber,
+        certificate,
+        certificateChain,
+        privateKey
+      });
+
+      createNotification({
+        text: "Successfully created certificate",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create certificate",
+        type: "error"
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (cas?.length) {
+      setValue("caId", cas[0].id);
+    }
+  }, [cas]);
+
+  return (
+    <Modal
+      isOpen={popUp?.certificate?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("certificate", isOpen);
+        reset();
+        setCertificateDetails(null);
+      }}
+    >
+      <ModalContent title={`${cert ? "View" : "Issue"} Certificate`}>
+        {!certificateDetails ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              name="certificateTemplateId"
+              defaultValue=""
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label={
+                    <div>
+                      <FormLabel
+                        isRequired
+                        label="Certificate Template"
+                        icon={
+                          <Tooltip
+                            className="text-center"
+                            content={
+                              <span>
+                                When a template is selected, the details provided are validated
+                                against the template policies.
+                              </span>
+                            }
+                          >
+                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                          </Tooltip>
+                        }
+                      />
+                    </div>
+                  }
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  isRequired
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                    isDisabled={Boolean(cert)}
+                  >
+                    <SelectItem value={CERT_TEMPLATE_NONE_VALUE} key="cert-template-none">
+                      None
+                    </SelectItem>
+                    {(templatesData?.certificateTemplates || []).map(({ id, name }) => (
+                      <SelectItem value={id} key={`cert-template-${id}`}>
+                        {name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            {(!selectedCertTemplateId ||
+              selectedCertTemplateId === CERT_TEMPLATE_NONE_VALUE ||
+              cert) && (
+              <>
+                <Controller
+                  control={control}
+                  name="caId"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Issuing CA"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                      className="mt-4"
+                      isRequired
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                        isDisabled={Boolean(cert)}
+                      >
+                        {(cas || []).map(({ id, type, dn }) => (
+                          <SelectItem value={id} key={`ca-${id}`}>
+                            {`${caTypeToNameMap[type]}: ${dn}`}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="collectionId"
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Certificate Collection (Optional)"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                      className="mt-4"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                        isDisabled={Boolean(cert)}
+                      >
+                        {(data?.collections || []).map(({ id, name }) => (
+                          <SelectItem value={id} key={`pki-collection-${id}`}>
+                            {name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+              </>
+            )}
+            <Controller
+              control={control}
+              defaultValue=""
+              name="friendlyName"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Friendly Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="My Certificate" isDisabled={Boolean(cert)} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="commonName"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Common Name (CN)"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  isRequired
+                >
+                  <Input {...field} placeholder="service.acme.com" isDisabled={Boolean(cert)} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="altNames"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Alternative Names (SANs)"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    {...field}
+                    placeholder="app1.acme.com, app2.acme.com, ..."
+                    isDisabled={Boolean(cert)}
+                  />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="ttl"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="TTL"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  isRequired
+                >
+                  <Input
+                    {...field}
+                    placeholder="2 days, 1d, 2h, 1y, ..."
+                    isDisabled={Boolean(cert)}
+                  />
+                </FormControl>
+              )}
+            />
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value="key-usages" className="data-[state=open]:border-none">
+                <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+                  <div className="order-1 ml-3">Key Usage</div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  <Controller
+                    control={control}
+                    name="keyUsages"
+                    render={({ field: { onChange, value }, fieldState: { error } }) => {
+                      return (
+                        <FormControl
+                          label="Key Usage"
+                          errorText={error?.message}
+                          isError={Boolean(error)}
+                        >
+                          <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
+                            {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                              return (
+                                <Checkbox
+                                  id={optionValue}
+                                  key={optionValue}
+                                  className="data-[state=checked]:bg-primary"
+                                  isDisabled={Boolean(cert)}
+                                  isChecked={value[optionValue]}
+                                  onCheckedChange={(state) => {
+                                    onChange({
+                                      ...value,
+                                      [optionValue]: state
+                                    });
+                                  }}
+                                >
+                                  {label}
+                                </Checkbox>
+                              );
+                            })}
+                          </div>
+                        </FormControl>
+                      );
+                    }}
+                  />
+                  <Controller
+                    control={control}
+                    name="extendedKeyUsages"
+                    render={({ field: { onChange, value }, fieldState: { error } }) => {
+                      return (
+                        <FormControl
+                          label="Extended Key Usage"
+                          errorText={error?.message}
+                          isError={Boolean(error)}
+                        >
+                          <div className="mb-7 mt-2 grid grid-cols-2 gap-2">
+                            {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                              return (
+                                <Checkbox
+                                  id={optionValue}
+                                  key={optionValue}
+                                  className="data-[state=checked]:bg-primary"
+                                  isDisabled={Boolean(cert)}
+                                  isChecked={value[optionValue]}
+                                  onCheckedChange={(state) => {
+                                    onChange({
+                                      ...value,
+                                      [optionValue]: state
+                                    });
+                                  }}
+                                >
+                                  {label}
+                                </Checkbox>
+                              );
+                            })}
+                          </div>
+                        </FormControl>
+                      );
+                    }}
+                  />
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+            {!cert && (
+              <div className="mt-4 flex items-center">
+                <Button
+                  className="mr-4"
+                  size="sm"
+                  type="submit"
+                  isLoading={isSubmitting}
+                  isDisabled={isSubmitting}
+                >
+                  Create
+                </Button>
+                <Button
+                  colorSchema="secondary"
+                  variant="plain"
+                  onClick={() => handlePopUpToggle("certificate", false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </form>
+        ) : (
+          <CertificateContent
+            serialNumber={certificateDetails.serialNumber}
+            certificate={certificateDetails.certificate}
+            certificateChain={certificateDetails.certificateChain}
+            privateKey={certificateDetails.privateKey}
+          />
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateRevocationModal.tsx

@@ -0,0 +1,131 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useRevokeCert } from "@app/hooks/api";
+import { crlReasons } from "@app/hooks/api/certificates/constants";
+import { CrlReason } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  revocationReason: z.enum([
+    CrlReason.UNSPECIFIED,
+    CrlReason.KEY_COMPROMISE,
+    CrlReason.CA_COMPROMISE,
+    CrlReason.AFFILIATION_CHANGED,
+    CrlReason.SUPERSEDED,
+    CrlReason.CESSATION_OF_OPERATION,
+    CrlReason.CERTIFICATE_HOLD,
+    CrlReason.PRIVILEGE_WITHDRAWN,
+    CrlReason.A_A_COMPROMISE
+  ])
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["revokeCertificate"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["revokeCertificate"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const CertificateRevocationModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync: revokeCertificate } = useRevokeCert();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const onFormSubmit = async ({ revocationReason }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      const { serialNumber } = popUp.revokeCertificate.data as { serialNumber: string };
+
+      await revokeCertificate({
+        projectSlug: currentWorkspace.slug,
+        serialNumber,
+        revocationReason
+      });
+
+      reset();
+      handlePopUpToggle("revokeCertificate", false);
+
+      createNotification({
+        text: "Successfully revoked certificate",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to revoke certificate",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.revokeCertificate?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("revokeCertificate", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Revoke Certificate">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="revocationReason"
+            defaultValue={CrlReason.UNSPECIFIED}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Revocation Reason"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {crlReasons.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Revoke
+            </Button>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateTemplateEnrollmentModal.tsx

@@ -0,0 +1,261 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { useCreateEstConfig, useGetEstConfig, useUpdateEstConfig } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+enum EnrollmentMethod {
+  EST = "est"
+}
+
+type Props = {
+  popUp: UsePopUpState<["enrollmentOptions"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["enrollmentOptions"]>,
+    state?: boolean
+  ) => void;
+};
+
+const schema = z.object({
+  method: z.nativeEnum(EnrollmentMethod),
+  caChain: z.string().optional(),
+  passphrase: z.string().optional(),
+  isEnabled: z.boolean(),
+  disableBootstrapCertValidation: z.boolean().optional().default(false)
+});
+
+export type FormData = z.infer<typeof schema>;
+
+export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const popUpData = popUp?.enrollmentOptions?.data as {
+    id: string;
+  };
+  const certificateTemplateId = popUpData?.id;
+
+  const { data } = useGetEstConfig(certificateTemplateId);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setError,
+    watch,
+    setValue,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const { mutateAsync: createEstConfig } = useCreateEstConfig();
+  const { mutateAsync: updateEstConfig } = useUpdateEstConfig();
+  const [isPassphraseFocused, setIsPassphraseFocused] = useToggle(false);
+
+  const disableBootstrapCertValidation = watch("disableBootstrapCertValidation");
+
+  useEffect(() => {
+    if (disableBootstrapCertValidation) {
+      setValue("caChain", "");
+    }
+  }, [disableBootstrapCertValidation]);
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        caChain: data.caChain,
+        isEnabled: data.isEnabled,
+        disableBootstrapCertValidation: data.disableBootstrapCertValidation
+      });
+    } else {
+      reset({
+        caChain: "",
+        isEnabled: false,
+        disableBootstrapCertValidation: false
+      });
+    }
+  }, [data]);
+
+  const onFormSubmit = async ({ caChain, passphrase, isEnabled }: FormData) => {
+    try {
+      if (data) {
+        await updateEstConfig({
+          certificateTemplateId,
+          caChain,
+          passphrase,
+          isEnabled,
+          disableBootstrapCertValidation
+        });
+      } else {
+        if (!passphrase) {
+          setError("passphrase", { message: "Passphrase is required to setup EST" });
+          return;
+        }
+
+        await createEstConfig({
+          certificateTemplateId,
+          caChain,
+          passphrase,
+          isEnabled,
+          disableBootstrapCertValidation
+        });
+      }
+
+      handlePopUpToggle("enrollmentOptions", false);
+
+      createNotification({
+        text: "Successfully saved changes",
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.enrollmentOptions?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("enrollmentOptions", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Manage Enrollment Options">
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            name="method"
+            defaultValue={EnrollmentMethod.EST}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Client Enrollment Method"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  <SelectItem value={EnrollmentMethod.EST} key={EnrollmentMethod.EST}>
+                    EST
+                  </SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+          {data && (
+            <FormControl label="EST Label">
+              <Input value={data.certificateTemplateId} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            name="disableBootstrapCertValidation"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message}>
+                  <Switch
+                    id="skip-bootstrap-cert-validation"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="ml-1 w-full">Disable Bootstrap Certificate Validation</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+          {!disableBootstrapCertValidation && (
+            <Controller
+              control={control}
+              name="caChain"
+              disabled={disableBootstrapCertValidation}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Certificate Authority Chain"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  isRequired={!disableBootstrapCertValidation}
+                >
+                  <TextArea
+                    {...field}
+                    isDisabled={disableBootstrapCertValidation}
+                    className="min-h-[15rem] border-none bg-mineshaft-900 text-gray-400"
+                    reSize="none"
+                  />
+                </FormControl>
+              )}
+            />
+          )}
+          <Controller
+            control={control}
+            name="passphrase"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Passphrase" isError={Boolean(error)} errorText={error?.message}>
+                <Input
+                  {...field}
+                  type={isPassphraseFocused ? "text" : "password"}
+                  onFocus={() => setIsPassphraseFocused.on()}
+                  onBlur={() => setIsPassphraseFocused.off()}
+                />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="isEnabled"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message}>
+                  <Switch
+                    id="is-active"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="ml-1 w-full">EST Enabled</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Save
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("enrollmentOptions", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateTemplateModal.tsx

@@ -0,0 +1,493 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaStatus,
+  useCreateCertTemplate,
+  useGetCaById,
+  useGetCertTemplate,
+  useListWorkspaceCas,
+  useListWorkspacePkiCollections,
+  useUpdateCertTemplate
+} from "@app/hooks/api";
+import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import {
+  EXTENDED_KEY_USAGES_OPTIONS,
+  KEY_USAGES_OPTIONS
+} from "@app/hooks/api/certificates/constants";
+import { CertExtendedKeyUsage, CertKeyUsage } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const validateTemplateRegexField = z
+  .string()
+  .trim()
+  .min(1)
+  .max(100)
+  .regex(/^[a-zA-Z0-9 *@\-\\.\\]+$/, {
+    message:
+      "Invalid pattern: only alphanumeric characters, spaces, *, ., @, -, and \\ are allowed."
+  });
+
+const schema = z.object({
+  caId: z.string(),
+  collectionId: z.string().optional(),
+  name: z.string().min(1),
+  commonName: validateTemplateRegexField,
+  subjectAlternativeName: validateTemplateRegexField,
+  ttl: z.string().trim().min(1),
+  keyUsages: z.object({
+    [CertKeyUsage.DIGITAL_SIGNATURE]: z.boolean().optional(),
+    [CertKeyUsage.KEY_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.NON_REPUDIATION]: z.boolean().optional(),
+    [CertKeyUsage.DATA_ENCIPHERMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_AGREEMENT]: z.boolean().optional(),
+    [CertKeyUsage.KEY_CERT_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.CRL_SIGN]: z.boolean().optional(),
+    [CertKeyUsage.ENCIPHER_ONLY]: z.boolean().optional(),
+    [CertKeyUsage.DECIPHER_ONLY]: z.boolean().optional()
+  }),
+  extendedKeyUsages: z.object({
+    [CertExtendedKeyUsage.CLIENT_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.CODE_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.EMAIL_PROTECTION]: z.boolean().optional(),
+    [CertExtendedKeyUsage.OCSP_SIGNING]: z.boolean().optional(),
+    [CertExtendedKeyUsage.SERVER_AUTH]: z.boolean().optional(),
+    [CertExtendedKeyUsage.TIMESTAMPING]: z.boolean().optional()
+  })
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  caId: string;
+  popUp: UsePopUpState<["certificateTemplate"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["certificateTemplate"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: ca } = useGetCaById(caId);
+
+  const { data: certTemplate } = useGetCertTemplate(
+    (popUp?.certificateTemplate?.data as { id: string })?.id || ""
+  );
+
+  const { data: cas } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug ?? "",
+    status: CaStatus.ACTIVE
+  });
+
+  const { data: collectionsData } = useListWorkspacePkiCollections({
+    workspaceId: currentWorkspace?.id || ""
+  });
+
+  const { mutateAsync: createCertTemplate } = useCreateCertTemplate();
+  const { mutateAsync: updateCertTemplate } = useUpdateCertTemplate();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      keyUsages: {
+        [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+        [CertKeyUsage.KEY_ENCIPHERMENT]: true
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (certTemplate) {
+      reset({
+        caId: certTemplate.caId,
+        name: certTemplate.name,
+        commonName: certTemplate.commonName,
+        subjectAlternativeName: certTemplate.subjectAlternativeName,
+        collectionId: certTemplate.pkiCollectionId ?? undefined,
+        ttl: certTemplate.ttl,
+        keyUsages: Object.fromEntries(certTemplate.keyUsages.map((name) => [name, true]) ?? []),
+        extendedKeyUsages: Object.fromEntries(
+          certTemplate.extendedKeyUsages.map((name) => [name, true]) ?? []
+        )
+      });
+    } else {
+      reset({
+        caId,
+        name: "",
+        commonName: "",
+        ttl: "",
+        keyUsages: {
+          [CertKeyUsage.DIGITAL_SIGNATURE]: true,
+          [CertKeyUsage.KEY_ENCIPHERMENT]: true
+        },
+        extendedKeyUsages: {}
+      });
+    }
+  }, [certTemplate, ca]);
+
+  const onFormSubmit = async ({
+    collectionId,
+    name,
+    commonName,
+    subjectAlternativeName,
+    ttl,
+    keyUsages,
+    extendedKeyUsages
+  }: FormData) => {
+    if (!currentWorkspace?.id) {
+      return;
+    }
+
+    try {
+      if (certTemplate) {
+        await updateCertTemplate({
+          id: certTemplate.id,
+          projectId: currentWorkspace.id,
+          pkiCollectionId: collectionId,
+          caId,
+          name,
+          commonName,
+          subjectAlternativeName,
+          ttl,
+          keyUsages: Object.entries(keyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertKeyUsage),
+          extendedKeyUsages: Object.entries(extendedKeyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertExtendedKeyUsage)
+        });
+
+        createNotification({
+          text: "Successfully updated certificate template",
+          type: "success"
+        });
+      } else {
+        await createCertTemplate({
+          projectId: currentWorkspace.id,
+          pkiCollectionId: collectionId,
+          caId,
+          name,
+          commonName,
+          subjectAlternativeName,
+          ttl,
+          keyUsages: Object.entries(keyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertKeyUsage),
+          extendedKeyUsages: Object.entries(extendedKeyUsages)
+            .filter(([, value]) => value)
+            .map(([key]) => key as CertExtendedKeyUsage)
+        });
+
+        createNotification({
+          text: "Successfully created certificate template",
+          type: "success"
+        });
+      }
+
+      reset();
+      handlePopUpToggle("certificateTemplate", false);
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to save changes",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.certificateTemplate?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("certificateTemplate", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={certTemplate ? "Certificate Template" : "Create Certificate Template"}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          {certTemplate && (
+            <FormControl label="Certificate Template ID">
+              <Input value={certTemplate.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Template Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="My Certificate Template" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="caId"
+            defaultValue={caId}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Issuing CA"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                className="mt-4"
+                isRequired
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                  isDisabled
+                >
+                  {(cas || []).map(({ id, type, dn }) => (
+                    <SelectItem value={id} key={`ca-${id}`}>
+                      {`${caTypeToNameMap[type]}: ${dn}`}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="collectionId"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Certificate Collection (Optional)"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                className="mt-4"
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {(collectionsData?.collections || []).map(({ id, name }) => (
+                    <SelectItem value={id} key={`pki-collection-${id}`}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="commonName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label={
+                  <div>
+                    <FormLabel
+                      isRequired
+                      label="Common Name (CN)"
+                      icon={
+                        <Tooltip
+                          className="text-center"
+                          content={
+                            <span>
+                              This field accepts limited regular expressions: spaces, *, ., @, -, \
+                              (for escaping), and alphanumeric characters only
+                            </span>
+                          }
+                        >
+                          <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                        </Tooltip>
+                      }
+                    />
+                  </div>
+                }
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder=".*\.acme.com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="subjectAlternativeName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label={
+                  <div>
+                    <FormLabel
+                      isRequired
+                      label="Alternative Names (SAN)"
+                      icon={
+                        <Tooltip
+                          className="text-center"
+                          content={
+                            <span>
+                              This field accepts limited regular expressions: spaces, *, ., @, -, \
+                              (for escaping), and alphanumeric characters only
+                            </span>
+                          }
+                        >
+                          <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                        </Tooltip>
+                      }
+                    />
+                  </div>
+                }
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="service\.acme.\..*" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="ttl"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Max TTL"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="2 days, 1d, 2h, 1y, ..." />
+              </FormControl>
+            )}
+          />
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="key-usages" className="data-[state=open]:border-none">
+              <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+                <div className="order-1 ml-3">Key Usage</div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <Controller
+                  control={control}
+                  name="keyUsages"
+                  render={({ field: { onChange, value }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        label="Key Usage"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                          {KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                            return (
+                              <Checkbox
+                                id={optionValue}
+                                key={optionValue}
+                                className="data-[state=checked]:bg-primary"
+                                isChecked={value[optionValue]}
+                                onCheckedChange={(state) => {
+                                  onChange({
+                                    ...value,
+                                    [optionValue]: state
+                                  });
+                                }}
+                              >
+                                {label}
+                              </Checkbox>
+                            );
+                          })}
+                        </div>
+                      </FormControl>
+                    );
+                  }}
+                />
+                <Controller
+                  control={control}
+                  name="extendedKeyUsages"
+                  render={({ field: { onChange, value }, fieldState: { error } }) => {
+                    return (
+                      <FormControl
+                        label="Extended Key Usage"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <div className="mt-2 mb-7 grid grid-cols-2 gap-2">
+                          {EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
+                            return (
+                              <Checkbox
+                                id={optionValue}
+                                key={optionValue}
+                                className="data-[state=checked]:bg-primary"
+                                isChecked={value[optionValue]}
+                                onCheckedChange={(state) => {
+                                  onChange({
+                                    ...value,
+                                    [optionValue]: state
+                                  });
+                                }}
+                              >
+                                {label}
+                              </Checkbox>
+                            );
+                          })}
+                        </div>
+                      </FormControl>
+                    );
+                  }}
+                />
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+          <div className="mt-4 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Save
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("certificateTemplate", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateTemplatesSection.tsx

@@ -0,0 +1,107 @@
+/**
+ * TODO (dangtony98): Reevaluate if this component should be in main
+ * CertificateTab or under CA page in the future.
+ */
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteCertTemplate } from "@app/hooks/api";
+
+import { CertificateTemplateEnrollmentModal } from "./CertificateTemplateEnrollmentModal";
+import { CertificateTemplateModal } from "./CertificateTemplateModal";
+import { CertificateTemplatesTable } from "./CertificateTemplatesTable";
+
+type Props = {
+  caId: string;
+};
+
+export const CertificateTemplatesSection = ({ caId }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "certificateTemplate",
+    "deleteCertificateTemplate",
+    "enrollmentOptions",
+    "upgradePlan"
+  ] as const);
+
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync: deleteCertTemplate } = useDeleteCertTemplate();
+
+  const onRemoveCertificateTemplateSubmit = async (id: string) => {
+    if (!currentWorkspace?.id) {
+      return;
+    }
+
+    try {
+      await deleteCertTemplate({
+        id,
+        projectId: currentWorkspace.id
+      });
+
+      createNotification({
+        text: "Successfully deleted certificate template",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteCertificateTemplate");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete certificate template",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Certificate Templates</h3>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.CertificateTemplates}
+        >
+          {(isAllowed) => (
+            <IconButton
+              ariaLabel="copy icon"
+              variant="plain"
+              className="group relative"
+              onClick={() => handlePopUpOpen("certificateTemplate")}
+              isDisabled={!isAllowed}
+            >
+              <FontAwesomeIcon icon={faPlus} />
+            </IconButton>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <div className="py-4">
+        <CertificateTemplatesTable handlePopUpOpen={handlePopUpOpen} caId={caId} />
+      </div>
+      <CertificateTemplateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} caId={caId} />
+      <CertificateTemplateEnrollmentModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deleteCertificateTemplate.isOpen}
+        title={`Are you sure want to delete the certificate template ${
+          (popUp?.deleteCertificateTemplate?.data as { name: string })?.name || ""
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteCertificateTemplate", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveCertificateTemplateSubmit(
+            (popUp?.deleteCertificateTemplate?.data as { id: string })?.id
+          )
+        }
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="Managing template enrollment options for EST is only available on Infisical's Enterprise plan."
+      />
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateTemplatesTable.tsx

@@ -0,0 +1,146 @@
+import { faEllipsis, faFileAlt, faTrash, faUserPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from "@app/context";
+import { useGetCaCertTemplates } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  caId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["certificateTemplate", "deleteCertificateTemplate", "enrollmentOptions", "upgradePlan"]
+    >,
+    data?: {
+      id?: string;
+      name?: string;
+    }
+  ) => void;
+};
+
+export const CertificateTemplatesTable = ({ handlePopUpOpen, caId }: Props) => {
+  const { subscription } = useSubscription();
+
+  const { data, isPending } = useGetCaCertTemplates(caId);
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={2} innerKey="project-cas" />}
+            {!isPending &&
+              data?.certificateTemplates.map((certificateTemplate) => {
+                return (
+                  <Tr className="h-10" key={`certificate-${certificateTemplate.id}`}>
+                    <Td>{certificateTemplate.name}</Td>
+                    <Td className="flex justify-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <Tooltip content="More options">
+                              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                            </Tooltip>
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <DropdownMenuItem
+                            onClick={() =>
+                              handlePopUpOpen("certificateTemplate", {
+                                id: certificateTemplate.id
+                              })
+                            }
+                            icon={<FontAwesomeIcon icon={faFileAlt} size="sm" className="mr-1" />}
+                          >
+                            Manage Policies
+                          </DropdownMenuItem>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Edit}
+                            a={ProjectPermissionSub.CertificateTemplates}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                onClick={() => {
+                                  if (!subscription?.pkiEst) {
+                                    handlePopUpOpen("upgradePlan");
+                                    return;
+                                  }
+
+                                  handlePopUpOpen("enrollmentOptions", {
+                                    id: certificateTemplate.id
+                                  });
+                                }}
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faUserPlus} size="sm" />}
+                              >
+                                Manage Enrollment
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.CertificateTemplates}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} size="sm" className="mr-1" />}
+                                onClick={() =>
+                                  handlePopUpOpen("deleteCertificateTemplate", {
+                                    id: certificateTemplate.id,
+                                    name: certificateTemplate.name
+                                  })
+                                }
+                              >
+                                Delete Template
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && !data?.certificateTemplates?.length && (
+          <EmptyState
+            title="No certificate templates have been created for this CA"
+            icon={faFileAlt}
+          />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificatesSection.tsx

@@ -0,0 +1,88 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useDeleteCert } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { CertificateCertModal } from "./CertificateCertModal";
+import { CertificateModal } from "./CertificateModal";
+import { CertificateRevocationModal } from "./CertificateRevocationModal";
+import { CertificatesTable } from "./CertificatesTable";
+
+export const CertificatesSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync: deleteCert } = useDeleteCert();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "certificate",
+    "certificateCert",
+    "deleteCertificate",
+    "revokeCertificate"
+  ] as const);
+
+  const onRemoveCertificateSubmit = async (serialNumber: string) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await deleteCert({ serialNumber, projectSlug: currentWorkspace.slug });
+
+      createNotification({
+        text: "Successfully deleted certificate",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteCertificate");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete certificate",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Certificates</p>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.Certificates}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("certificate")}
+              isDisabled={!isAllowed}
+            >
+              Issue
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <CertificatesTable handlePopUpOpen={handlePopUpOpen} />
+      <CertificateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CertificateCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <CertificateRevocationModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deleteCertificate.isOpen}
+        title={`Are you sure want to remove the certificate ${
+          (popUp?.deleteCertificate?.data as { commonName: string })?.commonName || ""
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteCertificate", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveCertificateSubmit(
+            (popUp?.deleteCertificate?.data as { serialNumber: string })?.serialNumber
+          )
+        }
+      />
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificatesTable.tsx

@@ -0,0 +1,219 @@
+import { useState } from "react";
+import {
+  faBan,
+  faCertificate,
+  faEllipsis,
+  faEye,
+  faFileExport,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useListWorkspaceCertificates } from "@app/hooks/api";
+import { CertStatus } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { getCertValidUntilBadgeDetails } from "./CertificatesTable.utils";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["certificate", "deleteCertificate", "revokeCertificate", "certificateCert"]
+    >,
+    data?: {
+      serialNumber?: string;
+      commonName?: string;
+    }
+  ) => void;
+};
+
+const PER_PAGE_INIT = 25;
+
+export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(PER_PAGE_INIT);
+
+  const { currentWorkspace } = useWorkspace();
+  const { data, isPending } = useListWorkspaceCertificates({
+    projectSlug: currentWorkspace?.slug ?? "",
+    offset: (page - 1) * perPage,
+    limit: perPage
+  });
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Friendly Name</Th>
+            <Th>Status</Th>
+            <Th>Not Before</Th>
+            <Th>Not After</Th>
+            <Th />
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={3} innerKey="project-cas" />}
+          {!isPending &&
+            data?.certificates.map((certificate) => {
+              const { variant, label } = getCertValidUntilBadgeDetails(certificate.notAfter);
+              return (
+                <Tr className="h-10" key={`certificate-${certificate.id}`}>
+                  <Td>{certificate.friendlyName}</Td>
+                  <Td>
+                    {certificate.status === CertStatus.REVOKED ? (
+                      <Badge variant="danger">Revoked</Badge>
+                    ) : (
+                      <Badge variant={variant}>{label}</Badge>
+                    )}
+                  </Td>
+                  <Td>
+                    {certificate.notBefore
+                      ? format(new Date(certificate.notBefore), "yyyy-MM-dd")
+                      : "-"}
+                  </Td>
+                  <Td>
+                    {certificate.notAfter
+                      ? format(new Date(certificate.notAfter), "yyyy-MM-dd")
+                      : "-"}
+                  </Td>
+                  <Td className="flex justify-end">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild className="rounded-lg">
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                          <Tooltip content="More options">
+                            <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                          </Tooltip>
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="p-1">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Read}
+                          a={ProjectPermissionSub.Certificates}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={async () =>
+                                handlePopUpOpen("certificateCert", {
+                                  serialNumber: certificate.serialNumber
+                                })
+                              }
+                              disabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faFileExport} />}
+                            >
+                              Export Certificate
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Read}
+                          a={ProjectPermissionSub.Certificates}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={async () =>
+                                handlePopUpOpen("certificate", {
+                                  serialNumber: certificate.serialNumber
+                                })
+                              }
+                              disabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faEye} />}
+                            >
+                              View Details
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Delete}
+                          a={ProjectPermissionSub.Certificates}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={async () =>
+                                handlePopUpOpen("revokeCertificate", {
+                                  serialNumber: certificate.serialNumber
+                                })
+                              }
+                              disabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faBan} />}
+                            >
+                              Revoke Certificate
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Delete}
+                          a={ProjectPermissionSub.Certificates}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={async () =>
+                                handlePopUpOpen("deleteCertificate", {
+                                  serialNumber: certificate.serialNumber,
+                                  commonName: certificate.commonName
+                                })
+                              }
+                              disabled={!isAllowed}
+                              icon={<FontAwesomeIcon icon={faTrash} />}
+                            >
+                              Delete Certificate
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Td>
+                </Tr>
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isPending && data?.totalCount !== undefined && data.totalCount >= PER_PAGE_INIT && (
+        <Pagination
+          count={data.totalCount}
+          page={page}
+          perPage={perPage}
+          onChangePage={(newPage) => setPage(newPage)}
+          onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+        />
+      )}
+      {!isPending && !data?.certificates?.length && (
+        <EmptyState title="No certificates have been issued" icon={faCertificate} />
+      )}
+    </TableContainer>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificatesTable.utils.ts

@@ -0,0 +1,28 @@
+import ms from "ms";
+
+export const getCertValidUntilBadgeDetails = (notAfter: string) => {
+  const currentDate = new Date().getTime();
+  const notAfterDate = new Date(notAfter).getTime();
+  const diffInMs = notAfterDate - currentDate;
+
+  let variant: "success" | "primary" | "danger" = "success";
+  let label = "Healthy";
+
+  if (diffInMs > ms("60d")) {
+    variant = "success";
+  } else if (diffInMs > ms("30d")) {
+    variant = "primary";
+  } else {
+    variant = "danger";
+  }
+
+  if (diffInMs > ms("60d")) {
+    label = "Healthy";
+  } else if (diffInMs > ms("0d")) {
+    label = `Expires in ${ms(diffInMs)}`;
+  } else {
+    label = "Expired";
+  }
+
+  return { variant, label };
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/index.tsx

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

frontend-v2/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/index.tsx

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

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/PkiAlertsTab.tsx

@@ -1,17 +1,17 @@
 import { motion } from "framer-motion";
 
-import { MembersSection } from "./components";
+import { PkiAlertsSection } from "./components";
 
-export const MembersTab = () => {
+export const PkiAlertsTab = () => {
   return (
     <motion.div
-      key="panel-project-members"
+      key="panel-alerts"
       transition={{ duration: 0.15 }}
       initial={{ opacity: 0, translateX: 30 }}
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: 30 }}
     >
-      <MembersSection />
+      <PkiAlertsSection />
     </motion.div>
   );
 };

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiAlertModal.tsx

@@ -0,0 +1,295 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  useCreatePkiAlert,
+  useGetPkiAlertById,
+  useListWorkspacePkiCollections,
+  useUpdatePkiAlert
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+enum TimeUnit {
+  DAY = "days",
+  WEEK = "weeks",
+  MONTH = "months",
+  YEAR = "years"
+}
+
+const schema = z.object({
+  name: z.string().trim().min(1),
+  pkiCollectionId: z.string(),
+  alertBefore: z.string(),
+  alertUnit: z.nativeEnum(TimeUnit),
+  emails: z.string().trim()
+});
+
+const convertToDays = (unit: TimeUnit, value: number) => {
+  switch (unit) {
+    case TimeUnit.DAY:
+      return value;
+    case TimeUnit.WEEK:
+      return value * 7;
+    case TimeUnit.MONTH:
+      return value * 30;
+    case TimeUnit.YEAR:
+      return value * 365;
+    default:
+      throw new Error(`Unknown time unit: ${unit}`);
+  }
+};
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["pkiAlert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["pkiAlert"]>, state?: boolean) => void;
+};
+
+export const PkiAlertModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { data: alert } = useGetPkiAlertById(
+    (popUp?.pkiAlert?.data as { alertId: string })?.alertId || ""
+  );
+
+  const { data: pkiCollections } = useListWorkspacePkiCollections({
+    workspaceId: projectId
+  });
+
+  const { mutateAsync: createPkiAlert } = useCreatePkiAlert();
+  const { mutateAsync: updatePkiAlert } = useUpdatePkiAlert();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      alertUnit: TimeUnit.DAY
+    }
+  });
+
+  useEffect(() => {
+    if (alert) {
+      reset({
+        name: alert.name,
+        pkiCollectionId: alert.pkiCollectionId,
+        alertBefore: alert.alertBeforeDays.toString(),
+        alertUnit: TimeUnit.DAY,
+        emails: alert.recipientEmails
+      });
+    } else {
+      // TODO: add default collection?
+      reset({
+        name: "",
+        ...(pkiCollections?.collections?.[0] && {
+          pkiCollectionId: pkiCollections.collections[0].id
+        })
+      });
+    }
+  }, [alert, pkiCollections]);
+
+  const onFormSubmit = async ({
+    name,
+    pkiCollectionId,
+    alertBefore,
+    alertUnit,
+    emails
+  }: FormData) => {
+    try {
+      if (!projectId) return;
+
+      const emailArray = emails
+        .split(",")
+        .map((email) => email.trim())
+        .filter((email) => email.length > 0);
+
+      const alertBeforeDays = convertToDays(alertUnit, Number(alertBefore));
+
+      if (alert) {
+        // update
+        await updatePkiAlert({
+          alertId: alert.id,
+          pkiCollectionId,
+          name,
+          projectId,
+          alertBeforeDays,
+          emails: emailArray
+        });
+      } else {
+        // create
+        await createPkiAlert({
+          name,
+          projectId,
+          pkiCollectionId,
+          alertBeforeDays,
+          emails: emailArray
+        });
+      }
+
+      handlePopUpToggle("pkiAlert", false);
+
+      reset();
+
+      createNotification({
+        text: `Successfully ${alert ? "updated" : "created"} alert`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${alert ? "updated" : "created"} alert`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.pkiAlert?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("pkiAlert", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={`${alert ? "Edit" : "Create"} Alert`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="My Alert" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="pkiCollectionId"
+            defaultValue=""
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Certificate Collection"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                isRequired
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {(pkiCollections?.collections || []).map(({ id, name }) => (
+                    <SelectItem value={id} key={`project-${id}`}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="alertBefore"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Alert Before"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  className="w-full"
+                  isRequired
+                >
+                  <Input {...field} placeholder="5" type="number" min={1} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="alertUnit"
+              defaultValue={TimeUnit.YEAR}
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  className="ml-4"
+                  label="Alert Unit"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-48"
+                  >
+                    <SelectItem value={TimeUnit.DAY}>Days</SelectItem>
+                    <SelectItem value={TimeUnit.WEEK}>Weeks</SelectItem>
+                    <SelectItem value={TimeUnit.MONTH}>Months</SelectItem>
+                    <SelectItem value={TimeUnit.YEAR}>Years</SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
+          </div>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="emails"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Emails to Alert"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="[email protected], [email protected], ..." />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {alert ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("pkiAlert", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiAlertRow.tsx

@@ -0,0 +1,92 @@
+import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Td,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useGetPkiCollectionById } from "@app/hooks/api";
+import { TPkiAlert } from "@app/hooks/api/pkiAlerts/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  alert: TPkiAlert;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["pkiAlert", "deletePkiAlert"]>,
+    data?: object
+  ) => void;
+};
+
+export const PkiAlertRow = ({ alert, handlePopUpOpen }: Props) => {
+  const { data: pkiCollection } = useGetPkiCollectionById(alert.pkiCollectionId || "");
+  return (
+    <Tr className="h-10" key={`pki-alert-${alert.id}`}>
+      <Td>{alert.name}</Td>
+      <Td>{alert.alertBeforeDays}</Td>
+      <Td>{pkiCollection ? pkiCollection.name : "-"}</Td>
+      <Td>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="rounded-lg">
+            <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-1">
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={ProjectPermissionSub.PkiAlerts}
+            >
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("pkiAlert", {
+                      alertId: alert.id
+                    });
+                  }}
+                  disabled={!isAllowed}
+                >
+                  Edit Alert
+                </DropdownMenuItem>
+              )}
+            </ProjectPermissionCan>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Delete}
+              a={ProjectPermissionSub.PkiAlerts}
+            >
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  className={twMerge(
+                    isAllowed
+                      ? "hover:!bg-red-500 hover:!text-white"
+                      : "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("deletePkiAlert", {
+                      alertId: alert.id,
+                      name: alert.name
+                    });
+                  }}
+                  disabled={!isAllowed}
+                >
+                  Delete Alert
+                </DropdownMenuItem>
+              )}
+            </ProjectPermissionCan>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+    </Tr>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiAlertsSection.tsx

@@ -0,0 +1,84 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useDeletePkiAlert } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { PkiAlertModal } from "./PkiAlertModal";
+import { PkiAlertsTable } from "./PkiAlertsTable";
+
+export const PkiAlertsSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+  const { mutateAsync: deletePkiAlert } = useDeletePkiAlert();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "pkiAlert",
+    "deletePkiAlert"
+  ] as const);
+
+  const onRemoveAlertSubmit = async (alertId: string) => {
+    try {
+      if (!projectId) return;
+
+      await deletePkiAlert({
+        alertId,
+        projectId
+      });
+
+      createNotification({
+        text: "Successfully deleted alert",
+        type: "success"
+      });
+
+      handlePopUpClose("deletePkiAlert");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete alert",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Alerts</p>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.PkiAlerts}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("pkiAlert")}
+              isDisabled={!isAllowed}
+            >
+              Create
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <PkiAlertsTable handlePopUpOpen={handlePopUpOpen} />
+      <PkiAlertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deletePkiAlert.isOpen}
+        title={`Are you sure want to remove the alert ${
+          (popUp?.deletePkiAlert?.data as { name: string })?.name || ""
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deletePkiAlert", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveAlertSubmit((popUp?.deletePkiAlert?.data as { alertId: string })?.alertId)
+        }
+      />
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiAlertsTable.tsx

@@ -0,0 +1,67 @@
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useListWorkspacePkiAlerts } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { PkiAlertRow } from "./PkiAlertRow";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["pkiAlert", "deletePkiAlert"]>,
+    data?: object
+  ) => void;
+};
+
+export const PkiAlertsTable = ({ handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { data, isPending } = useListWorkspacePkiAlerts({
+    workspaceId: projectId
+  });
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Alert Name</Th>
+            <Th>Alert Before Days</Th>
+            <Th>Certificate Collection</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={4} innerKey="project-pki-alerts" />}
+          {!isPending &&
+            data?.alerts.map((alert) => {
+              return (
+                <PkiAlertRow
+                  key={`alert-${alert.id}`}
+                  alert={alert}
+                  handlePopUpOpen={handlePopUpOpen}
+                />
+              );
+            })}
+        </TBody>
+      </Table>
+      {!isPending && !data?.alerts?.length && (
+        <EmptyState
+          title="No alerts have been created for any certificate collections"
+          icon={faExclamationCircle}
+        />
+      )}
+    </TableContainer>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionModal.tsx

@@ -8,42 +8,36 @@ import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import {
-  useCreateProjectRole,
+  useCreatePkiCollection,
-  useGetProjectRoleBySlug,
+  useGetPkiCollectionById,
-  useUpdateProjectRole
+  useUpdatePkiCollection
 } from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
-import { slugSchema } from "@app/lib/schemas";
 
-const schema = z
+const schema = z.object({
-  .object({
+  name: z.string().trim().min(1),
-    name: z.string(),
+  description: z.string()
-    description: z.string(),
+});
-    slug: slugSchema({ min: 1 })
-  })
-  .required();
 
 export type FormData = z.infer<typeof schema>;
 
 type Props = {
-  popUp: UsePopUpState<["role"]>;
+  popUp: UsePopUpState<["pkiCollection"]>;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<["role"]>, state?: boolean) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["pkiCollection"]>, state?: boolean) => void;
 };
 
-export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
+export const PkiCollectionModal = ({ popUp, handlePopUpToggle }: Props) => {
   const navigate = useNavigate();
-
-  const popupData = popUp?.role?.data as {
-    roleSlug: string;
-  };
-
   const { currentWorkspace } = useWorkspace();
   const projectId = currentWorkspace?.id || "";
 
-  const { data: role } = useGetProjectRoleBySlug(projectId, popupData?.roleSlug ?? "");
+  const { data: pkiCollection } = useGetPkiCollectionById(
+    (popUp?.pkiCollection?.data as { collectionId: string })?.collectionId || ""
+  );
 
-  const { mutateAsync: createProjectRole } = useCreateProjectRole();
+  const { mutateAsync: createPkiCollection } = useCreatePkiCollection();
-  const { mutateAsync: updateProjectRole } = useUpdateProjectRole();
+  const { mutateAsync: updatePkiCollection } = useUpdatePkiCollection();
 
   const {
     control,
@@ -51,79 +45,60 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
     reset,
     formState: { isSubmitting }
   } = useForm<FormData>({
-    resolver: zodResolver(schema),
+    resolver: zodResolver(schema)
-    defaultValues: {
-      name: "",
-      description: ""
-    }
   });
 
   useEffect(() => {
-    if (role) {
+    if (pkiCollection) {
       reset({
-        name: role.name,
+        name: pkiCollection.name,
-        description: role.description,
+        description: pkiCollection.description
-        slug: role.slug
       });
     } else {
       reset({
         name: "",
-        description: "",
+        description: ""
-        slug: ""
       });
     }
-  }, [role]);
+  }, [pkiCollection]);
 
-  const onFormSubmit = async ({ name, description, slug }: FormData) => {
+  const onFormSubmit = async ({ name, description }: FormData) => {
     try {
       if (!projectId) return;
 
-      if (role) {
+      if (pkiCollection) {
         // update
-        await updateProjectRole({
+        await updatePkiCollection({
-          id: role.id,
+          collectionId: pkiCollection.id,
-          projectId,
           name,
           description,
-          slug
+          projectId
         });
-
-        handlePopUpToggle("role", false);
       } else {
         // create
-        const newRole = await createProjectRole({
+        const { id: createdId } = await createPkiCollection({
-          projectId,
           name,
           description,
-          slug,
+          projectId
-          permissions: []
         });
 
         navigate({
-          to: `/${currentWorkspace.type}/$projectId/roles/$roleSlug` as const,
+          to: `/${ProjectType.CertificateManager}/${projectId}/pki-collections/${createdId}` as const
-          params: {
-            roleSlug: newRole.slug,
-            projectId
-          }
         });
-        handlePopUpToggle("role", false);
       }
 
-      createNotification({
+      handlePopUpToggle("pkiCollection", false);
-        text: `Successfully ${popUp?.role?.data ? "updated" : "created"} role`,
-        type: "success"
-      });
 
       reset();
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text =
-        error?.response?.data?.message ??
-        `Failed to ${popUp?.role?.data ? "update" : "create"} role`;
 
       createNotification({
-        text,
+        text: `Successfully ${pkiCollection ? "updated" : "created"} PKI collection`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${pkiCollection ? "updated" : "created"} PKI collection`,
         type: "error"
       });
     }
@@ -131,13 +106,13 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
 
   return (
     <Modal
-      isOpen={popUp?.role?.isOpen}
+      isOpen={popUp?.pkiCollection?.isOpen}
       onOpenChange={(isOpen) => {
-        handlePopUpToggle("role", isOpen);
+        handlePopUpToggle("pkiCollection", isOpen);
         reset();
       }}
     >
-      <ModalContent title={`${popUp?.role?.data ? "Update" : "Create"} Role`}>
+      <ModalContent title={`${pkiCollection ? "Edit" : "Create"} Certificate Collection`}>
         <form onSubmit={handleSubmit(onFormSubmit)}>
           <Controller
             control={control}
@@ -150,22 +125,7 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
                 errorText={error?.message}
                 isRequired
               >
-                <Input {...field} placeholder="Billing Team" />
+                <Input {...field} placeholder="My Certificate Collection" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            defaultValue=""
-            name="slug"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Slug"
-                isError={Boolean(error)}
-                errorText={error?.message}
-                isRequired
-              >
-                <Input {...field} placeholder="billing" />
               </FormControl>
             )}
           />
@@ -175,7 +135,10 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
             name="description"
             render={({ field, fieldState: { error } }) => (
               <FormControl label="Description" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} placeholder="To manage billing" />
+                <Input
+                  {...field}
+                  placeholder="A collection to house certificates for ACME device"
+                />
               </FormControl>
             )}
           />
@@ -187,12 +150,12 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
               isLoading={isSubmitting}
               isDisabled={isSubmitting}
             >
-              {popUp?.role?.data ? "Update" : "Create"}
+              {pkiCollection ? "Update" : "Create"}
             </Button>
             <Button
               colorSchema="secondary"
               variant="plain"
-              onClick={() => handlePopUpToggle("role", false)}
+              onClick={() => handlePopUpToggle("pkiCollection", false)}
             >
               Cancel
             </Button>

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionSection.tsx

@@ -0,0 +1,86 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useDeletePkiCollection } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { PkiCollectionModal } from "./PkiCollectionModal";
+import { PkiCollectionTable } from "./PkiCollectionTable";
+
+export const PkiCollectionSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+  const { mutateAsync: deletePkiCollection } = useDeletePkiCollection();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "pkiCollection",
+    "deletePkiCollection"
+  ] as const);
+
+  const onRemovePkiCollectionSubmit = async (collectionId: string) => {
+    try {
+      if (!projectId) return;
+
+      await deletePkiCollection({
+        collectionId,
+        projectId
+      });
+
+      createNotification({
+        text: "Successfully deleted PKI collection",
+        type: "success"
+      });
+
+      handlePopUpClose("deletePkiCollection");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete PKI collection",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Certificate Collections</p>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.PkiCollections}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("pkiCollection")}
+              isDisabled={!isAllowed}
+            >
+              Create
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <PkiCollectionTable handlePopUpOpen={handlePopUpOpen} />
+      <PkiCollectionModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deletePkiCollection.isOpen}
+        title={`Are you sure want to remove the alert ${
+          (popUp?.deletePkiCollection?.data as { name: string })?.name || ""
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deletePkiCollection", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemovePkiCollectionSubmit(
+            (popUp?.deletePkiCollection?.data as { collectionId: string })?.collectionId
+          )
+        }
+      />
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionTable.tsx

@@ -0,0 +1,137 @@
+import { faBoxesStacked, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useListWorkspacePkiCollections } from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["pkiCollection", "deletePkiCollection"]>,
+    data?: object
+  ) => void;
+};
+
+export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { data, isPending } = useListWorkspacePkiCollections({
+    workspaceId: projectId
+  });
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Description</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={3} innerKey="pki-collections" />}
+            {!isPending &&
+              data?.collections.map((pkiCollection) => {
+                return (
+                  <Tr
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    key={`pki-collection-${pkiCollection.id}`}
+                    onClick={() =>
+                      navigate({
+                        to: `/${ProjectType.CertificateManager}/${projectId}/pki-collections/${pkiCollection.id}` as const
+                      })
+                    }
+                  >
+                    <Td>{pkiCollection.name}</Td>
+                    <Td>{pkiCollection.description ? pkiCollection.description : "-"}</Td>
+                    <Td>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Edit}
+                            a={ProjectPermissionSub.PkiCollections}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("pkiCollection", {
+                                    collectionId: pkiCollection.id
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Edit Collection
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.PkiCollections}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deletePkiCollection", {
+                                    collectionId: pkiCollection.id,
+                                    name: pkiCollection.name
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Delete Collection
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && !data?.collections?.length && (
+          <EmptyState title="No certificate collections have been created" icon={faBoxesStacked} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/components/index.tsx

@@ -0,0 +1,2 @@
+export { PkiAlertsSection } from "./PkiAlertsSection";
+export { PkiCollectionSection } from "./PkiCollectionSection";

frontend-v2/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/index.tsx

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

frontend-v2/src/pages/cert-manager/CertificatesPage/components/index.tsx

@@ -0,0 +1,3 @@
+export { CaTab } from "./CaTab";
+export { CertificatesTab } from "./CertificatesTab";
+export { PkiAlertsTab } from "./PkiAlertsTab";

frontend-v2/src/pages/cert-manager/CertificatesPage/route.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { CertificatesPage } from "./CertificatesPage";
+
+export const Route = createFileRoute("")({
+  component: CertificatesPage
+});

frontend-v2/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx

@@ -0,0 +1,198 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useDeletePkiCollection, useGetPkiCollectionById } from "@app/hooks/api";
+import { PkiItemType } from "@app/hooks/api/pkiCollections/constants";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { PkiCollectionModal } from "../CertificatesPage/components/PkiAlertsTab/components/PkiCollectionModal";
+import { PkiCollectionDetailsSection, PkiCollectionItemsSection } from "./components";
+
+export const PkiCollectionPage = () => {
+  const navigate = useNavigate();
+  const params = useParams({
+    from: ROUTE_PATHS.CertPkiCollectionDetailsByIDPage.id
+  });
+  const collectionId = params.collectionId as string;
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+
+  const { data } = useGetPkiCollectionById(collectionId);
+  const { mutateAsync: deletePkiCollection } = useDeletePkiCollection();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "pkiCollection",
+    "deletePkiCollection"
+  ] as const);
+
+  const onDeletePkiCollectionSubmit = async (collectionIdToDelete: string) => {
+    try {
+      if (!projectId) return;
+
+      await deletePkiCollection({
+        projectId,
+        collectionId: collectionIdToDelete
+      });
+
+      createNotification({
+        text: "Successfully deleted PKI collection",
+        type: "success"
+      });
+      handlePopUpClose("deletePkiCollection");
+      navigate({
+        to: `/${ProjectType.CertificateManager}/${projectId}/certificates` as const
+      });
+    } catch {
+      createNotification({
+        text: "Failed to delete PKI collection",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      {data && (
+        <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
+          <Button
+            variant="link"
+            type="submit"
+            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+            onClick={() => {
+              navigate({
+                to: `/${ProjectType.CertificateManager}/${projectId}/certificates` as const
+              });
+            }}
+            className="mb-4"
+          >
+            Certificate Collections
+          </Button>
+          <div className="mb-4 flex items-center justify-between">
+            <p className="text-3xl font-semibold text-white">{data.name}</p>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild className="rounded-lg">
+                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                  <Tooltip content="More options">
+                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                  </Tooltip>
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="p-1">
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Edit}
+                  a={ProjectPermissionSub.PkiCollections}
+                >
+                  {(isAllowed) => (
+                    <DropdownMenuItem
+                      className={twMerge(
+                        !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                      )}
+                      onClick={() => {
+                        handlePopUpOpen("pkiCollection", {
+                          collectionId
+                        });
+                      }}
+                      disabled={!isAllowed}
+                    >
+                      Edit PKI Collection
+                    </DropdownMenuItem>
+                  )}
+                </ProjectPermissionCan>
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Delete}
+                  a={ProjectPermissionSub.PkiCollections}
+                >
+                  {(isAllowed) => (
+                    <DropdownMenuItem
+                      className={twMerge(
+                        isAllowed
+                          ? "hover:!bg-red-500 hover:!text-white"
+                          : "pointer-events-none cursor-not-allowed opacity-50"
+                      )}
+                      onClick={() =>
+                        handlePopUpOpen("deletePkiCollection", {
+                          collectionId: data.id,
+                          name: data.name
+                        })
+                      }
+                      disabled={!isAllowed}
+                    >
+                      Delete PKI Collection
+                    </DropdownMenuItem>
+                  )}
+                </ProjectPermissionCan>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <div className="flex">
+            <div className="mr-4 w-96">
+              <PkiCollectionDetailsSection
+                collectionId={collectionId}
+                handlePopUpOpen={handlePopUpOpen}
+              />
+            </div>
+            <div className="w-full">
+              <div className="mb-4">
+                <PkiCollectionItemsSection collectionId={collectionId} type={PkiItemType.CA} />
+              </div>
+              <PkiCollectionItemsSection
+                collectionId={collectionId}
+                type={PkiItemType.CERTIFICATE}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+      <PkiCollectionModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deletePkiCollection.isOpen}
+        title={`Are you sure want to delete the PKI collection ${data?.name ?? ""}?`}
+        onChange={(isOpen) => handlePopUpToggle("deletePkiCollection", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onDeletePkiCollectionSubmit(
+            (popUp.deletePkiCollection.data as { collectionId: string })?.collectionId
+          )
+        }
+      />
+    </div>
+  );
+};
+
+export const PkiCollectionDetailsByIDPage = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Helmet>
+        <title>{t("common.head-title", { title: "PKI Collection" })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Helmet>
+      <ProjectPermissionCan
+        renderGuardBanner
+        passThrough={false}
+        I={ProjectPermissionActions.Read}
+        a={ProjectPermissionSub.PkiCollections}
+      >
+        <PkiCollectionPage />
+      </ProjectPermissionCan>
+    </>
+  );
+};

frontend-v2/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/AddPkiCollectionItemModal.tsx

@@ -0,0 +1,203 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  CaStatus,
+  useAddItemToPkiCollection,
+  useListWorkspaceCas,
+  useListWorkspaceCertificates
+} from "@app/hooks/api";
+import { PkiItemType, pkiItemTypeToNameMap } from "@app/hooks/api/pkiCollections/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    // type: z.nativeEnum(PkiItemType),
+    itemId: z.string()
+  })
+  .required();
+
+type FormData = z.infer<typeof schema>;
+
+type Props = {
+  collectionId: string;
+  type: PkiItemType;
+  popUp: UsePopUpState<["addPkiCollectionItem"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["addPkiCollectionItem"]>,
+    state?: boolean
+  ) => void;
+};
+
+// note: this component should be optimized so it is easier
+// to find certificates and CAs
+export const AddPkiCollectionItemModal = ({
+  collectionId,
+  type,
+  popUp,
+  handlePopUpToggle
+}: Props) => {
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: cas } = useListWorkspaceCas({
+    projectSlug: currentWorkspace?.slug || "",
+    status: CaStatus.ACTIVE
+  });
+
+  const { data } = useListWorkspaceCertificates({
+    projectSlug: currentWorkspace?.slug || "",
+    offset: 0,
+    limit: 25
+  });
+
+  const { mutateAsync: addItemToPkiCollection } = useAddItemToPkiCollection();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+    // defaultValues: {
+    //   type: PkiItemType.CA
+    // }
+  });
+
+  const onFormSubmit = async ({ itemId }: FormData) => {
+    try {
+      const item = await addItemToPkiCollection({
+        collectionId,
+        type,
+        itemId
+      });
+
+      createNotification({
+        text: `Successfully added ${
+          pkiItemTypeToNameMap[item.type as PkiItemType]
+        } to PKI collection`,
+        type: "success"
+      });
+
+      reset();
+      handlePopUpToggle("addPkiCollectionItem", false);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.addPkiCollectionItem?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addPkiCollectionItem", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={`Add ${pkiItemTypeToNameMap[type]} to Collection`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          {/* <Controller
+            control={control}
+            name="type"
+            defaultValue={PkiItemType.CA}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl label="Item Type" errorText={error?.message} isError={Boolean(error)}>
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  <SelectItem value={PkiItemType.CA} key="pki-item-type-ca">
+                    Certificate Authority
+                  </SelectItem>
+                  <SelectItem value={PkiItemType.CERTIFICATE} key="pki-item-type-ca">
+                    Certificate
+                  </SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          /> */}
+          {type === PkiItemType.CA && (
+            <Controller
+              control={control}
+              name="itemId"
+              defaultValue=""
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label={pkiItemTypeToNameMap[type]}
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  // className="mt-4"
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {(cas || []).map(({ id, dn }) => (
+                      <SelectItem value={id} key={`pki-item-cert-${id}`}>
+                        {dn}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+          )}
+          {type === PkiItemType.CERTIFICATE && (
+            <Controller
+              control={control}
+              name="itemId"
+              defaultValue=""
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Certificate"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  // className="mt-4"
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {(data?.certificates || []).map(({ id, commonName }) => (
+                      <SelectItem value={id} key={`pki-item-cert-${id}`}>
+                        {`CN=${commonName}`}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+          )}
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Add
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("addPkiCollectionItem", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionDetailsSection.tsx

@@ -0,0 +1,87 @@
+import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetPkiCollectionById } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  collectionId: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["pkiCollection"]>, data?: object) => void;
+};
+
+export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: Props) => {
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  const { data: pkiCollection } = useGetPkiCollectionById(collectionId);
+
+  return pkiCollection ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Collection Details</h3>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Edit}
+          a={ProjectPermissionSub.PkiCollections}
+        >
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit Identity">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={() =>
+                    handlePopUpOpen("pkiCollection", {
+                      collectionId
+                    })
+                  }
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </ProjectPermissionCan>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">PKI Collection ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{pkiCollection.id}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextId}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(pkiCollection.id);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{pkiCollection.name}</p>
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-mineshaft-300">Description</p>
+          <p className="text-sm text-mineshaft-300">{pkiCollection.description}</p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend-v2/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionItemsSection.tsx

@@ -0,0 +1,92 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { useGetPkiCollectionById, useRemoveItemFromPkiCollection } from "@app/hooks/api";
+import { PkiItemType } from "@app/hooks/api/pkiCollections/constants";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { AddPkiCollectionItemModal } from "./AddPkiCollectionItemModal";
+import { PkiCollectionItemsTable } from "./PkiCollectionItemsTable";
+
+type Props = {
+  collectionId: string;
+  type: PkiItemType;
+};
+
+export const PkiCollectionItemsSection = ({ collectionId, type }: Props) => {
+  const { data: pkiCollection } = useGetPkiCollectionById(collectionId);
+  const { mutateAsync: removeItemFromPkiCollection } = useRemoveItemFromPkiCollection();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deletePkiCollectionItem",
+    "addPkiCollectionItem"
+  ] as const);
+
+  const onRemovePkiCollectionItemSubmit = async (itemId: string) => {
+    try {
+      await removeItemFromPkiCollection({
+        itemId,
+        collectionId
+      });
+
+      createNotification({
+        text: "Successfully removed item from PKI collection",
+        type: "success"
+      });
+
+      handlePopUpClose("deletePkiCollectionItem");
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const sectionName = type === PkiItemType.CA ? "Certificate Authorities" : "Certificates";
+
+  return pkiCollection ? (
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">{sectionName}</h3>
+        <IconButton
+          ariaLabel="copy icon"
+          variant="plain"
+          className="group relative"
+          onClick={() => {
+            handlePopUpOpen("addPkiCollectionItem");
+          }}
+        >
+          <FontAwesomeIcon icon={faPlus} />
+        </IconButton>
+      </div>
+      <div className="py-4">
+        <PkiCollectionItemsTable
+          type={type}
+          collectionId={collectionId}
+          handlePopUpOpen={handlePopUpOpen}
+        />
+      </div>
+      <AddPkiCollectionItemModal
+        collectionId={collectionId}
+        type={type}
+        popUp={popUp}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deletePkiCollectionItem.isOpen}
+        title={`Are you sure want to remove the item from the collection ${pkiCollection.name}?`}
+        onChange={(isOpen) => handlePopUpToggle("deletePkiCollectionItem", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => {
+          const popupData = popUp?.deletePkiCollectionItem?.data as {
+            itemId: string;
+          };
+
+          return onRemovePkiCollectionItemSubmit(popupData.itemId);
+        }}
+      />
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend-v2/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/PkiCollectionItemsTable.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { faBoxesStacked, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  EmptyState,
+  IconButton,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useListPkiCollectionItems } from "@app/hooks/api";
+import { PkiItemType, pkiItemTypeToNameMap } from "@app/hooks/api/pkiCollections/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  collectionId: string;
+  type: PkiItemType;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deletePkiCollectionItem"]>,
+    data?: object
+  ) => void;
+};
+
+const PER_PAGE_INIT = 25;
+
+export const PkiCollectionItemsTable = ({ collectionId, type, handlePopUpOpen }: Props) => {
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(PER_PAGE_INIT);
+
+  const { data, isPending } = useListPkiCollectionItems({
+    collectionId,
+    offset: (page - 1) * perPage,
+    limit: perPage,
+    type
+  });
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Friendly Name</Th>
+              <Th>Not Before</Th>
+              <Th>Not After</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={2} innerKey="pki-collections" />}
+            {!isPending &&
+              data?.collectionItems.map((collectionItem) => {
+                return (
+                  <Tr className="group" key={`pki-collection-item-${collectionItem.id}`}>
+                    <Td className="w-1/3">{collectionItem.friendlyName}</Td>
+                    <Td>{format(new Date(collectionItem.notBefore), "yyyy-MM-dd")}</Td>
+                    <Td>{format(new Date(collectionItem.notAfter), "yyyy-MM-dd")}</Td>
+                    <Td>
+                      <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Delete}
+                          a={ProjectPermissionSub.PkiCollections}
+                        >
+                          {(isAllowed) => (
+                            <Tooltip content="Remove">
+                              <IconButton
+                                colorSchema="danger"
+                                ariaLabel="copy icon"
+                                variant="plain"
+                                className="group relative"
+                                isDisabled={!isAllowed}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deletePkiCollectionItem", {
+                                    collectionId,
+                                    itemId: collectionItem.id
+                                  });
+                                }}
+                              >
+                                <FontAwesomeIcon icon={faXmark} />
+                              </IconButton>
+                            </Tooltip>
+                          )}
+                        </ProjectPermissionCan>
+                      </div>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && data?.totalCount !== undefined && data.totalCount >= PER_PAGE_INIT && (
+          <Pagination
+            count={data.totalCount}
+            page={page}
+            perPage={perPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+          />
+        )}
+        {!isPending && !data?.collectionItems?.length && (
+          <EmptyState
+            title={`No ${pkiItemTypeToNameMap[type]}s have been added to this collection`}
+            icon={faBoxesStacked}
+          />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/PkiCollectionDetailsByIDPage/components/index.tsx

@@ -0,0 +1,2 @@
+export { PkiCollectionDetailsSection } from "./PkiCollectionDetailsSection";
+export { PkiCollectionItemsSection } from "./PkiCollectionItemsSection";

frontend-v2/src/pages/cert-manager/PkiCollectionDetailsByIDPage/routes.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { PkiCollectionDetailsByIDPage } from "./PkiCollectionDetailsByIDPage";
+
+export const Route = createFileRoute("")({
+  component: PkiCollectionDetailsByIDPage
+});

frontend-v2/src/pages/cert-manager/SettingsPage/SettingsPage.tsx

@@ -0,0 +1,40 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+
+import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
+
+const tabs = [{ name: "General", key: "tab-project-general", Component: ProjectGeneralTab }];
+
+export const SettingsPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Helmet>
+      <div className="w-full max-w-7xl px-6">
+        <div className="my-6">
+          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
+        </div>
+        <Tabs>
+          <TabList>
+            {tabs.map((tab) => (
+              <Tab value={tab.key} key={tab.key}>
+                {tab.name}
+              </Tab>
+            ))}
+          </TabList>
+          {tabs.map(({ key, Component }) => (
+            <TabPanel value={key} key={key}>
+              <Component />
+            </TabPanel>
+          ))}
+        </Tabs>
+      </div>
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -0,0 +1,13 @@
+import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
+import { DeleteProjectSection } from "../DeleteProjectSection";
+import { ProjectOverviewChangeSection } from "../ProjectOverviewChangeSection";
+
+export const ProjectGeneralTab = () => {
+  return (
+    <div>
+      <ProjectOverviewChangeSection />
+      <AuditLogsRetentionSection />
+      <DeleteProjectSection />
+    </div>
+  );
+};

frontend-v2/src/pages/cert-manager/SettingsPage/route.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { SettingsPage } from "./SettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_ctx-org-details/secret-manager/$projectId/_layout-secret-manager/settings/"
+)({
+  component: SettingsPage
+});

frontend-v2/src/pages/kms/OverviewPage/OverviewPage.tsx

@@ -0,0 +1,37 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+
+import { CmekTable } from "./components";
+
+export const OverviewPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "KMS" })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
+          <p className="mr-4 text-3xl font-semibold text-white">Key Management System</p>
+          <p className="text-md mb-4 text-bunker-300">
+            Manage keys and perform cryptographic operations.
+          </p>
+          <ProjectPermissionCan
+            passThrough={false}
+            renderGuardBanner
+            I={ProjectPermissionActions.Read}
+            a={ProjectPermissionSub.Cmek}
+          >
+            <CmekTable />
+          </ProjectPermissionCan>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend-v2/src/pages/kms/OverviewPage/components/CmekDecryptModal.tsx

@@ -0,0 +1,169 @@
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { faCheckCircle, faCopy, faInfoCircle, faLockOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { decodeBase64 } from "tweetnacl-util";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Modal,
+  ModalClose,
+  ModalContent,
+  Switch,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+import { TCmek, useCmekDecrypt } from "@app/hooks/api/cmeks";
+
+const formSchema = z.object({
+  ciphertext: z.string()
+});
+
+export type FormData = z.infer<typeof formSchema>;
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  cmek: TCmek;
+};
+
+type FormProps = Pick<Props, "cmek">;
+
+const DecryptForm = ({ cmek }: FormProps) => {
+  const cmekDecrypt = useCmekDecrypt();
+  const [shouldDecode, setShouldDecode] = useState(false);
+  const [plaintext, setPlaintext] = useState("");
+
+  const {
+    handleSubmit,
+    register,
+    formState: { isSubmitting, errors }
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const [copyCiphertext, isCopyingCiphertext, setCopyCipherText] = useTimedReset<string>({
+    initialState: "Copy to Clipboard"
+  });
+
+  const handleDecryptData = async (formData: FormData) => {
+    try {
+      const data = await cmekDecrypt.mutateAsync({ ...formData, keyId: cmek.id });
+      createNotification({
+        text: "Successfully decrypted data",
+        type: "success"
+      });
+
+      setPlaintext(
+        shouldDecode ? Buffer.from(decodeBase64(data.plaintext)).toString("utf8") : data.plaintext
+      );
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to decrypt data",
+        type: "error"
+      });
+    }
+  };
+
+  useEffect(() => {
+    const text = cmekDecrypt.data?.plaintext;
+    if (!text) return;
+
+    setPlaintext(shouldDecode ? Buffer.from(decodeBase64(text)).toString("utf8") : text);
+  }, [shouldDecode]);
+
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(plaintext ?? "");
+
+    setCopyCipherText("Copied to Clipboard");
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleDecryptData)}>
+      {plaintext ? (
+        <FormControl label="Decrypted Data (plaintext)">
+          <TextArea
+            className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+            isDisabled
+            value={plaintext}
+          />
+        </FormControl>
+      ) : (
+        <FormControl
+          label="Encrypted Data (ciphertext)"
+          errorText={errors.ciphertext?.message}
+          isError={Boolean(errors.ciphertext)}
+        >
+          <TextArea
+            {...register("ciphertext")}
+            className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+          />
+        </FormControl>
+      )}
+      <Switch
+        id="decode-base-64"
+        isChecked={shouldDecode}
+        onCheckedChange={setShouldDecode}
+        containerClassName="mb-6 ml-0.5 -mt-2.5"
+      >
+        Decode Base64{" "}
+        <Tooltip content="Toggle this switch on if your data was originally plain text.">
+          <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400" />
+        </Tooltip>
+      </Switch>
+      <div className="flex items-center">
+        <Button
+          className={`mr-4 ${plaintext ? "w-44" : ""}`}
+          size="sm"
+          leftIcon={
+            // eslint-disable-next-line no-nested-ternary
+            plaintext ? (
+              isCopyingCiphertext ? (
+                <FontAwesomeIcon icon={faCheckCircle} />
+              ) : (
+                <FontAwesomeIcon icon={faCopy} />
+              )
+            ) : (
+              <FontAwesomeIcon icon={faLockOpen} />
+            )
+          }
+          onClick={plaintext ? handleCopyToClipboard : undefined}
+          type={plaintext ? "button" : "submit"}
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {plaintext ? copyCiphertext : "Decrypt"}
+        </Button>
+        <ModalClose asChild>
+          <Button colorSchema="secondary" variant="plain">
+            {plaintext ? "Close" : "Cancel"}
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  );
+};
+
+export const CmekDecryptModal = ({ isOpen, onOpenChange, cmek }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        subTitle={
+          <>
+            Decrypt ciphertext using <span className="font-bold">{cmek?.name}</span>. Returns Base64
+            encoded plaintext.
+          </>
+        }
+        title="Decrypt Data"
+      >
+        <DecryptForm cmek={cmek} />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/kms/OverviewPage/components/CmekEncryptModal.tsx

@@ -0,0 +1,169 @@
+import { Controller, useForm } from "react-hook-form";
+import { faCheckCircle, faCopy, faInfoCircle, faLock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Modal,
+  ModalClose,
+  ModalContent,
+  Switch,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+import { TCmek, useCmekEncrypt } from "@app/hooks/api/cmeks";
+
+const formSchema = z.object({
+  plaintext: z.string(),
+  isBase64Encoded: z.boolean()
+});
+
+export type FormData = z.infer<typeof formSchema>;
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  cmek: TCmek;
+};
+
+type FormProps = Pick<Props, "cmek">;
+
+const EncryptForm = ({ cmek }: FormProps) => {
+  const cmekEncrypt = useCmekEncrypt();
+
+  const {
+    handleSubmit,
+    register,
+    control,
+    formState: { isSubmitting, errors }
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      isBase64Encoded: false
+    }
+  });
+
+  const [copyCiphertext, isCopyingCiphertext, setCopyCipherText] = useTimedReset<string>({
+    initialState: "Copy to Clipboard"
+  });
+
+  const handleEncryptData = async (formData: FormData) => {
+    try {
+      await cmekEncrypt.mutateAsync({ ...formData, keyId: cmek.id });
+      createNotification({
+        text: "Successfully encrypted data",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to encrypt data",
+        type: "error"
+      });
+    }
+  };
+
+  const ciphertext = cmekEncrypt.data?.ciphertext;
+
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(ciphertext ?? "");
+
+    setCopyCipherText("Copied to Clipboard");
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleEncryptData)}>
+      {ciphertext ? (
+        <FormControl label="Encrypted Data (Ciphertext)">
+          <TextArea
+            className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+            isDisabled
+            value={cmekEncrypt.data?.ciphertext}
+          />
+        </FormControl>
+      ) : (
+        <>
+          <FormControl
+            label="Data (Plaintext)"
+            errorText={errors.plaintext?.message}
+            isError={Boolean(errors.plaintext)}
+          >
+            <TextArea
+              {...register("plaintext")}
+              className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+            />
+          </FormControl>
+          <Controller
+            control={control}
+            name="isBase64Encoded"
+            render={({ field: { onChange, value } }) => (
+              <Switch
+                id="encode-base-64"
+                isChecked={value}
+                onCheckedChange={onChange}
+                containerClassName="mb-6 ml-0.5 -mt-2.5"
+              >
+                Data is Base64 encoded{" "}
+                <Tooltip content="Toggle this switch on if your data is already Base64 encoded to avoid redundant encoding.">
+                  <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400" />
+                </Tooltip>
+              </Switch>
+            )}
+          />
+        </>
+      )}
+      <div className="flex items-center">
+        <Button
+          className={`mr-4 ${ciphertext ? "w-44" : ""}`}
+          size="sm"
+          leftIcon={
+            // eslint-disable-next-line no-nested-ternary
+            ciphertext ? (
+              isCopyingCiphertext ? (
+                <FontAwesomeIcon icon={faCheckCircle} />
+              ) : (
+                <FontAwesomeIcon icon={faCopy} />
+              )
+            ) : (
+              <FontAwesomeIcon icon={faLock} />
+            )
+          }
+          onClick={ciphertext ? handleCopyToClipboard : undefined}
+          type={ciphertext ? "button" : "submit"}
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {ciphertext ? copyCiphertext : "Encrypt"}
+        </Button>
+        <ModalClose asChild>
+          <Button colorSchema="secondary" variant="plain">
+            {ciphertext ? "Close" : "Cancel"}
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  );
+};
+
+export const CmekEncryptModal = ({ isOpen, onOpenChange, cmek }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        title="Encrypt Data"
+        subTitle={
+          <>
+            Encrypt data using <span className="font-bold">{cmek?.name}</span>. Returns Base64
+            encoded ciphertext.
+          </>
+        }
+      >
+        <EncryptForm cmek={cmek} />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/kms/OverviewPage/components/CmekModal.tsx

@@ -0,0 +1,151 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { EncryptionAlgorithm, TCmek, useCreateCmek, useUpdateCmek } from "@app/hooks/api/cmeks";
+import { slugSchema } from "@app/lib/schemas";
+
+const formSchema = z.object({
+  name: slugSchema({ min: 1, max: 32, field: "Name" }),
+  description: z.string().max(500).optional(),
+  encryptionAlgorithm: z.nativeEnum(EncryptionAlgorithm)
+});
+
+export type FormData = z.infer<typeof formSchema>;
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  cmek?: TCmek | null;
+};
+
+type FormProps = Pick<Props, "cmek"> & {
+  onComplete: () => void;
+};
+
+const CmekForm = ({ onComplete, cmek }: FormProps) => {
+  const createCmek = useCreateCmek();
+  const updateCmek = useUpdateCmek();
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace.id;
+  const isUpdate = !!cmek;
+
+  const {
+    control,
+    handleSubmit,
+    register,
+    formState: { isSubmitting, errors }
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: cmek?.name,
+      description: cmek?.description,
+      encryptionAlgorithm: EncryptionAlgorithm.AES_GCM_256
+    }
+  });
+
+  const handleCreateCmek = async ({ encryptionAlgorithm, name, description }: FormData) => {
+    const mutation = isUpdate
+      ? updateCmek.mutateAsync({ keyId: cmek.id, projectId, name, description })
+      : createCmek.mutateAsync({
+          projectId,
+          encryptionAlgorithm,
+          name,
+          description
+        });
+
+    try {
+      await mutation;
+      createNotification({
+        text: `Successfully ${isUpdate ? "updated" : "added"} key`,
+        type: "success"
+      });
+      onComplete();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${isUpdate ? "update" : "add"} key`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateCmek)}>
+      <FormControl
+        helperText="Name must be slug-friendly"
+        errorText={errors.name?.message}
+        isError={Boolean(errors.name?.message)}
+        label="Name"
+      >
+        <Input autoFocus placeholder="my-secret-key" {...register("name")} />
+      </FormControl>
+      {!isUpdate && (
+        <Controller
+          control={control}
+          name="encryptionAlgorithm"
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl label="Algorithm" errorText={error?.message} isError={Boolean(error)}>
+              <Select defaultValue={field.value} onValueChange={onChange} className="w-full">
+                {Object.entries(EncryptionAlgorithm)?.map(([key, value]) => (
+                  <SelectItem value={value} key={`source-environment-${key}`}>
+                    {key.replaceAll("_", "-")}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+      )}
+      <FormControl
+        label="Description (optional)"
+        errorText={errors.description?.message}
+        isError={Boolean(errors.description?.message)}
+      >
+        <TextArea
+          className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+          {...register("description")}
+        />
+      </FormControl>
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {isUpdate ? "Update" : "Add"} Key
+        </Button>
+        <ModalClose asChild>
+          <Button colorSchema="secondary" variant="plain">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  );
+};
+
+export const CmekModal = ({ isOpen, onOpenChange, cmek }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent title={`${cmek ? "Update" : "Add"} Key`}>
+        <CmekForm onComplete={() => onOpenChange(false)} cmek={cmek} />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend-v2/src/pages/kms/OverviewPage/components/CmekTable.tsx

@@ -0,0 +1,457 @@
+import {
+  faArrowDown,
+  faArrowUp,
+  faArrowUpRightFromSquare,
+  faCancel,
+  faCheck,
+  faCheckCircle,
+  faCopy,
+  faEdit,
+  faEllipsis,
+  faInfoCircle,
+  faKey,
+  faLock,
+  faLockOpen,
+  faMagnifyingGlass,
+  faPlus,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { motion } from "framer-motion";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
+  Spinner,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { BadgeProps } from "@app/components/v2/Badge/Badge";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionCmekActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useWorkspace
+} from "@app/context";
+import { usePagination, usePopUp, useResetPageHelper, useTimedReset } from "@app/hooks";
+import { useGetCmeksByProjectId, useUpdateCmek } from "@app/hooks/api/cmeks";
+import { CmekOrderBy, TCmek } from "@app/hooks/api/cmeks/types";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+
+import { CmekDecryptModal } from "./CmekDecryptModal";
+import { CmekEncryptModal } from "./CmekEncryptModal";
+import { CmekModal } from "./CmekModal";
+import { DeleteCmekModal } from "./DeleteCmekModal";
+
+const getStatusBadgeProps = (
+  isDisabled: boolean
+): { variant: BadgeProps["variant"]; label: string } => {
+  if (isDisabled) {
+    return {
+      variant: "danger",
+      label: "Disabled"
+    };
+  }
+
+  return {
+    variant: "success",
+    label: "Active"
+  };
+};
+
+export const CmekTable = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { permission } = useProjectPermission();
+
+  const projectId = currentWorkspace?.id ?? "";
+
+  const {
+    offset,
+    limit,
+    orderBy,
+    orderDirection,
+    setOrderDirection,
+    search,
+    debouncedSearch,
+    setPage,
+    setSearch,
+    perPage,
+    page,
+    setPerPage
+  } = usePagination(CmekOrderBy.Name);
+
+  const { data, isPending, isFetching } = useGetCmeksByProjectId({
+    projectId,
+    offset,
+    limit,
+    search: debouncedSearch,
+    orderBy,
+    orderDirection
+  });
+
+  const { keys = [], totalCount = 0 } = data ?? {};
+  useResetPageHelper({
+    totalCount,
+    offset,
+    setPage
+  });
+
+  const [, isCopyingCiphertext, setCopyCipherText] = useTimedReset<string>({
+    initialState: "",
+    delay: 1000
+  });
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "upsertKey",
+    "deleteKey",
+    "encryptData",
+    "decryptData"
+  ] as const);
+
+  const handleSort = () => {
+    setOrderDirection((prev) =>
+      prev === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
+    );
+  };
+
+  const updateCmek = useUpdateCmek();
+
+  const handleDisableCmek = async ({ id: keyId, isDisabled }: TCmek) => {
+    try {
+      await updateCmek.mutateAsync({
+        keyId,
+        projectId,
+        isDisabled: !isDisabled
+      });
+
+      createNotification({
+        text: `Key successfully ${isDisabled ? "enabled" : "disabled"}`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text =
+        error?.response?.data?.message ?? `Failed to ${isDisabled ? "enable" : "disable"} key`;
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  const cannotEditKey = permission.cannot(
+    ProjectPermissionCmekActions.Edit,
+    ProjectPermissionSub.Cmek
+  );
+
+  const cannotDeleteKey = permission.cannot(
+    ProjectPermissionCmekActions.Delete,
+    ProjectPermissionSub.Cmek
+  );
+
+  const cannotEncryptData = permission.cannot(
+    ProjectPermissionCmekActions.Encrypt,
+    ProjectPermissionSub.Cmek
+  );
+
+  const cannotDecryptData = permission.cannot(
+    ProjectPermissionCmekActions.Decrypt,
+    ProjectPermissionSub.Cmek
+  );
+
+  return (
+    <motion.div
+      key="kms-keys-tab"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <p className="whitespace-nowrap text-xl font-semibold text-mineshaft-100">Keys</p>
+          <div className="flex w-full justify-end pr-4">
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://infisical.com/docs/documentation/platform/kms"
+            >
+              <span className="w-max cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+                Documentation{" "}
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mb-[0.06rem] ml-1 text-xs"
+                />
+              </span>
+            </a>
+          </div>
+          <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Cmek}>
+            {(isAllowed) => (
+              <Button
+                colorSchema="primary"
+                type="submit"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => handlePopUpOpen("upsertKey", null)}
+                isDisabled={!isAllowed}
+              >
+                Add Key
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
+        <Input
+          containerClassName="mb-4"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search keys by name..."
+        />
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr className="h-14">
+                <Th>
+                  <div className="flex items-center">
+                    Name
+                    <IconButton
+                      variant="plain"
+                      className="ml-2"
+                      ariaLabel="sort"
+                      onClick={handleSort}
+                    >
+                      <FontAwesomeIcon
+                        icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
+                      />
+                    </IconButton>
+                  </div>
+                </Th>
+                <Th>Key ID</Th>
+                <Th>Algorithm</Th>
+                <Th>Status</Th>
+                <Th>Version</Th>
+                <Th className="w-16">{isFetching ? <Spinner size="xs" /> : null}</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={5} innerKey="project-keys" />}
+              {!isPending &&
+                keys.length > 0 &&
+                keys.map((cmek) => {
+                  const { name, id, version, description, encryptionAlgorithm, isDisabled } = cmek;
+                  const { variant, label } = getStatusBadgeProps(isDisabled);
+
+                  return (
+                    <Tr
+                      className="group h-10 hover:bg-mineshaft-700"
+                      key={`st-v3-${id}`}
+                      onMouseLeave={() => {
+                        setCopyCipherText("");
+                      }}
+                    >
+                      <Td>
+                        <div className="flex items-center gap-2">
+                          {name}
+                          {description && (
+                            <Tooltip content={description}>
+                              <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400" />
+                            </Tooltip>
+                          )}
+                        </div>
+                      </Td>
+                      <Td>
+                        <div>
+                          <span> {id}</span>
+                          <IconButton
+                            ariaLabel="copy icon"
+                            colorSchema="secondary"
+                            className="group/copy duration:0 invisible relative ml-3 group-hover:visible"
+                            onClick={() => {
+                              navigator.clipboard.writeText(id);
+                              setCopyCipherText("Copied");
+                            }}
+                          >
+                            <FontAwesomeIcon icon={isCopyingCiphertext ? faCheck : faCopy} />
+                          </IconButton>
+                        </div>
+                      </Td>
+                      <Td className="uppercase">{encryptionAlgorithm}</Td>
+                      <Td>
+                        <Badge variant={variant}>{label}</Badge>
+                      </Td>
+                      <Td>{version}</Td>
+                      <Td className="flex justify-end">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <IconButton
+                              variant="plain"
+                              colorSchema="primary"
+                              className="ml-4 p-0 data-[state=open]:text-primary-400"
+                              ariaLabel="More options"
+                            >
+                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                            </IconButton>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent className="min-w-[160px]">
+                            <Tooltip
+                              content={
+                                // eslint-disable-next-line no-nested-ternary
+                                cannotEncryptData
+                                  ? "Access Restricted"
+                                  : isDisabled
+                                    ? "Key Disabled"
+                                    : ""
+                              }
+                              position="left"
+                            >
+                              <div>
+                                <DropdownMenuItem
+                                  onClick={() => handlePopUpOpen("encryptData", cmek)}
+                                  icon={<FontAwesomeIcon icon={faLock} />}
+                                  iconPos="left"
+                                  isDisabled={cannotEncryptData || isDisabled}
+                                >
+                                  Encrypt Data
+                                </DropdownMenuItem>
+                              </div>
+                            </Tooltip>
+                            <Tooltip
+                              content={
+                                // eslint-disable-next-line no-nested-ternary
+                                cannotDecryptData
+                                  ? "Access Restricted"
+                                  : isDisabled
+                                    ? "Key Disabled"
+                                    : ""
+                              }
+                              position="left"
+                            >
+                              <div>
+                                <DropdownMenuItem
+                                  onClick={() => handlePopUpOpen("decryptData", cmek)}
+                                  icon={<FontAwesomeIcon icon={faLockOpen} />}
+                                  iconPos="left"
+                                  isDisabled={cannotDecryptData || isDisabled}
+                                >
+                                  Decrypt Data
+                                </DropdownMenuItem>
+                              </div>
+                            </Tooltip>
+                            <Tooltip
+                              content={cannotEditKey ? "Access Restricted" : ""}
+                              position="left"
+                            >
+                              <div>
+                                <DropdownMenuItem
+                                  onClick={() => handlePopUpOpen("upsertKey", cmek)}
+                                  icon={<FontAwesomeIcon icon={faEdit} />}
+                                  iconPos="left"
+                                  isDisabled={cannotEditKey}
+                                >
+                                  Edit Key
+                                </DropdownMenuItem>
+                              </div>
+                            </Tooltip>
+                            <Tooltip
+                              content={cannotEditKey ? "Access Restricted" : ""}
+                              position="left"
+                            >
+                              <div>
+                                <DropdownMenuItem
+                                  onClick={() => handleDisableCmek(cmek)}
+                                  icon={
+                                    <FontAwesomeIcon icon={isDisabled ? faCheckCircle : faCancel} />
+                                  }
+                                  iconPos="left"
+                                  isDisabled={cannotEditKey}
+                                >
+                                  {isDisabled ? "Enable" : "Disable"} Key
+                                </DropdownMenuItem>
+                              </div>
+                            </Tooltip>
+                            <Tooltip
+                              content={cannotDeleteKey ? "Access Restricted" : ""}
+                              position="left"
+                            >
+                              <div>
+                                <DropdownMenuItem
+                                  onClick={() => handlePopUpOpen("deleteKey", cmek)}
+                                  icon={<FontAwesomeIcon icon={faTrash} />}
+                                  iconPos="left"
+                                  isDisabled={cannotDeleteKey}
+                                >
+                                  Delete Key
+                                </DropdownMenuItem>
+                              </div>
+                            </Tooltip>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {!isPending && totalCount > 0 && (
+            <Pagination
+              count={totalCount}
+              page={page}
+              perPage={perPage}
+              onChangePage={(newPage) => setPage(newPage)}
+              onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+            />
+          )}
+          {!isPending && keys.length === 0 && (
+            <EmptyState
+              title={
+                debouncedSearch.trim().length > 0
+                  ? "No keys match search filter"
+                  : "No keys have been added to this project"
+              }
+              icon={faKey}
+            />
+          )}
+        </TableContainer>
+        <DeleteCmekModal
+          isOpen={popUp.deleteKey.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("deleteKey", isOpen)}
+          cmek={popUp.deleteKey.data as TCmek}
+        />
+        <CmekModal
+          isOpen={popUp.upsertKey.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upsertKey", isOpen)}
+          cmek={popUp.upsertKey.data as TCmek | null}
+        />
+        <CmekEncryptModal
+          isOpen={popUp.encryptData.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("encryptData", isOpen)}
+          cmek={popUp.encryptData.data as TCmek}
+        />
+        <CmekDecryptModal
+          isOpen={popUp.decryptData.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("decryptData", isOpen)}
+          cmek={popUp.decryptData.data as TCmek}
+        />
+      </div>
+    </motion.div>
+  );
+};

frontend-v2/src/pages/kms/OverviewPage/components/DeleteCmekModal.tsx

@@ -1,37 +1,40 @@
 import { createNotification } from "@app/components/notifications";
 import { DeleteActionModal } from "@app/components/v2";
-import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
+import { TCmek, useDeleteCmek } from "@app/hooks/api/cmeks";
 
 type Props = {
-  template?: TProjectTemplate;
+  cmek: TCmek;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
 };
 
-export const DeleteProjectTemplateModal = ({ isOpen, onOpenChange, template }: Props) => {
+export const DeleteCmekModal = ({ isOpen, onOpenChange, cmek }: Props) => {
-  const deleteTemplate = useDeleteProjectTemplate();
+  const deleteCmek = useDeleteCmek();
 
-  if (!template) return null;
+  if (!cmek) return null;
 
-  const { id: templateId, name } = template;
+  const { id: keyId, projectId, name } = cmek;
 
-  const handleDeleteProjectTemplate = async () => {
+  const handleDeleteCmek = async () => {
     try {
-      await deleteTemplate.mutateAsync({
+      await deleteCmek.mutateAsync({
-        templateId
+        keyId,
+        projectId
       });
 
       createNotification({
-        text: "Successfully removed project template",
+        text: "Key successfully deleted",
         type: "success"
       });
 
       onOpenChange(false);
     } catch (err) {
       console.error(err);
+      const error = err as any;
+      const text = error?.response?.data?.message ?? "Failed to delete key";
 
       createNotification({
-        text: "Failed remove project template",
+        text,
         type: "error"
       });
     }
@@ -40,10 +43,10 @@ export const DeleteProjectTemplateModal = ({ isOpen, onOpenChange, template }: P
   return (
     <DeleteActionModal
       isOpen={isOpen}
-      onChange={onOpenChange}
       title={`Are you sure want to delete ${name}?`}
+      onChange={onOpenChange}
       deleteKey="confirm"
-      onDeleteApproved={handleDeleteProjectTemplate}
+      onDeleteApproved={handleDeleteCmek}
     />
   );
 };

frontend-v2/src/pages/kms/OverviewPage/components/index.tsx

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

frontend-v2/src/pages/kms/OverviewPage/route.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { OverviewPage } from "./OverviewPage";
+
+export const Route = createFileRoute("")({
+  component: OverviewPage
+});

frontend-v2/src/pages/kms/SettingsPage/SettingsPage.tsx

@@ -0,0 +1,40 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+
+import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
+
+const tabs = [{ name: "General", key: "tab-project-general", Component: ProjectGeneralTab }];
+
+export const SettingsPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Helmet>
+      <div className="w-full max-w-7xl px-6">
+        <div className="my-6">
+          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
+        </div>
+        <Tabs>
+          <TabList>
+            {tabs.map((tab) => (
+              <Tab value={tab.key} key={tab.key}>
+                {tab.name}
+              </Tab>
+            ))}
+          </TabList>
+          {tabs.map(({ key, Component }) => (
+            <TabPanel value={key} key={key}>
+              <Component />
+            </TabPanel>
+          ))}
+        </Tabs>
+      </div>
+    </div>
+  );
+};

frontend-v2/src/pages/kms/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx

@@ -0,0 +1,129 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useProjectPermission, useSubscription, useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { useUpdateWorkspaceAuditLogsRetention } from "@app/hooks/api/workspace/queries";
+
+const formSchema = z.object({
+  auditLogsRetentionDays: z.coerce.number().min(0)
+});
+
+type TForm = z.infer<typeof formSchema>;
+
+export const AuditLogsRetentionSection = () => {
+  const { mutateAsync: updateAuditLogsRetention } = useUpdateWorkspaceAuditLogsRetention();
+
+  const { currentWorkspace } = useWorkspace();
+  const { membership } = useProjectPermission();
+  const { subscription } = useSubscription();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+
+  const {
+    control,
+    formState: { isSubmitting, isDirty },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      auditLogsRetentionDays:
+        currentWorkspace?.auditLogsRetentionDays ?? subscription?.auditLogsRetentionDays ?? 0
+    }
+  });
+
+  if (!currentWorkspace) return null;
+
+  const handleAuditLogsRetentionSubmit = async ({ auditLogsRetentionDays }: TForm) => {
+    try {
+      if (!subscription?.auditLogs) {
+        handlePopUpOpen("upgradePlan", {
+          description: "You can only configure audit logs retention if you upgrade your plan."
+        });
+
+        return;
+      }
+
+      if (subscription && auditLogsRetentionDays > subscription?.auditLogsRetentionDays) {
+        handlePopUpOpen("upgradePlan", {
+          description:
+            "To update your audit logs retention period to a higher value, upgrade your plan."
+        });
+
+        return;
+      }
+
+      await updateAuditLogsRetention({
+        auditLogsRetentionDays,
+        projectSlug: currentWorkspace.slug
+      });
+
+      createNotification({
+        text: "Successfully updated audit logs retention period",
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: "Failed updating audit logs retention period",
+        type: "error"
+      });
+    }
+  };
+
+  // render only for dedicated/self-hosted instances of Infisical
+  if (
+    window.location.origin.includes("https://app.infisical.com") ||
+    window.location.origin.includes("https://gamma.infisical.com")
+  ) {
+    return null;
+  }
+
+  const isAdmin = membership.roles.includes(ProjectMembershipRole.Admin);
+  return (
+    <>
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="flex w-full items-center justify-between">
+          <p className="text-xl font-semibold">Audit Logs Retention</p>
+        </div>
+        <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
+          Set the number of days to keep your project audit logs.
+        </p>
+        <form onSubmit={handleSubmit(handleAuditLogsRetentionSubmit)} autoComplete="off">
+          <div className="max-w-xs">
+            <Controller
+              control={control}
+              defaultValue={0}
+              name="auditLogsRetentionDays"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  label="Number of days"
+                >
+                  <Input {...field} type="number" min={1} step={1} isDisabled={!isAdmin} />
+                </FormControl>
+              )}
+            />
+          </div>
+          <Button
+            colorSchema="secondary"
+            type="submit"
+            isLoading={isSubmitting}
+            disabled={!isAdmin || !isDirty}
+          >
+            Save
+          </Button>
+        </form>
+      </div>
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
+      />
+    </>
+  );
+};

frontend-v2/src/pages/kms/SettingsPage/components/AuditLogsRetentionSection/index.tsx

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

frontend-v2/src/pages/kms/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -0,0 +1,192 @@
+import { useMemo } from "react";
+import { useNavigate } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { LeaveProjectModal } from "@app/components/v2/LeaveProjectModal";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useOrganization,
+  useProjectPermission,
+  useWorkspace
+} from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useDeleteWorkspace, useGetWorkspaceUsers, useLeaveProject } from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+export const DeleteProjectSection = () => {
+  const navigate = useNavigate();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteWorkspace",
+    "leaveWorkspace"
+  ] as const);
+
+  const { currentOrg } = useOrganization();
+  const { hasProjectRole, membership } = useProjectPermission();
+  const { currentWorkspace } = useWorkspace();
+  const [isDeleting, setIsDeleting] = useToggle();
+  const [isLeaving, setIsLeaving] = useToggle();
+  const deleteWorkspace = useDeleteWorkspace();
+  const leaveProject = useLeaveProject();
+  const { data: members, isPending: isMembersLoading } = useGetWorkspaceUsers(
+    currentWorkspace?.id || ""
+  );
+
+  // If isNoAccessMember is true, then the user can't read the workspace members. So we need to handle this case separately.
+  const isNoAccessMember = hasProjectRole("no-access");
+
+  const isOnlyAdminMember = useMemo(() => {
+    if (!members || !membership || !hasProjectRole("admin")) return false;
+
+    const adminMembers = members.filter(
+      (member) => member.roles.map((r) => r.role).includes("admin") && member.id !== membership.id // exclude the current user
+    );
+
+    return !adminMembers.length;
+  }, [members, membership]);
+
+  const handleDeleteWorkspaceSubmit = async () => {
+    setIsDeleting.on();
+    try {
+      if (!currentWorkspace?.id) return;
+
+      await deleteWorkspace.mutateAsync({
+        workspaceID: currentWorkspace?.id
+      });
+
+      createNotification({
+        text: "Successfully deleted project",
+        type: "success"
+      });
+
+      navigate({
+        to: `/organization/${ProjectType.SecretManager}/overview` as const
+      });
+      handlePopUpClose("deleteWorkspace");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete project",
+        type: "error"
+      });
+    } finally {
+      setIsDeleting.off();
+    }
+  };
+
+  const handleLeaveWorkspaceSubmit = async () => {
+    console.log({
+      currentWorkspace,
+      currentOrg,
+      members,
+      isNoAccessMember,
+      membership
+    });
+
+    try {
+      setIsLeaving.on();
+
+      if (!currentWorkspace?.id || !currentOrg?.id) return;
+
+      // If there's no members, and the user has access to read members, something went wrong.
+      if (!members && !isNoAccessMember) return;
+
+      // If the user has elevated permissions and can read members:
+      if (!isNoAccessMember) {
+        if (!members) return;
+
+        if (members.length < 2) {
+          createNotification({
+            text: "You can't leave the project as you are the only member",
+            type: "error"
+          });
+          return;
+        }
+        // If the user has access to read members, and there's less than 1 admin member excluding the current user, they can't leave the project.
+        if (isOnlyAdminMember) {
+          createNotification({
+            text: "You can't leave a project with no admin members left. Promote another member to admin first.",
+            type: "error"
+          });
+          return;
+        }
+      }
+
+      // If it's actually a no-access member, then we don't really care about the members.
+
+      await leaveProject.mutateAsync({
+        workspaceId: currentWorkspace.id
+      });
+
+      navigate({
+        to: `/organization/${ProjectType.SecretManager}/overview` as const
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to leave project",
+        type: "error"
+      });
+    } finally {
+      setIsLeaving.off();
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Danger Zone</p>
+      <div className="space-x-4">
+        <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Project}>
+          {(isAllowed) => (
+            <Button
+              isLoading={isDeleting}
+              isDisabled={!isAllowed || isDeleting}
+              colorSchema="danger"
+              variant="outline_bg"
+              type="submit"
+              onClick={() => handlePopUpOpen("deleteWorkspace")}
+            >
+              {`Delete ${currentWorkspace?.name}`}
+            </Button>
+          )}
+        </ProjectPermissionCan>
+        {!isOnlyAdminMember && (
+          <Button
+            disabled={isMembersLoading || (members && members?.length < 2)}
+            isLoading={isLeaving}
+            colorSchema="danger"
+            variant="outline_bg"
+            type="submit"
+            onClick={() => handlePopUpOpen("leaveWorkspace")}
+          >
+            {`Leave ${currentWorkspace?.name}`}
+          </Button>
+        )}
+      </div>
+
+      <DeleteActionModal
+        isOpen={popUp.deleteWorkspace.isOpen}
+        title="Are you sure want to delete this project?"
+        subTitle={`Permanently delete ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
+        onChange={(isOpen) => handlePopUpToggle("deleteWorkspace", isOpen)}
+        deleteKey="confirm"
+        buttonText="Delete Project"
+        onDeleteApproved={handleDeleteWorkspaceSubmit}
+      />
+
+      <LeaveProjectModal
+        isOpen={popUp.leaveWorkspace.isOpen}
+        title="Are you sure want to leave this project?"
+        subTitle={`If you leave ${currentWorkspace?.name} you will lose access to the project and it's contents.`}
+        onChange={(isOpen) => handlePopUpToggle("leaveWorkspace", isOpen)}
+        deleteKey="confirm"
+        buttonText="Leave Project"
+        onLeaveApproved={handleLeaveWorkspaceSubmit}
+      />
+    </div>
+  );
+};

frontend-v2/src/pages/kms/SettingsPage/components/DeleteProjectSection/index.tsx

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

frontend-v2/src/pages/kms/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -0,0 +1,13 @@
+import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
+import { DeleteProjectSection } from "../DeleteProjectSection";
+import { ProjectOverviewChangeSection } from "../ProjectOverviewChangeSection";
+
+export const ProjectGeneralTab = () => {
+  return (
+    <div>
+      <ProjectOverviewChangeSection />
+      <AuditLogsRetentionSection />
+      <DeleteProjectSection />
+    </div>
+  );
+};

frontend-v2/src/pages/kms/SettingsPage/components/ProjectGeneralTab/index.tsx

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

frontend-v2/src/pages/kms/SettingsPage/components/ProjectOverviewChangeSection/CopyButton.tsx

@@ -0,0 +1,51 @@
+import { useCallback } from "react";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Button } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+
+type Props = {
+  value: string;
+  hoverText: string;
+  notificationText: string;
+  children: React.ReactNode;
+};
+
+export const CopyButton = ({ value, children, hoverText, notificationText }: Props) => {
+  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
+
+  const copyToClipboard = useCallback(() => {
+    if (isProjectIdCopied) {
+      return;
+    }
+
+    setIsProjectIdCopied.on();
+    navigator.clipboard.writeText(value);
+
+    createNotification({
+      text: notificationText,
+      type: "success"
+    });
+
+    const timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
+
+    // eslint-disable-next-line consistent-return
+    return () => clearTimeout(timer);
+  }, [isProjectIdCopied]);
+
+  return (
+    <Button
+      colorSchema="secondary"
+      className="group relative"
+      leftIcon={<FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />}
+      onClick={copyToClipboard}
+    >
+      {children}
+      <span className="absolute -left-8 -top-20 hidden translate-y-full justify-center rounded-md bg-bunker-800 px-3 py-2 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+        {hoverText}
+      </span>
+    </Button>
+  );
+};

frontend-v2/src/pages/kms/SettingsPage/components/ProjectOverviewChangeSection/ProjectOverviewChangeSection.tsx

@@ -0,0 +1,168 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input, TextArea } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useUpdateProject } from "@app/hooks/api";
+
+import { CopyButton } from "./CopyButton";
+
+const formSchema = z.object({
+  name: z.string().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
+  description: z
+    .string()
+    .trim()
+    .max(256, "Description too long, max length is 256 characters")
+    .optional()
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export const ProjectOverviewChangeSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync, isPending } = useUpdateProject();
+
+  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: zodResolver(formSchema) });
+
+  useEffect(() => {
+    if (currentWorkspace) {
+      reset({
+        name: currentWorkspace.name,
+        description: currentWorkspace.description ?? ""
+      });
+    }
+  }, [currentWorkspace]);
+
+  const onFormSubmit = async ({ name, description }: FormData) => {
+    try {
+      if (!currentWorkspace?.id) return;
+
+      await mutateAsync({
+        projectID: currentWorkspace.id,
+        newProjectName: name,
+        newProjectDescription: description
+      });
+
+      createNotification({
+        text: "Successfully updated project overview",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update project overview",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="justify-betweens flex">
+        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Overview</h2>
+        <div className="space-x-2">
+          <CopyButton
+            value={currentWorkspace?.slug || ""}
+            hoverText="Click to project slug"
+            notificationText="Copied project slug to clipboard"
+          >
+            Copy Project Slug
+          </CopyButton>
+          <CopyButton
+            value={currentWorkspace?.id || ""}
+            hoverText="Click to project ID"
+            notificationText="Copied project ID to clipboard"
+          >
+            Copy Project ID
+          </CopyButton>
+        </div>
+      </div>
+      <div>
+        <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full flex-col gap-0">
+          <div className="flex w-full flex-row items-end gap-4">
+            <div className="w-full max-w-md">
+              <ProjectPermissionCan
+                I={ProjectPermissionActions.Edit}
+                a={ProjectPermissionSub.Project}
+              >
+                {(isAllowed) => (
+                  <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        label="Project name"
+                      >
+                        <Input
+                          placeholder="Project name"
+                          {...field}
+                          className="bg-mineshaft-800"
+                          isDisabled={!isAllowed}
+                        />
+                      </FormControl>
+                    )}
+                    control={control}
+                    name="name"
+                  />
+                )}
+              </ProjectPermissionCan>
+            </div>
+          </div>
+          <div className="flex w-full flex-row items-end gap-4">
+            <div className="w-full max-w-md">
+              <ProjectPermissionCan
+                I={ProjectPermissionActions.Edit}
+                a={ProjectPermissionSub.Project}
+              >
+                {(isAllowed) => (
+                  <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                        label="Project description"
+                      >
+                        <TextArea
+                          placeholder="Project description"
+                          {...field}
+                          rows={3}
+                          className="thin-scrollbar max-w-md !resize-none bg-mineshaft-800"
+                          isDisabled={!isAllowed}
+                        />
+                      </FormControl>
+                    )}
+                    control={control}
+                    name="description"
+                  />
+                )}
+              </ProjectPermissionCan>
+            </div>
+          </div>
+          <div>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={ProjectPermissionSub.Project}
+            >
+              {(isAllowed) => (
+                <Button
+                  colorSchema="secondary"
+                  type="submit"
+                  isLoading={isPending}
+                  isDisabled={isPending || !isAllowed}
+                >
+                  Save
+                </Button>
+              )}
+            </ProjectPermissionCan>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

frontend-v2/src/pages/kms/SettingsPage/components/ProjectOverviewChangeSection/index.tsx

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

frontend-v2/src/pages/kms/SettingsPage/components/index.tsx

@@ -0,0 +1,6 @@
+export { AutoCapitalizationSection } from "./AutoCapitalizationSection";
+export { BackfillSecretReferenceSecretion } from "./BackfillSecretReferenceSection";
+export { DeleteProjectSection } from "./DeleteProjectSection";
+export { EnvironmentSection } from "./EnvironmentSection";
+export { ProjectOverviewChangeSection } from "./ProjectOverviewChangeSection";
+export { SecretTagsSection } from "./SecretTagsSection";

frontend-v2/src/pages/kms/SettingsPage/route.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { SettingsPage } from "./SettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_ctx-org-details/secret-manager/$projectId/_layout-secret-manager/settings/"
+)({
+  component: SettingsPage
+});