Merge branch 'main' of https://github.com/Infisical/infisical into fix/suborgs-routing

2026-09-22 13:39:35 +00:00 · 2025-11-21 18:19:47 +05:30
parent c8cb2736ab 617c9af5bb
commit bba2aea0f5
126 changed files with 4366 additions and 112 deletions
--- a/frontend/src/components/pki-syncs/CreatePkiSyncModal.tsx
+++ b/frontend/src/components/pki-syncs/CreatePkiSyncModal.tsx
@@ -64,7 +64,7 @@ export const CreatePkiSyncModal = ({
            "Add Sync"
          )
        }
-        className="max-w-2xl"
+        className="max-w-3xl"
        bodyClassName="overflow-visible"
        subTitle={
          selectedSync ? undefined : "Select a third-party service to sync certificates to."
--- a/frontend/src/components/pki-syncs/EditPkiSyncModal.tsx
+++ b/frontend/src/components/pki-syncs/EditPkiSyncModal.tsx
@@ -15,11 +15,13 @@ type Props = {
 export const EditPkiSyncModal = ({ pkiSync, onOpenChange, fields, ...props }: Props) => {
  if (!pkiSync) return null;

+  const modalClassName = fields === PkiSyncEditFields.Mappings ? "max-w-4xl" : "max-w-2xl";
+
  return (
    <Modal {...props} onOpenChange={onOpenChange}>
      <ModalContent
        title={<PkiSyncModalHeader isConfigured destination={pkiSync.destination} />}
-        className="max-w-2xl"
+        className={modalClassName}
        bodyClassName="overflow-visible"
      >
        <EditPkiSyncForm onComplete={() => onOpenChange(false)} fields={fields} pkiSync={pkiSync} />
--- a/frontend/src/components/pki-syncs/forms/AwsSecretsManagerPkiSyncFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/AwsSecretsManagerPkiSyncFields.tsx
@@ -0,0 +1,50 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { FormControl, Select, SelectItem } from "@app/components/v2";
+import { AWS_REGIONS } from "@app/helpers/appConnections";
+import { PkiSync } from "@app/hooks/api/pkiSyncs";
+
+import { TPkiSyncForm } from "./schemas/pki-sync-schema";
+import { PkiSyncConnectionField } from "./PkiSyncConnectionField";
+
+export const AwsSecretsManagerPkiSyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TPkiSyncForm & { destination: PkiSync.AwsSecretsManager }
+  >();
+
+  return (
+    <>
+      <PkiSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.region", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.region"
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="AWS Region"
+            tooltipText="Select the AWS region where your secrets will be stored in AWS Secrets Manager."
+          >
+            <Select
+              value={field.value}
+              onValueChange={field.onChange}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              placeholder="Select an AWS region"
+            >
+              {AWS_REGIONS.map(({ name, slug }) => (
+                <SelectItem value={slug} key={slug}>
+                  {name}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};
--- a/frontend/src/components/pki-syncs/forms/ChefPkiSyncFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/ChefPkiSyncFields.tsx
@@ -0,0 +1,35 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { FormControl, Input } from "@app/components/v2";
+import { PkiSync } from "@app/hooks/api/pkiSyncs";
+
+import { TPkiSyncForm } from "./schemas/pki-sync-schema";
+import { PkiSyncConnectionField } from "./PkiSyncConnectionField";
+
+export const ChefPkiSyncFields = () => {
+  const { control, setValue } = useFormContext<TPkiSyncForm & { destination: PkiSync.Chef }>();
+
+  return (
+    <>
+      <PkiSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.dataBagName", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.dataBagName"
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Data Bag Name"
+            tooltipText="Enter your Chef data bag name where certificates will be stored. This data bag will be used to store SSL/TLS certificates, private keys, and certificate chains. Data bag names must contain only alphanumeric characters, underscores, and hyphens."
+          >
+            <Input {...field} placeholder="ssl_certificates" maxLength={255} />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};
--- a/frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx
+++ b/frontend/src/components/pki-syncs/forms/CreatePkiSyncForm.tsx
@@ -4,7 +4,6 @@ import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tab } from "@headlessui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { twMerge } from "tailwind-merge";

 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Switch } from "@app/components/v2";
@@ -16,6 +15,7 @@ import { PkiSyncFormSchema, TPkiSyncForm } from "./schemas/pki-sync-schema";
 import { PkiSyncCertificatesFields } from "./PkiSyncCertificatesFields";
 import { PkiSyncDestinationFields } from "./PkiSyncDestinationFields";
 import { PkiSyncDetailsFields } from "./PkiSyncDetailsFields";
+import { PkiSyncFieldMappingsFields } from "./PkiSyncFieldMappingsFields";
 import { PkiSyncOptionsFields } from "./PkiSyncOptionsFields";
 import { PkiSyncReviewFields } from "./PkiSyncReviewFields";

@@ -26,13 +26,38 @@ type Props = {
  initialData?: any;
 };

-const FORM_TABS: { name: string; key: string; fields: (keyof TPkiSyncForm)[] }[] = [
-  { name: "Destination", key: "destination", fields: ["connection", "destinationConfig"] },
-  { name: "Sync Options", key: "options", fields: ["syncOptions"] },
-  { name: "Details", key: "details", fields: ["name", "description"] },
-  { name: "Certificates", key: "certificates", fields: ["certificateIds"] },
-  { name: "Review", key: "review", fields: [] }
-];
+const getFormTabs = (
+  destination: PkiSync
+): { name: string; key: string; fields: (keyof TPkiSyncForm)[] }[] => {
+  const baseTabs = [
+    {
+      name: "Destination",
+      key: "destination",
+      fields: ["connection", "destinationConfig"] as (keyof TPkiSyncForm)[]
+    },
+    { name: "Sync Options", key: "options", fields: ["syncOptions"] as (keyof TPkiSyncForm)[] }
+  ];
+
+  if (destination === PkiSync.Chef || destination === PkiSync.AwsSecretsManager) {
+    baseTabs.push({
+      name: "Mappings",
+      key: "mappings",
+      fields: ["syncOptions"] as (keyof TPkiSyncForm)[]
+    });
+  }
+
+  baseTabs.push(
+    { name: "Details", key: "details", fields: ["name", "description"] as (keyof TPkiSyncForm)[] },
+    {
+      name: "Certificates",
+      key: "certificates",
+      fields: ["certificateIds"] as (keyof TPkiSyncForm)[]
+    },
+    { name: "Review", key: "review", fields: [] as (keyof TPkiSyncForm)[] }
+  );
+
+  return baseTabs;
+};

 export const CreatePkiSyncForm = ({ destination, onComplete, onCancel, initialData }: Props) => {
  const createPkiSync = useCreatePkiSync();
@@ -42,6 +67,7 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel, initialDa
  const [showConfirmation, setShowConfirmation] = useState(false);

  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  const FORM_TABS = getFormTabs(destination);

  const { syncOption } = usePkiSyncOption(destination);

@@ -55,7 +81,19 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel, initialDa
        canImportCertificates: false,
        canRemoveCertificates: false,
        preserveArn: true,
-        certificateNameSchema: syncOption?.defaultCertificateNameSchema
+        certificateNameSchema: syncOption?.defaultCertificateNameSchema,
+        ...((destination === PkiSync.Chef || destination === PkiSync.AwsSecretsManager) && {
+          fieldMappings: {
+            certificate: "certificate",
+            privateKey: "private_key",
+            certificateChain: "certificate_chain",
+            caCertificate: "ca_certificate"
+          }
+        }),
+        ...(destination === PkiSync.AwsSecretsManager && {
+          preserveSecretOnRenewal: true,
+          updateExistingCertificates: true
+        })
      },
      ...initialData
    } as Partial<TPkiSyncForm>,
@@ -167,10 +205,10 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel, initialDa
    );

  return (
-    <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
+    <form className="flex max-h-[70vh] flex-col overflow-hidden">
      <FormProvider {...formMethods}>
        <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
-          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+          <Tab.List className="-pb-1 mb-6 w-full flex-shrink-0 border-b-2 border-mineshaft-600">
            {FORM_TABS.map((tab, index) => (
              <Tab
                onClick={async (e) => {
@@ -191,11 +229,11 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel, initialDa
              </Tab>
            ))}
          </Tab.List>
-          <Tab.Panels>
-            <Tab.Panel>
+          <Tab.Panels className="flex-1 overflow-y-auto">
+            <Tab.Panel className="max-h-full overflow-y-auto">
              <PkiSyncDestinationFields />
            </Tab.Panel>
-            <Tab.Panel>
+            <Tab.Panel className="max-h-full overflow-y-auto">
              <PkiSyncOptionsFields destination={destination} />
              <Controller
                control={control}
@@ -225,20 +263,25 @@ export const CreatePkiSyncForm = ({ destination, onComplete, onCancel, initialDa
                }}
              />
            </Tab.Panel>
-            <Tab.Panel>
+            {(destination === PkiSync.Chef || destination === PkiSync.AwsSecretsManager) && (
+              <Tab.Panel className="max-h-full overflow-y-auto">
+                <PkiSyncFieldMappingsFields destination={destination} />
+              </Tab.Panel>
+            )}
+            <Tab.Panel className="max-h-full overflow-y-auto">
              <PkiSyncDetailsFields />
            </Tab.Panel>
-            <Tab.Panel>
+            <Tab.Panel className="max-h-full overflow-y-auto">
              <PkiSyncCertificatesFields />
            </Tab.Panel>
-            <Tab.Panel>
+            <Tab.Panel className="max-h-full overflow-y-auto">
              <PkiSyncReviewFields />
            </Tab.Panel>
          </Tab.Panels>
        </Tab.Group>
      </FormProvider>

-      <div className="flex w-full flex-row-reverse justify-between gap-4 pt-4">
+      <div className="mt-4 flex w-full flex-shrink-0 flex-row-reverse justify-between gap-4 border-t border-mineshaft-600 pt-4">
        <Button onClick={handleNext} colorSchema="secondary">
          {isFinalStep ? "Create Sync" : "Next"}
        </Button>
--- a/frontend/src/components/pki-syncs/forms/EditPkiSyncForm.tsx
+++ b/frontend/src/components/pki-syncs/forms/EditPkiSyncForm.tsx
@@ -11,6 +11,7 @@ import { TPkiSync, useUpdatePkiSync } from "@app/hooks/api/pkiSyncs";
 import { TUpdatePkiSyncForm, UpdatePkiSyncFormSchema } from "./schemas/pki-sync-schema";
 import { PkiSyncDestinationFields } from "./PkiSyncDestinationFields";
 import { PkiSyncDetailsFields } from "./PkiSyncDetailsFields";
+import { PkiSyncFieldMappingsFields } from "./PkiSyncFieldMappingsFields";
 import { PkiSyncOptionsFields } from "./PkiSyncOptionsFields";
 import { PkiSyncSourceFields } from "./PkiSyncSourceFields";

@@ -66,6 +67,9 @@ export const EditPkiSyncForm = ({ pkiSync, fields, onComplete }: Props) => {
    case PkiSyncEditFields.Options:
      Component = <PkiSyncOptionsFields destination={pkiSync.destination} />;
      break;
+    case PkiSyncEditFields.Mappings:
+      Component = <PkiSyncFieldMappingsFields destination={pkiSync.destination} />;
+      break;
    case PkiSyncEditFields.Source:
      Component = <PkiSyncSourceFields />;
      break;
--- a/frontend/src/components/pki-syncs/forms/PkiSyncDestinationFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/PkiSyncDestinationFields.tsx
@@ -4,7 +4,9 @@ import { PkiSync } from "@app/hooks/api/pkiSyncs";

 import { TPkiSyncForm } from "./schemas/pki-sync-schema";
 import { AwsCertificateManagerPkiSyncFields } from "./AwsCertificateManagerPkiSyncFields";
+import { AwsSecretsManagerPkiSyncFields } from "./AwsSecretsManagerPkiSyncFields";
 import { AzureKeyVaultPkiSyncFields } from "./AzureKeyVaultPkiSyncFields";
+import { ChefPkiSyncFields } from "./ChefPkiSyncFields";

 export const PkiSyncDestinationFields = () => {
  const { watch } = useFormContext<TPkiSyncForm>();
@@ -16,6 +18,10 @@ export const PkiSyncDestinationFields = () => {
      return <AzureKeyVaultPkiSyncFields />;
    case PkiSync.AwsCertificateManager:
      return <AwsCertificateManagerPkiSyncFields />;
+    case PkiSync.AwsSecretsManager:
+      return <AwsSecretsManagerPkiSyncFields />;
+    case PkiSync.Chef:
+      return <ChefPkiSyncFields />;
    default:
      return (
        <div className="flex items-center justify-center rounded-md border border-red-500 bg-red-100 p-4 text-red-700">
--- a/frontend/src/components/pki-syncs/forms/PkiSyncFieldMappingsFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/PkiSyncFieldMappingsFields.tsx
@@ -0,0 +1,103 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { FormControl, Input } from "@app/components/v2";
+import { PkiSync } from "@app/hooks/api/pkiSyncs";
+
+import { TPkiSyncForm } from "./schemas/pki-sync-schema";
+
+type Props = {
+  destination?: PkiSync;
+};
+
+export const PkiSyncFieldMappingsFields = ({ destination }: Props) => {
+  const { control, watch } = useFormContext<TPkiSyncForm>();
+  const currentDestination = destination || watch("destination");
+
+  if (currentDestination !== PkiSync.Chef && currentDestination !== PkiSync.AwsSecretsManager) {
+    return null;
+  }
+
+  return (
+    <>
+      <p className="mb-4 text-sm text-bunker-300">
+        Configure how certificate fields are mapped to your{" "}
+        {currentDestination === PkiSync.Chef ? "Chef data bag items" : "AWS secrets"}.
+      </p>
+
+      <div className="grid grid-cols-2 gap-4">
+        <Controller
+          control={control}
+          name="syncOptions.fieldMappings.certificate"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Certificate Field"
+              tooltipText={`The field name used to store the certificate content in the ${currentDestination === PkiSync.Chef ? "Chef data bag item" : "AWS secret"}.`}
+            >
+              <Input {...field} placeholder="certificate" />
+            </FormControl>
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="syncOptions.fieldMappings.privateKey"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Private Key Field"
+              tooltipText={`The field name used to store the private key content in the ${currentDestination === PkiSync.Chef ? "Chef data bag item" : "AWS secret"}.`}
+            >
+              <Input {...field} placeholder="private_key" />
+            </FormControl>
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="syncOptions.fieldMappings.certificateChain"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Certificate Chain Field"
+              tooltipText={`The field name used to store the certificate chain content in the ${currentDestination === PkiSync.Chef ? "Chef data bag item" : "AWS secret"}.`}
+            >
+              <Input {...field} placeholder="certificate_chain" />
+            </FormControl>
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="syncOptions.fieldMappings.caCertificate"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="CA Certificate Field"
+              tooltipText={`The field name used to store the CA certificate content in the ${currentDestination === PkiSync.Chef ? "Chef data bag item" : "AWS secret"}.`}
+            >
+              <Input {...field} placeholder="ca_certificate" />
+            </FormControl>
+          )}
+        />
+      </div>
+
+      <div className="mt-6 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+        <h4 className="mb-2 text-sm font-medium text-mineshaft-100">Preview JSON Structure</h4>
+        <pre className="text-xs text-bunker-300">
+          {`{
+  "id": "certificate-item-name",
+  "${watch("syncOptions.fieldMappings.certificate") || "certificate"}": "<certificate-content>",
+  "${watch("syncOptions.fieldMappings.privateKey") || "private_key"}": "<private-key-content>",
+  "${watch("syncOptions.fieldMappings.certificateChain") || "certificate_chain"}": "<certificate-chain-content>",
+  "${watch("syncOptions.fieldMappings.caCertificate") || "ca_certificate"}": "<ca-certificate-content>"
+}`}
+        </pre>
+      </div>
+    </>
+  );
+};
--- a/frontend/src/components/pki-syncs/forms/PkiSyncOptionsFields/PkiSyncOptionsFields.tsx
+++ b/frontend/src/components/pki-syncs/forms/PkiSyncOptionsFields/PkiSyncOptionsFields.tsx
@@ -95,6 +95,48 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
        )}
      />

+      <Controller
+        control={control}
+        name="syncOptions.includeRootCa"
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message}>
+            <Switch
+              className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+              id="include-root-ca"
+              thumbClassName="bg-mineshaft-800"
+              onCheckedChange={onChange}
+              isChecked={value}
+            >
+              <p>
+                Include Root CA in Certificate Chain{" "}
+                <Tooltip
+                  className="max-w-md"
+                  content={
+                    <>
+                      <p>
+                        When enabled, the full certificate chain including the root CA will be
+                        synced to the destination.
+                      </p>
+                      <p className="mt-4">
+                        When disabled, the root CA will be excluded from the certificate chain
+                        during sync operations, reducing the size of the synced certificate chain.
+                      </p>
+                      <p className="mt-4">
+                        Most applications and services work correctly with intermediate certificates
+                        only, as they can validate the trust chain up to a root CA they already
+                        trust.
+                      </p>
+                    </>
+                  }
+                >
+                  <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                </Tooltip>
+              </p>
+            </Switch>
+          </FormControl>
+        )}
+      />
+
      {currentDestination === PkiSync.AwsCertificateManager && (
        <Controller
          control={control}
@@ -183,6 +225,97 @@ export const PkiSyncOptionsFields = ({ destination }: Props) => {
        />
      )}

+      {currentDestination === PkiSync.AwsSecretsManager && (
+        <Controller
+          control={control}
+          name="syncOptions.preserveSecretOnRenewal"
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Switch
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                id="preserve-secret-on-renewal"
+                thumbClassName="bg-mineshaft-800"
+                onCheckedChange={onChange}
+                isChecked={value}
+              >
+                <p>
+                  Preserve Secret on Renewal{" "}
+                  <Tooltip
+                    className="max-w-md"
+                    content={
+                      <>
+                        <p>
+                          <strong>Only applies to certificate renewals:</strong> When a certificate
+                          is renewed in Infisical, this option controls how the renewed certificate
+                          is handled in AWS Secrets Manager.
+                        </p>
+                        <p className="mt-4">
+                          When enabled, the renewed certificate will update the existing secret,
+                          preserving the same secret name and ARN. This allows consuming services to
+                          continue using the same secret reference without requiring updates.
+                        </p>
+                        <p className="mt-4">
+                          When disabled, the renewed certificate will be created as a new secret
+                          with a new name, and the old secret will be removed.
+                        </p>
+                      </>
+                    }
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                  </Tooltip>
+                </p>
+              </Switch>
+            </FormControl>
+          )}
+        />
+      )}
+
+      {currentDestination === PkiSync.Chef && (
+        <Controller
+          control={control}
+          name="syncOptions.preserveItemOnRenewal"
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Switch
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                id="preserve-item-on-renewal"
+                thumbClassName="bg-mineshaft-800"
+                onCheckedChange={onChange}
+                isChecked={value}
+              >
+                <p>
+                  Preserve Data Bag Item on Renewal{" "}
+                  <Tooltip
+                    className="max-w-md"
+                    content={
+                      <>
+                        <p>
+                          <strong>Only applies to certificate renewals:</strong> When a certificate
+                          is renewed in Infisical, this option controls how the renewed certificate
+                          is handled in Chef.
+                        </p>
+                        <p className="mt-4">
+                          When enabled, the renewed certificate will update the existing data bag
+                          item, preserving the same item name. This allows consuming services to
+                          continue using the same data bag item without requiring updates to Chef
+                          cookbooks or recipes.
+                        </p>
+                        <p className="mt-4">
+                          When disabled, the renewed certificate will be created as a new data bag
+                          item with a new name, and the old item will be removed.
+                        </p>
+                      </>
+                    }
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                  </Tooltip>
+                </p>
+              </Switch>
+            </FormControl>
+          )}
+        />
+      )}
+
      <Controller
        control={control}
        name="syncOptions.certificateNameSchema"
--- a/frontend/src/components/pki-syncs/forms/schemas/aws-certificate-manager-pki-sync-destination-schema.ts
+++ b/frontend/src/components/pki-syncs/forms/schemas/aws-certificate-manager-pki-sync-destination-schema.ts
@@ -7,6 +7,7 @@ import { BasePkiSyncSchema } from "./base-pki-sync-schema";
 const AwsCertificateManagerSyncOptionsSchema = z.object({
  canImportCertificates: z.boolean().default(false),
  canRemoveCertificates: z.boolean().default(false),
+  includeRootCa: z.boolean().default(false),
  preserveArn: z.boolean().default(true),
  certificateNameSchema: z
    .string()
--- a/frontend/src/components/pki-syncs/forms/schemas/aws-secrets-manager-pki-sync-destination-schema.ts
+++ b/frontend/src/components/pki-syncs/forms/schemas/aws-secrets-manager-pki-sync-destination-schema.ts
@@ -0,0 +1,98 @@
+import { z } from "zod";
+
+import { PkiSync } from "@app/hooks/api/pkiSyncs";
+
+import { BasePkiSyncSchema } from "./base-pki-sync-schema";
+
+const AwsSecretsManagerFieldMappingsSchema = z.object({
+  certificate: z.string().min(1, "Certificate field name is required").default("certificate"),
+  privateKey: z.string().min(1, "Private key field name is required").default("private_key"),
+  certificateChain: z
+    .string()
+    .min(1, "Certificate chain field name is required")
+    .default("certificate_chain"),
+  caCertificate: z
+    .string()
+    .min(1, "CA certificate field name is required")
+    .default("ca_certificate")
+});
+
+const AwsSecretsManagerSyncOptionsSchema = z.object({
+  canImportCertificates: z.boolean().default(false),
+  canRemoveCertificates: z.boolean().default(true),
+  includeRootCa: z.boolean().default(false),
+  preserveSecretOnRenewal: z.boolean().default(true),
+  updateExistingCertificates: z.boolean().default(true),
+  certificateNameSchema: z
+    .string()
+    .optional()
+    .refine(
+      (val) => {
+        if (!val) return true;
+
+        const allowedOptionalPlaceholders = [
+          "{{environment}}",
+          "{{profileId}}",
+          "{{commonName}}",
+          "{{friendlyName}}"
+        ];
+
+        const allowedPlaceholdersRegexPart = ["{{certificateId}}", ...allowedOptionalPlaceholders]
+          .map((p) => p.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"))
+          .join("|");
+
+        const allowedContentRegex = new RegExp(
+          `^([a-zA-Z0-9_\\-]|${allowedPlaceholdersRegexPart})*$`
+        );
+        const contentIsValid = allowedContentRegex.test(val);
+
+        if (val.trim()) {
+          const certificateIdRegex = /\{\{certificateId\}\}/;
+          const certificateIdIsPresent = certificateIdRegex.test(val);
+          return contentIsValid && certificateIdIsPresent;
+        }
+
+        return contentIsValid;
+      },
+      {
+        message:
+          "Certificate name schema must include exactly one {{certificateId}} placeholder. It can also include {{environment}}, {{profileId}}, {{commonName}}, or {{friendlyName}} placeholders. Only alphanumeric characters (a-z, A-Z, 0-9), hyphens (-), and underscores (_) are allowed besides the placeholders."
+      }
+    ),
+  fieldMappings: AwsSecretsManagerFieldMappingsSchema.optional().default({
+    certificate: "certificate",
+    privateKey: "private_key",
+    certificateChain: "certificate_chain",
+    caCertificate: "ca_certificate"
+  })
+});
+
+export const AwsSecretsManagerPkiSyncDestinationSchema = BasePkiSyncSchema(
+  AwsSecretsManagerSyncOptionsSchema
+).merge(
+  z.object({
+    destination: z.literal(PkiSync.AwsSecretsManager),
+    destinationConfig: z.object({
+      region: z.string().min(1, "AWS region is required")
+    })
+  })
+);
+
+export const UpdateAwsSecretsManagerPkiSyncDestinationSchema =
+  AwsSecretsManagerPkiSyncDestinationSchema.partial().merge(
+    z.object({
+      name: z
+        .string()
+        .trim()
+        .min(1, "Name is required")
+        .max(255, "Name must be less than 255 characters"),
+      destination: z.literal(PkiSync.AwsSecretsManager),
+      connection: z.object({
+        id: z.string().uuid("Invalid connection ID format"),
+        name: z
+          .string()
+          .min(1, "Connection name is required")
+          .max(255, "Connection name must be less than 255 characters")
+      })
+    })
+  );
--- a/frontend/src/components/pki-syncs/forms/schemas/azure-key-vault-pki-sync-destination-schema.ts
+++ b/frontend/src/components/pki-syncs/forms/schemas/azure-key-vault-pki-sync-destination-schema.ts
@@ -7,6 +7,7 @@ import { BasePkiSyncSchema } from "./base-pki-sync-schema";
 const AzureKeyVaultSyncOptionsSchema = z.object({
  canImportCertificates: z.boolean().default(false),
  canRemoveCertificates: z.boolean().default(true),
+  includeRootCa: z.boolean().default(false),
  enableVersioning: z.boolean().default(true),
  certificateNameSchema: z
    .string()
--- a/frontend/src/components/pki-syncs/forms/schemas/base-pki-sync-schema.ts
+++ b/frontend/src/components/pki-syncs/forms/schemas/base-pki-sync-schema.ts
@@ -6,6 +6,7 @@ export const BasePkiSyncSchema = <T extends AnyZodObject | undefined = undefined
  const baseSyncOptionsSchema = z.object({
    canImportCertificates: z.boolean().default(false),
    canRemoveCertificates: z.boolean().default(false),
+    includeRootCa: z.boolean().default(false),
    certificateNameSchema: z
      .string()
      .optional()
--- a/frontend/src/components/pki-syncs/forms/schemas/chef-pki-sync-destination-schema.ts
+++ b/frontend/src/components/pki-syncs/forms/schemas/chef-pki-sync-destination-schema.ts
@@ -0,0 +1,102 @@
+import { z } from "zod";
+
+import { PkiSync } from "@app/hooks/api/pkiSyncs";
+
+import { BasePkiSyncSchema } from "./base-pki-sync-schema";
+
+const ChefFieldMappingsSchema = z.object({
+  certificate: z.string().min(1, "Certificate field name is required").default("certificate"),
+  privateKey: z.string().min(1, "Private key field name is required").default("private_key"),
+  certificateChain: z
+    .string()
+    .min(1, "Certificate chain field name is required")
+    .default("certificate_chain"),
+  caCertificate: z
+    .string()
+    .min(1, "CA certificate field name is required")
+    .default("ca_certificate")
+});
+
+const ChefSyncOptionsSchema = z.object({
+  canImportCertificates: z.boolean().default(false),
+  canRemoveCertificates: z.boolean().default(true),
+  includeRootCa: z.boolean().default(false),
+  preserveItemOnRenewal: z.boolean().default(true),
+  updateExistingCertificates: z.boolean().default(true),
+  certificateNameSchema: z
+    .string()
+    .optional()
+    .refine(
+      (val) => {
+        if (!val) return true;
+
+        const allowedOptionalPlaceholders = [
+          "{{environment}}",
+          "{{profileId}}",
+          "{{commonName}}",
+          "{{friendlyName}}"
+        ];
+
+        const allowedPlaceholdersRegexPart = ["{{certificateId}}", ...allowedOptionalPlaceholders]
+          .map((p) => p.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"))
+          .join("|");
+
+        const allowedContentRegex = new RegExp(
+          `^([a-zA-Z0-9_\\-]|${allowedPlaceholdersRegexPart})*$`
+        );
+        const contentIsValid = allowedContentRegex.test(val);
+
+        if (val.trim()) {
+          const certificateIdRegex = /\{\{certificateId\}\}/;
+          const certificateIdIsPresent = certificateIdRegex.test(val);
+          return contentIsValid && certificateIdIsPresent;
+        }
+
+        return contentIsValid;
+      },
+      {
+        message:
+          "Certificate item name schema must include exactly one {{certificateId}} placeholder. It can also include {{environment}}, {{profileId}}, {{commonName}}, or {{friendlyName}} placeholders. Only alphanumeric characters (a-z, A-Z, 0-9), hyphens (-), and underscores (_) are allowed besides the placeholders."
+      }
+    ),
+  fieldMappings: ChefFieldMappingsSchema.optional().default({
+    certificate: "certificate",
+    privateKey: "private_key",
+    certificateChain: "certificate_chain",
+    caCertificate: "ca_certificate"
+  })
+});
+
+export const ChefPkiSyncDestinationSchema = BasePkiSyncSchema(ChefSyncOptionsSchema).merge(
+  z.object({
+    destination: z.literal(PkiSync.Chef),
+    destinationConfig: z.object({
+      dataBagName: z
+        .string()
+        .min(1, "Data bag name is required")
+        .max(255, "Data bag name must be less than 255 characters")
+        .regex(
+          /^[a-zA-Z0-9_-]+$/,
+          "Data bag name can only contain alphanumeric characters, underscores, and hyphens"
+        )
+    })
+  })
+);
+
+export const UpdateChefPkiSyncDestinationSchema = ChefPkiSyncDestinationSchema.partial().merge(
+  z.object({
+    name: z
+      .string()
+      .trim()
+      .min(1, "Name is required")
+      .max(255, "Name must be less than 255 characters"),
+    destination: z.literal(PkiSync.Chef),
+    connection: z.object({
+      id: z.string().uuid("Invalid connection ID format"),
+      name: z
+        .string()
+        .min(1, "Connection name is required")
+        .max(255, "Connection name must be less than 255 characters")
+    })
+  })
+);
--- a/frontend/src/components/pki-syncs/forms/schemas/pki-sync-schema.ts
+++ b/frontend/src/components/pki-syncs/forms/schemas/pki-sync-schema.ts
@@ -4,19 +4,31 @@ import {
  AwsCertificateManagerPkiSyncDestinationSchema,
  UpdateAwsCertificateManagerPkiSyncDestinationSchema
 } from "./aws-certificate-manager-pki-sync-destination-schema";
+import {
+  AwsSecretsManagerPkiSyncDestinationSchema,
+  UpdateAwsSecretsManagerPkiSyncDestinationSchema
+} from "./aws-secrets-manager-pki-sync-destination-schema";
 import {
  AzureKeyVaultPkiSyncDestinationSchema,
  UpdateAzureKeyVaultPkiSyncDestinationSchema
 } from "./azure-key-vault-pki-sync-destination-schema";
+import {
+  ChefPkiSyncDestinationSchema,
+  UpdateChefPkiSyncDestinationSchema
+} from "./chef-pki-sync-destination-schema";

 const PkiSyncUnionSchema = z.discriminatedUnion("destination", [
  AzureKeyVaultPkiSyncDestinationSchema,
-  AwsCertificateManagerPkiSyncDestinationSchema
+  AwsCertificateManagerPkiSyncDestinationSchema,
+  AwsSecretsManagerPkiSyncDestinationSchema,
+  ChefPkiSyncDestinationSchema
 ]);

 const UpdatePkiSyncUnionSchema = z.discriminatedUnion("destination", [
  UpdateAzureKeyVaultPkiSyncDestinationSchema,
-  UpdateAwsCertificateManagerPkiSyncDestinationSchema
+  UpdateAwsCertificateManagerPkiSyncDestinationSchema,
+  UpdateAwsSecretsManagerPkiSyncDestinationSchema,
+  UpdateChefPkiSyncDestinationSchema
 ]);

 export const PkiSyncFormSchema = PkiSyncUnionSchema;
--- a/frontend/src/components/pki-syncs/types/index.ts
+++ b/frontend/src/components/pki-syncs/types/index.ts
@@ -1,6 +1,7 @@
 export enum PkiSyncEditFields {
  Details = "details",
  Options = "options",
+  Mappings = "mappings",
  Source = "source",
  Destination = "destination"
 }
--- a/frontend/src/helpers/pkiSyncs.ts
+++ b/frontend/src/helpers/pkiSyncs.ts
@@ -15,10 +15,20 @@ export const PKI_SYNC_MAP: Record<
  [PkiSync.AwsCertificateManager]: {
    name: "AWS Certificate Manager",
    image: "Amazon Web Services.png"
+  },
+  [PkiSync.AwsSecretsManager]: {
+    name: "AWS Secrets Manager",
+    image: "Amazon Web Services.png"
+  },
+  [PkiSync.Chef]: {
+    name: "Chef",
+    image: "Chef.png"
  }
 };

 export const PKI_SYNC_CONNECTION_MAP: Record<PkiSync, AppConnection> = {
  [PkiSync.AzureKeyVault]: AppConnection.AzureKeyVault,
-  [PkiSync.AwsCertificateManager]: AppConnection.AWS
+  [PkiSync.AwsCertificateManager]: AppConnection.AWS,
+  [PkiSync.AwsSecretsManager]: AppConnection.AWS,
+  [PkiSync.Chef]: AppConnection.Chef
 };
--- a/frontend/src/hooks/api/groups/index.tsx
+++ b/frontend/src/hooks/api/groups/index.tsx
@@ -5,4 +5,4 @@ export {
  useRemoveUserFromGroup,
  useUpdateGroup
 } from "./mutations";
-export { useGetGroupById, useListGroupUsers } from "./queries";
+export { useGetGroupById, useListGroupProjects, useListGroupUsers } from "./queries";
--- a/frontend/src/hooks/api/groups/queries.tsx
+++ b/frontend/src/hooks/api/groups/queries.tsx
@@ -2,7 +2,14 @@ import { useQuery } from "@tanstack/react-query";

 import { apiRequest } from "@app/config/request";

-import { EFilterReturnedUsers, TGroup, TGroupUser } from "./types";
+import { OrderByDirection } from "../generic/types";
+import {
+  EFilterReturnedProjects,
+  EFilterReturnedUsers,
+  TGroup,
+  TGroupProject,
+  TGroupUser
+} from "./types";

 export const groupKeys = {
  getGroupById: (groupId: string) => [{ groupId }, "group"] as const,
@@ -41,6 +48,29 @@ export const groupKeys = {
      ...groupKeys.forGroupUserMemberships(slug),
      projectId,
      { offset, limit, search, filter }
+    ] as const,
+  allGroupProjects: () => ["group-projects"] as const,
+  forGroupProjects: (groupId: string) => [...groupKeys.allGroupProjects(), groupId] as const,
+  specificGroupProjects: ({
+    groupId,
+    offset,
+    limit,
+    search,
+    filter,
+    orderBy,
+    orderDirection
+  }: {
+    groupId: string;
+    offset: number;
+    limit: number;
+    search: string;
+    filter?: EFilterReturnedProjects;
+    orderBy?: string;
+    orderDirection?: OrderByDirection;
+  }) =>
+    [
+      ...groupKeys.forGroupProjects(groupId),
+      { offset, limit, search, filter, orderBy, orderDirection }
    ] as const
 };

@@ -148,3 +178,54 @@ export const useListProjectGroupUsers = ({
    }
  });
 };
+
+export const useListGroupProjects = ({
+  id,
+  offset = 0,
+  limit = 10,
+  search,
+  filter,
+  orderBy,
+  orderDirection
+}: {
+  id: string;
+  offset: number;
+  limit: number;
+  search: string;
+  orderBy?: string;
+  orderDirection?: OrderByDirection;
+  filter?: EFilterReturnedProjects;
+}) => {
+  return useQuery({
+    queryKey: groupKeys.specificGroupProjects({
+      groupId: id,
+      offset,
+      limit,
+      search,
+      filter,
+      orderBy,
+      orderDirection
+    }),
+    enabled: Boolean(id),
+    placeholderData: (previousData) => previousData,
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        offset: String(offset),
+        limit: String(limit),
+        search,
+        ...(filter && { filter }),
+        ...(orderBy && { orderBy }),
+        ...(orderDirection && { orderDirection })
+      });
+
+      const { data } = await apiRequest.get<{ projects: TGroupProject[]; totalCount: number }>(
+        `/api/v1/groups/${id}/projects`,
+        {
+          params
+        }
+      );
+
+      return data;
+    }
+  });
+};
--- a/frontend/src/hooks/api/groups/types.ts
+++ b/frontend/src/hooks/api/groups/types.ts
@@ -52,7 +52,21 @@ export type TGroupUser = {
  joinedGroupAt: Date;
 };

+export type TGroupProject = {
+  id: string;
+  name: string;
+  slug: string;
+  description: string;
+  type: string;
+  joinedGroupAt: Date;
+};
+
 export enum EFilterReturnedUsers {
  EXISTING_MEMBERS = "existingMembers",
  NON_MEMBERS = "nonMembers"
 }
+
+export enum EFilterReturnedProjects {
+  ASSIGNED_PROJECTS = "assignedProjects",
+  UNASSIGNED_PROJECTS = "unassignedProjects"
+}
--- a/frontend/src/hooks/api/pkiSyncs/enums.ts
+++ b/frontend/src/hooks/api/pkiSyncs/enums.ts
@@ -1,6 +1,8 @@
 export enum PkiSync {
  AzureKeyVault = "azure-key-vault",
-  AwsCertificateManager = "aws-certificate-manager"
+  AwsCertificateManager = "aws-certificate-manager",
+  AwsSecretsManager = "aws-secrets-manager",
+  Chef = "chef"
 }

 export enum PkiSyncStatus {
@@ -12,7 +14,7 @@ export enum PkiSyncStatus {

 export enum CertificateSyncStatus {
  Pending = "pending",
-  Syncing = "syncing",
+  Running = "running",
  Succeeded = "succeeded",
  Failed = "failed"
 }
--- a/frontend/src/hooks/api/pkiSyncs/types/aws-secrets-manager-sync.ts
+++ b/frontend/src/hooks/api/pkiSyncs/types/aws-secrets-manager-sync.ts
@@ -0,0 +1,29 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import { PkiSync } from "../enums";
+import { TRootPkiSync } from "./common";
+
+export type TAwsSecretsManagerFieldMappings = {
+  certificate: string;
+  privateKey: string;
+  certificateChain: string;
+  caCertificate: string;
+};
+
+export type TAwsSecretsManagerPkiSync = TRootPkiSync & {
+  destination: PkiSync.AwsSecretsManager;
+  destinationConfig: {
+    region: string;
+    keyId?: string;
+  };
+  connection: {
+    app: AppConnection.AWS;
+    name: string;
+    id: string;
+  };
+  syncOptions: TRootPkiSync["syncOptions"] & {
+    fieldMappings?: TAwsSecretsManagerFieldMappings;
+    preserveSecretOnRenewal?: boolean;
+    updateExistingCertificates?: boolean;
+  };
+};
--- a/frontend/src/hooks/api/pkiSyncs/types/chef-sync.ts
+++ b/frontend/src/hooks/api/pkiSyncs/types/chef-sync.ts
@@ -0,0 +1,16 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import { PkiSync } from "../enums";
+import { TRootPkiSync } from "./common";
+
+export type TChefPkiSync = TRootPkiSync & {
+  destination: PkiSync.Chef;
+  destinationConfig: {
+    dataBagName: string;
+  };
+  connection: {
+    app: AppConnection.Chef;
+    name: string;
+    id: string;
+  };
+};
--- a/frontend/src/hooks/api/pkiSyncs/types/common.ts
+++ b/frontend/src/hooks/api/pkiSyncs/types/common.ts
@@ -2,11 +2,23 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";

 import { CertificateSyncStatus, PkiSyncStatus } from "../enums";

+export type TChefFieldMappings = {
+  certificate: string;
+  privateKey: string;
+  certificateChain: string;
+  caCertificate: string;
+};
+
 export type RootPkiSyncOptions = {
  canImportCertificates: boolean;
  canRemoveCertificates: boolean;
  certificateNamePrefix?: string;
  certificateNameSchema?: string;
+  preserveArn?: boolean;
+  enableVersioning?: boolean;
+  preserveItemOnRenewal?: boolean;
+  updateExistingCertificates?: boolean;
+  fieldMappings?: TChefFieldMappings;
 };

 export type TRootPkiSync = {
--- a/frontend/src/hooks/api/pkiSyncs/types/index.ts
+++ b/frontend/src/hooks/api/pkiSyncs/types/index.ts
@@ -1,7 +1,9 @@
 import { PkiSync } from "@app/hooks/api/pkiSyncs";

 import { TAwsCertificateManagerPkiSync } from "./aws-certificate-manager-sync";
+import { TAwsSecretsManagerPkiSync } from "./aws-secrets-manager-sync";
 import { TAzureKeyVaultPkiSync } from "./azure-key-vault-sync";
+import { TChefPkiSync } from "./chef-sync";

 export type TPkiSyncOption = {
  name: string;
@@ -16,7 +18,11 @@ export type TPkiSyncOption = {
  minCertificateNameLength?: number;
 };

-export type TPkiSync = TAzureKeyVaultPkiSync | TAwsCertificateManagerPkiSync;
+export type TPkiSync =
+  | TAzureKeyVaultPkiSync
+  | TAwsCertificateManagerPkiSync
+  | TAwsSecretsManagerPkiSync
+  | TChefPkiSync;

 export type TListPkiSyncs = { pkiSyncs: TPkiSync[] };

@@ -31,6 +37,17 @@ type TCreatePkiSyncDTOBase = {
    canRemoveCertificates: boolean;
    certificateNamePrefix?: string;
    certificateNameSchema?: string;
+    preserveArn?: boolean;
+    enableVersioning?: boolean;
+    preserveItemOnRenewal?: boolean;
+    updateExistingCertificates?: boolean;
+    preserveSecretOnRenewal?: boolean;
+    fieldMappings?: {
+      certificate: string;
+      privateKey: string;
+      certificateChain: string;
+      caCertificate: string;
+    };
  };
  isAutoSyncEnabled: boolean;
  subscriberId?: string | null;
@@ -43,6 +60,7 @@ export type TCreatePkiSyncDTO = TCreatePkiSyncDTOBase & {
  destinationConfig: {
    vaultBaseUrl?: string;
    region?: string;
+    dataBagName?: string;
  };
 };

@@ -76,5 +94,7 @@ export type TTriggerPkiSyncRemoveCertificatesDTO = {
 };

 export * from "./aws-certificate-manager-sync";
+export * from "./aws-secrets-manager-sync";
 export * from "./azure-key-vault-sync";
+export * from "./chef-sync";
 export * from "./common";
--- a/frontend/src/hooks/api/projects/mutations.tsx
+++ b/frontend/src/hooks/api/projects/mutations.tsx
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";

 import { apiRequest } from "@app/config/request";

+import { groupKeys } from "../groups/queries";
 import { userKeys } from "../users/query-keys";
 import { projectKeys } from "./query-keys";
 import {
@@ -30,10 +31,11 @@ export const useAddGroupToWorkspace = () => {

      return groupMembership;
    },
-    onSuccess: (_, { projectId }) => {
+    onSuccess: (_, { projectId, groupId }) => {
      queryClient.invalidateQueries({
        queryKey: projectKeys.getProjectGroupMemberships(projectId)
      });
+      queryClient.invalidateQueries({ queryKey: groupKeys.forGroupProjects(groupId) });
    }
  });
 };
@@ -77,11 +79,13 @@ export const useDeleteGroupFromWorkspace = () => {
      } = await apiRequest.delete(`/api/v1/projects/${projectId}/groups/${groupId}`);
      return groupMembership;
    },
-    onSuccess: (_, { projectId, username }) => {
+    onSuccess: (_, { projectId, username, groupId }) => {
      queryClient.invalidateQueries({
        queryKey: projectKeys.getProjectGroupMemberships(projectId)
      });

+      queryClient.invalidateQueries({ queryKey: groupKeys.forGroupProjects(groupId) });
+
      if (username) {
        queryClient.invalidateQueries({ queryKey: userKeys.listUserGroupMemberships(username) });
      }
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateIssuanceModal.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateIssuanceModal.tsx
@@ -354,6 +354,7 @@ export const CertificateIssuanceModal = ({ popUp, handlePopUpToggle, profileId }
            <div>
              <h4 className="text-sm font-medium text-mineshaft-300">Certificate Details</h4>
              <p className="text-sm text-mineshaft-400">Serial Number: {cert.serialNumber}</p>
+              <p className="text-sm text-mineshaft-400">Certificate Id: {cert.id}</p>
              <p className="text-sm text-mineshaft-400">Common Name: {cert.commonName}</p>
              <p className="text-sm text-mineshaft-400">Status: {cert.status}</p>
            </div>
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/PkiSyncDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/PkiSyncDetailsByIDPage.tsx
@@ -21,6 +21,7 @@ import {
  PkiSyncCertificatesSection,
  PkiSyncDestinationSection,
  PkiSyncDetailsSection,
+  PkiSyncFieldMappingsSection,
  PkiSyncOptionsSection
 } from "./components";

@@ -63,6 +64,7 @@ const PageContent = () => {

  const handleEditDetails = () => handlePopUpOpen("editSync", PkiSyncEditFields.Details);
  const handleEditOptions = () => handlePopUpOpen("editSync", PkiSyncEditFields.Options);
+  const handleEditMappings = () => handlePopUpOpen("editSync", PkiSyncEditFields.Mappings);
  const handleEditDestination = () => handlePopUpOpen("editSync", PkiSyncEditFields.Destination);

  return (
@@ -104,6 +106,7 @@ const PageContent = () => {
            <div className="mr-4 flex w-72 flex-col gap-4">
              <PkiSyncDetailsSection pkiSync={pkiSync} onEditDetails={handleEditDetails} />
              <PkiSyncOptionsSection pkiSync={pkiSync} onEditOptions={handleEditOptions} />
+              <PkiSyncFieldMappingsSection pkiSync={pkiSync} onEditMappings={handleEditMappings} />
            </div>
            <div className="flex flex-1 flex-col gap-4">
              <PkiSyncDestinationSection
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncCertificatesSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncCertificatesSection.tsx
@@ -42,14 +42,14 @@ type Props = {
 const getSyncStatusVariant = (status?: CertificateSyncStatus | null) => {
  if (status === CertificateSyncStatus.Succeeded) return "success";
  if (status === CertificateSyncStatus.Failed) return "danger";
-  if (status === CertificateSyncStatus.Syncing) return "neutral";
+  if (status === CertificateSyncStatus.Running) return "neutral";
  return "project";
 };

 const getSyncStatusText = (status?: CertificateSyncStatus | null) => {
  if (status === CertificateSyncStatus.Succeeded) return "Synced";
  if (status === CertificateSyncStatus.Failed) return "Failed";
-  if (status === CertificateSyncStatus.Syncing) return "Syncing";
+  if (status === CertificateSyncStatus.Running) return "Syncing";
  if (status === CertificateSyncStatus.Pending) return "Pending";
  return "Unknown";
 };
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection.tsx
@@ -13,7 +13,9 @@ import { PkiSync, TPkiSync } from "@app/hooks/api/pkiSyncs";

 import {
  AwsCertificateManagerPkiSyncDestinationSection,
-  AzureKeyVaultPkiSyncDestinationSection
+  AwsSecretsManagerPkiSyncDestinationSection,
+  AzureKeyVaultPkiSyncDestinationSection,
+  ChefPkiSyncDestinationSection
 } from "./PkiSyncDestinationSection/index";

 const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
@@ -38,9 +40,15 @@ export const PkiSyncDestinationSection = ({ pkiSync, onEditDestination }: Props)
    case PkiSync.AwsCertificateManager:
      DestinationComponents = <AwsCertificateManagerPkiSyncDestinationSection pkiSync={pkiSync} />;
      break;
+    case PkiSync.AwsSecretsManager:
+      DestinationComponents = <AwsSecretsManagerPkiSyncDestinationSection pkiSync={pkiSync} />;
+      break;
    case PkiSync.AzureKeyVault:
      DestinationComponents = <AzureKeyVaultPkiSyncDestinationSection pkiSync={pkiSync} />;
      break;
+    case PkiSync.Chef:
+      DestinationComponents = <ChefPkiSyncDestinationSection pkiSync={pkiSync} />;
+      break;
    default:
      // For future destinations, return null (no additional fields to show)
      DestinationComponents = null;
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/AwsSecretsManagerPkiSyncDestinationSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/AwsSecretsManagerPkiSyncDestinationSection.tsx
@@ -0,0 +1,28 @@
+import { TAwsSecretsManagerPkiSync, TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div className="mb-4">
+    <p className="text-sm font-medium text-mineshaft-300">{label}</p>
+    <div className="text-sm text-mineshaft-300">{children}</div>
+  </div>
+);
+
+type Props = {
+  pkiSync: TPkiSync;
+};
+
+export const AwsSecretsManagerPkiSyncDestinationSection = ({ pkiSync }: Props) => {
+  const awsSecretsManagerPkiSync = pkiSync as TAwsSecretsManagerPkiSync;
+  const { destinationConfig } = awsSecretsManagerPkiSync;
+
+  return (
+    <>
+      <GenericFieldLabel label="AWS Region">
+        {destinationConfig.region || "us-east-1"}
+      </GenericFieldLabel>
+      {destinationConfig.keyId && (
+        <GenericFieldLabel label="KMS Key">{destinationConfig.keyId}</GenericFieldLabel>
+      )}
+    </>
+  );
+};
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/ChefPkiSyncDestinationSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/ChefPkiSyncDestinationSection.tsx
@@ -0,0 +1,25 @@
+import { TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+const GenericFieldLabel = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div className="mb-4">
+    <p className="text-sm font-medium text-mineshaft-300">{label}</p>
+    <div className="text-sm text-mineshaft-300">{children}</div>
+  </div>
+);
+
+type Props = {
+  pkiSync: TPkiSync;
+};
+
+export const ChefPkiSyncDestinationSection = ({ pkiSync }: Props) => {
+  const dataBagName =
+    pkiSync.destinationConfig && "dataBagName" in pkiSync.destinationConfig
+      ? pkiSync.destinationConfig.dataBagName
+      : undefined;
+
+  return (
+    <GenericFieldLabel label="Chef Data Bag Name">
+      {dataBagName || "Not specified"}
+    </GenericFieldLabel>
+  );
+};
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/index.ts
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncDestinationSection/index.ts
@@ -1,2 +1,4 @@
 export { AwsCertificateManagerPkiSyncDestinationSection } from "./AwsCertificateManagerPkiSyncDestinationSection";
+export { AwsSecretsManagerPkiSyncDestinationSection } from "./AwsSecretsManagerPkiSyncDestinationSection";
 export { AzureKeyVaultPkiSyncDestinationSection } from "./AzureKeyVaultPkiSyncDestinationSection";
+export { ChefPkiSyncDestinationSection } from "./ChefPkiSyncDestinationSection";
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncFieldMappingsSection.tsx
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/PkiSyncFieldMappingsSection.tsx
@@ -0,0 +1,92 @@
+import { subject } from "@casl/ability";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { IconButton } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionPkiSyncActions } from "@app/context/ProjectPermissionContext/types";
+import { PkiSync, TPkiSync } from "@app/hooks/api/pkiSyncs";
+
+const GenericFieldLabel = ({
+  label,
+  children,
+  labelClassName
+}: {
+  label: string;
+  children: React.ReactNode;
+  labelClassName?: string;
+}) => (
+  <div className="mb-3">
+    <p className={`mb-1 text-sm font-medium text-mineshaft-300 ${labelClassName || ""}`}>{label}</p>
+    <div className="text-sm text-mineshaft-400">{children}</div>
+  </div>
+);
+
+type Props = {
+  pkiSync: TPkiSync;
+  onEditMappings: VoidFunction;
+};
+
+export const PkiSyncFieldMappingsSection = ({ pkiSync, onEditMappings }: Props) => {
+  if (pkiSync.destination !== PkiSync.Chef && pkiSync.destination !== PkiSync.AwsSecretsManager) {
+    return null;
+  }
+
+  const fieldMappings = pkiSync.syncOptions?.fieldMappings;
+
+  const permissionSubject = subject(ProjectPermissionSub.PkiSyncs, {
+    subscriberId: pkiSync.subscriberId || ""
+  });
+
+  return (
+    <div>
+      <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
+        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
+          <h3 className="text-lg font-medium text-mineshaft-100">Field Mappings</h3>
+          <ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
+            {(isAllowed) => (
+              <IconButton
+                variant="plain"
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+                ariaLabel="Edit field mappings"
+                onClick={onEditMappings}
+              >
+                <FontAwesomeIcon icon={faEdit} />
+              </IconButton>
+            )}
+          </ProjectPermissionCan>
+        </div>
+        <div className="pt-1">
+          <div className="space-y-3">
+            <GenericFieldLabel label="Certificate Field">
+              <Badge variant="neutral" className="max-w-full truncate">
+                {fieldMappings?.certificate || "certificate"}
+              </Badge>
+            </GenericFieldLabel>
+
+            <GenericFieldLabel label="Private Key Field">
+              <Badge variant="neutral" className="max-w-full truncate">
+                {fieldMappings?.privateKey || "private_key"}
+              </Badge>
+            </GenericFieldLabel>
+
+            <GenericFieldLabel label="Certificate Chain Field">
+              <Badge variant="neutral" className="max-w-full truncate">
+                {fieldMappings?.certificateChain || "certificate_chain"}
+              </Badge>
+            </GenericFieldLabel>
+
+            <GenericFieldLabel label="CA Certificate Field">
+              <Badge variant="neutral" className="max-w-full truncate">
+                {fieldMappings?.caCertificate || "ca_certificate"}
+              </Badge>
+            </GenericFieldLabel>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/index.ts
+++ b/frontend/src/pages/cert-manager/PkiSyncDetailsByIDPage/components/index.ts
@@ -3,5 +3,6 @@ export { PkiSyncAuditLogsSection } from "./PkiSyncAuditLogsSection";
 export { PkiSyncCertificatesSection } from "./PkiSyncCertificatesSection";
 export { PkiSyncDestinationSection } from "./PkiSyncDestinationSection";
 export { PkiSyncDetailsSection } from "./PkiSyncDetailsSection";
+export { PkiSyncFieldMappingsSection } from "./PkiSyncFieldMappingsSection";
 export { PkiSyncOptionsSection } from "./PkiSyncOptionsSection";
 export { PkiSyncSourceSection } from "./PkiSyncSourceSection";
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
@@ -27,6 +27,7 @@ import { usePopUp } from "@app/hooks/usePopUp";
 import { GroupCreateUpdateModal } from "./components/GroupCreateUpdateModal";
 import { GroupDetailsSection } from "./components/GroupDetailsSection";
 import { GroupMembersSection } from "./components/GroupMembersSection";
+import { GroupProjectsSection } from "./components/GroupProjectsSection";

 export enum TabSections {
  Member = "members",
@@ -156,7 +157,10 @@ const Page = () => {
            <div className="w-full md:w-96">
              <GroupDetailsSection groupId={groupId} handlePopUpOpen={handlePopUpOpen} />
            </div>
-            <GroupMembersSection groupId={groupId} groupSlug={data.group.slug} />
+            <div className="flex grow flex-col gap-4">
+              <GroupMembersSection groupId={groupId} groupSlug={data.group.slug} />
+              <GroupProjectsSection groupId={groupId} groupSlug={data.group.slug} />
+            </div>
          </div>
        </div>
      )}
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/AddGroupProjectModal.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/AddGroupProjectModal.tsx
@@ -0,0 +1,181 @@
+import { useState } from "react";
+import { faFolder, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  EmptyState,
+  Input,
+  Modal,
+  ModalContent,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
+import { getProjectTitle } from "@app/helpers/project";
+import { useDebounce, useResetPageHelper } from "@app/hooks";
+import {
+  useAddGroupToWorkspace as useAddProjectToGroup,
+  useListGroupProjects
+} from "@app/hooks/api";
+import { EFilterReturnedProjects } from "@app/hooks/api/groups/types";
+import { ProjectType } from "@app/hooks/api/projects/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  popUp: UsePopUpState<["addGroupProjects"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["addGroupProjects"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const AddGroupProjectModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+  const [searchProjectFilter, setSearchProjectFilter] = useState("");
+  const [debouncedSearch] = useDebounce(searchProjectFilter);
+
+  const popUpData = popUp?.addGroupProjects?.data as {
+    groupId: string;
+    slug: string;
+  };
+
+  const offset = (page - 1) * perPage;
+
+  const { data, isPending } = useListGroupProjects({
+    id: popUpData?.groupId,
+    offset,
+    limit: perPage,
+    search: debouncedSearch,
+    filter: EFilterReturnedProjects.UNASSIGNED_PROJECTS
+  });
+
+  const { totalCount = 0 } = data ?? {};
+
+  useResetPageHelper({
+    totalCount,
+    offset,
+    setPage
+  });
+
+  const { mutateAsync: addProjectToGroupMutateAsync, isPending: isAdding } = useAddProjectToGroup();
+
+  const handleAddProject = async (projectId: string, projectName: string) => {
+    if (!popUpData?.groupId) {
+      createNotification({
+        text: "Some data is missing, please refresh the page and try again",
+        type: "error"
+      });
+      return;
+    }
+
+    await addProjectToGroupMutateAsync({
+      groupId: popUpData.groupId,
+      projectId
+    });
+
+    createNotification({
+      text: `Successfully assigned the group to project ${projectName}`,
+      type: "success"
+    });
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.addGroupProjects?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addGroupProjects", isOpen);
+      }}
+    >
+      <ModalContent title="Add Projects">
+        <Input
+          value={searchProjectFilter}
+          onChange={(e) => setSearchProjectFilter(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search projects..."
+        />
+        <TableContainer className="mt-4">
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Project</Th>
+                <Th>Type</Th>
+                <Th />
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={3} innerKey="group-projects" />}
+              {!isPending &&
+                data?.projects?.map((project) => {
+                  return (
+                    <Tr className="items-center" key={`group-project-${project.id}`}>
+                      <Td className="w-1/3">
+                        <p>{project.name}</p>
+                        {project.description && (
+                          <p className="text-sm text-mineshaft-400">{project.description}</p>
+                        )}
+                      </Td>
+                      <Td>
+                        <p>{getProjectTitle(project.type as ProjectType)}</p>
+                      </Td>
+                      <Td>
+                        <OrgPermissionCan
+                          I={OrgPermissionGroupActions.Edit}
+                          a={OrgPermissionSubjects.Groups}
+                        >
+                          {(isAllowed) => {
+                            return (
+                              <Button
+                                className="self-center"
+                                isLoading={isAdding}
+                                isDisabled={!isAllowed}
+                                colorSchema="primary"
+                                variant="outline_bg"
+                                type="submit"
+                                onClick={() => handleAddProject(project.id, project.name)}
+                              >
+                                Assign
+                              </Button>
+                            );
+                          }}
+                        </OrgPermissionCan>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {!isPending && totalCount > 0 && (
+            <Pagination
+              count={totalCount}
+              page={page}
+              perPage={perPage}
+              onChangePage={(newPage) => setPage(newPage)}
+              onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+            />
+          )}
+          {!isPending && !data?.projects?.length && (
+            <EmptyState
+              title={
+                debouncedSearch
+                  ? "No projects match search"
+                  : "This group is already a part of all projects"
+              }
+              icon={faFolder}
+            />
+          )}
+        </TableContainer>
+      </ModalContent>
+    </Modal>
+  );
+};
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx
@@ -46,7 +46,7 @@ export const GroupMembersSection = ({ groupId, groupSlug }: 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-medium text-mineshaft-100">Group Members</h3>
+        <h3 className="text-lg font-medium text-mineshaft-100">Members</h3>
        <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
          {(isAllowed) => (
            <Tooltip
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupProjectsSection/GroupProjectRow.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupProjectsSection/GroupProjectRow.tsx
@@ -0,0 +1,81 @@
+import { faEllipsisV, faFolderMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton,
+  Td,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
+import { getProjectTitle } from "@app/helpers/project";
+import { TGroupProject } from "@app/hooks/api/groups/types";
+import { ProjectType } from "@app/hooks/api/projects/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  project: TGroupProject;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["removeProjectFromGroup"]>,
+    data?: object
+  ) => void;
+};
+
+export const GroupProjectRow = ({ project, handlePopUpOpen }: Props) => {
+  return (
+    <Tr className="items-center" key={`group-project-${project.id}`}>
+      <Td>
+        <p>{project.name}</p>
+      </Td>
+      <Td>
+        <p>{getProjectTitle(project.type as ProjectType)}</p>
+      </Td>
+      <Td>
+        <Tooltip content={new Date(project.joinedGroupAt).toLocaleString()}>
+          <p>{new Date(project.joinedGroupAt).toLocaleDateString()}</p>
+        </Tooltip>
+      </Td>
+      <Td>
+        <Tooltip className="max-w-sm text-center" content="Options">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <IconButton
+                ariaLabel="Options"
+                colorSchema="secondary"
+                className="w-6"
+                variant="plain"
+              >
+                <FontAwesomeIcon icon={faEllipsisV} />
+              </IconButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent sideOffset={2} align="end">
+              <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
+                {(isAllowed) => {
+                  return (
+                    <DropdownMenuItem
+                      icon={<FontAwesomeIcon icon={faFolderMinus} />}
+                      onClick={() =>
+                        handlePopUpOpen("removeProjectFromGroup", {
+                          projectId: project.id,
+                          projectName: project.name
+                        })
+                      }
+                      isDisabled={!isAllowed}
+                    >
+                      Remove group from project
+                    </DropdownMenuItem>
+                  );
+                }}
+              </OrgPermissionCan>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Tooltip>
+      </Td>
+    </Tr>
+  );
+};
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupProjectsSection/GroupProjectsSection.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupProjectsSection/GroupProjectsSection.tsx
@@ -0,0 +1,90 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
+import { useDeleteGroupFromWorkspace as useRemoveProjectFromGroup } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { AddGroupProjectModal } from "../AddGroupProjectModal";
+import { GroupProjectsTable } from "./GroupProjectsTable";
+
+type Props = {
+  groupId: string;
+  groupSlug: string;
+};
+
+export const GroupProjectsSection = ({ groupId, groupSlug }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "addGroupProjects",
+    "removeProjectFromGroup"
+  ] as const);
+
+  const { mutateAsync: removeProjectFromGroupMutateAsync } = useRemoveProjectFromGroup();
+
+  const handleRemoveProjectFromGroup = async (projectId: string, projectName: string) => {
+    await removeProjectFromGroupMutateAsync({
+      groupId,
+      projectId
+    });
+
+    createNotification({
+      text: `Successfully removed the group from project ${projectName}`,
+      type: "success"
+    });
+
+    handlePopUpToggle("removeProjectFromGroup", false);
+  };
+
+  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-medium text-mineshaft-100">Projects</h3>
+        <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
+          {(isAllowed) => (
+            <IconButton
+              isDisabled={!isAllowed}
+              ariaLabel="add project"
+              variant="plain"
+              className="group relative"
+              onClick={() => {
+                handlePopUpOpen("addGroupProjects", {
+                  groupId,
+                  slug: groupSlug
+                });
+              }}
+            >
+              <FontAwesomeIcon icon={faPlus} />
+            </IconButton>
+          )}
+        </OrgPermissionCan>
+      </div>
+      <div className="py-4">
+        <GroupProjectsTable
+          groupId={groupId}
+          groupSlug={groupSlug}
+          handlePopUpOpen={handlePopUpOpen}
+        />
+      </div>
+      <AddGroupProjectModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.removeProjectFromGroup.isOpen}
+        title={`Are you sure you want to remove the group from ${
+          (popUp?.removeProjectFromGroup?.data as { projectName: string })?.projectName || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("removeProjectFromGroup", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => {
+          const projectData = popUp?.removeProjectFromGroup?.data as {
+            projectId: string;
+            projectName: string;
+          };
+
+          return handleRemoveProjectFromGroup(projectData.projectId, projectData.projectName);
+        }}
+      />
+    </div>
+  );
+};
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupProjectsSection/GroupProjectsTable.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupProjectsSection/GroupProjectsTable.tsx
@@ -0,0 +1,183 @@
+import {
+  faArrowDown,
+  faArrowUp,
+  faFolder,
+  faMagnifyingGlass,
+  faSearch
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useListGroupProjects } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { EFilterReturnedProjects } from "@app/hooks/api/groups/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { GroupProjectRow } from "./GroupProjectRow";
+
+type Props = {
+  groupId: string;
+  groupSlug: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["removeProjectFromGroup", "addGroupProjects"]>,
+    data?: object
+  ) => void;
+};
+
+enum GroupProjectsOrderBy {
+  Name = "name"
+}
+
+export const GroupProjectsTable = ({ groupId, groupSlug, handlePopUpOpen }: Props) => {
+  const {
+    search,
+    debouncedSearch,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    orderBy,
+    toggleOrderDirection
+  } = usePagination(GroupProjectsOrderBy.Name, {
+    initPerPage: getUserTablePreference("groupProjectsTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("groupProjectsTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const { data: groupMemberships, isPending } = useListGroupProjects({
+    id: groupId,
+    offset,
+    limit: perPage,
+    search: debouncedSearch,
+    orderBy,
+    orderDirection,
+    filter: EFilterReturnedProjects.ASSIGNED_PROJECTS
+  });
+
+  const totalCount = groupMemberships?.totalCount ?? 0;
+  const isEmpty = !isPending && totalCount === 0;
+  const projects = groupMemberships?.projects ?? [];
+
+  useResetPageHelper({
+    totalCount,
+    offset,
+    setPage
+  });
+
+  return (
+    <div>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search projects..."
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className="ml-2"
+                    ariaLabel="sort"
+                    onClick={toggleOrderDirection}
+                  >
+                    <FontAwesomeIcon
+                      icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
+                    />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>Type</Th>
+              <Th>Added On</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={4} innerKey="group-project-memberships" />}
+            {!isPending &&
+              projects.map((project) => {
+                return (
+                  <GroupProjectRow
+                    key={`group-project-${project.id}`}
+                    project={project}
+                    handlePopUpOpen={handlePopUpOpen}
+                  />
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isEmpty && (
+          <Pagination
+            count={totalCount}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={handlePerPageChange}
+          />
+        )}
+        {isEmpty && (
+          <EmptyState
+            title={
+              debouncedSearch
+                ? "No projects match this search..."
+                : "This group is not a part of any projects yet"
+            }
+            icon={debouncedSearch ? faSearch : faFolder}
+          />
+        )}
+        {isEmpty && (
+          <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
+            {(isAllowed) => (
+              <div className="mb-4 flex items-center justify-center">
+                <Button
+                  variant="solid"
+                  colorSchema="secondary"
+                  isDisabled={!isAllowed}
+                  onClick={() => {
+                    handlePopUpOpen("addGroupProjects", {
+                      groupId,
+                      slug: groupSlug
+                    });
+                  }}
+                >
+                  Add projects
+                </Button>
+              </div>
+            )}
+          </OrgPermissionCan>
+        )}
+      </TableContainer>
+    </div>
+  );
+};
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupProjectsSection/index.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupProjectsSection/index.tsx
@@ -0,0 +1 @@
+export { GroupProjectsSection } from "./GroupProjectsSection";
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/index.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/index.tsx
@@ -1 +1,2 @@
 export { GroupDetailsSection } from "./GroupDetailsSection";
+export { GroupProjectsSection } from "./GroupProjectsSection";
--- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliDeploymentMethod.tsx
@@ -183,7 +183,7 @@ export const GatewayCliDeploymentMethod = () => {
  };

  const command = useMemo(() => {
-    const relayPart = relay?.id !== "_auto" ? ` --relay=${relay?.name || ""}` : "";
+    const relayPart = relay?.id !== "_auto" ? ` --target-relay-name=${relay?.name || ""}` : "";
    return `sudo infisical gateway start --name=${name}${relayPart} --domain=${siteURL} --token=${identityToken}`;
  }, [name, relay, identityToken, siteURL]);

--- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliSystemdDeploymentMethod.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/GatewayCliSystemdDeploymentMethod.tsx
@@ -183,7 +183,7 @@ export const GatewayCliSystemdDeploymentMethod = () => {
  };

  const installCommand = useMemo(() => {
-    const relayPart = relay?.id !== "_auto" ? ` --relay=${relay?.name || ""}` : "";
+    const relayPart = relay?.id !== "_auto" ? ` --target-relay-name=${relay?.name || ""}` : "";
    return `sudo infisical gateway systemd install --name=${name}${relayPart} --domain=${siteURL} --token=${identityToken}`;
  }, [name, relay, identityToken, siteURL]);
				`@@ -0,0 +1 @@`
				`export { GroupProjectsSection } from "./GroupProjectsSection";`