Merge branch 'main' into shubham/eng-984-make-secret-sharing-public-even-for-non-infisical-users

frontend/Dockerfile

@@ -2,6 +2,7 @@ ARG POSTHOG_HOST=https://app.posthog.com
 ARG POSTHOG_API_KEY=posthog-api-key
 ARG INTERCOM_ID=intercom-id
 ARG NEXT_INFISICAL_PLATFORM_VERSION=next-infisical-platform-version
+ARG CAPTCHA_SITE_KEY=captcha-site-key
 
 FROM node:16-alpine AS deps
 # Install dependencies only when needed. Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
@@ -31,6 +32,8 @@ ARG POSTHOG_API_KEY
 ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
 ARG INTERCOM_ID
 ENV NEXT_PUBLIC_INTERCOM_ID $INTERCOM_ID
+ARG CAPTCHA_SITE_KEY
+ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY $CAPTCHA_SITE_KEY
 
 # Build
 RUN npm run build
@@ -57,7 +60,9 @@ ENV NEXT_PUBLIC_SAML_ORG_SLUG=$SAML_ORG_SLUG \
     BAKED_NEXT_PUBLIC_SAML_ORG_SLUG=$SAML_ORG_SLUG
 ARG NEXT_INFISICAL_PLATFORM_VERSION
 ENV NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION=$NEXT_INFISICAL_PLATFORM_VERSION 
-
+ARG CAPTCHA_SITE_KEY
+ENV NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY \
+    BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY=$CAPTCHA_SITE_KEY
 COPY --chown=nextjs:nodejs --chmod=555 scripts ./scripts
 COPY --from=builder /app/public ./public
 RUN chown nextjs:nodejs ./public/data

frontend/next.config.js

@@ -1,13 +1,12 @@
-
 const path = require("path");
 
 const ContentSecurityPolicy = `
 	default-src 'self';
-	script-src 'self' https://app.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com 'unsafe-inline' 'unsafe-eval';
-	style-src 'self' https://rsms.me 'unsafe-inline';
+	script-src 'self' https://app.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com https://hcaptcha.com https://*.hcaptcha.com 'unsafe-inline' 'unsafe-eval';
+	style-src 'self' https://rsms.me 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com;
 	child-src https://api.stripe.com;
-	frame-src https://js.stripe.com/ https://api.stripe.com https://www.youtube.com/;
-	connect-src 'self' wss://nexus-websocket-a.intercom.io https://api-iam.intercom.io https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://api.stripe.com https://api.pwnedpasswords.com http://127.0.0.1:*;
+	frame-src https://js.stripe.com/ https://api.stripe.com https://www.youtube.com/ https://hcaptcha.com https://*.hcaptcha.com;
+	connect-src 'self' wss://nexus-websocket-a.intercom.io https://api-iam.intercom.io https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://api.stripe.com https://api.pwnedpasswords.com http://127.0.0.1:* https://hcaptcha.com https://*.hcaptcha.com;
 	img-src 'self' https://static.intercomassets.com https://js.intercomcdn.com https://downloads.intercomcdn.com https://*.stripe.com https://i.ytimg.com/ data:;
 	media-src https://js.intercomcdn.com;
 	font-src 'self' https://fonts.intercomcdn.com/ https://maxcdn.bootstrapcdn.com https://rsms.me https://fonts.gstatic.com;  

frontend/package-lock.json

@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
       "dependencies": {
         "@casl/ability": "^6.5.0",
         "@casl/react": "^3.1.0",
@@ -19,6 +18,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@hcaptcha/react-hcaptcha": "^1.10.1",
         "@headlessui/react": "^1.7.7",
         "@hookform/resolvers": "^2.9.10",
         "@octokit/rest": "^19.0.7",
@@ -3200,6 +3200,24 @@
         "react": ">=16.3"
       }
     },
+    "node_modules/@hcaptcha/loader": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@hcaptcha/loader/-/loader-1.2.4.tgz",
+      "integrity": "sha512-3MNrIy/nWBfyVVvMPBKdKrX7BeadgiimW0AL/a/8TohNtJqxoySKgTJEXOQvYwlHemQpUzFrIsK74ody7JiMYw=="
+    },
+    "node_modules/@hcaptcha/react-hcaptcha": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@hcaptcha/react-hcaptcha/-/react-hcaptcha-1.10.1.tgz",
+      "integrity": "sha512-P0en4gEZAecah7Pt3WIaJO2gFlaLZKkI0+Tfdg8fNqsDxqT9VytZWSkH4WAkiPRULK1QcGgUZK+J56MXYmPifw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.9",
+        "@hcaptcha/loader": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/@headlessui/react": {
       "version": "1.7.18",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@hcaptcha/react-hcaptcha": "^1.10.1",
     "@headlessui/react": "^1.7.7",
     "@hookform/resolvers": "^2.9.10",
     "@octokit/rest": "^19.0.7",

frontend/scripts/initialize-standalone-build.sh

@@ -4,6 +4,8 @@ scripts/replace-standalone-build-variable.sh "$BAKED_NEXT_PUBLIC_POSTHOG_API_KEY
 
 scripts/replace-standalone-build-variable.sh "$BAKED_NEXT_PUBLIC_INTERCOM_ID" "$NEXT_PUBLIC_INTERCOM_ID"
 
+scripts/replace-standalone-build-variable.sh "$BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY" "$NEXT_PUBLIC_CAPTCHA_SITE_KEY"
+
 if [ "$TELEMETRY_ENABLED" != "false" ]; then
     echo "Telemetry is enabled"
     scripts/set-standalone-build-telemetry.sh true

frontend/scripts/start.sh

@@ -6,6 +6,8 @@ scripts/replace-variable.sh "$BAKED_NEXT_PUBLIC_INTERCOM_ID" "$NEXT_PUBLIC_INTER
 
 scripts/replace-variable.sh "$BAKED_NEXT_SAML_ORG_SLUG" "$NEXT_PUBLIC_SAML_ORG_SLUG"
 
+scripts/replace-variable.sh "$BAKED_NEXT_PUBLIC_CAPTCHA_SITE_KEY" "$NEXT_PUBLIC_CAPTCHA_SITE_KEY"
+
 if [ "$TELEMETRY_ENABLED" != "false" ]; then
     echo "Telemetry is enabled"
     scripts/set-telemetry.sh true

frontend/src/components/utilities/attemptCliLogin.ts

@@ -30,11 +30,13 @@ export interface IsCliLoginSuccessful {
 const attemptLogin = async ({
   email,
   password,
-  providerAuthToken
+  providerAuthToken,
+  captchaToken
 }: {
   email: string;
   password: string;
   providerAuthToken?: string;
+  captchaToken?: string;
 }): Promise<IsCliLoginSuccessful> => {
   const telemetry = new Telemetry().getInstance();
   return new Promise((resolve, reject) => {
@@ -70,7 +72,8 @@ const attemptLogin = async ({
           } = await login2({
             email,
             clientProof,
-            providerAuthToken
+            providerAuthToken,
+            captchaToken
           });
           if (mfaEnabled) {
             // case: MFA is enabled

frontend/src/components/utilities/attemptLogin.ts

@@ -22,11 +22,13 @@ interface IsLoginSuccessful {
 const attemptLogin = async ({
   email,
   password,
-  providerAuthToken
+  providerAuthToken,
+  captchaToken
 }: {
   email: string;
   password: string;
   providerAuthToken?: string;
+  captchaToken?: string;
 }): Promise<IsLoginSuccessful> => {
   const telemetry = new Telemetry().getInstance();
   // eslint-disable-next-line new-cap
@@ -58,6 +60,7 @@ const attemptLogin = async ({
     iv,
     tag
   } = await login2({
+    captchaToken,
     email,
     clientProof,
     providerAuthToken

frontend/src/components/utilities/config/index.ts

@@ -2,5 +2,6 @@ const ENV = process.env.NEXT_PUBLIC_ENV! || "development"; // investigate
 const POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY!;
 const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const INTERCOMid = process.env.NEXT_PUBLIC_INTERCOMid!;
+const CAPTCHA_SITE_KEY = process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY!;
 
-export { ENV, INTERCOMid, POSTHOG_API_KEY, POSTHOG_HOST };
+export { CAPTCHA_SITE_KEY, ENV, INTERCOMid, POSTHOG_API_KEY, POSTHOG_HOST };

frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx

@@ -78,7 +78,8 @@ export const SecretPathInput = ({
     const validPaths = inputValue.split("/");
     validPaths.pop();
 
-    const newValue = `${validPaths.join("/")}/${suggestions[selectedIndex]}/`;
+    // removed trailing slash
+    const newValue = `${validPaths.join("/")}/${suggestions[selectedIndex]}`;
     onChange?.(newValue);
     setInputValue(newValue);
     setSecretPath(newValue);

frontend/src/context/ProjectPermissionContext/types.ts

@@ -24,7 +24,9 @@ export enum ProjectPermissionSub {
   SecretRollback = "secret-rollback",
   SecretApproval = "secret-approval",
   SecretRotation = "secret-rotation",
-  Identity = "identity"
+  Identity = "identity",
+  CertificateAuthorities = "certificate-authorities",
+  Certificates = "certificates"
 }
 
 type SubjectFields = {
@@ -51,6 +53,8 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.ServiceTokens]
   | [ProjectPermissionActions, ProjectPermissionSub.SecretApproval]
   | [ProjectPermissionActions, ProjectPermissionSub.SecretRotation]
+  | [ProjectPermissionActions, ProjectPermissionSub.CertificateAuthorities]
+  | [ProjectPermissionActions, ProjectPermissionSub.Certificates]
   | [ProjectPermissionActions.Delete, ProjectPermissionSub.Workspace]
   | [ProjectPermissionActions.Edit, ProjectPermissionSub.Workspace]
   | [ProjectPermissionActions.Read, ProjectPermissionSub.SecretRollback]

frontend/src/helpers/project.ts

@@ -93,27 +93,29 @@ const initProjectHelper = async ({ projectName }: { projectName: string }) => {
   });
 
   try {
-    secrets?.forEach((secret) => {
-      createSecret({
-        workspaceId: project.id,
-        environment: secret.environment,
-        type: secret.type,
-        secretKey: secret.secretName,
-        secretKeyCiphertext: secret.secretKeyCiphertext,
-        secretKeyIV: secret.secretKeyIV,
-        secretKeyTag: secret.secretKeyTag,
-        secretValueCiphertext: secret.secretValueCiphertext,
-        secretValueIV: secret.secretValueIV,
-        secretValueTag: secret.secretValueTag,
-        secretCommentCiphertext: secret.secretCommentCiphertext,
-        secretCommentIV: secret.secretCommentIV,
-        secretCommentTag: secret.secretCommentTag,
-        secretPath: "/",
-        metadata: {
-          source: "signup"
-        }
-      });
-    });
+    await Promise.allSettled(
+      (secrets || []).map((secret) =>
+        createSecret({
+          workspaceId: project.id,
+          environment: secret.environment,
+          type: secret.type,
+          secretKey: secret.secretName,
+          secretKeyCiphertext: secret.secretKeyCiphertext,
+          secretKeyIV: secret.secretKeyIV,
+          secretKeyTag: secret.secretKeyTag,
+          secretValueCiphertext: secret.secretValueCiphertext,
+          secretValueIV: secret.secretValueIV,
+          secretValueTag: secret.secretValueTag,
+          secretCommentCiphertext: secret.secretCommentCiphertext,
+          secretCommentIV: secret.secretCommentIV,
+          secretCommentTag: secret.secretCommentTag,
+          secretPath: "/",
+          metadata: {
+            source: "signup"
+          }
+        })
+      )
+    );
   } catch (err) {
     console.error("Failed to upload secrets", err);
   }

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

@@ -26,7 +26,6 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.CREATE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Create universal auth client secret",
   [EventType.REVOKE_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRET]: "Revoke universal auth client secret",
   [EventType.GET_IDENTITY_UNIVERSAL_AUTH_CLIENT_SECRETS]: "Get universal auth client secrets",
-  [EventType.GET_IDENTITY_UNIVERSAL_AUTH]: "Get universal auth",
   [EventType.CREATE_ENVIRONMENT]: "Create environment",
   [EventType.UPDATE_ENVIRONMENT]: "Update environment",
   [EventType.DELETE_ENVIRONMENT]: "Delete environment",
@@ -43,7 +42,21 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.UPDATE_SECRET_IMPORT]: "Update secret import",
   [EventType.DELETE_SECRET_IMPORT]: "Delete secret import",
   [EventType.UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS]: "Update denied permissions",
-  [EventType.UPDATE_USER_WORKSPACE_ROLE]: "Update user role"
+  [EventType.UPDATE_USER_WORKSPACE_ROLE]: "Update user role",
+  [EventType.CREATE_CA]: "Create CA",
+  [EventType.GET_CA]: "Get CA",
+  [EventType.UPDATE_CA]: "Update CA",
+  [EventType.DELETE_CA]: "Delete CA",
+  [EventType.GET_CA_CSR]: "Get CA CSR",
+  [EventType.GET_CA_CERT]: "Get CA certificate",
+  [EventType.SIGN_INTERMEDIATE]: "Sign intermediate",
+  [EventType.IMPORT_CA_CERT]: "Import CA certificate",
+  [EventType.GET_CA_CRL]: "Get CA CRL",
+  [EventType.ISSUE_CERT]: "Issue certificate",
+  [EventType.GET_CERT]: "Get certificate",
+  [EventType.DELETE_CERT]: "Delete certificate",
+  [EventType.REVOKE_CERT]: "Revoke certificate",
+  [EventType.GET_CERT_BODY]: "Get certificate body"
 };
 
 export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {

frontend/src/hooks/api/auditLogs/enums.tsx

@@ -56,5 +56,19 @@ export enum EventType {
   UPDATE_SECRET_IMPORT = "update-secret-import",
   DELETE_SECRET_IMPORT = "delete-secret-import",
   UPDATE_USER_WORKSPACE_ROLE = "update-user-workspace-role",
-  UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS = "update-user-workspace-denied-permissions"
+  UPDATE_USER_WORKSPACE_DENIED_PERMISSIONS = "update-user-workspace-denied-permissions",
+  CREATE_CA = "create-certificate-authority",
+  GET_CA = "get-certificate-authority",
+  UPDATE_CA = "update-certificate-authority",
+  DELETE_CA = "delete-certificate-authority",
+  GET_CA_CSR = "get-certificate-authority-csr",
+  GET_CA_CERT = "get-certificate-authority-cert",
+  SIGN_INTERMEDIATE = "sign-intermediate",
+  IMPORT_CA_CERT = "import-certificate-authority-cert",
+  GET_CA_CRL = "get-certificate-authority-crl",
+  ISSUE_CERT = "issue-cert",
+  GET_CERT = "get-cert",
+  DELETE_CERT = "delete-cert",
+  REVOKE_CERT = "revoke-cert",
+  GET_CERT_BODY = "get-cert-body"
 }

frontend/src/hooks/api/auditLogs/types.tsx

@@ -1,3 +1,4 @@
+import { CaStatus } from "../ca";
 import { IdentityTrustedIp } from "../identities/types";
 import { ActorType, EventType, UserAgentType } from "./enums";
 
@@ -462,6 +463,125 @@ interface UpdateUserDeniedPermissions {
   };
 }
 
+interface CreateCa {
+  type: EventType.CREATE_CA;
+  metadata: {
+    caId: string;
+    dn: string;
+  };
+}
+
+interface GetCa {
+  type: EventType.GET_CA;
+  metadata: {
+    caId: string;
+    dn: string;
+  };
+}
+
+interface UpdateCa {
+  type: EventType.UPDATE_CA;
+  metadata: {
+    caId: string;
+    dn: string;
+    status: CaStatus;
+  };
+}
+
+interface DeleteCa {
+  type: EventType.DELETE_CA;
+  metadata: {
+    caId: string;
+    dn: string;
+  };
+}
+
+interface GetCaCsr {
+  type: EventType.GET_CA_CSR;
+  metadata: {
+    caId: string;
+    dn: string;
+  };
+}
+
+interface GetCaCert {
+  type: EventType.GET_CA_CERT;
+  metadata: {
+    caId: string;
+    dn: string;
+  };
+}
+
+interface SignIntermediate {
+  type: EventType.SIGN_INTERMEDIATE;
+  metadata: {
+    caId: string;
+    dn: string;
+    serialNumber: string;
+  };
+}
+
+interface ImportCaCert {
+  type: EventType.IMPORT_CA_CERT;
+  metadata: {
+    caId: string;
+    dn: string;
+  };
+}
+
+interface GetCaCrl {
+  type: EventType.GET_CA_CRL;
+  metadata: {
+    caId: string;
+    dn: string;
+  };
+}
+
+interface IssueCert {
+  type: EventType.ISSUE_CERT;
+  metadata: {
+    caId: string;
+    dn: string;
+    serialNumber: string;
+  };
+}
+
+interface GetCert {
+  type: EventType.GET_CERT;
+  metadata: {
+    certId: string;
+    cn: string;
+    serialNumber: string;
+  };
+}
+
+interface DeleteCert {
+  type: EventType.DELETE_CERT;
+  metadata: {
+    certId: string;
+    cn: string;
+    serialNumber: string;
+  };
+}
+
+interface RevokeCert {
+  type: EventType.REVOKE_CERT;
+  metadata: {
+    certId: string;
+    cn: string;
+    serialNumber: string;
+  };
+}
+
+interface GetCertBody {
+  type: EventType.GET_CERT_BODY;
+  metadata: {
+    certId: string;
+    cn: string;
+    serialNumber: string;
+  };
+}
+
 export type Event =
   | GetSecretsEvent
   | GetSecretEvent
@@ -504,7 +624,21 @@ export type Event =
   | UpdateSecretImportEvent
   | DeleteSecretImportEvent
   | UpdateUserRole
-  | UpdateUserDeniedPermissions;
+  | UpdateUserDeniedPermissions
+  | CreateCa
+  | GetCa
+  | UpdateCa
+  | DeleteCa
+  | GetCaCsr
+  | GetCaCert
+  | SignIntermediate
+  | ImportCaCert
+  | GetCaCrl
+  | IssueCert
+  | GetCert
+  | DeleteCert
+  | RevokeCert
+  | GetCertBody;
 
 export type AuditLog = {
   id: string;

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

@@ -30,6 +30,7 @@ export type Login1DTO = {
 };
 
 export type Login2DTO = {
+  captchaToken?: string;
   email: string;
   clientProof: string;
   providerAuthToken?: string;

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

@@ -0,0 +1,12 @@
+import { CaStatus,CaType } from "./enums";
+
+export const caTypeToNameMap: { [K in CaType]: string } = {
+  [CaType.ROOT]: "Root",
+  [CaType.INTERMEDIATE]: "Intermediate"
+};
+
+export const caStatusToNameMap: { [K in CaStatus]: string } = {
+  [CaStatus.ACTIVE]: "Active",
+  [CaStatus.DISABLED]: "Disabled",
+  [CaStatus.PENDING_CERTIFICATE]: "Pending Certificate"
+};

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

@@ -0,0 +1,10 @@
+export enum CaType {
+  ROOT = "root",
+  INTERMEDIATE = "intermediate"
+}
+
+export enum CaStatus {
+  ACTIVE = "active",
+  DISABLED = "disabled",
+  PENDING_CERTIFICATE = "pending-certificate"
+}

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

@@ -0,0 +1,10 @@
+export { CaStatus, CaType } from "./enums";
+export {
+  useCreateCa,
+  useCreateCertificate,
+  useDeleteCa,
+  useImportCaCertificate,
+  useSignIntermediate,
+  useUpdateCa
+} from "./mutations";
+export { useGetCaById, useGetCaCert, useGetCaCrl,useGetCaCsr } from "./queries";

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

@@ -0,0 +1,108 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { workspaceKeys } from "../workspace/queries";
+import {
+  TCertificateAuthority,
+  TCreateCaDTO,
+  TCreateCertificateDTO,
+  TCreateCertificateResponse,
+  TDeleteCaDTO,
+  TImportCaCertificateDTO,
+  TImportCaCertificateResponse,
+  TSignIntermediateDTO,
+  TSignIntermediateResponse,
+  TUpdateCaDTO
+} from "./types";
+
+export const useCreateCa = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TCertificateAuthority, {}, TCreateCaDTO>({
+    mutationFn: async (body) => {
+      const {
+        data: { ca }
+      } = await apiRequest.post<{ ca: TCertificateAuthority }>("/api/v1/pki/ca/", body);
+      return ca;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceCas({ projectSlug }));
+    }
+  });
+};
+
+export const useUpdateCa = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TCertificateAuthority, {}, TUpdateCaDTO>({
+    mutationFn: async ({ caId, projectSlug, ...body }) => {
+      const {
+        data: { ca }
+      } = await apiRequest.patch<{ ca: TCertificateAuthority }>(`/api/v1/pki/ca/${caId}`, body);
+      return ca;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceCas({ projectSlug }));
+    }
+  });
+};
+
+export const useDeleteCa = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TCertificateAuthority, {}, TDeleteCaDTO>({
+    mutationFn: async ({ caId }) => {
+      const {
+        data: { ca }
+      } = await apiRequest.delete<{ ca: TCertificateAuthority }>(`/api/v1/pki/ca/${caId}`);
+      return ca;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceCas({ projectSlug }));
+    }
+  });
+};
+
+export const useSignIntermediate = () => {
+  // TODO: consider renaming
+  return useMutation<TSignIntermediateResponse, {}, TSignIntermediateDTO>({
+    mutationFn: async (body) => {
+      const { data } = await apiRequest.post<TSignIntermediateResponse>(
+        `/api/v1/pki/ca/${body.caId}/sign-intermediate`,
+        body
+      );
+      return data;
+    }
+  });
+};
+
+export const useImportCaCertificate = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TImportCaCertificateResponse, {}, TImportCaCertificateDTO>({
+    mutationFn: async ({ caId, ...body }) => {
+      const { data } = await apiRequest.post<TImportCaCertificateResponse>(
+        `/api/v1/pki/ca/${caId}/import-certificate`,
+        body
+      );
+      return data;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceCas({ projectSlug }));
+    }
+  });
+};
+
+// consider rename to issue certificate
+export const useCreateCertificate = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TCreateCertificateResponse, {}, TCreateCertificateDTO>({
+    mutationFn: async ({ caId, ...body }) => {
+      const { data } = await apiRequest.post<TCreateCertificateResponse>(
+        `/api/v1/pki/ca/${caId}/issue-certificate`,
+        body
+      );
+      return data;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.forWorkspaceCertificates(projectSlug));
+    }
+  });
+};

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

@@ -0,0 +1,70 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TCertificateAuthority } from "./types";
+
+export const caKeys = {
+  getCaById: (caId: string) => [{ caId }, "ca"],
+  getCaCert: (caId: string) => [{ caId }, "ca-cert"],
+  getCaCsr: (caId: string) => [{ caId }, "ca-csr"],
+  getCaCrl: (caId: string) => [{ caId }, "ca-crl"]
+};
+
+export const useGetCaById = (caId: string) => {
+  return useQuery({
+    queryKey: caKeys.getCaById(caId),
+    queryFn: async () => {
+      const {
+        data: { ca }
+      } = await apiRequest.get<{ ca: TCertificateAuthority }>(`/api/v1/pki/ca/${caId}`);
+      return ca;
+    },
+    enabled: Boolean(caId)
+  });
+};
+
+export const useGetCaCert = (caId: string) => {
+  return useQuery({
+    queryKey: caKeys.getCaCert(caId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{
+        certificate: string;
+        certificateChain: string;
+        serialNumber: string;
+      }>(`/api/v1/pki/ca/${caId}/certificate`);
+      return data;
+    },
+    enabled: Boolean(caId)
+  });
+};
+
+export const useGetCaCsr = (caId: string) => {
+  return useQuery({
+    queryKey: caKeys.getCaCsr(caId),
+    queryFn: async () => {
+      const {
+        data: { csr }
+      } = await apiRequest.get<{
+        csr: string;
+      }>(`/api/v1/pki/ca/${caId}/csr`);
+      return csr;
+    },
+    enabled: Boolean(caId)
+  });
+};
+
+export const useGetCaCrl = (caId: string) => {
+  return useQuery({
+    queryKey: caKeys.getCaCrl(caId),
+    queryFn: async () => {
+      const {
+        data: { crl }
+      } = await apiRequest.get<{
+        crl: string;
+      }>(`/api/v1/pki/ca/${caId}/crl`);
+      return crl;
+    },
+    enabled: Boolean(caId)
+  });
+};

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

@@ -0,0 +1,95 @@
+import { CertKeyAlgorithm } from "../certificates/enums";
+import { CaStatus, CaType } from "./enums";
+
+export type TCertificateAuthority = {
+  id: string;
+  parentCaId?: string;
+  projectId: string;
+  type: CaType;
+  status: CaStatus;
+  friendlyName: string;
+  organization: string;
+  ou: string;
+  country: string;
+  province: string;
+  locality: string;
+  commonName: string;
+  dn: string;
+  maxPathLength?: number;
+  notAfter?: string;
+  notBefore?: string;
+  keyAlgorithm: CertKeyAlgorithm;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TCreateCaDTO = {
+  projectSlug: string;
+  type: string;
+  friendlyName?: string;
+  organization: string;
+  ou: string;
+  country: string;
+  province: string;
+  locality: string;
+  commonName: string;
+  notAfter?: string;
+  maxPathLength: number;
+  keyAlgorithm: CertKeyAlgorithm;
+};
+
+export type TUpdateCaDTO = {
+  projectSlug: string;
+  caId: string;
+  status?: CaStatus;
+};
+
+export type TDeleteCaDTO = {
+  projectSlug: string;
+  caId: string;
+};
+
+export type TSignIntermediateDTO = {
+  caId: string;
+  csr: string;
+  maxPathLength: number;
+  notBefore?: string;
+  notAfter?: string;
+};
+
+export type TSignIntermediateResponse = {
+  certificate: string;
+  certificateChain: string;
+  issuingCaCertificate: string;
+  serialNumber: string;
+};
+
+export type TImportCaCertificateDTO = {
+  caId: string;
+  projectSlug: string;
+  certificate: string;
+  certificateChain: string;
+};
+
+export type TImportCaCertificateResponse = {
+  message: string;
+  caId: string;
+};
+
+export type TCreateCertificateDTO = {
+  projectSlug: string;
+  caId: string;
+  friendlyName?: string;
+  commonName: string;
+  ttl: string; // string compatible with ms
+  notBefore?: string;
+  notAfter?: string;
+};
+
+export type TCreateCertificateResponse = {
+  certificate: string;
+  issuingCertificate: string;
+  certificateChain: string;
+  privateKey: string;
+  serialNumber: string;
+};

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

@@ -0,0 +1,60 @@
+import { CertKeyAlgorithm, CertStatus,CrlReason } from "./enums";
+
+export const certStatusToNameMap: { [K in CertStatus]: string } = {
+  [CertStatus.ACTIVE]: "Active",
+  [CertStatus.REVOKED]: "Revoked"
+};
+
+export const certKeyAlgorithmToNameMap: { [K in CertKeyAlgorithm]: string } = {
+  [CertKeyAlgorithm.RSA_2048]: "RSA 2048",
+  [CertKeyAlgorithm.RSA_4096]: "RSA 4096",
+  [CertKeyAlgorithm.ECDSA_P256]: "ECDSA P256",
+  [CertKeyAlgorithm.ECDSA_P384]: "ECDSA P384"
+};
+
+export const certKeyAlgorithms = [
+  { label: certKeyAlgorithmToNameMap[CertKeyAlgorithm.RSA_2048], value: CertKeyAlgorithm.RSA_2048 },
+  { label: certKeyAlgorithmToNameMap[CertKeyAlgorithm.RSA_4096], value: CertKeyAlgorithm.RSA_4096 },
+  {
+    label: certKeyAlgorithmToNameMap[CertKeyAlgorithm.ECDSA_P256],
+    value: CertKeyAlgorithm.ECDSA_P256
+  },
+  {
+    label: certKeyAlgorithmToNameMap[CertKeyAlgorithm.ECDSA_P384],
+    value: CertKeyAlgorithm.ECDSA_P384
+  }
+];
+
+export const crlReasonToNameMap: { [K in CrlReason]: string } = {
+  [CrlReason.UNSPECIFIED]: "Unspecified",
+  [CrlReason.KEY_COMPROMISE]: "Key Compromise",
+  [CrlReason.CA_COMPROMISE]: "CA Compromise",
+  [CrlReason.AFFILIATION_CHANGED]: "Affiliation Changed",
+  [CrlReason.SUPERSEDED]: "Superseded",
+  [CrlReason.CESSATION_OF_OPERATION]: "Cessation of Operation",
+  [CrlReason.CERTIFICATE_HOLD]: "Certificate Hold",
+  // [CrlReason.REMOVE_FROM_CRL]: "Remove from CRL",
+  [CrlReason.PRIVILEGE_WITHDRAWN]: "Privilege Withdrawn",
+  [CrlReason.A_A_COMPROMISE]: "A/A Compromise"
+};
+
+export const crlReasons = [
+  { label: crlReasonToNameMap[CrlReason.UNSPECIFIED], value: CrlReason.UNSPECIFIED },
+  { label: crlReasonToNameMap[CrlReason.KEY_COMPROMISE], value: CrlReason.KEY_COMPROMISE },
+  { label: crlReasonToNameMap[CrlReason.CA_COMPROMISE], value: CrlReason.CA_COMPROMISE },
+  {
+    label: crlReasonToNameMap[CrlReason.AFFILIATION_CHANGED],
+    value: CrlReason.AFFILIATION_CHANGED
+  },
+  { label: crlReasonToNameMap[CrlReason.SUPERSEDED], value: CrlReason.SUPERSEDED },
+  {
+    label: crlReasonToNameMap[CrlReason.CESSATION_OF_OPERATION],
+    value: CrlReason.CESSATION_OF_OPERATION
+  },
+  { label: crlReasonToNameMap[CrlReason.CERTIFICATE_HOLD], value: CrlReason.CERTIFICATE_HOLD },
+  {
+    label: crlReasonToNameMap[CrlReason.PRIVILEGE_WITHDRAWN],
+    value: CrlReason.PRIVILEGE_WITHDRAWN
+  },
+  { label: crlReasonToNameMap[CrlReason.A_A_COMPROMISE], value: CrlReason.A_A_COMPROMISE }
+];

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

@@ -0,0 +1,24 @@
+export enum CertStatus {
+  ACTIVE = "active",
+  REVOKED = "revoked"
+}
+
+export enum CertKeyAlgorithm {
+  RSA_2048 = "RSA_2048",
+  RSA_4096 = "RSA_4096",
+  ECDSA_P256 = "EC_prime256v1",
+  ECDSA_P384 = "EC_secp384r1"
+}
+
+export enum CrlReason {
+  UNSPECIFIED = "UNSPECIFIED",
+  KEY_COMPROMISE = "KEY_COMPROMISE",
+  CA_COMPROMISE = "CA_COMPROMISE",
+  AFFILIATION_CHANGED = "AFFILIATION_CHANGED",
+  SUPERSEDED = "SUPERSEDED",
+  CESSATION_OF_OPERATION = "CESSATION_OF_OPERATION",
+  CERTIFICATE_HOLD = "CERTIFICATE_HOLD",
+  // REMOVE_FROM_CRL = "REMOVE_FROM_CRL",
+  PRIVILEGE_WITHDRAWN = "PRIVILEGE_WITHDRAWN",
+  A_A_COMPROMISE = "A_A_COMPROMISE"
+}

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

@@ -0,0 +1,2 @@
+export { useDeleteCert, useRevokeCert } from "./mutations";
+export { useGetCert, useGetCertBody } from "./queries";

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

@@ -0,0 +1,43 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { workspaceKeys } from "../workspace/queries";
+import { TCertificate, TDeleteCertDTO, TRevokeCertDTO } from "./types";
+
+export const useDeleteCert = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TCertificate, {}, TDeleteCertDTO>({
+    mutationFn: async ({ serialNumber }) => {
+      const {
+        data: { certificate }
+      } = await apiRequest.delete<{ certificate: TCertificate }>(
+        `/api/v1/pki/certificates/${serialNumber}`
+      );
+      return certificate;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.forWorkspaceCertificates(projectSlug));
+    }
+  });
+};
+
+export const useRevokeCert = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TCertificate, {}, TRevokeCertDTO>({
+    mutationFn: async ({ serialNumber, revocationReason }) => {
+      const {
+        data: { certificate }
+      } = await apiRequest.post<{ certificate: TCertificate }>(
+        `/api/v1/pki/certificates/${serialNumber}/revoke`,
+        {
+          revocationReason
+        }
+      );
+      return certificate;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.forWorkspaceCertificates(projectSlug));
+    }
+  });
+};

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

@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TCertificate } from "./types";
+
+export const certKeys = {
+  getCertById: (serialNumber: string) => [{ serialNumber }, "cert"],
+  getCertBody: (serialNumber: string) => [{ serialNumber }, "certBody"]
+};
+
+export const useGetCert = (serialNumber: string) => {
+  return useQuery({
+    queryKey: certKeys.getCertById(serialNumber),
+    queryFn: async () => {
+      const {
+        data: { certificate }
+      } = await apiRequest.get<{ certificate: TCertificate }>(
+        `/api/v1/pki/certificates/${serialNumber}`
+      );
+      return certificate;
+    },
+    enabled: Boolean(serialNumber)
+  });
+};
+
+export const useGetCertBody = (serialNumber: string) => {
+  return useQuery({
+    queryKey: certKeys.getCertBody(serialNumber),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{
+        certificate: string;
+        certificateChain: string;
+        serialNumber: string;
+      }>(`/api/v1/pki/certificates/${serialNumber}/certificate`);
+      return data;
+    },
+    enabled: Boolean(serialNumber)
+  });
+};

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

@@ -0,0 +1,23 @@
+import { CertStatus } from "./enums";
+
+export type TCertificate = {
+  id: string;
+  caId: string;
+  status: CertStatus;
+  friendlyName: string;
+  commonName: string;
+  serialNumber: string;
+  notBefore: string;
+  notAfter: string;
+};
+
+export type TDeleteCertDTO = {
+  projectSlug: string;
+  serialNumber: string;
+};
+
+export type TRevokeCertDTO = {
+  projectSlug: string;
+  serialNumber: string;
+  revocationReason: string;
+};

frontend/src/hooks/api/index.tsx

@@ -5,6 +5,8 @@ export * from "./auditLogs";
 export * from "./auditLogStreams";
 export * from "./auth";
 export * from "./bots";
+export * from "./ca";
+export * from "./certificates";
 export * from "./dynamicSecret";
 export * from "./dynamicSecretLease";
 export * from "./groups";
@@ -17,6 +19,7 @@ export * from "./keys";
 export * from "./ldapConfig";
 export * from "./organization";
 export * from "./projectUserAdditionalPrivilege";
+export * from "./rateLimit";
 export * from "./roles";
 export * from "./scim";
 export * from "./secretApproval";

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

@@ -73,6 +73,9 @@ export const useCreateIntegration = () => {
         }[];
         kmsKeyId?: string;
         shouldDisableDelete?: boolean;
+        shouldMaskSecrets?: boolean;
+        shouldProtectSecrets?: boolean;
+        shouldEnableDelete?: boolean;
       };
     }) => {
       const {

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

@@ -0,0 +1,2 @@
+export { useUpdateRateLimit } from "./mutation";
+export { useGetRateLimit } from "./queries";

frontend/src/hooks/api/rateLimit/mutation.ts

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { rateLimitQueryKeys } from "./queries";
+import { TRateLimit } from "./types";
+
+export const useUpdateRateLimit = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<TRateLimit, {}, TRateLimit>({
+    mutationFn: async (opt) => {
+      const { data } = await apiRequest.put<{ rateLimit: TRateLimit }>("/api/v1/rate-limit", opt);
+      return data.rateLimit;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(rateLimitQueryKeys.rateLimit(), data);
+      queryClient.invalidateQueries(rateLimitQueryKeys.rateLimit());
+    }
+  });
+};

frontend/src/hooks/api/rateLimit/queries.ts

@@ -0,0 +1,34 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TRateLimit } from "./types";
+
+export const rateLimitQueryKeys = {
+  rateLimit: () => ["rate-limit"] as const
+};
+
+const fetchRateLimit = async () => {
+  const { data } = await apiRequest.get<{ rateLimit: TRateLimit }>("/api/v1/rate-limit");
+  return data.rateLimit;
+};
+
+export const useGetRateLimit = ({
+  options = {}
+}: {
+  options?: Omit<
+    UseQueryOptions<
+      TRateLimit,
+      unknown,
+      TRateLimit,
+      ReturnType<typeof rateLimitQueryKeys.rateLimit>
+    >,
+    "queryKey" | "queryFn"
+  >;
+} = {}) =>
+  useQuery({
+    queryKey: rateLimitQueryKeys.rateLimit(),
+    queryFn: fetchRateLimit,
+    ...options,
+    enabled: options?.enabled ?? true
+  });

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

@@ -0,0 +1,10 @@
+export type TRateLimit = {
+  readRateLimit: number;
+  writeRateLimit: number;
+  secretsRateLimit: number;
+  authRateLimit: number;
+  inviteUserRateLimit: number;
+  mfaRateLimit: number;
+  creationLimit: number;
+  publicEndpointLimit: number;
+};

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

@@ -264,13 +264,12 @@ export const useGetImportedSecretsAllEnvs = ({
   });
 
   const isImportedSecretPresentInEnv = useCallback(
-    (secPath: string, envSlug: string, secretName: string) => {
+    (envSlug: string, secretName: string) => {
       const selectedEnvIndex = environments.indexOf(envSlug);
 
       if (selectedEnvIndex !== -1) {
-        const isPresent = secretImports?.[selectedEnvIndex]?.data?.find(
-          ({ secretPath, secrets }) =>
-            secretPath === secPath && secrets.some((s) => s.key === secretName)
+        const isPresent = secretImports?.[selectedEnvIndex]?.data?.find(({ secrets }) =>
+          secrets.some((s) => s.key === secretName)
         );
 
         return Boolean(isPresent);

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

@@ -25,14 +25,15 @@ export type SubscriptionPlan = {
   ldap: boolean;
   groups: boolean;
   status:
-  | "incomplete"
-  | "incomplete_expired"
-  | "trialing"
-  | "active"
-  | "past_due"
-  | "canceled"
-  | "unpaid"
-  | null;
+    | "incomplete"
+    | "incomplete_expired"
+    | "trialing"
+    | "active"
+    | "past_due"
+    | "canceled"
+    | "unpaid"
+    | null;
   trial_end: number | null;
   has_used_trial: boolean;
+  caCrl: boolean;
 };

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

@@ -21,6 +21,8 @@ export {
   useGetWorkspaceIntegrations,
   useGetWorkspaceSecrets,
   useGetWorkspaceUsers,
+  useListWorkspaceCas,
+  useListWorkspaceCertificates,
   useListWorkspaceGroups,
   useNameWorkspaceSecrets,
   useRenameWorkspace,
@@ -28,5 +30,4 @@ export {
   useUpdateIdentityWorkspaceRole,
   useUpdateUserWorkspaceRole,
   useUpdateWsEnvironment,
-  useUpgradeProject
-} from "./queries";
+  useUpgradeProject} from "./queries";

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

@@ -2,6 +2,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
+import { CaStatus } from "../ca/enums";
+import { TCertificateAuthority } from "../ca/types";
+import { TCertificate } from "../certificates/types";
 import { TGroupMembership } from "../groups/types";
 import { IdentityMembership } from "../identities/types";
 import { IntegrationAuth } from "../integrationAuth/types";
@@ -20,6 +23,7 @@ import {
   TUpdateWorkspaceIdentityRoleDTO,
   TUpdateWorkspaceUserRoleDTO,
   UpdateEnvironmentDTO,
+  UpdatePitVersionLimitDTO,
   Workspace
 } from "./types";
 
@@ -39,7 +43,23 @@ export const workspaceKeys = {
   getWorkspaceIdentityMemberships: (workspaceId: string) =>
     [{ workspaceId }, "workspace-identity-memberships"] as const,
   getWorkspaceGroupMemberships: (workspaceId: string) =>
-    [{ workspaceId }, "workspace-groups"] as const
+    [{ workspaceId }, "workspace-groups"] as const,
+  getWorkspaceCas: ({ projectSlug }: { projectSlug: string }) =>
+    [{ projectSlug }, "workspace-cas"] as const,
+  specificWorkspaceCas: ({ projectSlug, status }: { projectSlug: string; status?: CaStatus }) =>
+    [...workspaceKeys.getWorkspaceCas({ projectSlug }), { status }] as const,
+  allWorkspaceCertificates: () => ["workspace-certificates"] as const,
+  forWorkspaceCertificates: (slug: string) =>
+    [...workspaceKeys.allWorkspaceCertificates(), slug] as const,
+  specificWorkspaceCertificates: ({
+    slug,
+    offset,
+    limit
+  }: {
+    slug: string;
+    offset: number;
+    limit: number;
+  }) => [...workspaceKeys.forWorkspaceCertificates(slug), { offset, limit }] as const
 };
 
 const fetchWorkspaceById = async (workspaceId: string) => {
@@ -249,6 +269,21 @@ export const useToggleAutoCapitalization = () => {
   });
 };
 
+export const useUpdateWorkspaceVersionLimit = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, UpdatePitVersionLimitDTO>({
+    mutationFn: ({ projectSlug, pitVersionLimit }) => {
+      return apiRequest.put(`/api/v1/workspace/${projectSlug}/version-limit`, {
+        pitVersionLimit
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
 export const useDeleteWorkspace = () => {
   const queryClient = useQueryClient();
 
@@ -469,3 +504,70 @@ export const useListWorkspaceGroups = (projectSlug: string) => {
     enabled: true
   });
 };
+
+export const useListWorkspaceCas = ({
+  projectSlug,
+  status
+}: {
+  projectSlug: string;
+  status?: CaStatus;
+}) => {
+  return useQuery({
+    queryKey: workspaceKeys.specificWorkspaceCas({
+      projectSlug,
+      status
+    }),
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        ...(status && { status })
+      });
+
+      const {
+        data: { cas }
+      } = await apiRequest.get<{ cas: TCertificateAuthority[] }>(
+        `/api/v2/workspace/${projectSlug}/cas`,
+        {
+          params
+        }
+      );
+      return cas;
+    },
+    enabled: Boolean(projectSlug)
+  });
+};
+
+export const useListWorkspaceCertificates = ({
+  projectSlug,
+  offset,
+  limit
+}: {
+  projectSlug: string;
+  offset: number;
+  limit: number;
+}) => {
+  return useQuery({
+    queryKey: workspaceKeys.specificWorkspaceCertificates({
+      slug: projectSlug,
+      offset,
+      limit
+    }),
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        offset: String(offset),
+        limit: String(limit)
+      });
+
+      const {
+        data: { certificates, totalCount }
+      } = await apiRequest.get<{ certificates: TCertificate[]; totalCount: number }>(
+        `/api/v2/workspace/${projectSlug}/certificates`,
+        {
+          params
+        }
+      );
+
+      return { certificates, totalCount };
+    },
+    enabled: Boolean(projectSlug)
+  });
+};

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

@@ -14,8 +14,10 @@ export type Workspace = {
   orgId: string;
   version: ProjectVersion;
   upgradeStatus: string | null;
+  updatedAt: string;
   autoCapitalization: boolean;
   environments: WorkspaceEnv[];
+  pitVersionLimit: number;
   slug: string;
 };
 
@@ -48,6 +50,7 @@ export type CreateWorkspaceDTO = {
 };
 
 export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
+export type UpdatePitVersionLimitDTO = { projectSlug: string; pitVersionLimit: number };
 export type ToggleAutoCapitalizationDTO = { workspaceID: string; state: boolean };
 
 export type DeleteWorkspaceDTO = { workspaceID: string };
@@ -128,4 +131,4 @@ export type TUpdateWorkspaceGroupRoleDTO = {
         temporaryAccessStartTime: string;
       }
   )[];
-};
+};

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -519,6 +519,18 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </MenuItem>
                         </a>
                       </Link>
+                      <Link href={`/project/${currentWorkspace?.id}/certificates`} passHref>
+                        <a>
+                          <MenuItem
+                            isSelected={
+                              router.asPath === `/project/${currentWorkspace?.id}/certificates`
+                            }
+                            icon="system-outline-90-lock-closed"
+                          >
+                            Internal PKI
+                          </MenuItem>
+                        </a>
+                      </Link>
                       <Link href={`/project/${currentWorkspace?.id}/members`} passHref>
                         <a>
                           <MenuItem
@@ -633,9 +645,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       <Link href={`/org/${currentOrg?.id}/secret-sharing`} passHref>
                         <a>
                           <MenuItem
-                            isSelected={
-                              router.asPath === `/org/${currentOrg?.id}/secret-sharing`
-                            }
+                            isSelected={router.asPath === `/org/${currentOrg?.id}/secret-sharing`}
                             icon="system-outline-90-lock-closed"
                           >
                             Secret Sharing

frontend/src/lib/fn/date.ts

@@ -0,0 +1,46 @@
+export const timeAgo = (inputDate: Date, currentDate: Date): string => {
+  const now = new Date(currentDate).getTime();
+  const date = new Date(inputDate).getTime();
+  const elapsedMilliseconds = now - date;
+  const elapsedSeconds = Math.abs(Math.floor(elapsedMilliseconds / 1000));
+  const elapsedMinutes = Math.abs(Math.floor(elapsedSeconds / 60));
+  const elapsedHours = Math.abs(Math.floor(elapsedMinutes / 60));
+  const elapsedDays = Math.abs(Math.floor(elapsedHours / 24));
+  const elapsedWeeks = Math.abs(Math.floor(elapsedDays / 7));
+  const elapsedMonths = Math.abs(Math.floor(elapsedDays / 30));
+  const elapsedYears = Math.abs(Math.floor(elapsedDays / 365));
+
+  if (elapsedYears > 0) {
+    return `${elapsedYears} year${elapsedYears === 1 ? "" : "s"} ${
+      elapsedMilliseconds >= 0 ? "ago" : "from now"
+    }`;
+  }
+  if (elapsedMonths > 0) {
+    return `${elapsedMonths} month${elapsedMonths === 1 ? "" : "s"} ${
+      elapsedMilliseconds >= 0 ? "ago" : "from now"
+    }`;
+  }
+  if (elapsedWeeks > 0) {
+    return `${elapsedWeeks} week${elapsedWeeks === 1 ? "" : "s"} ${
+      elapsedMilliseconds >= 0 ? "ago" : "from now"
+    }`;
+  }
+  if (elapsedDays > 0) {
+    return `${elapsedDays} day${elapsedDays === 1 ? "" : "s"} ${
+      elapsedMilliseconds >= 0 ? "ago" : "from now"
+    }`;
+  }
+  if (elapsedHours > 0) {
+    return `${elapsedHours} hour${elapsedHours === 1 ? "" : "s"} ${
+      elapsedMilliseconds >= 0 ? "ago" : "from now"
+    }`;
+  }
+  if (elapsedMinutes > 0) {
+    return `${elapsedMinutes} minute${elapsedMinutes === 1 ? "" : "s"} ${
+      elapsedMilliseconds >= 0 ? "ago" : "from now"
+    }`;
+  }
+  return `${elapsedSeconds} second${elapsedSeconds === 1 ? "" : "s"} ${
+    elapsedMilliseconds >= 0 ? "ago" : "from now"
+  }`;
+};

frontend/src/pages/integrations/github/create.tsx

@@ -33,6 +33,7 @@ import {
   Input,
   Select,
   SelectItem,
+  Switch,
   Tab,
   TabList,
   TabPanel,
@@ -59,7 +60,7 @@ const schema = yup.object({
   selectedSourceEnvironment: yup.string().trim().required("Project Environment is required"),
   secretPath: yup.string().trim().required("Secrets Path is required"),
   secretSuffix: yup.string().trim().optional(),
-
+  shouldEnableDelete: yup.boolean().optional(),
   scope: yup.mixed<TargetEnv>().oneOf(targetEnv.slice()).required(),
 
   repoIds: yup.mixed().when("scope", {
@@ -98,7 +99,6 @@ type FormData = yup.InferType<typeof schema>;
 export default function GitHubCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
-  
 
   const integrationAuthId =
     (queryString.parse(router.asPath.split("?")[1]).integrationAuthId as string) ?? "";
@@ -120,7 +120,8 @@ export default function GitHubCreateIntegrationPage() {
     defaultValues: {
       secretPath: "/",
       scope: "github-repo",
-      repoIds: []
+      repoIds: [],
+      shouldEnableDelete: false
     }
   });
 
@@ -177,7 +178,8 @@ export default function GitHubCreateIntegrationPage() {
                 app: targetApp.name, // repo name
                 owner: targetApp.owner, // repo owner
                 metadata: {
-                  secretSuffix: data.secretSuffix
+                  secretSuffix: data.secretSuffix,
+                  shouldEnableDelete: data.shouldEnableDelete
                 }
               });
             })
@@ -194,7 +196,8 @@ export default function GitHubCreateIntegrationPage() {
             scope: data.scope,
             owner: integrationAuthOrgs?.find((e) => e.orgId === data.orgId)?.name,
             metadata: {
-              secretSuffix: data.secretSuffix
+              secretSuffix: data.secretSuffix,
+              shouldEnableDelete: data.shouldEnableDelete
             }
           });
           break;
@@ -211,7 +214,8 @@ export default function GitHubCreateIntegrationPage() {
             owner: repoOwner,
             targetEnvironmentId: data.envId,
             metadata: {
-              secretSuffix: data.secretSuffix
+              secretSuffix: data.secretSuffix,
+              shouldEnableDelete: data.shouldEnableDelete
             }
           });
           break;
@@ -546,6 +550,21 @@ export default function GitHubCreateIntegrationPage() {
                 animate={{ opacity: 1, translateX: 0 }}
                 exit={{ opacity: 0, translateX: 30 }}
               >
+                <div className="ml-1 mb-5">
+                  <Controller
+                    control={control}
+                    name="shouldEnableDelete"
+                    render={({ field: { onChange, value } }) => (
+                      <Switch
+                        id="delete-github-option"
+                        onCheckedChange={(isChecked) => onChange(isChecked)}
+                        isChecked={value}
+                      >
+                        Delete secrets in Github that are not in Infisical
+                      </Switch>
+                    )}
+                  />
+                </div>
                 <Controller
                   control={control}
                   name="secretSuffix"

frontend/src/pages/integrations/gitlab/create.tsx

@@ -25,6 +25,7 @@ import {
   ModalContent,
   Select,
   SelectItem,
+  Switch,
   Tab,
   TabList,
   TabPanel,
@@ -58,7 +59,9 @@ const schema = yup.object({
   targetAppId: yup.string().required("GitLab project is required"),
   targetEnvironment: yup.string(),
   secretPrefix: yup.string(),
-  secretSuffix: yup.string()
+  secretSuffix: yup.string(),
+  shouldMaskSecrets: yup.boolean(),
+  shouldProtectSecrets: yup.boolean()
 });
 
 type FormData = yup.InferType<typeof schema>;
@@ -138,7 +141,9 @@ export default function GitLabCreateIntegrationPage() {
     targetAppId,
     targetEnvironment,
     secretPrefix,
-    secretSuffix
+    secretSuffix,
+    shouldMaskSecrets,
+    shouldProtectSecrets
   }: FormData) => {
     try {
       setIsLoading(true);
@@ -156,7 +161,9 @@ export default function GitLabCreateIntegrationPage() {
         secretPath,
         metadata: {
           secretPrefix,
-          secretSuffix
+          secretSuffix,
+          shouldMaskSecrets,
+          shouldProtectSecrets
         }
       });
 
@@ -390,6 +397,36 @@ export default function GitLabCreateIntegrationPage() {
               exit={{ opacity: 0, translateX: 30 }}
               className="pb-[14.25rem]"
             >
+              <div className="ml-1">
+                <Controller
+                  control={control}
+                  name="shouldMaskSecrets"
+                  render={({ field: { onChange, value } }) => (
+                    <Switch
+                      id="should-mask-secrets"
+                      onCheckedChange={(isChecked) => onChange(isChecked)}
+                      isChecked={value}
+                    >
+                      <div className="max-w-md">Mark Infisical secrets in Gitlab as &apos;Masked&apos; secrets</div>
+                    </Switch>
+                  )}
+                />
+              </div>
+              <div className="ml-1 mt-4 mb-5">
+                <Controller
+                  control={control}
+                  name="shouldProtectSecrets"
+                  render={({ field: { onChange, value } }) => (
+                    <Switch
+                      id="should-protect-secrets"
+                      onCheckedChange={(isChecked) => onChange(isChecked)}
+                      isChecked={value}
+                    >
+                      Mark Infisical secrets in Gitlab as &apos;Protected&apos; secrets
+                    </Switch>
+                  )}
+                />
+              </div>
               <Controller
                 control={control}
                 name="secretPrefix"

frontend/src/pages/org/[id]/overview/index.tsx

@@ -12,11 +12,14 @@ import { faFolderOpen } from "@fortawesome/free-regular-svg-icons";
 import {
   faArrowRight,
   faArrowUpRightFromSquare,
+  faBorderAll,
   faCheck,
   faCheckCircle,
   faClipboard,
   faExclamationCircle,
+  faFileShield,
   faHandPeace,
+  faList,
   faMagnifyingGlass,
   faNetworkWired,
   faPlug,
@@ -35,6 +38,7 @@ import {
   Button,
   Checkbox,
   FormControl,
+  IconButton,
   Input,
   Modal,
   ModalContent,
@@ -86,6 +90,11 @@ type ItemProps = {
   link?: string;
 };
 
+enum ProjectsViewMode {
+  GRID = "grid",
+  LIST = "list"
+}
+
 function copyToClipboard(id: string, setState: (value: boolean) => void) {
   // Get the text field
   const copyText = document.getElementById(id) as HTMLInputElement;
@@ -309,8 +318,9 @@ const LearningItem = ({
         href={link}
       >
         <div
-          className={`${complete ? "bg-gradient-to-r from-primary-500/70 p-[0.07rem]" : ""
-            } mb-3 rounded-md`}
+          className={`${
+            complete ? "bg-gradient-to-r from-primary-500/70 p-[0.07rem]" : ""
+          } mb-3 rounded-md`}
         >
           <div
             onKeyDown={() => null}
@@ -321,10 +331,11 @@ const LearningItem = ({
                 await registerUserAction.mutateAsync(userAction);
               }
             }}
-            className={`group relative flex h-[5.5rem] w-full items-center justify-between overflow-hidden rounded-md border ${complete
+            className={`group relative flex h-[5.5rem] w-full items-center justify-between overflow-hidden rounded-md border ${
+              complete
                 ? "cursor-default border-mineshaft-900 bg-gradient-to-r from-[#0e1f01] to-mineshaft-700"
                 : "cursor-pointer border-mineshaft-600 bg-mineshaft-800 shadow-xl hover:bg-mineshaft-700"
-              } text-mineshaft-100 duration-200`}
+            } text-mineshaft-100 duration-200`}
           >
             <div className="mr-4 flex flex-row items-center">
               <FontAwesomeIcon icon={icon} className="mx-2 w-16 text-4xl" />
@@ -402,8 +413,9 @@ const LearningItemSquare = ({
       href={link}
     >
       <div
-        className={`${complete ? "bg-gradient-to-r from-primary-500/70 p-[0.07rem]" : ""
-          } w-full rounded-md`}
+        className={`${
+          complete ? "bg-gradient-to-r from-primary-500/70 p-[0.07rem]" : ""
+        } w-full rounded-md`}
       >
         <div
           onKeyDown={() => null}
@@ -414,10 +426,11 @@ const LearningItemSquare = ({
               await registerUserAction.mutateAsync(userAction);
             }
           }}
-          className={`group relative flex w-full items-center justify-between overflow-hidden rounded-md border ${complete
+          className={`group relative flex w-full items-center justify-between overflow-hidden rounded-md border ${
+            complete
               ? "cursor-default border-mineshaft-900 bg-gradient-to-r from-[#0e1f01] to-mineshaft-700"
               : "cursor-pointer border-mineshaft-600 bg-mineshaft-800 shadow-xl hover:bg-mineshaft-700"
-            } text-mineshaft-100 duration-200`}
+          } text-mineshaft-100 duration-200`}
         >
           <div className="flex w-full flex-col items-center px-6 py-4">
             <div className="flex w-full flex-row items-start justify-between">
@@ -431,8 +444,9 @@ const LearningItemSquare = ({
                 </div>
               )}
               <div
-                className={`text-right text-sm font-normal text-mineshaft-300 ${complete ? "font-semibold text-primary" : ""
-                  }`}
+                className={`text-right text-sm font-normal text-mineshaft-300 ${
+                  complete ? "font-semibold text-primary" : ""
+                }`}
               >
                 {complete ? "Complete!" : `About ${time}`}
               </div>
@@ -461,7 +475,6 @@ const formSchema = yup.object({
 type TAddProjectFormData = yup.InferType<typeof formSchema>;
 
 // #TODO: Update all the workspaceIds
-
 const OrganizationPage = withPermission(
   () => {
     const { t } = useTranslation();
@@ -496,6 +509,9 @@ const OrganizationPage = withPermission(
     const createWs = useCreateWorkspace();
     const { user } = useUser();
     const { data: serverDetails } = useFetchServerStatus();
+    const [projectsViewMode, setProjectsViewMode] = useState<ProjectsViewMode>(
+      (localStorage.getItem("projectsViewMode") as ProjectsViewMode) || ProjectsViewMode.GRID
+    );
 
     const onCreateProject = async ({ name, addMembers }: TAddProjectFormData) => {
       // type check
@@ -550,6 +566,95 @@ const OrganizationPage = withPermission(
     }, []);
 
     const isWorkspaceEmpty = !isWorkspaceLoading && orgWorkspaces?.length === 0;
+    const filteredWorkspaces = orgWorkspaces.filter((ws) =>
+      ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())
+    );
+
+    const projectsGridView = (
+      <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+        {isWorkspaceLoading &&
+          Array.apply(0, Array(3)).map((_x, i) => (
+            <div
+              key={`workspace-cards-loading-${i + 1}`}
+              className="min-w-72 flex h-40 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+            >
+              <div className="mt-0 text-lg text-mineshaft-100">
+                <Skeleton className="w-3/4 bg-mineshaft-600" />
+              </div>
+              <div className="mt-0 pb-6 text-sm text-mineshaft-300">
+                <Skeleton className="w-1/2 bg-mineshaft-600" />
+              </div>
+              <div className="flex justify-end">
+                <Skeleton className="w-1/2 bg-mineshaft-600" />
+              </div>
+            </div>
+          ))}
+        {filteredWorkspaces.map((workspace) => (
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+          <div
+            onClick={() => {
+              router.push(`/project/${workspace.id}/secrets/overview`);
+              localStorage.setItem("projectData.id", workspace.id);
+            }}
+            key={workspace.id}
+            className="min-w-72 group flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+          >
+            <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
+            <div className="mt-0 pb-6 text-sm text-mineshaft-300">
+              {workspace.environments?.length || 0} environments
+            </div>
+            <button type="button">
+              <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 transition-all group-hover:border-primary-500/80 group-hover:bg-primary-800/20 group-hover:text-mineshaft-200">
+                Explore{" "}
+                <FontAwesomeIcon
+                  icon={faArrowRight}
+                  className="pl-1.5 pr-0.5 duration-200 group-hover:pl-2 group-hover:pr-0"
+                />
+              </div>
+            </button>
+          </div>
+        ))}
+      </div>
+    );
+
+    const projectsListView = (
+      <div className="mt-4 w-full rounded-md">
+        {isWorkspaceLoading &&
+          Array.apply(0, Array(3)).map((_x, i) => (
+            <div
+              key={`workspace-cards-loading-${i + 1}`}
+              className={`min-w-72 group flex h-12 cursor-pointer flex-row items-center justify-between border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
+                i === 0 && "rounded-t-md"
+              } ${i === 2 && "rounded-b-md border-b"}`}
+            >
+              <Skeleton className="w-full bg-mineshaft-600" />
+            </div>
+          ))}
+        {filteredWorkspaces.map((workspace, ind) => (
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+          <div
+            onClick={() => {
+              router.push(`/project/${workspace.id}/secrets/overview`);
+              localStorage.setItem("projectData.id", workspace.id);
+            }}
+            key={workspace.id}
+            className={`min-w-72 group grid h-14 cursor-pointer grid-cols-6 border-t border-l border-r border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
+              ind === 0 && "rounded-t-md"
+            } ${ind === filteredWorkspaces.length - 1 && "rounded-b-md border-b"}`}
+          >
+            <div className="flex items-center sm:col-span-3 lg:col-span-4">
+              <FontAwesomeIcon icon={faFileShield} className="text-sm text-primary/70" />
+              <div className="ml-5 truncate text-sm text-mineshaft-100">{workspace.name}</div>
+            </div>
+            <div className="flex items-center justify-end sm:col-span-3 lg:col-span-2">
+              <div className="text-center text-sm text-mineshaft-300">
+                {workspace.environments?.length || 0} environments
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
 
     return (
       <div className="mx-auto flex max-w-7xl flex-col justify-start bg-bunker-800 md:h-screen">
@@ -580,7 +685,9 @@ const OrganizationPage = withPermission(
           </div>
         )}
         <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl">
-          <p className="mr-4 font-semibold text-white">Projects</p>
+          <div className="flex w-full justify-between">
+            <p className="mr-4 font-semibold text-white">Projects</p>
+          </div>
           <div className="mt-6 flex w-full flex-row">
             <Input
               className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
@@ -589,6 +696,36 @@ const OrganizationPage = withPermission(
               onChange={(e) => setSearchFilter(e.target.value)}
               leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
             />
+            <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+              <IconButton
+                variant="outline_bg"
+                onClick={() => {
+                  localStorage.setItem("projectsViewMode", ProjectsViewMode.GRID);
+                  setProjectsViewMode(ProjectsViewMode.GRID);
+                }}
+                ariaLabel="grid"
+                size="xs"
+                className={`${
+                  projectsViewMode === ProjectsViewMode.GRID ? "bg-mineshaft-500" : "bg-transparent"
+                } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
+              >
+                <FontAwesomeIcon icon={faBorderAll} />
+              </IconButton>
+              <IconButton
+                variant="outline_bg"
+                onClick={() => {
+                  localStorage.setItem("projectsViewMode", ProjectsViewMode.LIST);
+                  setProjectsViewMode(ProjectsViewMode.LIST);
+                }}
+                ariaLabel="list"
+                size="xs"
+                className={`${
+                  projectsViewMode === ProjectsViewMode.LIST ? "bg-mineshaft-500" : "bg-transparent"
+                } min-w-[2.4rem] border-none hover:bg-mineshaft-600`}
+              >
+                <FontAwesomeIcon icon={faList} />
+              </IconButton>
+            </div>
             <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Workspace}>
               {(isAllowed) => (
                 <Button
@@ -609,52 +746,7 @@ const OrganizationPage = withPermission(
               )}
             </OrgPermissionCan>
           </div>
-          <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-            {isWorkspaceLoading &&
-              Array.apply(0, Array(3)).map((_x, i) => (
-                <div
-                  key={`workspace-cards-loading-${i + 1}`}
-                  className="min-w-72 flex h-40 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
-                >
-                  <div className="mt-0 text-lg text-mineshaft-100">
-                    <Skeleton className="w-3/4 bg-mineshaft-600" />
-                  </div>
-                  <div className="mt-0 pb-6 text-sm text-mineshaft-300">
-                    <Skeleton className="w-1/2 bg-mineshaft-600" />
-                  </div>
-                  <div className="flex justify-end">
-                    <Skeleton className="w-1/2 bg-mineshaft-600" />
-                  </div>
-                </div>
-              ))}
-            {orgWorkspaces
-              .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase()))
-              .map((workspace) => (
-                // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-                <div
-                  onClick={() => {
-                    router.push(`/project/${workspace.id}/secrets/overview`);
-                    localStorage.setItem("projectData.id", workspace.id);
-                  }}
-                  key={workspace.id}
-                  className="min-w-72 group flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
-                >
-                  <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
-                  <div className="mt-0 pb-6 text-sm text-mineshaft-300">
-                    {workspace.environments?.length || 0} environments
-                  </div>
-                  <button type="button">
-                    <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 transition-all group-hover:border-primary-500/80 group-hover:bg-primary-800/20 group-hover:text-mineshaft-200">
-                      Explore{" "}
-                      <FontAwesomeIcon
-                        icon={faArrowRight}
-                        className="pl-1.5 pr-0.5 duration-200 group-hover:pl-2 group-hover:pr-0"
-                      />
-                    </div>
-                  </button>
-                </div>
-              ))}
-          </div>
+          {projectsViewMode === ProjectsViewMode.LIST ? projectsListView : projectsGridView}
           {isWorkspaceEmpty && (
             <div className="w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
               <FontAwesomeIcon
@@ -709,94 +801,95 @@ const OrganizationPage = withPermission(
           new Date().getTime() - new Date(user?.createdAt).getTime() <
           30 * 24 * 60 * 60 * 1000
         ) && (
-            <div className="mb-4 flex flex-col items-start justify-start px-6 pb-0 text-3xl">
-              <p className="mr-4 mb-4 font-semibold text-white">Onboarding Guide</p>
-              <div className="mb-3 grid w-full grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-                <LearningItemSquare
-                  text="Watch Infisical demo"
-                  subText="Set up Infisical in 3 min."
-                  complete={hasUserClickedIntro}
-                  icon={faHandPeace}
-                  time="3 min"
-                  userAction="intro_cta_clicked"
-                  link="https://www.youtube.com/watch?v=PK23097-25I"
-                />
-                {orgWorkspaces.length !== 0 && (
-                  <>
-                    <LearningItemSquare
-                      text="Add your secrets"
-                      subText="Drop a .env file or type your secrets."
-                      complete={hasUserPushedSecrets}
-                      icon={faPlus}
-                      time="1 min"
-                      userAction="first_time_secrets_pushed"
-                      link={`/project/${orgWorkspaces[0]?.id}/secrets/overview`}
-                    />
-                    <LearningItemSquare
-                      text="Invite your teammates"
-                      subText="Infisical is better used as a team."
-                      complete={usersInOrg}
-                      icon={faUserPlus}
-                      time="2 min"
-                      link={`/org/${router.query.id}/members?action=invite`}
-                    />
-                  </>
-                )}
-                <div className="block xl:hidden 2xl:block">
-                  <LearningItemSquare
-                    text="Join Infisical Slack"
-                    subText="Have any questions? Ask us!"
-                    complete={hasUserClickedSlack}
-                    icon={faSlack}
-                    time="1 min"
-                    userAction="slack_cta_clicked"
-                    link="https://infisical.com/slack"
-                  />
-                </div>
-              </div>
+          <div className="mb-4 flex flex-col items-start justify-start px-6 pb-0 text-3xl">
+            <p className="mr-4 mb-4 font-semibold text-white">Onboarding Guide</p>
+            <div className="mb-3 grid w-full grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+              <LearningItemSquare
+                text="Watch Infisical demo"
+                subText="Set up Infisical in 3 min."
+                complete={hasUserClickedIntro}
+                icon={faHandPeace}
+                time="3 min"
+                userAction="intro_cta_clicked"
+                link="https://www.youtube.com/watch?v=PK23097-25I"
+              />
               {orgWorkspaces.length !== 0 && (
-                <div className="group relative mb-3 flex h-full w-full cursor-default flex-col items-center justify-between overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-800 pl-2 pr-2 pt-4 pb-2 text-mineshaft-100 shadow-xl duration-200">
-                  <div className="mb-4 flex w-full flex-row items-center pr-4">
-                    <div className="mr-4 flex w-full flex-row items-center">
-                      <FontAwesomeIcon icon={faNetworkWired} className="mx-2 w-16 text-4xl" />
-                      {false && (
-                        <div className="absolute left-12 top-10 flex h-7 w-7 items-center justify-center rounded-full bg-bunker-500 p-2 group-hover:bg-mineshaft-700">
-                          <FontAwesomeIcon
-                            icon={faCheckCircle}
-                            className="h-5 w-5 text-4xl text-green"
-                          />
-                        </div>
-                      )}
-                      <div className="flex flex-col items-start pl-0.5">
-                        <div className="mt-0.5 text-xl font-semibold">Inject secrets locally</div>
-                        <div className="text-sm font-normal">
-                          Replace .env files with a more secure and efficient alternative.
-                        </div>
+                <>
+                  <LearningItemSquare
+                    text="Add your secrets"
+                    subText="Drop a .env file or type your secrets."
+                    complete={hasUserPushedSecrets}
+                    icon={faPlus}
+                    time="1 min"
+                    userAction="first_time_secrets_pushed"
+                    link={`/project/${orgWorkspaces[0]?.id}/secrets/overview`}
+                  />
+                  <LearningItemSquare
+                    text="Invite your teammates"
+                    subText="Infisical is better used as a team."
+                    complete={usersInOrg}
+                    icon={faUserPlus}
+                    time="2 min"
+                    link={`/org/${router.query.id}/members?action=invite`}
+                  />
+                </>
+              )}
+              <div className="block xl:hidden 2xl:block">
+                <LearningItemSquare
+                  text="Join Infisical Slack"
+                  subText="Have any questions? Ask us!"
+                  complete={hasUserClickedSlack}
+                  icon={faSlack}
+                  time="1 min"
+                  userAction="slack_cta_clicked"
+                  link="https://infisical.com/slack"
+                />
+              </div>
+            </div>
+            {orgWorkspaces.length !== 0 && (
+              <div className="group relative mb-3 flex h-full w-full cursor-default flex-col items-center justify-between overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-800 pl-2 pr-2 pt-4 pb-2 text-mineshaft-100 shadow-xl duration-200">
+                <div className="mb-4 flex w-full flex-row items-center pr-4">
+                  <div className="mr-4 flex w-full flex-row items-center">
+                    <FontAwesomeIcon icon={faNetworkWired} className="mx-2 w-16 text-4xl" />
+                    {false && (
+                      <div className="absolute left-12 top-10 flex h-7 w-7 items-center justify-center rounded-full bg-bunker-500 p-2 group-hover:bg-mineshaft-700">
+                        <FontAwesomeIcon
+                          icon={faCheckCircle}
+                          className="h-5 w-5 text-4xl text-green"
+                        />
+                      </div>
+                    )}
+                    <div className="flex flex-col items-start pl-0.5">
+                      <div className="mt-0.5 text-xl font-semibold">Inject secrets locally</div>
+                      <div className="text-sm font-normal">
+                        Replace .env files with a more secure and efficient alternative.
                       </div>
                     </div>
-                    <div
-                      className={`w-28 pr-4 text-right text-sm font-semibold ${false && "text-green"
-                        }`}
-                    >
-                      About 2 min
-                    </div>
                   </div>
-                  <TabsObject />
-                  {false && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+                  <div
+                    className={`w-28 pr-4 text-right text-sm font-semibold ${
+                      false && "text-green"
+                    }`}
+                  >
+                    About 2 min
+                  </div>
                 </div>
-              )}
-              {orgWorkspaces.length !== 0 && (
-                <LearningItem
-                  text="Integrate Infisical with your infrastructure"
-                  subText="Connect Infisical to various 3rd party services and platforms."
-                  complete={false}
-                  icon={faPlug}
-                  time="15 min"
-                  link="https://infisical.com/docs/integrations/overview"
-                />
-              )}
-            </div>
-          )}
+                <TabsObject />
+                {false && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+              </div>
+            )}
+            {orgWorkspaces.length !== 0 && (
+              <LearningItem
+                text="Integrate Infisical with your infrastructure"
+                subText="Connect Infisical to various 3rd party services and platforms."
+                complete={false}
+                icon={faPlug}
+                time="15 min"
+                link="https://infisical.com/docs/integrations/overview"
+              />
+            )}
+          </div>
+        )}
         <Modal
           isOpen={popUp.addNewWs.isOpen}
           onOpenChange={(isModalOpen) => {

frontend/src/pages/project/[id]/certificates/index.tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { CertificatesPage } from "@app/views/Project/CertificatesPage";
+
+const Certificates = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Head>
+        <title>{t("common.head-title", { title: "Certificates" })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Head>
+      <CertificatesPage />
+    </div>
+  );
+};
+
+export default Certificates;
+
+Certificates.requireAuth = true;

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -1,15 +1,17 @@
-import { FormEvent, useEffect, useState } from "react";
+import { FormEvent, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
 
 import Error from "@app/components/basic/Error";
 import { createNotification } from "@app/components/notifications";
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
+import { CAPTCHA_SITE_KEY } from "@app/components/utilities/config";
 import { Button, Input } from "@app/components/v2";
 import { useServerConfig } from "@app/context";
 import { useFetchServerStatus } from "@app/hooks/api";
@@ -32,6 +34,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   const [loginError, setLoginError] = useState(false);
   const { config } = useServerConfig();
   const queryParams = new URLSearchParams(window.location.search);
+  const [captchaToken, setCaptchaToken] = useState("");
+  const [shouldShowCaptcha, setShouldShowCaptcha] = useState(false);
+  const captchaRef = useRef<HCaptcha>(null);
   const { data: serverDetails } = useFetchServerStatus();
 
   useEffect(() => {
@@ -56,7 +61,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
         // attemptCliLogin
         const isCliLoginSuccessful = await attemptCliLogin({
           email: email.toLowerCase(),
-          password
+          password,
+          captchaToken
         });
 
         if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
@@ -78,7 +84,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
       } else {
         const isLoginSuccessful = await attemptLogin({
           email: email.toLowerCase(),
-          password
+          password,
+          captchaToken
         });
 
         if (isLoginSuccessful && isLoginSuccessful.success) {
@@ -112,6 +119,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
         return;
       }
 
+      if (err.response.data.error === "Captcha Required") {
+        setShouldShowCaptcha(true);
+        setIsLoading(false);
+        return;
+      }
+
       setLoginError(true);
       createNotification({
         text: "Login unsuccessful. Double-check your credentials and try again.",
@@ -119,6 +132,11 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
       });
     }
 
+    if (captchaRef.current) {
+      captchaRef.current.resetCaptcha();
+    }
+
+    setCaptchaToken("");
     setIsLoading(false);
   };
 
@@ -240,8 +258,19 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
           className="select:-webkit-autofill:focus h-10"
         />
       </div>
+      {shouldShowCaptcha && (
+        <div className="mt-4">
+          <HCaptcha
+            theme="dark"
+            sitekey={CAPTCHA_SITE_KEY}
+            onVerify={(token) => setCaptchaToken(token)}
+            ref={captchaRef}
+          />
+        </div>
+      )}
       <div className="mt-3 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Button
+          disabled={shouldShowCaptcha && captchaToken === ""}
           type="submit"
           size="sm"
           isFullWidth

frontend/src/views/Login/components/PasswordStep/PasswordStep.tsx

@@ -1,13 +1,15 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
 import axios from "axios";
 import jwt_decode from "jwt-decode";
 
 import { createNotification } from "@app/components/notifications";
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
+import { CAPTCHA_SITE_KEY } from "@app/components/utilities/config";
 import { Button, Input } from "@app/components/v2";
 import { useUpdateUserAuthMethods } from "@app/hooks/api";
 import { useSelectOrganization } from "@app/hooks/api/auth/queries";
@@ -41,6 +43,10 @@ export const PasswordStep = ({
     providerAuthToken
   ) as any;
 
+  const [captchaToken, setCaptchaToken] = useState("");
+  const [shouldShowCaptcha, setShouldShowCaptcha] = useState(false);
+  const captchaRef = useRef<HCaptcha>(null);
+
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
@@ -51,7 +57,8 @@ export const PasswordStep = ({
         const isCliLoginSuccessful = await attemptCliLogin({
           email,
           password,
-          providerAuthToken
+          providerAuthToken,
+          captchaToken
         });
 
         if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
@@ -99,7 +106,8 @@ export const PasswordStep = ({
         const loginAttempt = await attemptLogin({
           email,
           password,
-          providerAuthToken
+          providerAuthToken,
+          captchaToken
         });
 
         if (loginAttempt && loginAttempt.success) {
@@ -158,11 +166,21 @@ export const PasswordStep = ({
         return;
       }
 
+      if (err.response.data.error === "Captcha Required") {
+        setShouldShowCaptcha(true);
+        return;
+      }
+
       createNotification({
         text: "Login unsuccessful. Double-check your master password and try again.",
         type: "error"
       });
     }
+
+    if (captchaRef.current) {
+      captchaRef.current.resetCaptcha();
+    }
+    setCaptchaToken("");
   };
 
   return (
@@ -194,8 +212,19 @@ export const PasswordStep = ({
           />
         </div>
       </div>
+      {shouldShowCaptcha && (
+        <div className="mx-auto mt-4 flex w-full min-w-[22rem] items-center justify-center lg:w-1/6">
+          <HCaptcha
+            theme="dark"
+            sitekey={CAPTCHA_SITE_KEY}
+            onVerify={(token) => setCaptchaToken(token)}
+            ref={captchaRef}
+          />
+        </div>
+      )}
       <div className="mx-auto mt-4 flex w-1/4 w-full min-w-[22rem] items-center justify-center rounded-md text-center lg:w-1/6">
         <Button
+          disabled={shouldShowCaptcha && captchaToken === ""}
           type="submit"
           colorSchema="primary"
           variant="outline_bg"

frontend/src/views/Project/AuditLogsPage/components/LogsTableRow.tsx

@@ -320,6 +320,30 @@ export const LogsTableRow = ({ auditLog }: Props) => {
             })}
           </Td>
         );
+      case EventType.CREATE_CA:
+      case EventType.GET_CA:
+      case EventType.UPDATE_CA:
+      case EventType.DELETE_CA:
+      case EventType.GET_CA_CSR:
+      case EventType.GET_CA_CERT:
+      case EventType.IMPORT_CA_CERT:
+      case EventType.GET_CA_CRL:
+      case EventType.SIGN_INTERMEDIATE:
+      case EventType.ISSUE_CERT:
+        return (
+          <Td>
+            <p>{`CA DN: ${event.metadata.dn}`}</p>
+          </Td>
+        );
+      case EventType.GET_CERT:
+      case EventType.DELETE_CERT:
+      case EventType.REVOKE_CERT:
+      case EventType.GET_CERT_BODY:
+        return (
+          <Td>
+            <p>{`Cert CN: ${event.metadata.cn}`}</p>
+          </Td>
+        );
       default:
         return <Td />;
     }

frontend/src/views/Project/CertificatesPage/CertificatesPage.tsx

@@ -0,0 +1,35 @@
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+
+import { CaTab, CertificatesTab } from "./components";
+
+enum TabSections {
+  Ca = "certificate-authorities",
+  Certificates = "certificates"
+}
+
+export const CertificatesPage = withProjectPermission(
+  () => {
+    return (
+      <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 py-6 px-6">
+          <p className="mr-4 mb-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>
+            </TabList>
+            <TabPanel value={TabSections.Certificates}>
+              <CertificatesTab />
+            </TabPanel>
+            <TabPanel value={TabSections.Ca}>
+              <CaTab />
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.AuditLogs }
+);

frontend/src/views/Project/CertificatesPage/components/CaTab/CaTab.tsx

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

frontend/src/views/Project/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/src/views/Project/CertificatesPage/components/CaTab/components/CaCrlModal.tsx

@@ -0,0 +1,106 @@
+import { useEffect } from "react";
+import { faCheck, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton, Modal, ModalContent } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { useGetCaCrl } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  popUp: UsePopUpState<["caCrl"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["caCrl"]>, state?: boolean) => void;
+};
+
+export const CaCrlModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [isCrlCopied, setIsCrlCopied] = useToggle(false);
+  const { data: crl } = useGetCaCrl((popUp?.caCrl?.data as { caId: string })?.caId || "");
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isCrlCopied) {
+      timer = setTimeout(() => setIsCrlCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [isCrlCopied]);
+
+  const downloadTxtFile = (filename: string, content: string) => {
+    const blob = new Blob([content], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.caCrl?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("caCrl", isOpen);
+      }}
+    >
+      <ModalContent title="CA Certificate Revocation List (CRL)">
+        <div>
+          {crl && (
+            <>
+              {/* <div className="mb-4 flex items-center justify-between">
+                <h2>Manual CRL Rotation</h2>
+                <Button
+                  // isLoading={isLoading}
+                  // isDisabled={!isAllowed}
+                  colorSchema="primary"
+                  variant="outline_bg"
+                  type="submit"
+                  // onClick={() => handleAssignment(username, !isPartOfGroup)}
+                  onClick={() => {}}
+                >
+                  Rotate
+                </Button>
+              </div> */}
+              <div className="mb-4 flex items-center justify-between">
+                <h2>Certificate Revocation List</h2>
+                <div className="flex">
+                  <IconButton
+                    ariaLabel="copy icon"
+                    colorSchema="secondary"
+                    className="group relative"
+                    onClick={() => {
+                      navigator.clipboard.writeText(crl);
+                      setIsCrlCopied.on();
+                    }}
+                  >
+                    <FontAwesomeIcon icon={isCrlCopied ? faCheck : faCopy} />
+                    <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                      Copy
+                    </span>
+                  </IconButton>
+                  <IconButton
+                    ariaLabel="copy icon"
+                    colorSchema="secondary"
+                    className="group relative ml-2"
+                    onClick={() => {
+                      downloadTxtFile("crl.pem", crl);
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faDownload} />
+                    <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                      Download
+                    </span>
+                  </IconButton>
+                </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">{crl}</p>
+              </div>
+            </>
+          )}
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/CaInstallCertModal.tsx

@@ -0,0 +1,328 @@
+import { useEffect, useState } 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 {
+  // DatePicker,
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  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 = {
+  popUp: UsePopUpState<["installCaCert"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["installCaCert"]>, state?: boolean) => void;
+};
+
+enum ParentCaType {
+  Internal = "internal",
+  External = "external"
+}
+
+export const CaInstallCertModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [parentCaType] = useState<ParentCaType>(ParentCaType.Internal);
+  const { currentWorkspace } = useWorkspace();
+  const caId = (popUp?.installCaCert?.data as { caId: string })?.caId || "";
+
+  // const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
+  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(() => {
+    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);
+  }
+
+  const renderForm = (parentCaTypeInput: ParentCaType) => {
+    switch (parentCaTypeInput) {
+      case ParentCaType.Internal:
+        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)}
+                  className="mt-4"
+                  isRequired
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    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
+              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}
+              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)}
+                  className="mt-4"
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    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>
+        );
+      default:
+        return <div>External TODO</div>;
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.installCaCert?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("installCaCert", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Install Intermediate CA certificate">
+        {/* <FormControl label="Parent CA Type" className="mt-4">
+          <Select
+            defaultValue={ParentCaType.Internal}
+            value={parentCaType}
+            onValueChange={(e) => setParentCaType(e as ParentCaType)}
+            className="w-full"
+          >
+            <SelectItem
+              value={ParentCaType.Internal}
+              key={`parent-ca-type-${ParentCaType.Internal}`}
+            >
+              Infisical Private CA
+            </SelectItem>
+            <SelectItem
+              value={ParentCaType.External}
+              key={`parent-ca-type-${ParentCaType.External}`}
+            >
+              External Private CA
+            </SelectItem>
+          </Select>
+        </FormControl> */}
+        {renderForm(parentCaType)}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/index.tsx

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

frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaModal.tsx

@@ -0,0 +1,433 @@
+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
+  // DatePicker
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { CaType, useCreateCa, useGetCaById } 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
+    ])
+  })
+  .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 {
+    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
+      });
+    } else {
+      reset({
+        type: CaType.ROOT,
+        friendlyName: "",
+        organization: "",
+        ou: "",
+        country: "",
+        province: "",
+        locality: "",
+        commonName: "",
+        notAfter: getDateTenYearsFromToday(),
+        maxPathLength: "-1",
+        keyAlgorithm: CertKeyAlgorithm.RSA_2048
+      });
+    }
+  }, [ca]);
+
+  const onFormSubmit = async ({
+    type,
+    friendlyName,
+    commonName,
+    organization,
+    ou,
+    country,
+    locality,
+    province,
+    notAfter,
+    maxPathLength,
+    keyAlgorithm
+  }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await createMutateAsync({
+        projectSlug: currentWorkspace.slug,
+        type,
+        friendlyName,
+        commonName,
+        organization,
+        ou,
+        country,
+        province,
+        locality,
+        notAfter,
+        maxPathLength: Number(maxPathLength),
+        keyAlgorithm
+      });
+
+      reset();
+      handlePopUpToggle("ca", false);
+
+      createNotification({
+        text: "Successfully 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)}>
+          <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>
+            )}
+          />
+          {!ca && (
+            <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/src/views/Project/CertificatesPage/components/CaTab/components/CaSection.tsx

@@ -0,0 +1,135 @@
+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, UpgradePlanModal } 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 { CaCrlModal } from "./CaCrlModal";
+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
+    "caCrl", // enable / disable
+    "upgradePlan"
+  ] as const);
+
+  const onRemoveCaSubmit = async (caId: string) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      await deleteCa({ caId, projectSlug: currentWorkspace.slug });
+
+      await createNotification({
+        text: "Successfully deleted CA",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteCa");
+    } catch (err) {
+      console.error(err);
+      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 });
+
+      await 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} />
+      <CaCrlModal 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/src/views/Project/CertificatesPage/components/CaTab/components/CaTable.tsx

@@ -0,0 +1,258 @@
+import {
+  faBan,
+  faCertificate,
+  faEllipsis,
+  faEye,
+  faFile,
+  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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useSubscription,
+  useWorkspace} from "@app/context";
+import { CaStatus, useListWorkspaceCas } from "@app/hooks/api";
+import { caStatusToNameMap, caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["installCaCert", "caCert", "ca", "deleteCa", "caStatus", "caCrl", "upgradePlan"]
+    >,
+    data?: {
+      caId?: string;
+      dn?: string;
+      status?: CaStatus;
+      description?: string;
+    }
+  ) => void;
+};
+
+export const CaTable = ({ handlePopUpOpen }: Props) => {
+  const { subscription } = useSubscription();
+  const { currentWorkspace } = useWorkspace();
+  const { data, isLoading } = 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>
+            {isLoading && <TableSkeleton columns={3} innerKey="project-cas" />}
+            {!isLoading &&
+              data &&
+              data.length > 0 &&
+              data.map((ca) => {
+                return (
+                  <Tr className="h-10" key={`ca-${ca.id}`}>
+                    <Td>{ca.friendlyName}</Td>
+                    <Td>{caStatusToNameMap[ca.status]}</Td>
+                    <Td>{caTypeToNameMap[ca.type]}</Td>
+                    <Td>{ca.notAfter ? format(new Date(ca.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">
+                          {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={async () => {
+                                    handlePopUpOpen("installCaCert", {
+                                      caId: ca.id
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faCertificate} />}
+                                >
+                                  Install 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={async () => {
+                                    handlePopUpOpen("caCert", {
+                                      caId: ca.id
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faCertificate} />}
+                                >
+                                  View 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={async () => {
+                                    if (!subscription?.caCrl) {
+                                      handlePopUpOpen("upgradePlan", {
+                                        description:
+                                          "You can use the certificate revocation list (CRL) feature if you upgrade your Infisical plan."
+                                      });
+                                    } else {
+                                      handlePopUpOpen("caCrl", {
+                                        caId: ca.id
+                                      });
+                                    }
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faFile} />}
+                                >
+                                  View CRL
+                                </DropdownMenuItem>
+                              )}
+                            </ProjectPermissionCan>
+                          )}
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Read}
+                            a={ProjectPermissionSub.CertificateAuthorities}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={async () =>
+                                  handlePopUpOpen("ca", {
+                                    caId: ca.id
+                                  })
+                                }
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faEye} />}
+                              >
+                                View CA
+                              </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={async () =>
+                                    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={async () =>
+                                  handlePopUpOpen("deleteCa", {
+                                    caId: ca.id,
+                                    dn: ca.dn
+                                  })
+                                }
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} />}
+                              >
+                                Delete CA
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isLoading && data?.length === 0 && (
+          <EmptyState title="No certificate authorities have been created" icon={faCertificate} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/views/Project/CertificatesPage/components/CaTab/components/index.tsx

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

frontend/src/views/Project/CertificatesPage/components/CaTab/index.tsx

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

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/CertificatesTab.tsx

@@ -0,0 +1,17 @@
+import { motion } from "framer-motion";
+
+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 }}
+    >
+      <CertificatesSection />
+    </motion.div>
+  );
+};

frontend/src/views/Project/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/src/views/Project/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/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useState } 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 { CaStatus, useCreateCertificate, useGetCert, useListWorkspaceCas } from "@app/hooks/api";
+import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { CertificateContent } from "./CertificateContent";
+
+const schema = z.object({
+  caId: z.string(),
+  friendlyName: z.string(),
+  commonName: z.string().trim().min(1),
+  ttl: z.string().trim()
+});
+
+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;
+};
+
+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 { mutateAsync: createCertificate } = useCreateCertificate();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting },
+    setValue
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  useEffect(() => {
+    if (cert) {
+      reset({
+        caId: cert.caId,
+        friendlyName: cert.friendlyName,
+        commonName: cert.commonName,
+        ttl: ""
+      });
+    } else {
+      reset({
+        caId: "",
+        friendlyName: "",
+        commonName: "",
+        ttl: ""
+      });
+    }
+  }, [cert]);
+
+  const onFormSubmit = async ({ caId, friendlyName, commonName, ttl }: FormData) => {
+    try {
+      if (!currentWorkspace?.slug) return;
+
+      const { serialNumber, certificate, certificateChain, privateKey } = await createCertificate({
+        projectSlug: currentWorkspace.slug,
+        caId,
+        friendlyName,
+        commonName,
+        ttl
+      });
+
+      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="caId"
+              defaultValue=""
+              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}
+              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}
+              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>
+              )}
+            />
+            {!cert && (
+              <div className="flex items-center">
+                <Button
+                  className="mr-4"
+                  size="sm"
+                  type="submit"
+                  isLoading={isSubmitting}
+                  isDisabled={isSubmitting}
+                >
+                  Create
+                </Button>
+                <Button colorSchema="secondary" variant="plain">
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </form>
+        ) : (
+          <CertificateContent
+            serialNumber={certificateDetails.serialNumber}
+            certificate={certificateDetails.certificate}
+            certificateChain={certificateDetails.certificateChain}
+            privateKey={certificateDetails.privateKey}
+          />
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Project/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/src/views/Project/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 });
+
+      await 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 Certificate
+            </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/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificatesTable.tsx

@@ -0,0 +1,205 @@
+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 {
+  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 { certStatusToNameMap } from "@app/hooks/api/certificates/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+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, isLoading } = useListWorkspaceCertificates({
+    projectSlug: currentWorkspace?.slug ?? "",
+    offset: (page - 1) * perPage,
+    limit: perPage
+  });
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Friendly Name</Th>
+              <Th>Status</Th>
+              <Th>Valid Until</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={3} innerKey="project-cas" />}
+            {!isLoading &&
+              data?.certificates.map((certificate) => {
+                return (
+                  <Tr className="h-10" key={`certificate-${certificate.id}`}>
+                    <Td>{certificate.friendlyName}</Td>
+                    <Td>{certStatusToNameMap[certificate.status]}</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>
+        {!isLoading && data?.totalCount !== undefined && data.totalCount >= PER_PAGE_INIT && (
+          <Pagination
+            count={data.totalCount}
+            page={page}
+            perPage={perPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+          />
+        )}
+        {!isLoading && !data?.certificates?.length && (
+          <EmptyState title="No certificates have been created" icon={faCertificate} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/index.tsx

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

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/index.tsx

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

frontend/src/views/Project/CertificatesPage/components/index.tsx

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

frontend/src/views/Project/CertificatesPage/index.tsx

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

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/MultiEnvProjectPermission.tsx

@@ -70,6 +70,7 @@ export const MultiEnvProjectPermission = ({
   }, [allRule]);
 
   const handlePermissionChange = (val: Permission) => {
+    if(!val) return
     switch (val) {
       case Permission.NoAccess: {
         const permissions = getValue("permissions");
@@ -106,7 +107,7 @@ export const MultiEnvProjectPermission = ({
       className={twMerge(
         "rounded-md bg-mineshaft-800 px-10 py-6",
         (selectedPermissionCategory !== Permission.NoAccess || isCustom) &&
-        "border-l-2 border-primary-600"
+          "border-l-2 border-primary-600"
       )}
     >
       <div className="flex items-center space-x-4">

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -4,6 +4,7 @@ import {
   faAnchorLock,
   faArrowLeft,
   faBook,
+  faCertificate,
   faCog,
   faKey,
   faLock,
@@ -13,8 +14,7 @@ import {
   faShield,
   faTags,
   faUser,
-  faUsers
-} from "@fortawesome/free-solid-svg-icons";
+  faUsers} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
@@ -117,6 +117,18 @@ const SINGLE_PERMISSION_LIST = [
     subtitle: "IP allowlist management control",
     icon: faNetworkWired,
     formName: "ip-allowlist"
+  },
+  {
+    title: "Certificate Authorities",
+    subtitle: "CA management control",
+    icon: faCertificate,
+    formName: "certificate-authorities"
+  },
+  {
+    title: "Certificates",
+    subtitle: "Certificate management control",
+    icon: faCertificate,
+    formName: "certificates"
   }
 ] as const;
 

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils.ts

@@ -48,6 +48,8 @@ export const formSchema = z.object({
       tags: generalPermissionSchema,
       "audit-logs": generalPermissionSchema,
       "ip-allowlist": generalPermissionSchema,
+      "certificate-authorities": generalPermissionSchema,
+      certificates: generalPermissionSchema,
       // akhilmhdh: refactor all keys like below
       [ProjectPermissionSub.SecretApproval]: generalPermissionSchema,
       workspace: z

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx

@@ -53,6 +53,7 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
   }, [selectedPermissionCategory]);
 
   const handlePermissionChange = (val: Permission) => {
+    if(!val) return;
     if (val === Permission.Custom) setIsCustom.on();
     else setIsCustom.off();
 

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx

@@ -25,6 +25,8 @@ type Props = {
     | "audit-logs"
     | "ip-allowlist"
     | "identity"
+    | "certificate-authorities"
+    | "certificates"
     | ProjectPermissionSub.SecretApproval;
   isNonEditable?: boolean;
   setValue: UseFormSetValue<TFormSchema>;
@@ -98,6 +100,7 @@ export const SingleProjectPermission = ({
   }, [selectedPermissionCategory]);
 
   const handlePermissionChange = (val: Permission) => {
+    if(!val) return;
     if (val === Permission.Custom) setIsCustom.on();
     else setIsCustom.off();
 

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx

@@ -52,6 +52,7 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props)
   }, [selectedPermissionCategory]);
 
   const handlePermissionChange = (val: Permission) => {
+    if(!val) return;
     if (val === Permission.Custom) setIsCustom.on();
     else setIsCustom.off();
 

frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportListView.tsx

@@ -45,7 +45,6 @@ export const computeImportedSecretRows = (
   if (importedSecIndex === -1) return [];
 
   const importedSec = importSecrets[importedSecIndex];
-
   const overridenSec: Record<string, { env: string; secretPath: string }> = {};
 
   for (let i = importedSecIndex + 1; i < importSecrets.length; i += 1) {
@@ -61,11 +60,28 @@ export const computeImportedSecretRows = (
     overridenSec[el.key] = { env: SECRET_IN_DASHBOARD, secretPath: "" };
   });
 
-  return importedSec.secrets.map(({ key, value }) => ({
-    key,
-    value,
-    overriden: overridenSec?.[key]
-  }));
+  const importedEntry: Record<string, boolean> = {};
+  const importedSecretEntries: {
+    key: string;
+    value: string;
+    overriden: {
+      env: string;
+      secretPath: string;
+    };
+  }[] = [];
+
+  importedSec.secrets.forEach(({ key, value }) => {
+    if (!importedEntry[key]) {
+      importedSecretEntries.push({
+        key,
+        value,
+        overriden: overridenSec?.[key]
+      });
+      importedEntry[key] = true;
+    }
+  });
+
+  return importedSecretEntries;
 };
 
 type Props = {
@@ -159,8 +175,9 @@ export const SecretImportListView = ({
         importEnv.slug === environment &&
         isReserved &&
         importPath ===
-        `${secretPath === "/" ? "" : secretPath}/${ReservedFolders.SecretReplication
-        }${replicationImportId}`
+          `${secretPath === "/" ? "" : secretPath}/${
+            ReservedFolders.SecretReplication
+          }${replicationImportId}`
     );
     if (reservedImport) {
       setReplicationSecrets((state) => ({
@@ -206,8 +223,9 @@ export const SecretImportListView = ({
         isOpen={popUp.deleteSecretImport.isOpen}
         deleteKey="unlink"
         title="Do you want to remove this secret import?"
-        subTitle={`This will unlink secrets from environment ${(popUp.deleteSecretImport?.data as TSecretImport)?.importEnv
-          } of path ${(popUp.deleteSecretImport?.data as TSecretImport)?.importPath}?`}
+        subTitle={`This will unlink secrets from environment ${
+          (popUp.deleteSecretImport?.data as TSecretImport)?.importEnv
+        } of path ${(popUp.deleteSecretImport?.data as TSecretImport)?.importPath}?`}
         onChange={(isOpen) => handlePopUpToggle("deleteSecretImport", isOpen)}
         onDeleteApproved={handleSecretImportDelete}
       />

frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx

@@ -393,15 +393,15 @@ export const SecretDetailSidebar = ({
                       {(isAllowed) => (
                         <Switch
                           id="skipmultiencoding-option"
-                          onCheckedChange={(isChecked) => onChange(!isChecked)}
-                          isChecked={!value}
+                          onCheckedChange={(isChecked) => onChange(isChecked)}
+                          isChecked={value}
                           onBlur={onBlur}
                           isDisabled={!isAllowed}
                           className="items-center"
                         >
-                          Enable multi line encoding
+                          Multi line encoding
                           <Tooltip
-                            content="Infisical encodes multiline secrets by escaping newlines and wrapping in quotes. To disable, enable this option"
+                            content="When enabled, multiline secrets will be handled by escaping newlines and enclosing the entire value in double quotes."
                             className="z-[100]"
                           >
                             <FontAwesomeIcon icon={faCircleQuestion} className="ml-1" size="sm" />

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -29,7 +29,7 @@ type Props = {
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
   onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
   onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
-  isImportedSecretPresentInEnv: (name: string, env: string, secretName: string) => boolean;
+  isImportedSecretPresentInEnv: (env: string, secretName: string) => boolean;
 };
 
 export const SecretOverviewTableRow = ({
@@ -53,9 +53,8 @@ export const SecretOverviewTableRow = ({
     <>
       <Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
         <Td
-          className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${
-            isFormExpanded && "border-t-2 border-mineshaft-500"
-          }`}
+          className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${isFormExpanded && "border-t-2 border-mineshaft-500"
+            }`}
         >
           <div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
             <div className="flex items-center space-x-5">
@@ -83,7 +82,7 @@ export const SecretOverviewTableRow = ({
         {environments.map(({ slug }, i) => {
           const secret = getSecretByKey(slug, secretKey);
 
-          const isSecretImported = isImportedSecretPresentInEnv(secretPath, slug, secretKey);
+          const isSecretImported = isImportedSecretPresentInEnv(slug, secretKey);
 
           const isSecretPresent = Boolean(secret);
           const isSecretEmpty = secret?.value === "";
@@ -108,8 +107,8 @@ export const SecretOverviewTableRow = ({
                         isSecretPresent
                           ? "Present secret"
                           : isSecretImported
-                          ? "Imported secret"
-                          : "Missing secret"
+                            ? "Imported secret"
+                            : "Missing secret"
                       }
                     >
                       <FontAwesomeIcon
@@ -133,9 +132,8 @@ export const SecretOverviewTableRow = ({
         <Tr>
           <Td
             colSpan={totalCols}
-            className={`bg-bunker-600 px-0 py-0 ${
-              isFormExpanded && "border-b-2 border-mineshaft-500"
-            }`}
+            className={`bg-bunker-600 px-0 py-0 ${isFormExpanded && "border-b-2 border-mineshaft-500"
+              }`}
           >
             <div
               className="ml-2 p-2"
@@ -180,11 +178,7 @@ export const SecretOverviewTableRow = ({
                       const secret = getSecretByKey(slug, secretKey);
                       const isCreatable = !secret;
 
-                      const isImportedSecret = isImportedSecretPresentInEnv(
-                        secretPath,
-                        slug,
-                        secretKey
-                      );
+                      const isImportedSecret = isImportedSecretPresentInEnv(slug, secretKey);
 
                       return (
                         <tr

frontend/src/views/Settings/ProjectSettingsPage/components/PointInTimeVersionLimitSection/PointInTimeVersionLimitSection.tsx

@@ -0,0 +1,92 @@
+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 } from "@app/components/v2";
+import { useProjectPermission, useWorkspace } from "@app/context";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { useUpdateWorkspaceVersionLimit } from "@app/hooks/api/workspace/queries";
+
+const formSchema = z.object({
+  pitVersionLimit: z.coerce.number().min(1).max(100)
+});
+
+type TForm = z.infer<typeof formSchema>;
+
+export const PointInTimeVersionLimitSection = () => {
+  const { mutateAsync: updatePitVersion } = useUpdateWorkspaceVersionLimit();
+
+  const { currentWorkspace } = useWorkspace();
+  const { membership } = useProjectPermission();
+
+  const {
+    control,
+    formState: { isSubmitting, isDirty },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      pitVersionLimit: currentWorkspace?.pitVersionLimit || 10
+    }
+  });
+
+  if (!currentWorkspace) return null;
+
+  const handleVersionLimitSubmit = async ({ pitVersionLimit }: TForm) => {
+    try {
+      await updatePitVersion({
+        pitVersionLimit,
+        projectSlug: currentWorkspace.slug
+      });
+
+      createNotification({
+        text: "Successfully updated version limit",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Failed updating project's version limit",
+        type: "error"
+      });
+    }
+  };
+
+  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">Version Retention</p>
+      </div>
+      <p className="mb-4 mt-2 max-w-2xl text-sm text-gray-400">
+      This defines the maximum number of recent secret versions to keep per folder. Excess versions will be removed at midnight (UTC) each day.
+      </p>
+      <form onSubmit={handleSubmit(handleVersionLimitSubmit)} autoComplete="off">
+        <div className="max-w-xs">
+          <Controller
+            control={control}
+            defaultValue={0}
+            name="pitVersionLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isError={Boolean(error)}
+                errorText={error?.message}
+                label="Recent versions to keep"
+              >
+                <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>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/PointInTimeVersionLimitSection/index.tsx

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

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -3,6 +3,7 @@ import { BackfillSecretReferenceSecretion } from "../BackfillSecretReferenceSect
 import { DeleteProjectSection } from "../DeleteProjectSection";
 import { E2EESection } from "../E2EESection";
 import { EnvironmentSection } from "../EnvironmentSection";
+import { PointInTimeVersionLimitSection } from "../PointInTimeVersionLimitSection";
 import { ProjectNameChangeSection } from "../ProjectNameChangeSection";
 import { SecretTagsSection } from "../SecretTagsSection";
 
@@ -14,6 +15,7 @@ export const ProjectGeneralTab = () => {
       <SecretTagsSection />
       <AutoCapitalizationSection />
       <E2EESection />
+      <PointInTimeVersionLimitSection />
       <BackfillSecretReferenceSecretion />
       <DeleteProjectSection />
     </div>

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -18,12 +18,16 @@ import {
   Tab,
   TabList,
   TabPanel,
-  Tabs} from "@app/components/v2";
+  Tabs
+} from "@app/components/v2";
 import { useOrganization, useServerConfig, useUser } from "@app/context";
 import { useUpdateServerConfig } from "@app/hooks/api";
 
+import { RateLimitPanel } from "./RateLimitPanel";
+
 enum TabSections {
-  Settings = "settings"
+  Settings = "settings",
+  RateLimit = "rate-limit"
 }
 
 enum SignUpModes {
@@ -117,6 +121,7 @@ export const AdminDashboardPage = () => {
             <TabList>
               <div className="flex w-full flex-row border-b border-mineshaft-600">
                 <Tab value={TabSections.Settings}>General</Tab>
+                <Tab value={TabSections.RateLimit}>Rate Limit</Tab>
               </div>
             </TabList>
             <TabPanel value={TabSections.Settings}>
@@ -233,6 +238,9 @@ export const AdminDashboardPage = () => {
                 </Button>
               </form>
             </TabPanel>
+            <TabPanel value={TabSections.RateLimit}>
+              <RateLimitPanel />
+            </TabPanel>
           </Tabs>
         </div>
       )}

frontend/src/views/admin/DashboardPage/RateLimitPanel.tsx

@@ -0,0 +1,262 @@
+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, ContentLoader, FormControl, Input, UpgradePlanModal } from "@app/components/v2";
+import { useSubscription } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useGetRateLimit, useUpdateRateLimit } from "@app/hooks/api";
+
+const formSchema = z.object({
+  readRateLimit: z.number(),
+  writeRateLimit: z.number(),
+  secretsRateLimit: z.number(),
+  authRateLimit: z.number(),
+  inviteUserRateLimit: z.number(),
+  mfaRateLimit: z.number(),
+  creationLimit: z.number(),
+  publicEndpointLimit: z.number()
+});
+
+type TRateLimitForm = z.infer<typeof formSchema>;
+
+export const RateLimitPanel = () => {
+  const { data: rateLimit, isLoading } = useGetRateLimit();
+  const { subscription } = useSubscription();
+  const { mutateAsync: updateRateLimit } = useUpdateRateLimit();
+  const { handlePopUpToggle, handlePopUpOpen, popUp } = usePopUp(["upgradePlan"] as const);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TRateLimitForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      // eslint-disable-next-line
+      readRateLimit: rateLimit?.readRateLimit ?? 600,
+      writeRateLimit: rateLimit?.writeRateLimit ?? 200,
+      secretsRateLimit: rateLimit?.secretsRateLimit ?? 60,
+      authRateLimit: rateLimit?.authRateLimit ?? 60,
+      inviteUserRateLimit: rateLimit?.inviteUserRateLimit ?? 30,
+      mfaRateLimit: rateLimit?.mfaRateLimit ?? 20,
+      creationLimit: rateLimit?.creationLimit ?? 30,
+      publicEndpointLimit: rateLimit?.publicEndpointLimit ?? 30
+    }
+  });
+
+  const onRateLimitFormSubmit = async (formData: TRateLimitForm) => {
+    try {
+      if (subscription && !subscription.customRateLimits) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      const {
+        readRateLimit,
+        writeRateLimit,
+        secretsRateLimit,
+        authRateLimit,
+        inviteUserRateLimit,
+        mfaRateLimit,
+        creationLimit,
+        publicEndpointLimit
+      } = formData;
+
+      await updateRateLimit({
+        readRateLimit,
+        writeRateLimit,
+        secretsRateLimit,
+        authRateLimit,
+        inviteUserRateLimit,
+        mfaRateLimit,
+        creationLimit,
+        publicEndpointLimit
+      });
+      createNotification({
+        text: "Rate limits have been successfully updated. Please allow at least 10 minutes for the changes to take effect.",
+        type: "success"
+      });
+    } catch (e) {
+      console.error(e);
+      createNotification({
+        type: "error",
+        text: "Failed to update rate limiting setting."
+      });
+    }
+  };
+
+  return isLoading ? (
+    <ContentLoader />
+  ) : (
+    <form
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      onSubmit={handleSubmit(onRateLimitFormSubmit)}
+    >
+      <div className="mb-8 flex flex-col justify-start">
+        <div className="mb-4 text-xl font-semibold text-mineshaft-100">Configure rate limits</div>
+        <Controller
+          control={control}
+          name="readRateLimit"
+          defaultValue={300}
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Global read requests per minute"
+              className="w-72"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                {...field}
+                value={field.value}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          defaultValue={300}
+          name="writeRateLimit"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Global write requests per minute"
+              className="w-72"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                {...field}
+                value={field.value || ""}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          defaultValue={300}
+          name="secretsRateLimit"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Secret requests per minute"
+              className="w-72"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                {...field}
+                value={field.value || ""}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          defaultValue={300}
+          name="authRateLimit"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Auth requests per minute"
+              className="w-72"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                {...field}
+                value={field.value || ""}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          defaultValue={300}
+          name="inviteUserRateLimit"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="User invitation requests per minute"
+              className="w-72"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                {...field}
+                value={field.value || ""}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          defaultValue={300}
+          name="mfaRateLimit"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Multi factor auth requests per minute"
+              className="w-72"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                {...field}
+                value={field.value || ""}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          defaultValue={300}
+          name="creationLimit"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="New resource creation requests per minute"
+              className="w-72"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                {...field}
+                value={field.value || ""}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          defaultValue={300}
+          name="publicEndpointLimit"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Secret sharing requests per minute"
+              className="w-72"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                {...field}
+                value={field.value || ""}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+              />
+            </FormControl>
+          )}
+        />
+      </div>
+      <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting || !isDirty}>
+        Save
+      </Button>
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can configure custom rate limits if you switch to Infisical's Enterprise plan."
+      />
+    </form>
+  );
+};