Merge branch 'heads/main' into daniel/gateway-auth-methods

2026-10-15 00:52:09 +00:00 · 2025-06-05 04:49:35 +04:00
parent 36f1559e5e 6fddecdf82
commit a3584d6a8a
400 changed files with 15599 additions and 1473 deletions
@@ -164,7 +164,7 @@ export const MachineIdentitiesTable = () => {
      <IdentityPanelTable handlePopUpOpen={handlePopUpOpen} />
      <DeleteActionModal
        isOpen={popUp.removeServerAdmin.isOpen}
-        title={`Are you sure want to remove Server Admin permissions from ${
+        title={`Are you sure you want to remove Server Admin permissions from ${
          (popUp?.removeServerAdmin?.data as { name: string })?.name || ""
        }?`}
        subTitle=""
@@ -309,7 +309,7 @@ export const UserIdentitiesTable = () => {
      />
      <DeleteActionModal
        isOpen={popUp.upgradeToServerAdmin.isOpen}
-        title={`Are you sure want to grant Server Admin permissions to ${
+        title={`Are you sure you want to grant Server Admin permissions to ${
          (popUp?.upgradeToServerAdmin?.data as { id: string; username: string })?.username || ""
        }?`}
        subTitle=""
@@ -320,7 +320,7 @@ export const UserIdentitiesTable = () => {
      />
      <DeleteActionModal
        isOpen={popUp.removeServerAdmin.isOpen}
-        title={`Are you sure want to remove Server Admin permissions from ${
+        title={`Are you sure you want to remove Server Admin permissions from ${
          (popUp?.removeServerAdmin?.data as { id: string; username: string })?.username || ""
        }?`}
        subTitle=""
@@ -70,7 +70,7 @@ export const PkiAlertsSection = () => {
      <PkiAlertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deletePkiAlert.isOpen}
-        title={`Are you sure want to remove the alert ${
+        title={`Are you sure you want to remove the alert ${
          (popUp?.deletePkiAlert?.data as { name: string })?.name || ""
        } from the project?`}
        onChange={(isOpen) => handlePopUpToggle("deletePkiAlert", isOpen)}
@@ -70,7 +70,7 @@ export const PkiCollectionSection = () => {
      <PkiCollectionModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deletePkiCollection.isOpen}
-        title={`Are you sure want to remove the alert ${
+        title={`Are you sure you want to remove the alert ${
          (popUp?.deletePkiCollection?.data as { name: string })?.name || ""
        } from the project?`}
        onChange={(isOpen) => handlePopUpToggle("deletePkiCollection", isOpen)}
@@ -135,7 +135,7 @@ const Page = () => {
      <CaInstallCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deleteCa.isOpen}
-        title={`Are you sure want to remove the CA ${
+        title={`Are you sure you 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."
@@ -96,7 +96,7 @@ export const CaSection = () => {
      <CaTable handlePopUpOpen={handlePopUpOpen} />
      <DeleteActionModal
        isOpen={popUp.deleteCa.isOpen}
-        title={`Are you sure want to remove the CA ${
+        title={`Are you sure you 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."
@@ -108,7 +108,7 @@ export const CaSection = () => {
      />
      <DeleteActionModal
        isOpen={popUp.caStatus.isOpen}
-        title={`Are you sure want to ${
+        title={`Are you sure you want to ${
          (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
            ? "enable"
            : "disable"
@@ -97,7 +97,7 @@ export const ExternalCaSection = () => {
      <ExternalCaTable handlePopUpOpen={handlePopUpOpen} />
      <DeleteActionModal
        isOpen={popUp.deleteCa.isOpen}
-        title={`Are you sure want to remove the CA ${
+        title={`Are you sure you 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."
@@ -112,7 +112,7 @@ export const ExternalCaSection = () => {
      />
      <DeleteActionModal
        isOpen={popUp.caStatus.isOpen}
-        title={`Are you sure want to ${
+        title={`Are you sure you want to ${
          (popUp?.caStatus?.data as { status: string })?.status === CaStatus.ACTIVE
            ? "enable"
            : "disable"
@@ -90,7 +90,7 @@ export const CertificateTemplatesSection = ({ caId }: Props) => {
      <CertificateTemplateEnrollmentModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deleteCertificateTemplate.isOpen}
-        title={`Are you sure want to delete the certificate template ${
+        title={`Are you sure you want to delete the certificate template ${
          (popUp?.deleteCertificateTemplate?.data as { name: string })?.name || ""
        } from the project?`}
        onChange={(isOpen) => handlePopUpToggle("deleteCertificateTemplate", isOpen)}
@@ -89,7 +89,7 @@ export const CertificatesSection = () => {
      <CertificateRevocationModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deleteCertificate.isOpen}
-        title={`Are you sure want to remove the certificate ${
+        title={`Are you sure you want to remove the certificate ${
          (popUp?.deleteCertificate?.data as { commonName: string })?.commonName || ""
        } from the project?`}
        onChange={(isOpen) => handlePopUpToggle("deleteCertificate", isOpen)}
@@ -152,7 +152,7 @@ export const PkiCollectionPage = () => {
      <PkiCollectionModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deletePkiCollection.isOpen}
-        title={`Are you sure want to delete the PKI collection ${data?.name ?? ""}?`}
+        title={`Are you sure you want to delete the PKI collection ${data?.name ?? ""}?`}
        onChange={(isOpen) => handlePopUpToggle("deletePkiCollection", isOpen)}
        deleteKey="confirm"
        onDeleteApproved={() =>
@@ -74,7 +74,7 @@ export const PkiCollectionItemsSection = ({ collectionId, type }: Props) => {
      />
      <DeleteActionModal
        isOpen={popUp.deletePkiCollectionItem.isOpen}
-        title={`Are you sure want to remove the item from the collection ${pkiCollection.name}?`}
+        title={`Are you sure you want to remove the item from the collection ${pkiCollection.name}?`}
        onChange={(isOpen) => handlePopUpToggle("deletePkiCollectionItem", isOpen)}
        deleteKey="confirm"
        onDeleteApproved={() => {
@@ -1,5 +1,4 @@
 import { Controller, useForm } from "react-hook-form";
-
 import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -79,14 +79,6 @@ export const DeleteProjectSection = () => {
  };

  const handleLeaveWorkspaceSubmit = async () => {
-    console.log({
-      currentWorkspace,
-      currentOrg,
-      members,
-      isNoAccessMember,
-      membership
-    });
-
    try {
      setIsLeaving.on();

@@ -170,7 +162,7 @@ export const DeleteProjectSection = () => {

      <DeleteActionModal
        isOpen={popUp.deleteWorkspace.isOpen}
-        title="Are you sure want to delete this project?"
+        title="Are you sure you want to delete this project?"
        subTitle={`Permanently delete ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
        onChange={(isOpen) => handlePopUpToggle("deleteWorkspace", isOpen)}
        deleteKey="confirm"
@@ -180,8 +172,8 @@ export const DeleteProjectSection = () => {

      <LeaveProjectModal
        isOpen={popUp.leaveWorkspace.isOpen}
-        title="Are you sure want to leave this project?"
-        subTitle={`If you leave ${currentWorkspace?.name} you will lose access to the project and it's contents.`}
+        title="Are you sure you want to leave this project?"
+        subTitle={`If you leave ${currentWorkspace?.name} you will lose access to the project and its contents.`}
        onChange={(isOpen) => handlePopUpToggle("leaveWorkspace", isOpen)}
        deleteKey="confirm"
        buttonText="Leave Project"
@@ -44,7 +44,7 @@ export const DeleteKmipClientModal = ({ isOpen, onOpenChange, kmipClient }: Prop
  return (
    <DeleteActionModal
      isOpen={isOpen}
-      title={`Are you sure want to delete ${name}?`}
+      title={`Are you sure you want to delete ${name}?`}
      onChange={onOpenChange}
      deleteKey="confirm"
      onDeleteApproved={handleDeleteKmipClient}
@@ -43,7 +43,7 @@ export const DeleteCmekModal = ({ isOpen, onOpenChange, cmek }: Props) => {
  return (
    <DeleteActionModal
      isOpen={isOpen}
-      title={`Are you sure want to delete ${name}?`}
+      title={`Are you sure you want to delete ${name}?`}
      onChange={onOpenChange}
      deleteKey="confirm"
      onDeleteApproved={handleDeleteCmek}
@@ -79,14 +79,6 @@ export const DeleteProjectSection = () => {
  };

  const handleLeaveWorkspaceSubmit = async () => {
-    console.log({
-      currentWorkspace,
-      currentOrg,
-      members,
-      isNoAccessMember,
-      membership
-    });
-
    try {
      setIsLeaving.on();

@@ -170,7 +162,7 @@ export const DeleteProjectSection = () => {

      <DeleteActionModal
        isOpen={popUp.deleteWorkspace.isOpen}
-        title="Are you sure want to delete this project?"
+        title="Are you sure you want to delete this project?"
        subTitle={`Permanently delete ${currentWorkspace?.name} and all of its data. This action is not reversible, so please be careful.`}
        onChange={(isOpen) => handlePopUpToggle("deleteWorkspace", isOpen)}
        deleteKey="confirm"
@@ -180,8 +172,8 @@ export const DeleteProjectSection = () => {

      <LeaveProjectModal
        isOpen={popUp.leaveWorkspace.isOpen}
-        title="Are you sure want to leave this project?"
-        subTitle={`If you leave ${currentWorkspace?.name} you will lose access to the project and it's contents.`}
+        title="Are you sure you want to leave this project?"
+        subTitle={`If you leave ${currentWorkspace?.name} you will lose access to the project and its contents.`}
        onChange={(isOpen) => handlePopUpToggle("leaveWorkspace", isOpen)}
        deleteKey="confirm"
        buttonText="Leave Project"
@@ -80,7 +80,7 @@ export const OrgGroupsSection = () => {
      />
      <DeleteActionModal
        isOpen={popUp.deleteGroup.isOpen}
-        title={`Are you sure want to delete the group named ${
+        title={`Are you sure you want to delete the group named ${
          (popUp?.deleteGroup?.data as { name: string })?.name || ""
        }?`}
        onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
@@ -127,7 +127,7 @@ export const IdentitySection = withPermission(
        <IdentityTokenAuthTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
        <DeleteActionModal
          isOpen={popUp.deleteIdentity.isOpen}
-          title={`Are you sure want to delete ${
+          title={`Are you sure you want to delete ${
            (popUp?.deleteIdentity?.data as { name: string })?.name || ""
          }?`}
          onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
@@ -143,7 +143,7 @@ export const OrgMembersSection = () => {
      />
      <DeleteActionModal
        isOpen={popUp.removeMember.isOpen}
-        title={`Are you sure want to remove member with username ${
+        title={`Are you sure you want to remove member with username ${
          (popUp?.removeMember?.data as { username: string })?.username || ""
        }?`}
        onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
@@ -156,7 +156,7 @@ export const OrgMembersSection = () => {
      />
      <DeleteActionModal
        isOpen={popUp.deactivateMember.isOpen}
-        title={`Are you sure want to deactivate member with username ${
+        title={`Are you sure you want to deactivate member with username ${
          (popUp?.deactivateMember?.data as { username: string })?.username || ""
        }?`}
        onChange={(isOpen) => handlePopUpToggle("deactivateMember", isOpen)}
@@ -1,8 +1,11 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
  faArrowDown,
  faArrowUp,
+  faCheckCircle,
+  faChevronRight,
  faEllipsis,
+  faFilter,
  faMagnifyingGlass,
  faSearch,
  faUsers
@@ -19,7 +22,11 @@ import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
+  DropdownMenuLabel,
  DropdownMenuTrigger,
+  DropdownSubMenu,
+  DropdownSubMenuContent,
+  DropdownSubMenuTrigger,
  EmptyState,
  IconButton,
  Input,
@@ -75,6 +82,10 @@ enum OrgMembersOrderBy {
  Email = "email"
 }

+type Filter = {
+  roles: string[];
+};
+
 export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Props) => {
  const navigate = useNavigate();
  const { subscription } = useSubscription();
@@ -184,17 +195,29 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
    setUserTablePreference("orgMembersTable", PreferenceKey.PerPage, newPerPage);
  };

+  const [filter, setFilter] = useState<Filter>({
+    roles: []
+  });
+
  const filteredUsers = useMemo(
    () =>
      members
-        ?.filter(
-          ({ user: u, inviteEmail }) =>
+        ?.filter(({ user: u, inviteEmail, role, roleId }) => {
+          if (
+            filter.roles.length &&
+            !filter.roles.includes(role === "custom" ? findRoleFromId(roleId)!.slug : role)
+          ) {
+            return false;
+          }
+
+          return (
            u?.firstName?.toLowerCase().includes(search.toLowerCase()) ||
            u?.lastName?.toLowerCase().includes(search.toLowerCase()) ||
            u?.username?.toLowerCase().includes(search.toLowerCase()) ||
            u?.email?.toLowerCase().includes(search.toLowerCase()) ||
            inviteEmail?.toLowerCase().includes(search.toLowerCase())
-        )
+          );
+        })
        .sort((a, b) => {
          const [memberOne, memberTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];

@@ -217,7 +240,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro

          return valueOne.toLowerCase().localeCompare(valueTwo.toLowerCase());
        }),
-    [members, search, orderDirection, orderBy]
+    [members, search, orderDirection, orderBy, filter]
  );

  const handleSort = (column: OrgMembersOrderBy) => {
@@ -236,14 +259,81 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
    setPage
  });

+  const handleRoleToggle = useCallback(
+    (roleSlug: string) =>
+      setFilter((state) => {
+        const currentRoles = state.roles || [];
+
+        if (currentRoles.includes(roleSlug)) {
+          return { ...state, roles: currentRoles.filter((role) => role !== roleSlug) };
+        }
+        return { ...state, roles: [...currentRoles, roleSlug] };
+      }),
+    []
+  );
+
+  const isTableFiltered = Boolean(filter.roles.length);
+
  return (
    <div>
-      <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search members..."
-      />
+      <div className="flex gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              ariaLabel="Filter Users"
+              variant="plain"
+              size="sm"
+              className={twMerge(
+                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                isTableFiltered && "border-primary/50 text-primary"
+              )}
+            >
+              <FontAwesomeIcon icon={faFilter} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-0">
+            <DropdownMenuLabel>Filter By</DropdownMenuLabel>
+            <DropdownSubMenu>
+              <DropdownSubMenuTrigger
+                iconPos="right"
+                icon={<FontAwesomeIcon icon={faChevronRight} size="sm" />}
+              >
+                Roles
+              </DropdownSubMenuTrigger>
+              <DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                  Apply Roles to Filter Users
+                </DropdownMenuLabel>
+                {roles?.map(({ id, slug, name }) => (
+                  <DropdownMenuItem
+                    onClick={(evt) => {
+                      evt.preventDefault();
+                      handleRoleToggle(slug);
+                    }}
+                    key={id}
+                    icon={filter.roles.includes(slug) && <FontAwesomeIcon icon={faCheckCircle} />}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center">
+                      <div
+                        className="mr-2 h-2 w-2 rounded-full"
+                        style={{ background: "#bec2c8" }}
+                      />
+                      {name}
+                    </div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownSubMenuContent>
+            </DropdownSubMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search members..."
+        />
+      </div>
      <TableContainer className="mt-4">
        <Table>
          <THead>
@@ -280,7 +280,7 @@ export const OrgRoleTable = () => {
      <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deleteRole.isOpen}
-        title={`Are you sure want to delete ${
+        title={`Are you sure you want to delete ${
          (popUp?.deleteRole?.data as TOrgRole)?.name || " "
        } role?`}
        onChange={(isOpen) => handlePopUpToggle("deleteRole", isOpen)}
@@ -67,6 +67,15 @@ export const OrgAdminProjects = withPermission(
          });
          return;
        }
+        if (type === ProjectType.SecretScanning) {
+          await navigate({
+            to: "/secret-scanning/$projectId/data-sources" as const,
+            params: {
+              projectId
+            }
+          });
+          return;
+        }
        await navigate({
          to: `/${type}/$projectId/overview` as const,
          params: {
@@ -19,6 +19,7 @@ import { CamundaConnectionForm } from "./CamundaConnectionForm";
 import { DatabricksConnectionForm } from "./DatabricksConnectionForm";
 import { GcpConnectionForm } from "./GcpConnectionForm";
 import { GitHubConnectionForm } from "./GitHubConnectionForm";
+import { GitHubRadarConnectionForm } from "./GitHubRadarConnectionForm";
 import { HCVaultConnectionForm } from "./HCVaultConnectionForm";
 import { HumanitecConnectionForm } from "./HumanitecConnectionForm";
 import { LdapConnectionForm } from "./LdapConnectionForm";
@@ -72,6 +73,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
      return <AwsConnectionForm onSubmit={onSubmit} />;
    case AppConnection.GitHub:
      return <GitHubConnectionForm />;
+    case AppConnection.GitHubRadar:
+      return <GitHubRadarConnectionForm />;
    case AppConnection.GCP:
      return <GcpConnectionForm onSubmit={onSubmit} />;
    case AppConnection.AzureKeyVault:
@@ -150,6 +153,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <AwsConnectionForm appConnection={appConnection} onSubmit={onSubmit} />;
    case AppConnection.GitHub:
      return <GitHubConnectionForm appConnection={appConnection} />;
+    case AppConnection.GitHubRadar:
+      return <GitHubRadarConnectionForm appConnection={appConnection} />;
    case AppConnection.GCP:
      return <GcpConnectionForm appConnection={appConnection} onSubmit={onSubmit} />;
    case AppConnection.AzureKeyVault:
@@ -188,7 +193,6 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <OCIConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.OnePass:
      return <OnePassConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
-
    default:
      throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
  }
@@ -0,0 +1,157 @@
+import crypto from "crypto";
+
+import { useState } from "react";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { isInfisicalCloud } from "@app/helpers/platform";
+import {
+  GitHubRadarConnectionMethod,
+  TGitHubRadarConnection,
+  useGetAppConnectionOption
+} from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TGitHubRadarConnection;
+};
+
+const formSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.GitHubRadar),
+  method: z.nativeEnum(GitHubRadarConnectionMethod)
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export const GitHubRadarConnectionForm = ({ appConnection }: Props) => {
+  const isUpdate = Boolean(appConnection);
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
+  const {
+    option: { appClientSlug },
+    isLoading
+  } = useGetAppConnectionOption(AppConnection.GitHubRadar);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.GitHubRadar,
+      method: GitHubRadarConnectionMethod.App
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  const selectedMethod = watch("method");
+
+  const onSubmit = (formData: FormData) => {
+    setIsRedirecting(true);
+    const state = crypto.randomBytes(16).toString("hex");
+    localStorage.setItem("latestCSRFToken", state);
+    localStorage.setItem(
+      "githubRadarConnectionFormData",
+      JSON.stringify({ ...formData, connectionId: appConnection?.id })
+    );
+
+    switch (formData.method) {
+      case GitHubRadarConnectionMethod.App:
+        window.location.assign(
+          `https://github.com/apps/${appClientSlug}/installations/new?state=${state}`
+        );
+        break;
+      default:
+        throw new Error(
+          `Unhandled GitHub Radar Connection method: ${(formData as FormData).method}`
+        );
+    }
+  };
+
+  let isMissingConfig: boolean;
+
+  switch (selectedMethod) {
+    case GitHubRadarConnectionMethod.App:
+      isMissingConfig = !appClientSlug;
+      break;
+    default:
+      throw new Error(`Unhandled GitHub Radar Connection method: ${selectedMethod}`);
+  }
+
+  const methodDetails = getAppConnectionMethodDetails(selectedMethod);
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.GitHubRadar].name
+              }. This field cannot be changed after creation.`}
+              errorText={
+                !isLoading && isMissingConfig
+                  ? `Environment variables have not been configured. ${
+                      isInfisicalCloud()
+                        ? "Please contact Infisical."
+                        : `See Docs to configure GitHub Radar ${methodDetails.name} Connections.`
+                    }`
+                  : error?.message
+              }
+              isError={Boolean(error?.message) || isMissingConfig}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(GitHubRadarConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting || isRedirecting}
+            isDisabled={isSubmitting || (!isUpdate && !isDirty) || isMissingConfig || isRedirecting}
+          >
+            {isUpdate ? "Reconnect to GitHub" : "Connect to GitHub"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -15,11 +15,19 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {

  return (
    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
-      <img
-        alt={`${appDetails.name} logo`}
-        src={`/images/integrations/${appDetails.image}`}
-        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
-      />
+      <div className="relative">
+        <img
+          alt={`${appDetails.name} logo`}
+          src={`/images/integrations/${appDetails.image}`}
+          className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+        />
+        {appDetails.icon && (
+          <FontAwesomeIcon
+            icon={appDetails.icon}
+            className="absolute bottom-1 right-1 text-primary-700"
+          />
+        )}
+      </div>
      <div>
        <div className="flex items-center text-mineshaft-300">
          {appDetails.name}
@@ -31,7 +31,7 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
  return (
    <div className="grid grid-cols-4 gap-2">
      {appConnectionOptions?.map((option) => {
-        const { image, name, size = 50, enterprise = false } = APP_CONNECTION_MAP[option.app];
+        const { image, name, size = 50, enterprise = false, icon } = APP_CONNECTION_MAP[option.app];

        return (
          <button
@@ -43,14 +43,23 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
            }
            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
          >
-            <img
-              src={`/images/integrations/${image}`}
-              style={{
-                width: `${size}px`
-              }}
-              className="mt-auto"
-              alt={`${name} logo`}
-            />
+            <div className="relative">
+              <img
+                src={`/images/integrations/${image}`}
+                style={{
+                  width: `${size}px`
+                }}
+                className="mt-auto"
+                alt={`${name} logo`}
+              />
+              {icon && (
+                <FontAwesomeIcon
+                  className="absolute -bottom-1.5 -right-1.5 text-primary-700"
+                  size="xl"
+                  icon={icon}
+                />
+              )}
+            </div>
            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
              {name}
            </div>
@@ -65,6 +65,8 @@ export const AppConnectionRow = ({

  const methodDetails = getAppConnectionMethodDetails(method);

+  const connectionDetails = APP_CONNECTION_MAP[app];
+
  return (
    <Tr
      className={twMerge("group h-12 transition-colors duration-100 hover:bg-mineshaft-700")}
@@ -72,12 +74,21 @@ export const AppConnectionRow = ({
    >
      <Td>
        <div className="flex items-center gap-2">
-          <img
-            alt={`${APP_CONNECTION_MAP[app].name} integration`}
-            src={`/images/integrations/${APP_CONNECTION_MAP[app].image}`}
-            className="mr-0.5 w-5"
-          />
-          <span className="hidden lg:inline">{APP_CONNECTION_MAP[app].name}</span>
+          <div className="relative">
+            <img
+              alt={`${connectionDetails.name} integration`}
+              src={`/images/integrations/${connectionDetails.image}`}
+              className="mr-0.5 w-5"
+            />
+            {connectionDetails.icon && (
+              <FontAwesomeIcon
+                icon={connectionDetails.icon}
+                size="xs"
+                className="absolute -bottom-0.5 -right-0.5 text-primary-700"
+              />
+            )}
+          </div>
+          <span className="hidden lg:inline">{connectionDetails.name}</span>
        </div>
      </Td>
      <Td className="!min-w-[8rem] max-w-0">
@@ -44,7 +44,7 @@ export const DeleteAppConnectionModal = ({ isOpen, onOpenChange, appConnection }
    <DeleteActionModal
      isOpen={isOpen}
      onChange={onOpenChange}
-      title={`Are you sure want to delete ${name}?`}
+      title={`Are you sure you want to delete ${name}?`}
      deleteKey={name}
      onDeleteApproved={handleDeleteAppConnection}
    >
@@ -14,6 +14,7 @@ import {
  TAzureClientSecretsConnection,
  TAzureKeyVaultConnection,
  TGitHubConnection,
+  TGitHubRadarConnection,
  useCreateAppConnection,
  useUpdateAppConnection
 } from "@app/hooks/api/appConnections";
@@ -26,6 +27,9 @@ type BaseFormData = {

 type GithubFormData = BaseFormData & Pick<TGitHubConnection, "name" | "method" | "description">;

+type GithubRadarFormData = BaseFormData &
+  Pick<TGitHubRadarConnection, "name" | "method" | "description">;
+
 type AzureKeyVaultFormData = BaseFormData &
  Pick<TAzureKeyVaultConnection, "name" | "method" | "description"> &
  Pick<TAzureKeyVaultConnection["credentials"], "tenantId">;
@@ -40,6 +44,7 @@ type AzureClientSecretsFormData = BaseFormData &

 type FormDataMap = {
  [AppConnection.GitHub]: GithubFormData & { app: AppConnection.GitHub };
+  [AppConnection.GitHubRadar]: GithubRadarFormData & { app: AppConnection.GitHubRadar };
  [AppConnection.AzureKeyVault]: AzureKeyVaultFormData & { app: AppConnection.AzureKeyVault };
  [AppConnection.AzureAppConfiguration]: AzureAppConfigurationFormData & {
    app: AppConnection.AzureAppConfiguration;
@@ -51,6 +56,7 @@ type FormDataMap = {

 const formDataStorageFieldMap: Partial<Record<AppConnection, string>> = {
  [AppConnection.GitHub]: "githubConnectionFormData",
+  [AppConnection.GitHubRadar]: "githubRadarConnectionFormData",
  [AppConnection.AzureKeyVault]: "azureKeyVaultConnectionFormData",
  [AppConnection.AzureAppConfiguration]: "azureAppConfigurationConnectionFormData",
  [AppConnection.AzureClientSecrets]: "azureClientSecretsConnectionFormData"
@@ -318,6 +324,54 @@ export const OAuthCallbackPage = () => {
    };
  }, []);

+  const handleGithubRadar = useCallback(async () => {
+    const formData = getFormData(AppConnection.GitHubRadar);
+    if (formData === null) return null;
+
+    clearState(AppConnection.GitHubRadar);
+
+    const { connectionId, name, description, returnUrl } = formData;
+
+    try {
+      if (connectionId) {
+        await updateAppConnection.mutateAsync({
+          app: AppConnection.GitHubRadar,
+          connectionId,
+          credentials: {
+            code: code as string,
+            installationId: installationId as string
+          }
+        });
+      } else {
+        await createAppConnection.mutateAsync({
+          app: AppConnection.GitHubRadar,
+          name,
+          description,
+          method: GitHubConnectionMethod.App,
+          credentials: {
+            code: code as string,
+            installationId: installationId as string
+          }
+        });
+      }
+    } catch (e: any) {
+      createNotification({
+        title: `Failed to ${connectionId ? "update" : "add"} GitHub Radar Connection`,
+        text: e.message,
+        type: "error"
+      });
+      navigate({
+        to: returnUrl ?? "/organization/app-connections"
+      });
+    }
+
+    return {
+      connectionId,
+      returnUrl,
+      appConnectionName: formData.app
+    };
+  }, []);
+
  // Ensure that the localstorage is ready for use, to avoid the form data being malformed
  useEffect(() => {
    if (!isReady) {
@@ -334,6 +388,8 @@ export const OAuthCallbackPage = () => {

      if (appConnection === AppConnection.GitHub) {
        data = await handleGithub();
+      } else if (appConnection === AppConnection.GitHubRadar) {
+        data = await handleGithubRadar();
      } else if (appConnection === AppConnection.AzureKeyVault) {
        data = await handleAzureKeyVault();
      } else if (appConnection === AppConnection.AzureAppConfiguration) {
@@ -229,7 +229,7 @@ export const GatewayListPage = withPermission(
                  )}
                  <DeleteActionModal
                    isOpen={popUp.deleteGateway.isOpen}
-                    title={`Are you sure want to delete gateway ${
+                    title={`Are you sure you want to delete gateway ${
                      (popUp?.deleteGateway?.data as { name: string })?.name || ""
                    }?`}
                    onChange={(isOpen) => handlePopUpToggle("deleteGateway", isOpen)}
@@ -157,7 +157,7 @@ const Page = () => {
      />
      <DeleteActionModal
        isOpen={popUp.deleteGroup.isOpen}
-        title={`Are you sure want to delete the group named ${
+        title={`Are you sure you want to delete the group named ${
          (popUp?.deleteGroup?.data as { name: string })?.name || ""
        }?`}
        onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
@@ -94,7 +94,7 @@ export const GroupMembersSection = ({ groupId, groupSlug }: Props) => {
      <AddGroupMembersModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.removeMemberFromGroup.isOpen}
-        title={`Are you sure want to remove ${
+        title={`Are you sure you want to remove ${
          (popUp?.removeMemberFromGroup?.data as { username: string })?.username || ""
        } from the group?`}
        onChange={(isOpen) => handlePopUpToggle("removeMemberFromGroup", isOpen)}
@@ -101,7 +101,7 @@ const Page = () => {
      />
      <DeleteActionModal
        isOpen={popUp.deleteIdentity.isOpen}
-        title={`Are you sure want to delete ${
+        title={`Are you sure you want to delete ${
          (popUp?.deleteIdentity?.data as { name: string })?.name || ""
        }?`}
        onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
@@ -66,7 +66,7 @@ export const IdentityProjectsSection = ({ identityId }: Props) => {
      </div>
      <DeleteActionModal
        isOpen={popUp.removeIdentityFromProject.isOpen}
-        title={`Are you sure want to remove ${
+        title={`Are you sure you want to remove ${
          (popUp?.removeIdentityFromProject?.data as { identityName: string })?.identityName || ""
        } from ${
          (popUp?.removeIdentityFromProject?.data as { projectName: string })?.projectName || ""
@@ -218,7 +218,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
      </TableContainer>
      <DeleteActionModal
        isOpen={popUp.revokeToken.isOpen}
-        title={`Are you sure want to revoke ${
+        title={`Are you sure you want to revoke ${
          (popUp?.revokeToken?.data as { name: string })?.name || ""
        }?`}
        onChange={(isOpen) => handlePopUpToggle("revokeToken", isOpen)}
@@ -175,7 +175,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
      </TableContainer>
      <DeleteActionModal
        isOpen={popUp.revokeClientSecret.isOpen}
-        title={`Are you sure want to delete the client secret ${
+        title={`Are you sure you want to delete the client secret ${
          (popUp?.revokeClientSecret?.data as { clientSecretPrefix: string })?.clientSecretPrefix ||
          ""
        }************?`}
@@ -151,7 +151,7 @@ export const Content = ({
      />
      <DeleteActionModal
        isOpen={popUp?.revokeAuthMethod?.isOpen}
-        title={`Are you sure want to remove ${identityAuthToNameMap[authMethod]} on this identity?`}
+        title={`Are you sure you want to remove ${identityAuthToNameMap[authMethod]} on this identity?`}
        onChange={(isOpen) => handlePopUpToggle("revokeAuthMethod", isOpen)}
        deleteKey="confirm"
        buttonText="Remove"
@@ -155,7 +155,7 @@ export const Page = () => {
      <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deleteOrgRole.isOpen}
-        title={`Are you sure want to delete the organization role ${data?.name ?? ""}?`}
+        title={`Are you sure you want to delete the organization role ${data?.name ?? ""}?`}
        onChange={(isOpen) => handlePopUpToggle("deleteOrgRole", isOpen)}
        deleteKey="confirm"
        onDeleteApproved={() => onDeleteOrgRoleSubmit()}
@@ -24,6 +24,8 @@ const formatDescription = (type: ProjectType) => {
    return "Manage your PKI infrastructure and issue digital certificates for services, applications, and devices.";
  if (type === ProjectType.KMS)
    return "Centralize the management of keys for cryptographic operations, such as encryption and decryption.";
+  if (type === ProjectType.SecretScanning)
+    return "Connect and monitor data sources to prevent secret leaks.";
  return "Infisical SSH lets you issue SSH credentials to users for short-lived, secure SSH access to infrastructure.";
 };

@@ -0,0 +1,7 @@
+import { ProjectType } from "@app/hooks/api/workspace/types";
+
+import { ProductOverviewPage } from "../SecretManagerOverviewPage/SecretManagerOverviewPage";
+
+export const SecretScanningOverviewPage = () => (
+  <ProductOverviewPage type={ProjectType.SecretScanning} />
+);
@@ -0,0 +1,23 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { SecretScanningOverviewPage } from "./SecretScanningOverviewPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning/overview"
+)({
+  component: SecretScanningOverviewPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "Secret Scanning",
+        link: linkOptions({ to: "/organization/secret-scanning/overview" })
+      }
+    ]
+  })
+});
@@ -1,227 +0,0 @@
-import { useEffect } from "react";
-import { Helmet } from "react-helmet";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useNavigate, useSearch } from "@tanstack/react-router";
-
-import { OrgPermissionCan } from "@app/components/permissions";
-import { Button, NoticeBanner, PageHeader, Pagination } from "@app/components/v2";
-import { ROUTE_PATHS } from "@app/const/routes";
-import {
-  OrgPermissionActions,
-  OrgPermissionSubjects,
-  useOrganization,
-  useServerConfig
-} from "@app/context";
-import {
-  getUserTablePreference,
-  PreferenceKey,
-  setUserTablePreference
-} from "@app/helpers/userTablePreferences";
-import { withPermission } from "@app/hoc";
-import { usePagination, usePopUp } from "@app/hooks";
-import {
-  useCreateNewInstallationSession,
-  useGetSecretScanningInstallationStatus,
-  useGetSecretScanningRisks,
-  useLinkGitAppInstallationWithOrg
-} from "@app/hooks/api/secretScanning";
-import { SecretScanningOrderBy } from "@app/hooks/api/secretScanning/types";
-
-import { ExportSecretScansModal } from "./components/ExportSecretScansModal";
-import { SecretScanningFilter } from "./components/SecretScanningFilters";
-import { SecretScanningFilterFormData, secretScanningFilterFormSchema } from "./components/types";
-import { SecretScanningLogsTable } from "./components";
-
-export const SecretScanningPage = withPermission(
-  () => {
-    const queryParams = useSearch({
-      from: ROUTE_PATHS.Organization.SecretScanning.id
-    });
-
-    const navigate = useNavigate();
-
-    const { control, watch } = useForm<SecretScanningFilterFormData>({
-      resolver: zodResolver(secretScanningFilterFormSchema),
-      defaultValues: {}
-    });
-
-    const { config } = useServerConfig();
-    const { currentOrg } = useOrganization();
-    const organizationId = currentOrg.id;
-
-    const { offset, limit, orderBy, setPage, perPage, page, setPerPage } = usePagination(
-      SecretScanningOrderBy.CreatedAt,
-      { initPerPage: getUserTablePreference("secretScanningTable", PreferenceKey.PerPage, 20) }
-    );
-
-    const handlePerPageChange = (newPerPage: number) => {
-      setPerPage(newPerPage);
-      setUserTablePreference("secretScanningTable", PreferenceKey.PerPage, newPerPage);
-    };
-
-    const repositoryNames = watch("repositoryNames");
-    const resolvedStatus = watch("resolved");
-
-    const { isPending, data: risksData } = useGetSecretScanningRisks(
-      organizationId,
-      {
-        offset,
-        limit,
-        orderBy
-      },
-      {
-        repositoryNames:
-          repositoryNames?.length > 0 ? repositoryNames.map((repo) => repo.name) : undefined,
-        resolvedStatus
-      }
-    );
-
-    const { mutateAsync: linkGitAppInstallationWithOrganization } =
-      useLinkGitAppInstallationWithOrg();
-    const { mutateAsync: createNewIntegrationSession } = useCreateNewInstallationSession();
-    const {
-      data: installationStatus,
-      isPending: isSecretScanningInstatllationStatusLoading,
-      refetch: refetchSecretScanningInstallationStatus
-    } = useGetSecretScanningInstallationStatus(organizationId);
-    const integrationEnabled =
-      !isSecretScanningInstatllationStatusLoading && installationStatus?.appInstallationCompleted;
-
-    const { handlePopUpToggle, popUp } = usePopUp(["exportSecretScans"]);
-
-    useEffect(() => {
-      const linkInstallation = async () => {
-        if (queryParams.state && queryParams.installation_id) {
-          try {
-            const isLinked = await linkGitAppInstallationWithOrganization({
-              installationId: String(queryParams.installation_id),
-              sessionId: String(queryParams.state)
-            });
-            if (isLinked) {
-              await navigate({
-                to: "/organization/secret-scanning"
-              });
-              refetchSecretScanningInstallationStatus();
-            }
-
-            console.log("installation verification complete");
-          } catch (e) {
-            console.log("app installation is stale, start new session", e);
-          }
-        }
-      };
-      linkInstallation();
-    }, [queryParams.state, queryParams.installation_id]);
-
-    const generateNewIntegrationSession = async () => {
-      const session = await createNewIntegrationSession({ organizationId });
-      window.location.href = `https://github.com/apps/${session.gitAppSlug}/installations/new?state=${session.sessionId}`;
-    };
-
-    return (
-      <div className="py-2">
-        <Helmet>
-          <title>Secret scanning</title>
-          <link rel="icon" href="/infisical.ico" />
-          <meta property="og:image" content="/images/message.png" />
-        </Helmet>
-        <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
-          <div className="w-full max-w-7xl">
-            <PageHeader
-              title="Secret Scanning"
-              description="Automatically monitor your GitHub activity and prevent secret leaks"
-            />
-            {config.isSecretScanningDisabled && (
-              <NoticeBanner title="Secret scanning is in maintenance" className="mb-4">
-                We are working on improving the performance of secret scanning due to increased
-                usage.
-              </NoticeBanner>
-            )}
-            <div className="relative mb-6 flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6">
-              <div className="flex flex-col items-start">
-                <div className="mb-1 flex flex-row">
-                  Secret Scanning Status:{" "}
-                  {integrationEnabled ? (
-                    <p className="ml-1.5 font-semibold text-green">Enabled</p>
-                  ) : (
-                    <p className="ml-1.5 font-semibold text-red">Not enabled</p>
-                  )}
-                </div>
-                <div>
-                  {integrationEnabled ? (
-                    <p className="text-mineshaft-300">
-                      Your GitHub organization is connected to Infisical, and is being continuously
-                      monitored for secret leaks.
-                    </p>
-                  ) : (
-                    <p className="text-mineshaft-300">
-                      Connect your GitHub organization to Infisical.
-                    </p>
-                  )}
-                </div>
-              </div>
-              {integrationEnabled ? (
-                <div>
-                  <div className="absolute right-[2.5rem] top-[2.5rem] flex h-6 w-6 animate-ping items-center justify-center rounded-full bg-green" />
-                  <div className="absolute right-[2.63rem] top-[2.63rem] flex h-5 w-5 animate-ping items-center justify-center rounded-full bg-green" />
-                  <div className="absolute right-[2.82rem] top-[2.82rem] flex h-3.5 w-3.5 animate-ping items-center justify-center rounded-full bg-green" />
-                </div>
-              ) : (
-                <div className="flex h-[3.25rem] items-center">
-                  <OrgPermissionCan
-                    I={OrgPermissionActions.Create}
-                    a={OrgPermissionSubjects.SecretScanning}
-                  >
-                    {(isAllowed) => (
-                      <Button
-                        variant="solid"
-                        colorSchema="primary"
-                        onClick={generateNewIntegrationSession}
-                        className="h-min py-2"
-                        isDisabled={!isAllowed}
-                      >
-                        Integrate with GitHub
-                      </Button>
-                    )}
-                  </OrgPermissionCan>
-                </div>
-              )}
-            </div>
-            <div className="mt-8 space-y-2">
-              {integrationEnabled && (
-                <div className="flex w-full items-center justify-end">
-                  <SecretScanningFilter
-                    repositories={risksData?.repos || []}
-                    handlePopUpToggle={handlePopUpToggle}
-                    control={control}
-                  />
-                </div>
-              )}
-              <SecretScanningLogsTable gitRisks={risksData?.risks} isPending={isPending} />
-              {!isPending && risksData?.totalCount !== undefined && risksData.totalCount >= 10 && (
-                <Pagination
-                  className="rounded-md"
-                  count={risksData.totalCount}
-                  page={page}
-                  perPage={perPage}
-                  onChangePage={(newPage) => setPage(newPage)}
-                  onChangePerPage={handlePerPageChange}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-        <ExportSecretScansModal
-          repositories={risksData?.repos || []}
-          handlePopUpToggle={handlePopUpToggle}
-          popUp={popUp}
-        />
-      </div>
-    );
-  },
-  {
-    action: OrgPermissionActions.Read,
-    subject: OrgPermissionSubjects.SecretScanning
-  }
-);
@@ -1,200 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import FileSaver from "file-saver";
-import { z } from "zod";
-
-import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
-import { useOrganization } from "@app/context";
-import { useExportSecretScanningRisks } from "@app/hooks/api/secretScanning";
-import { SecretScanningResolvedStatus } from "@app/hooks/api/secretScanning/types";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-import { convertJsonToCsv } from "@app/lib/fn/csv";
-
-type Props = {
-  popUp: UsePopUpState<["exportSecretScans"]>;
-  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["exportSecretScans"]>,
-    state?: boolean
-  ) => void;
-  repositories: string[];
-};
-
-enum ExportFormat {
-  Json = "json",
-  Csv = "csv"
-}
-
-const formSchema = z.object({
-  githubRepository: z.string().trim(),
-  status: z.nativeEnum(SecretScanningResolvedStatus),
-  exportFormat: z.nativeEnum(ExportFormat)
-});
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const ExportSecretScansModal = ({ popUp, handlePopUpToggle, repositories }: Props) => {
-  const { currentOrg } = useOrganization();
-  const { mutateAsync } = useExportSecretScanningRisks();
-
-  const {
-    control,
-    handleSubmit,
-    formState: { isSubmitting }
-  } = useForm<TFormSchema>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      exportFormat: ExportFormat.Json,
-      status: SecretScanningResolvedStatus.All,
-      githubRepository: "all"
-    }
-  });
-
-  const onFormSubmit = async (data: TFormSchema) => {
-    const gitRisks = await mutateAsync({
-      orgId: currentOrg.id,
-      filter: {
-        repositoryNames: data.githubRepository !== "all" ? [data.githubRepository] : undefined,
-        resolvedStatus: data.status
-      }
-    });
-
-    const filteredRisks = gitRisks
-      .filter((risk) =>
-        // eslint-disable-next-line no-nested-ternary
-        data.status === SecretScanningResolvedStatus.All
-          ? true
-          : data.status === SecretScanningResolvedStatus.Resolved
-            ? risk.isResolved
-            : !risk.isResolved
-      )
-      .filter((risk) => {
-        if (data.githubRepository === "all") return true;
-        return risk.repositoryFullName === data.githubRepository;
-      });
-
-    const formattedRisks = filteredRisks.map((risk) => {
-      return {
-        repository: risk.repositoryFullName,
-        fileName: risk.file,
-        isResolved: risk.isResolved ? "Resolved" : "Needs Attention",
-        status: risk.status || "UNRESOLVED",
-        entropy: risk.entropy,
-        secretType: risk.ruleID,
-        exposedSecretLink: `https://github.com/${risk.repositoryFullName}/blob/${risk.commit}/${risk.file}#L${risk.startLine}-L${risk.endLine}`,
-        commitAuthor: risk.author,
-        commitAuthorEmail: risk.email,
-        commitDate: risk.createdAt,
-        commitMessage: risk.message,
-        commitFingerprint: risk.fingerprint
-      };
-    });
-
-    const fileName = `infisical-secret-scans-${new Date().toISOString()}`;
-    if (data.exportFormat === ExportFormat.Csv) {
-      const csvBlob = convertJsonToCsv(formattedRisks);
-      FileSaver.saveAs(csvBlob, `${fileName}.csv`);
-    } else if (data.exportFormat === ExportFormat.Json) {
-      const json = JSON.stringify(formattedRisks, null, 2);
-      const blob = new Blob([json], { type: "application/json" });
-      FileSaver.saveAs(blob, `${fileName}.json`);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
-      <Modal
-        isOpen={popUp?.exportSecretScans?.isOpen}
-        onOpenChange={(isOpen) => {
-          handlePopUpToggle("exportSecretScans", isOpen);
-        }}
-      >
-        <ModalContent
-          title="Export Secret Scans"
-          footerContent={[
-            <Button
-              onClick={() => handleSubmit(onFormSubmit)()}
-              isLoading={isSubmitting}
-              type="submit"
-              colorSchema="primary"
-            >
-              Export secret scans
-            </Button>,
-            <Button
-              key="keep-old-btn"
-              className="ml-4"
-              onClick={() => handlePopUpToggle("exportSecretScans", false)}
-              variant="outline_bg"
-              isDisabled={isSubmitting}
-            >
-              Cancel
-            </Button>
-          ]}
-        >
-          <Controller
-            control={control}
-            name="exportFormat"
-            render={({ field: { value, onChange } }) => (
-              <FormControl label="Export Format">
-                <Select
-                  defaultValue={ExportFormat.Json}
-                  value={value}
-                  onValueChange={onChange}
-                  className="w-full"
-                >
-                  {Object.values(ExportFormat).map((format) => (
-                    <SelectItem key={format} value={format}>
-                      {format.toUpperCase()}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="status"
-            render={({ field: { value, onChange } }) => (
-              <FormControl label="Risk Status">
-                <Select
-                  defaultValue="all"
-                  value={value}
-                  onValueChange={onChange}
-                  className="w-full"
-                >
-                  {Object.values(SecretScanningResolvedStatus).map((status) => (
-                    <SelectItem key={status} value={status}>
-                      {status.charAt(0).toUpperCase() + status.slice(1)}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-
-          <Controller
-            control={control}
-            name="githubRepository"
-            render={({ field: { value, onChange } }) => (
-              <FormControl label="GitHub Repository">
-                <Select
-                  defaultValue="all"
-                  value={value}
-                  onValueChange={onChange}
-                  className="w-full"
-                >
-                  <SelectItem value="all">All Repositories</SelectItem>
-                  {repositories.map((repoName) => (
-                    <SelectItem key={repoName} value={repoName}>
-                      {repoName}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-        </ModalContent>
-      </Modal>
-    </form>
-  );
-};
@@ -1,46 +0,0 @@
-import { useState } from "react";
-
-import { OrgPermissionCan } from "@app/components/permissions";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { useUpdateRiskStatus } from "@app/hooks/api/secretScanning";
-import { RiskStatus } from "@app/hooks/api/secretScanning/types";
-
-export const RiskStatusSelection = ({
-  riskId,
-  currentSelection
-}: {
-  riskId: any;
-  currentSelection: any;
-}) => {
-  const [selectedRiskStatus, setSelectedRiskStatus] = useState(currentSelection);
-  const { mutate: updateRiskStatus } = useUpdateRiskStatus();
-  const { currentOrg } = useOrganization();
-  const organizationId = currentOrg.id;
-
-  return (
-    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.SecretScanning}>
-      {(isAllowed) => (
-        <select
-          disabled={!isAllowed}
-          value={selectedRiskStatus}
-          onChange={(e) => {
-            setSelectedRiskStatus(e.target.value);
-            updateRiskStatus({
-              organizationId,
-              status: e.target.value as RiskStatus,
-              riskId
-            });
-          }}
-          className="block w-full rounded-md px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500"
-        >
-          <option>Unresolved</option>
-          <option value={RiskStatus.RESOLVED_FALSE_POSITIVE}>
-            This is a false positive, resolved
-          </option>
-          <option value={RiskStatus.RESOLVED_REVOKED}>I have rotated the secret, resolved</option>
-          <option value={RiskStatus.RESOLVED_NOT_REVOKED}>No rotate needed, resolved</option>
-        </select>
-      )}
-    </OrgPermissionCan>
-  );
-};
@@ -1,89 +0,0 @@
-import { Control, Controller } from "react-hook-form";
-import { twMerge } from "tailwind-merge";
-
-import { Button, FilterableSelect, FormControl, Select, SelectItem } from "@app/components/v2";
-import { SecretScanningResolvedStatus } from "@app/hooks/api/secretScanning/types";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-import { SecretScanningFilterFormData } from "./types";
-
-type Props = {
-  control: Control<SecretScanningFilterFormData>;
-  repositories: string[];
-  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["exportSecretScans"]>,
-    state?: boolean
-  ) => void;
-};
-
-export const SecretScanningFilter = ({ repositories, control, handlePopUpToggle }: Props) => {
-  return (
-    <div className={twMerge("flex w-full flex-wrap items-center justify-between bg-bunker-800")}>
-      <div className="flex items-center -space-x-8">
-        <Controller
-          control={control}
-          name="repositoryNames"
-          render={({ field: { onChange, value }, fieldState: { error } }) => (
-            <FormControl
-              label="Repository"
-              errorText={error?.message}
-              isError={Boolean(error)}
-              className="mr-12 w-96"
-            >
-              <FilterableSelect
-                value={value}
-                isClearable
-                isMulti
-                onChange={onChange}
-                placeholder="Select a repository..."
-                options={repositories.map((repository) => ({
-                  name: repository
-                }))}
-                getOptionValue={(option) => option.name}
-                getOptionLabel={(option) => option.name}
-              />
-            </FormControl>
-          )}
-        />
-
-        <Controller
-          control={control}
-          name="resolved"
-          render={({ field: { onChange, value }, fieldState: { error } }) => (
-            <FormControl
-              label="Status"
-              errorText={error?.message}
-              isError={Boolean(error)}
-              className="mr-12 w-44"
-            >
-              <Select
-                defaultValue={SecretScanningResolvedStatus.All}
-                placeholder={SecretScanningResolvedStatus.All}
-                value={value}
-                onValueChange={onChange}
-                className="w-full"
-              >
-                {Object.values(SecretScanningResolvedStatus).map((status) => (
-                  <SelectItem key={status} value={status}>
-                    {status.charAt(0).toUpperCase() + status.slice(1)} risks
-                  </SelectItem>
-                ))}
-              </Select>
-            </FormControl>
-          )}
-        />
-      </div>
-
-      <div>
-        <Button
-          className="mt-[0.45rem]"
-          onClick={() => handlePopUpToggle("exportSecretScans", true)}
-          variant="solid"
-          colorSchema="secondary"
-        >
-          Export
-        </Button>
-      </div>
-    </div>
-  );
-};
@@ -1,91 +0,0 @@
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
-import { formatDistance } from "date-fns";
-
-import {
-  EmptyState,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { TSecretScanningGitRisks } from "@app/hooks/api/secretScanning/types";
-
-import { RiskStatusSelection } from "./RiskStatusSelection";
-
-type Props = {
-  gitRisks?: TSecretScanningGitRisks[];
-  isPending: boolean;
-};
-
-export const SecretScanningLogsTable = ({ gitRisks, isPending }: Props) => {
-  return (
-    <TableContainer>
-      <Table>
-        <THead>
-          <Tr>
-            <Th className="flex-1">Date</Th>
-            <Th className="flex-1">Secret Type</Th>
-            <Th className="flex-1">View Risk</Th>
-            <Th className="flex-1">Info</Th>
-            <Th className="flex-1">Status</Th>
-            <Th className="flex-1">Action</Th>
-            <Th className="w-5" />
-          </Tr>
-        </THead>
-        <TBody>
-          {!isPending &&
-            gitRisks &&
-            gitRisks?.map((risk) => {
-              return (
-                <Tr key={risk.ruleID} className="h-10">
-                  <Td>{formatDistance(new Date(risk.createdAt), new Date())}</Td>
-                  <Td>{risk.ruleID}</Td>
-                  <Td>
-                    <a
-                      href={`https://github.com/${risk.repositoryFullName}/blob/${risk.commit}/${risk.file}#L${risk.startLine}-L${risk.endLine}`}
-                      target="_blank"
-                      className="text-red-500"
-                      rel="noreferrer"
-                    >
-                      View Exposed Secret
-                    </a>
-                  </Td>
-                  <Td>
-                    <div className="font-bold">
-                      <a href={`https://github.com/${risk.repositoryFullName}`}>
-                        {risk.repositoryFullName}
-                      </a>
-                    </div>
-                    <div className="text-xs">
-                      <span>{risk.file}</span>
-                      <br />
-                      <br />
-                      <span className="font-bold">{risk.author}</span>
-                      <br />
-                      <span>{risk.email}</span>
-                    </div>
-                  </Td>
-                  <Td>{risk.isResolved ? "Resolved" : "Needs Attention"}</Td>
-                  <Td>
-                    <RiskStatusSelection riskId={risk.id} currentSelection={risk.status} />
-                  </Td>
-                </Tr>
-              );
-            })}
-          {isPending && <TableSkeleton columns={7} innerKey="gitRisks" />}
-          {!isPending && gitRisks && gitRisks?.length === 0 && (
-            <Tr>
-              <Td colSpan={7}>
-                <EmptyState title="No risks detected." icon={faCheck} />
-              </Td>
-            </Tr>
-          )}
-        </TBody>
-      </Table>
-    </TableContainer>
-  );
-};
@@ -1 +0,0 @@
-export { SecretScanningLogsTable } from "./SecretScanningLogsTable";
@@ -1,22 +0,0 @@
-import { z } from "zod";
-
-import { SecretScanningResolvedStatus } from "@app/hooks/api/secretScanning/types";
-
-export const secretScanningFilterFormSchema = z.object({
-  repositoryNames: z.array(z.object({ name: z.string() })),
-  resolved: z
-    .nativeEnum(SecretScanningResolvedStatus)
-    .default(SecretScanningResolvedStatus.All)
-    .optional()
-});
-
-export type SecretScanningFilterFormData = z.infer<typeof secretScanningFilterFormSchema>;
-
-export type SetValueType = (
-  name: keyof SecretScanningFilterFormData,
-  value: any,
-  options?: {
-    shouldValidate?: boolean;
-    shouldDirty?: boolean;
-  }
-) => void;
@@ -1,39 +0,0 @@
-import { faHome } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
-import { zodValidator } from "@tanstack/zod-adapter";
-import { z } from "zod";
-
-import { SecretScanningPage } from "./SecretScanningPage";
-
-const SecretScanningQueryParams = z.object({
-  state: z.string().catch(""),
-  installation_id: z.coerce.string().optional()
-});
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning"
-)({
-  validateSearch: zodValidator(SecretScanningQueryParams),
-  component: SecretScanningPage,
-  search: {
-    middlewares: [
-      stripSearchParams({
-        installation_id: "",
-        state: ""
-      })
-    ]
-  },
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Home",
-        icon: () => <FontAwesomeIcon icon={faHome} />,
-        link: linkOptions({ to: "/" })
-      },
-      {
-        label: "Secret Scanning"
-      }
-    ]
-  })
-});
@@ -0,0 +1,20 @@
+import { Helmet } from "react-helmet";
+
+import { ProjectSettings } from "@app/components/projects/ProjectSettings";
+import { PageHeader } from "@app/components/v2";
+
+export const SecretScanningSettingsPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>Secret Scanning Settings</title>
+      </Helmet>
+      <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader title="Secret Scanning Settings" />
+          <ProjectSettings />
+        </div>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,26 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { SecretScanningSettingsPage } from "./SecretScanningSettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning/settings"
+)({
+  component: SecretScanningSettingsPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "Secret Scanning",
+        link: linkOptions({ to: "/organization/secret-scanning/overview" })
+      },
+      {
+        label: "Settings"
+      }
+    ]
+  })
+});
@@ -71,7 +71,8 @@ const formSchema = z
    maxLifetimeUnit: z.enum(["m", "h", "d"], {
      invalid_type_error: "Please select a valid time unit"
    }),
-    maxViewLimit: z.string()
+    maxViewLimit: z.string(),
+    shouldLimitView: z.boolean()
  })
  .superRefine((data, ctx) => {
    const { maxLifetimeValue, maxLifetimeUnit } = data;
@@ -112,8 +113,8 @@ const formSchema = z
 type TForm = z.infer<typeof formSchema>;

 const viewLimitOptions = [
-  { label: "1", value: 1 },
-  { label: "Unlimited", value: -1 }
+  { label: "Unlimited", value: false },
+  { label: "Limited", value: true }
 ];

 export const OrgSecretShareLimitSection = () => {
@@ -125,13 +126,15 @@ export const OrgSecretShareLimitSection = () => {
    return {
      maxLifetimeValue: initialLifetime.maxLifetimeValue,
      maxLifetimeUnit: initialLifetime.maxLifetimeUnit,
-      maxViewLimit: currentOrg?.maxSharedSecretViewLimit?.toString() || "-1"
+      maxViewLimit: currentOrg?.maxSharedSecretViewLimit?.toString() || "1",
+      shouldLimitView: Boolean(currentOrg?.maxSharedSecretViewLimit)
    };
  };

  const {
    control,
    formState: { isSubmitting, isDirty },
+    watch,
    handleSubmit,
    reset
  } = useForm<TForm>({
@@ -139,6 +142,8 @@ export const OrgSecretShareLimitSection = () => {
    defaultValues: getDefaultFormValues()
  });

+  const shouldLimitView = watch("shouldLimitView");
+
  useEffect(() => {
    if (currentOrg) {
      reset(getDefaultFormValues());
@@ -154,8 +159,7 @@ export const OrgSecretShareLimitSection = () => {

      await mutateAsync({
        orgId: currentOrg.id,
-        maxSharedSecretViewLimit:
-          formData.maxViewLimit === "-1" ? null : Number(formData.maxViewLimit),
+        maxSharedSecretViewLimit: formData.shouldLimitView ? Number(formData.maxViewLimit) : null,
        maxSharedSecretLifetime: maxSharedSecretLifetimeSeconds
      });

@@ -249,26 +253,32 @@ export const OrgSecretShareLimitSection = () => {
                )}
              />
            </div>
-            <div className="flex max-w-sm">
+            <div className="flex max-w-sm items-end gap-2">
              <Controller
                control={control}
-                name="maxViewLimit"
-                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                name="shouldLimitView"
+                render={({ field: { onChange, value, ...field }, fieldState: { error } }) => (
                  <FormControl
                    label="Max Views"
                    errorText={error?.message}
                    isError={Boolean(error)}
-                    className="w-full"
+                    className="w-48"
                  >
                    <Select
-                      defaultValue={field.value}
-                      {...field}
-                      onValueChange={(e) => onChange(e)}
+                      defaultValue={value.toString()}
+                      value={value.toString()}
+                      onValueChange={(e) => onChange(e === "true")}
                      className="w-full"
+                      position="popper"
+                      dropdownContainerClassName="max-w-none"
                      isDisabled={!isAllowed}
+                      {...field}
                    >
                      {viewLimitOptions.map(({ label, value: viewLimitValue }) => (
-                        <SelectItem value={String(viewLimitValue || "")} key={label}>
+                        <SelectItem
+                          value={viewLimitValue.toString()}
+                          key={viewLimitValue.toString()}
+                        >
                          {label}
                        </SelectItem>
                      ))}
@@ -276,6 +286,29 @@ export const OrgSecretShareLimitSection = () => {
                  </FormControl>
                )}
              />
+              {shouldLimitView && (
+                <Controller
+                  control={control}
+                  name="maxViewLimit"
+                  render={({ field: { onChange, value, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                      className="w-48"
+                    >
+                      <Input
+                        value={value}
+                        onChange={onChange}
+                        {...field}
+                        min={1}
+                        max={1000}
+                        type="number"
+                        isDisabled={!isAllowed}
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
            </div>
            <Button
              colorSchema="secondary"
@@ -59,7 +59,7 @@ export const OrgDeleteSection = () => {
      </div>
      <DeleteActionModal
        isOpen={popUp.deleteOrg.isOpen}
-        title="Are you sure want to delete this organization?"
+        title="Are you sure you want to delete this organization?"
        subTitle={`Permanently remove ${currentOrg?.name} and all of its data. This action is not reversible, so please be careful.`}
        onChange={(isOpen) => handlePopUpToggle("deleteOrg", isOpen)}
        deleteKey="confirm"
@@ -136,7 +136,7 @@ export const OrgEncryptionTab = withPermission(
        />
        <DeleteActionModal
          isOpen={popUp.removeExternalKms.isOpen}
-          title={`Are you sure want to remove ${
+          title={`Are you sure you want to remove ${
            (popUp?.removeExternalKms?.data as { slug: string })?.slug || ""
          } from ${(popUp?.removeExternalKms?.data as { provider: string })?.provider || ""}?`}
          onChange={(isOpen) => handlePopUpToggle("removeExternalKms", isOpen)}
@@ -305,7 +305,7 @@ export const OrgWorkflowIntegrationTab = withPermission(
        />
        <DeleteActionModal
          isOpen={popUp.removeIntegration.isOpen}
-          title={`Are you sure want to remove ${popUp?.removeIntegration?.data?.slug}?`}
+          title={`Are you sure you want to remove ${popUp?.removeIntegration?.data?.slug}?`}
          onChange={(isOpen) => handlePopUpToggle("removeIntegration", isOpen)}
          deleteKey="confirm"
          onDeleteApproved={handleRemoveIntegration}
@@ -162,7 +162,7 @@ export const GithubOrgSyncConfigModal = ({
      </form>
      <DeleteActionModal
        isOpen={popUp.deleteGithubOrgSyncConfig.isOpen}
-        title="Are you sure want to remove GitHub organization sync?"
+        title="Are you sure you want to remove GitHub organization sync?"
        onChange={(isOpen) => handlePopUpToggle("deleteGithubOrgSyncConfig", isOpen)}
        deleteKey="confirm"
        onDeleteApproved={onDelete}
@@ -301,7 +301,7 @@ export const ScimTokenModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pr
        </TableContainer>
        <DeleteActionModal
          isOpen={popUp.deleteScimToken.isOpen}
-          title="Are you sure want to delete the SCIM token?"
+          title="Are you sure you want to delete the SCIM token?"
          onChange={(isOpen) => handlePopUpToggle("scimToken", isOpen)}
          deleteKey="confirm"
          onDeleteApproved={() => {
@@ -249,7 +249,7 @@ export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }:
            </TableContainer>
            <DeleteActionModal
              isOpen={popUp.deleteLdapGroupMap.isOpen}
-              title={`Are you sure want to delete the group mapping for ${
+              title={`Are you sure you want to delete the group mapping for ${
                (popUp?.deleteLdapGroupMap?.data as { ldapGroupCN: string })?.ldapGroupCN || ""
              }?`}
              onChange={(isOpen) => handlePopUpToggle("deleteLdapGroupMap", isOpen)}
@@ -361,7 +361,7 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
      </Modal>
      <DeleteActionModal
        isOpen={isDeletePopupOpen}
-        title="Are you sure want to delete LDAP?"
+        title="Are you sure you want to delete LDAP?"
        onChange={() => setIsDeletePopupOpen.toggle()}
        deleteKey="confirm"
        onDeleteApproved={handleLdapSoftDelete}
@@ -478,7 +478,7 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
      </Modal>
      <DeleteActionModal
        isOpen={isDeletePopupOpen}
-        title="Are you sure want to delete OIDC?"
+        title="Are you sure you want to delete OIDC?"
        onChange={() => setIsDeletePopupOpen.toggle()}
        deleteKey="confirm"
        onDeleteApproved={handleOidcSoftDelete}
@@ -371,7 +371,7 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
      </Modal>
      <DeleteActionModal
        isOpen={isDeletePopupOpen}
-        title="Are you sure want to delete SAML SSO?"
+        title="Are you sure you want to delete SAML SSO?"
        onChange={() => setIsDeletePopupOpen.toggle()}
        deleteKey="confirm"
        onDeleteApproved={handleSamlSoftDelete}
@@ -259,7 +259,7 @@ const Page = withPermission(
        )}
        <DeleteActionModal
          isOpen={popUp.removeMember.isOpen}
-          title={`Are you sure want to remove member with username ${
+          title={`Are you sure you want to remove member with username ${
            (popUp?.removeMember?.data as { username: string })?.username || ""
          }?`}
          onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
@@ -272,7 +272,7 @@ const Page = withPermission(
        />
        <DeleteActionModal
          isOpen={popUp.deactivateMember.isOpen}
-          title={`Are you sure want to deactivate member with username ${
+          title={`Are you sure you want to deactivate member with username ${
            (popUp?.deactivateMember?.data as { username: string })?.username || ""
          }?`}
          onChange={(isOpen) => handlePopUpToggle("deactivateMember", isOpen)}
@@ -53,7 +53,7 @@ export const UserGroupsSection = ({ orgMembership }: Props) => {

      <DeleteActionModal
        isOpen={popUp.removeUserFromGroup.isOpen}
-        title="Are you sure want to unassign user from group?"
+        title="Are you sure you want to unassign user from group?"
        onChange={(isOpen) => handlePopUpToggle("removeUserFromGroup", isOpen)}
        deleteKey="confirm"
        onDeleteApproved={() => {
@@ -87,7 +87,7 @@ export const GroupsSection = () => {
      <GroupTable handlePopUpOpen={handlePopUpOpen} />
      <DeleteActionModal
        isOpen={popUp.deleteGroup.isOpen}
-        title={`Are you sure want to remove the group ${
+        title={`Are you sure you want to remove the group ${
          (popUp?.deleteGroup?.data as { name: string })?.name || ""
        } from the project?`}
        onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
@@ -432,7 +432,7 @@ export const IdentityTab = withProjectPermission(
          <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
          <DeleteActionModal
            isOpen={popUp.deleteIdentity.isOpen}
-            title={`Are you sure want to remove ${
+            title={`Are you sure you want to remove ${
              (popUp?.deleteIdentity?.data as { name: string })?.name || ""
            } from the project?`}
            onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
@@ -351,7 +351,7 @@ export const SpecificPrivilegeSecretForm = ({
                        isChecked={field.value}
                        onCheckedChange={(isChecked) => field.onChange(isChecked)}
                      />
-                      <div className="ml-1 flex flex-col text-mineshaft-300">
+                      <div className="pointer-events-none ml-1 flex select-none flex-col text-mineshaft-300">
                        <div className="flex flex-row items-center gap-1">
                          <FontAwesomeIcon
                            icon={faEye}
@@ -359,7 +359,7 @@ export const SpecificPrivilegeSecretForm = ({
                          />
                          <FormLabel
                            label="View"
-                            className={`ml-0.5 mt-0 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
                          />
                        </div>
                        <p className="text-xs text-mineshaft-400">Read secret values</p>
@@ -382,7 +382,7 @@ export const SpecificPrivilegeSecretForm = ({
                        isChecked={field.value}
                        onCheckedChange={(isChecked) => field.onChange(isChecked)}
                      />
-                      <div className="ml-1 flex flex-col text-mineshaft-300">
+                      <div className="pointer-events-none ml-1 flex select-none flex-col text-mineshaft-300">
                        <div className="flex flex-row items-center gap-1">
                          <FontAwesomeIcon
                            icon={faPlus}
@@ -390,7 +390,7 @@ export const SpecificPrivilegeSecretForm = ({
                          />
                          <FormLabel
                            label="Create"
-                            className={`ml-0.5 mt-0 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
                          />
                        </div>
                        <p className="text-xs text-mineshaft-400">Create new secrets</p>
@@ -415,7 +415,7 @@ export const SpecificPrivilegeSecretForm = ({
                        isChecked={field.value}
                        onCheckedChange={(isChecked) => field.onChange(isChecked)}
                      />
-                      <div className="ml-1 flex flex-col text-mineshaft-300">
+                      <div className="pointer-events-none ml-1 flex select-none flex-col text-mineshaft-300">
                        <div className="flex flex-row items-center gap-1">
                          <FontAwesomeIcon
                            icon={faPencil}
@@ -423,7 +423,7 @@ export const SpecificPrivilegeSecretForm = ({
                          />
                          <FormLabel
                            label="Modify"
-                            className={`ml-0.5 mt-0 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
                          />
                        </div>
                        <p className="text-xs text-mineshaft-400">Update existing secrets</p>
@@ -446,7 +446,7 @@ export const SpecificPrivilegeSecretForm = ({
                        isChecked={field.value}
                        onCheckedChange={(isChecked) => field.onChange(isChecked)}
                      />
-                      <div className="ml-1 flex flex-col text-mineshaft-300">
+                      <div className="pointer-events-none ml-1 flex select-none flex-col text-mineshaft-300">
                        <div className="flex flex-row items-center gap-1">
                          <FontAwesomeIcon
                            icon={faTrashCan}
@@ -454,7 +454,7 @@ export const SpecificPrivilegeSecretForm = ({
                          />
                          <FormLabel
                            label="Delete"
-                            className={`ml-0.5 mt-0 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                            className={`my-0 ml-0.5 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
                          />
                        </div>
                        <p className="text-xs text-mineshaft-400">Delete existing secrets</p>
@@ -195,7 +195,7 @@ export const ProjectRoleList = () => {
      <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deleteRole.isOpen}
-        title={`Are you sure want to delete ${
+        title={`Are you sure you want to delete ${
          (popUp?.deleteRole?.data as TProjectRole)?.name || " "
        } role?`}
        deleteKey={(popUp?.deleteRole?.data as TProjectRole)?.slug || ""}
@@ -0,0 +1,38 @@
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { ProjectAccessControlTabs } from "@app/types/project";
+
+import { AccessControlPage } from "./AccessControlPage";
+
+const AccessControlPageQuerySchema = z.object({
+  selectedTab: z.nativeEnum(ProjectAccessControlTabs).catch(ProjectAccessControlTabs.Member),
+  requesterEmail: z.string().catch("")
+});
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/access-management"
+)({
+  component: AccessControlPage,
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ requesterEmail: "" })]
+  },
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-scanning/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
+});
@@ -184,7 +184,7 @@ const Page = () => {
          />
          <DeleteActionModal
            isOpen={popUp.deleteIdentity.isOpen}
-            title={`Are you sure want to remove ${identityMembershipDetails?.identity?.name} from the project?`}
+            title={`Are you sure you want to remove ${identityMembershipDetails?.identity?.name} from the project?`}
            onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
            deleteKey="remove"
            onDeleteApproved={() => onRemoveIdentitySubmit()}
@@ -0,0 +1,28 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/identities/$identityId"
+)({
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-scanning/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Identities"
+        }
+      ]
+    };
+  }
+});
@@ -28,6 +28,7 @@ import {
  useGetWorkspaceUserDetails
 } from "@app/hooks/api";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
+import { ProjectType } from "@app/hooks/api/workspace/types";

 import { MemberProjectAdditionalPrivilegeSection } from "./components/MemberProjectAdditionalPrivilegeSection";
 import { MemberRoleDetailsSection } from "./components/MemberRoleDetailsSection";
@@ -70,7 +71,21 @@ export const Page = () => {
            type: "success",
            text: "User privilege assumption has started"
          });
-          window.location.href = `/${currentWorkspace.type}/${currentWorkspace.id}/overview`;
+
+          let page: string;
+
+          switch (currentWorkspace.type) {
+            case ProjectType.SecretScanning:
+              page = "data-sources";
+              break;
+            case ProjectType.CertificateManager:
+              page = "subscribers";
+              break;
+            default:
+              page = "overview";
+          }
+
+          window.location.href = `/${currentWorkspace.type}/${currentWorkspace.id}/${page}`;
        }
      }
    );
@@ -0,0 +1,28 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { MemberDetailsByIDPage } from "./MemberDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/members/$membershipId"
+)({
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-scanning/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Users"
+        }
+      ]
+    };
+  }
+});
@@ -170,7 +170,7 @@ const Page = () => {
      <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
        isOpen={popUp.deleteRole.isOpen}
-        title={`Are you sure want to delete the project role ${data?.name ?? ""}?`}
+        title={`Are you sure you want to delete the project role ${data?.name ?? ""}?`}
        onChange={(isOpen) => handlePopUpToggle("deleteRole", isOpen)}
        deleteKey="confirm"
        onDeleteApproved={() => onDeleteRoleSubmit()}
@@ -21,6 +21,9 @@ import {
  ProjectPermissionPkiTemplateActions,
  ProjectPermissionSecretActions,
  ProjectPermissionSecretRotationActions,
+  ProjectPermissionSecretScanningConfigActions,
+  ProjectPermissionSecretScanningDataSourceActions,
+  ProjectPermissionSecretScanningFindingActions,
  ProjectPermissionSecretSyncActions,
  ProjectPermissionSshHostActions,
  TPermissionCondition,
@@ -98,6 +101,26 @@ const SecretRotationPolicyActionSchema = z.object({
  [ProjectPermissionSecretRotationActions.RotateSecrets]: z.boolean().optional()
 });

+const SecretScanningDataSourcePolicyActionSchema = z.object({
+  [ProjectPermissionSecretScanningDataSourceActions.Read]: z.boolean().optional(),
+  [ProjectPermissionSecretScanningDataSourceActions.Create]: z.boolean().optional(),
+  [ProjectPermissionSecretScanningDataSourceActions.Edit]: z.boolean().optional(),
+  [ProjectPermissionSecretScanningDataSourceActions.Delete]: z.boolean().optional(),
+  [ProjectPermissionSecretScanningDataSourceActions.ReadScans]: z.boolean().optional(),
+  [ProjectPermissionSecretScanningDataSourceActions.ReadResources]: z.boolean().optional(),
+  [ProjectPermissionSecretScanningDataSourceActions.TriggerScans]: z.boolean().optional()
+});
+
+const SecretScanningFindingPolicyActionSchema = z.object({
+  [ProjectPermissionSecretScanningFindingActions.Read]: z.boolean().optional(),
+  [ProjectPermissionSecretScanningFindingActions.Update]: z.boolean().optional()
+});
+
+const SecretScanningConfigPolicyActionSchema = z.object({
+  [ProjectPermissionSecretScanningConfigActions.Read]: z.boolean().optional(),
+  [ProjectPermissionSecretScanningConfigActions.Update]: z.boolean().optional()
+});
+
 const KmipPolicyActionSchema = z.object({
  [ProjectPermissionKmipActions.ReadClients]: z.boolean().optional(),
  [ProjectPermissionKmipActions.CreateClients]: z.boolean().optional(),
@@ -296,7 +319,13 @@ export const projectRoleFormSchema = z.object({
      [ProjectPermissionSub.Kms]: GeneralPolicyActionSchema.array().default([]),
      [ProjectPermissionSub.Cmek]: CmekPolicyActionSchema.array().default([]),
      [ProjectPermissionSub.SecretSyncs]: SecretSyncPolicyActionSchema.array().default([]),
-      [ProjectPermissionSub.Kmip]: KmipPolicyActionSchema.array().default([])
+      [ProjectPermissionSub.Kmip]: KmipPolicyActionSchema.array().default([]),
+      [ProjectPermissionSub.SecretScanningDataSources]:
+        SecretScanningDataSourcePolicyActionSchema.array().default([]),
+      [ProjectPermissionSub.SecretScanningFindings]:
+        SecretScanningFindingPolicyActionSchema.array().default([]),
+      [ProjectPermissionSub.SecretScanningConfigs]:
+        SecretScanningConfigPolicyActionSchema.array().default([])
    })
    .partial()
    .optional()
@@ -746,6 +775,71 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
        formVal[subject]![0][ProjectPermissionSecretSyncActions.ImportSecrets] = true;
      if (canRemoveSecrets)
        formVal[subject]![0][ProjectPermissionSecretSyncActions.RemoveSecrets] = true;
+      return;
+    }
+
+    if (subject === ProjectPermissionSub.SecretScanningDataSources) {
+      const canRead = action.includes(ProjectPermissionSecretScanningDataSourceActions.Read);
+      const canEdit = action.includes(ProjectPermissionSecretScanningDataSourceActions.Edit);
+      const canDelete = action.includes(ProjectPermissionSecretScanningDataSourceActions.Delete);
+      const canCreate = action.includes(ProjectPermissionSecretScanningDataSourceActions.Create);
+      const canReadScans = action.includes(
+        ProjectPermissionSecretScanningDataSourceActions.ReadScans
+      );
+      const canReadResources = action.includes(
+        ProjectPermissionSecretScanningDataSourceActions.ReadResources
+      );
+      const canTriggerScans = action.includes(
+        ProjectPermissionSecretScanningDataSourceActions.TriggerScans
+      );
+
+      if (!formVal[subject]) formVal[subject] = [{}];
+
+      // from above statement we are sure it won't be undefined
+      if (canRead)
+        formVal[subject]![0][ProjectPermissionSecretScanningDataSourceActions.Read] = true;
+      if (canEdit)
+        formVal[subject]![0][ProjectPermissionSecretScanningDataSourceActions.Edit] = true;
+      if (canCreate)
+        formVal[subject]![0][ProjectPermissionSecretScanningDataSourceActions.Create] = true;
+      if (canDelete)
+        formVal[subject]![0][ProjectPermissionSecretScanningDataSourceActions.Delete] = true;
+      if (canReadScans)
+        formVal[subject]![0][ProjectPermissionSecretScanningDataSourceActions.ReadScans] = true;
+      if (canReadResources)
+        formVal[subject]![0][ProjectPermissionSecretScanningDataSourceActions.ReadResources] = true;
+      if (canTriggerScans)
+        formVal[subject]![0][ProjectPermissionSecretScanningDataSourceActions.TriggerScans] = true;
+
+      return;
+    }
+
+    if (subject === ProjectPermissionSub.SecretScanningFindings) {
+      const canRead = action.includes(ProjectPermissionSecretScanningFindingActions.Read);
+      const canUpdate = action.includes(ProjectPermissionSecretScanningFindingActions.Update);
+
+      if (!formVal[subject]) formVal[subject] = [{}];
+
+      // from above statement we are sure it won't be undefined
+      if (canRead) formVal[subject]![0][ProjectPermissionSecretScanningFindingActions.Read] = true;
+      if (canUpdate)
+        formVal[subject]![0][ProjectPermissionSecretScanningFindingActions.Update] = true;
+
+      return;
+    }
+
+    if (subject === ProjectPermissionSub.SecretScanningConfigs) {
+      const canRead = action.includes(ProjectPermissionSecretScanningConfigActions.Read);
+      const canUpdate = action.includes(ProjectPermissionSecretScanningConfigActions.Update);
+
+      if (!formVal[subject]) formVal[subject] = [{}];
+
+      // from above statement we are sure it won't be undefined
+      if (canRead) formVal[subject]![0][ProjectPermissionSecretScanningConfigActions.Read] = true;
+      if (canUpdate)
+        formVal[subject]![0][ProjectPermissionSecretScanningConfigActions.Update] = true;
+
+      return;
    }

    if (subject === ProjectPermissionSub.SshHosts) {
@@ -770,6 +864,8 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
        conditions: conditions ? convertCaslConditionToFormOperator(conditions) : [],
        inverted
      });
+
+      return;
    }

    if (subject === ProjectPermissionSub.PkiSubscribers) {
@@ -1318,6 +1414,65 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
        value: ProjectPermissionKmipActions.GenerateClientCertificates
      }
    ]
+  },
+  [ProjectPermissionSub.SecretScanningDataSources]: {
+    title: "Secret Scanning Data Sources",
+    actions: [
+      {
+        label: "Read Data Sources",
+        value: ProjectPermissionSecretScanningDataSourceActions.Read
+      },
+      {
+        label: "Create Data Sources",
+        value: ProjectPermissionSecretScanningDataSourceActions.Create
+      },
+      {
+        label: "Modify Data Sources",
+        value: ProjectPermissionSecretScanningDataSourceActions.Edit
+      },
+      {
+        label: "Delete Data Sources",
+        value: ProjectPermissionSecretScanningDataSourceActions.Delete
+      },
+      {
+        label: "Read Resources",
+        value: ProjectPermissionSecretScanningDataSourceActions.ReadResources
+      },
+      {
+        label: "Read Scans",
+        value: ProjectPermissionSecretScanningDataSourceActions.ReadScans
+      },
+      {
+        label: "Trigger Scans",
+        value: ProjectPermissionSecretScanningDataSourceActions.TriggerScans
+      }
+    ]
+  },
+  [ProjectPermissionSub.SecretScanningFindings]: {
+    title: "Secret Scanning Findings",
+    actions: [
+      {
+        label: "Read Findings",
+        value: ProjectPermissionSecretScanningFindingActions.Read
+      },
+      {
+        label: "Update Findings",
+        value: ProjectPermissionSecretScanningFindingActions.Update
+      }
+    ]
+  },
+  [ProjectPermissionSub.SecretScanningConfigs]: {
+    title: "Secret Scanning Config",
+    actions: [
+      {
+        label: "Read Config",
+        value: ProjectPermissionSecretScanningConfigActions.Read
+      },
+      {
+        label: "Update Config",
+        value: ProjectPermissionSecretScanningConfigActions.Update
+      }
+    ]
  }
 };

@@ -1371,6 +1526,12 @@ const SshPermissionSubjects = (enabled = false) => ({
  [ProjectPermissionSub.SshHostGroups]: enabled
 });

+const SecretScanningSubject = (enabled = false) => ({
+  [ProjectPermissionSub.SecretScanningDataSources]: enabled,
+  [ProjectPermissionSub.SecretScanningFindings]: enabled,
+  [ProjectPermissionSub.SecretScanningConfigs]: enabled
+});
+
 // scott: this structure ensures we don't forget to add project permissions to their relevant project type
 export const ProjectTypePermissionSubjects: Record<
  ProjectType,
@@ -1381,27 +1542,39 @@ export const ProjectTypePermissionSubjects: Record<
    ...SecretsManagerPermissionSubjects(true),
    ...KmsPermissionSubjects(),
    ...CertificateManagerPermissionSubjects(),
-    ...SshPermissionSubjects()
+    ...SshPermissionSubjects(),
+    ...SecretScanningSubject()
  },
  [ProjectType.KMS]: {
    ...SharedPermissionSubjects,
    ...KmsPermissionSubjects(true),
    ...SecretsManagerPermissionSubjects(),
    ...CertificateManagerPermissionSubjects(),
-    ...SshPermissionSubjects()
+    ...SshPermissionSubjects(),
+    ...SecretScanningSubject()
  },
  [ProjectType.CertificateManager]: {
    ...SharedPermissionSubjects,
    ...CertificateManagerPermissionSubjects(true),
    ...KmsPermissionSubjects(),
    ...SecretsManagerPermissionSubjects(),
-    ...SshPermissionSubjects()
+    ...SshPermissionSubjects(),
+    ...SecretScanningSubject()
  },
  [ProjectType.SSH]: {
    ...SharedPermissionSubjects,
    ...SshPermissionSubjects(true),
    ...CertificateManagerPermissionSubjects(),
    ...KmsPermissionSubjects(),
+    ...SecretsManagerPermissionSubjects(),
+    ...SecretScanningSubject()
+  },
+  [ProjectType.SecretScanning]: {
+    ...SharedPermissionSubjects,
+    ...SecretScanningSubject(true),
+    ...SshPermissionSubjects(),
+    ...CertificateManagerPermissionSubjects(),
+    ...KmsPermissionSubjects(),
    ...SecretsManagerPermissionSubjects()
  }
 };
@@ -1614,6 +1787,56 @@ export const RoleTemplates: Record<ProjectType, RoleTemplate[]> = {
    },
    projectManagerTemplate()
  ],
+  [ProjectType.SecretScanning]: [
+    {
+      id: "scanning-viewer",
+      name: "Secret Scanning Viewing Policies",
+      description: "Grants read access to data sources and findings",
+      permissions: [
+        {
+          subject: ProjectPermissionSub.SecretScanningDataSources,
+          actions: [
+            ProjectPermissionSecretScanningDataSourceActions.Read,
+            ProjectPermissionSecretScanningDataSourceActions.ReadResources,
+            ProjectPermissionSecretScanningDataSourceActions.ReadScans
+          ]
+        },
+        {
+          subject: ProjectPermissionSub.SecretScanningFindings,
+          actions: [ProjectPermissionSecretScanningFindingActions.Read]
+        },
+        {
+          subject: ProjectPermissionSub.SecretScanningConfigs,
+          actions: [ProjectPermissionSecretScanningConfigActions.Read]
+        }
+      ]
+    },
+    {
+      id: "scanning-editor",
+      name: "Secret Scanning Editing Policies",
+      description: "Grants read and edit access to data sources and findings",
+      permissions: [
+        {
+          subject: ProjectPermissionSub.SecretScanningDataSources,
+          actions: Object.values(ProjectPermissionSecretScanningDataSourceActions)
+        },
+        {
+          subject: ProjectPermissionSub.SecretScanningFindings,
+          actions: Object.values(ProjectPermissionSecretScanningFindingActions)
+        },
+        {
+          subject: ProjectPermissionSub.SecretScanningConfigs,
+          actions: [ProjectPermissionSecretScanningConfigActions.Read]
+        }
+      ]
+    },
+    projectManagerTemplate([
+      {
+        subject: ProjectPermissionSub.SecretScanningConfigs,
+        actions: Object.values(ProjectPermissionSecretScanningConfigActions)
+      }
+    ])
+  ],
  [ProjectType.SecretManager]: [
    {
      id: "secret-viewer",
@@ -0,0 +1,28 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { RoleDetailsBySlugPage } from "./RoleDetailsBySlugPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/roles/$roleSlug"
+)({
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-scanning/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Roles"
+        }
+      ]
+    };
+  }
+});
@@ -35,8 +35,8 @@ const expiresInOptions = [
 ];

 const viewLimitOptions = [
-  { label: "1", value: 1 },
-  { label: "Unlimited", value: -1 }
+  { label: "Unlimited", value: false },
+  { label: "Limited", value: true }
 ];

 const schema = z.object({
@@ -45,6 +45,7 @@ const schema = z.object({
  secret: z.string().min(1),
  expiresIn: z.string(),
  viewLimit: z.string(),
+  shouldLimitView: z.boolean(),
  accessType: z.nativeEnum(SecretSharingAccessType).optional(),
  emails: z
    .string()
@@ -96,25 +97,25 @@ export const ShareSecretForm = ({
    ? expiresInOptions.filter((v) => v.value / 1000 <= maxSharedSecretLifetime)
    : expiresInOptions;

-  const filteredViewLimitOptions = maxSharedSecretViewLimit
-    ? viewLimitOptions.filter((v) => v.value > 0 && v.value <= maxSharedSecretViewLimit)
-    : viewLimitOptions;
-
  const {
    control,
    reset,
    handleSubmit,
-    formState: { isSubmitting }
+    formState: { isSubmitting },
+    watch
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      secret: value || "",
-      viewLimit: filteredViewLimitOptions[filteredViewLimitOptions.length - 1].value.toString(),
+      viewLimit: maxSharedSecretViewLimit?.toString() ?? "1",
+      shouldLimitView: Boolean(maxSharedSecretViewLimit),
      expiresIn:
        filteredExpiresInOptions[Math.min(filteredExpiresInOptions.length - 1, 2)].value.toString()
    }
  });

+  const isLimitingView = watch("shouldLimitView");
+
  const onFormSubmit = async ({
    name,
    password,
@@ -122,7 +123,8 @@ export const ShareSecretForm = ({
    expiresIn,
    viewLimit,
    accessType,
-    emails
+    emails,
+    shouldLimitView
  }: FormData) => {
    try {
      const expiresAt = new Date(new Date().getTime() + Number(expiresIn));
@@ -134,7 +136,7 @@ export const ShareSecretForm = ({
        password,
        secretValue: secret,
        expiresAt,
-        expiresAfterViews: viewLimit === "-1" ? undefined : Number(viewLimit),
+        expiresAfterViews: shouldLimitView ? Number(viewLimit) : undefined,
        accessType,
        emails: processedEmails
      });
@@ -320,44 +322,72 @@ export const ShareSecretForm = ({
                  </FormControl>
                )}
              />
-              <Controller
-                control={control}
-                name="viewLimit"
-                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                  <FormControl
-                    label="Max Views"
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                    helperText={
-                      viewLimitOptions.length !== filteredViewLimitOptions.length ? (
-                        <span className="text-yellow-500">
-                          Limited to{" "}
-                          {filteredViewLimitOptions[filteredViewLimitOptions.length - 1].label} by
-                          organization
-                        </span>
-                      ) : undefined
-                    }
-                  >
-                    <Select
-                      defaultValue={field.value}
-                      {...field}
-                      onValueChange={(e) => onChange(e)}
-                      className="w-full"
-                    >
-                      {viewLimitOptions.map(({ label, value: viewLimitValue }) => (
-                        <SelectItem
-                          value={String(viewLimitValue || "")}
-                          key={label}
-                          isDisabled={!filteredViewLimitOptions.some((v) => v.label === label)}
+              <div className="flex w-full items-end gap-2">
+                {maxSharedSecretViewLimit === null && (
+                  <Controller
+                    control={control}
+                    name="shouldLimitView"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Max Views"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                        className="flex-1"
+                      >
+                        <Select
+                          defaultValue={field.value.toString()}
+                          onValueChange={(e) => onChange(e === "true")}
+                          className="w-full"
+                          position="popper"
+                          {...field}
+                          value={field.value.toString()}
+                          dropdownContainerClassName="max-w-none"
                        >
-                          {label}
-                        </SelectItem>
-                      ))}
-                    </Select>
-                  </FormControl>
+                          {viewLimitOptions.map(({ label, value: viewLimitValue }) => (
+                            <SelectItem
+                              value={viewLimitValue.toString()}
+                              key={viewLimitValue.toString()}
+                            >
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
                )}
-              />
-
+                {isLimitingView && (
+                  <Controller
+                    control={control}
+                    name="viewLimit"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        label={maxSharedSecretViewLimit ? "Max Views" : undefined}
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                        className="flex-1"
+                        helperText={
+                          maxSharedSecretViewLimit ? (
+                            <span className="text-yellow-500">
+                              Limited to {maxSharedSecretViewLimit} view
+                              {maxSharedSecretViewLimit === 1 ? "" : "s"} by organization
+                            </span>
+                          ) : undefined
+                        }
+                      >
+                        <Input
+                          onChange={onChange}
+                          {...field}
+                          min={1}
+                          max={maxSharedSecretViewLimit ?? 1000}
+                          type="number"
+                          className="h-[37px]"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
+              </div>
              {!isPublic && (
                <Controller
                  control={control}
@@ -91,7 +91,7 @@ export const IPAllowlistSection = () => {
      />
      <DeleteActionModal
        isOpen={popUp.deleteTrustedIp.isOpen}
-        title={`Are you sure want to delete ${
+        title={`Are you sure you want to delete ${
          (popUp?.deleteTrustedIp?.data as { name: string })?.name || " "
        }?`}
        onChange={(isOpen) => handlePopUpToggle("deleteTrustedIp", isOpen)}
@@ -166,7 +166,7 @@ export const IntegrationDetailsByIDPage = () => {

      <DeleteActionModal
        isOpen={popUp.deleteConfirmation.isOpen}
-        title={`Are you sure want to remove ${integration?.integration || " "} integration for ${
+        title={`Are you sure you want to remove ${integration?.integration || " "} integration for ${
          integration?.app || "this project"
        }?`}
        onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
@@ -237,7 +237,7 @@ export const CloudIntegrationSection = ({
      )}
      <DeleteActionModal
        isOpen={popUp.deleteConfirmation.isOpen}
-        title={`Are you sure want to revoke access ${
+        title={`Are you sure you want to revoke access ${
          (popUp?.deleteConfirmation.data as TRevokeIntegrationPopUp)?.provider || " "
        }?`}
        subTitle="This will remove all the secret integration of this provider!!!"
@@ -202,7 +202,7 @@ export const NativeIntegrationsTab = () => {
      )}
      <DeleteActionModal
        isOpen={popUp.deleteConfirmation.isOpen}
-        title={`Are you sure want to remove ${
+        title={`Are you sure you want to remove ${
          (popUp?.deleteConfirmation.data as TIntegration)?.integration || " "
        } integration for ${
          (popUp?.deleteConfirmation.data as TIntegration)?.app || "this project"
@@ -252,7 +252,7 @@ export const SecretSyncRow = ({
                <FontAwesomeIcon icon={faEllipsisV} />
              </IconButton>
            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
+            <DropdownMenuContent sideOffset={2} align="end">
              <DropdownMenuItem
                icon={<FontAwesomeIcon icon={isIdCopied ? faCheck : faCopy} />}
                onClick={(e) => {
@@ -224,8 +224,7 @@ export const SecretApprovalRequest = () => {
                    createdAt,
                    reviewers,
                    status,
-                    committerUser,
-                    isReplicated: isReplication
+                    committerUser
                  } = secretApproval;
                  const isReviewed = reviewers.some(
                    ({ status: reviewStatus, userId }) =>
@@ -244,13 +243,15 @@ export const SecretApprovalRequest = () => {
                    >
                      <div className="mb-1">
                        <FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
-                        {generateCommitText(commits)}
+                        {secretApproval.isReplicated
+                          ? `${commits.length} secret pending import`
+                          : generateCommitText(commits)}
                        <span className="text-xs text-bunker-300"> #{secretApproval.slug}</span>
                      </div>
                      <span className="text-xs text-gray-500">
                        Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
                        {committerUser?.firstName || ""} {committerUser?.lastName || ""} (
-                        {committerUser?.email}){isReplication && " via replication"}
+                        {committerUser?.email})
                        {!isReviewed && status === "open" && " - Review required"}
                      </span>
                    </div>
@@ -12,7 +12,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import { Tag, Tooltip } from "@app/components/v2";
+import { SecretInput, Tag, Tooltip } from "@app/components/v2";
 import { CommitType, SecretV3Raw, TSecretApprovalSecChange, WsTag } from "@app/hooks/api/types";

 export type Props = {
@@ -86,10 +86,10 @@ export const SecretApprovalRequestChangeItem = ({
          {op === CommitType.UPDATE || op === CommitType.DELETE ? (
            <div className="flex w-full cursor-default flex-col rounded-md border border-red-600/60 bg-red-600/10 p-4 xl:w-1/2">
              <div className="mb-4 flex flex-row justify-between">
-                <span className="text-md font-medium">Legacy Secret</span>
+                <span className="text-md font-medium">Previous Secret</span>
                <div className="rounded-full bg-red px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
                  <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
-                  Deprecated
+                  Previous
                </div>
              </div>
              <div className="mb-2">
@@ -104,34 +104,29 @@ export const SecretApprovalRequestChangeItem = ({
                      Rotated Secret value will not be affected
                    </span>
                  ) : (
-                    <div
-                      onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
-                      className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2"
-                    >
+                    <div className="relative">
+                      <SecretInput
+                        isReadOnly
+                        isVisible={isOldSecretValueVisible}
+                        value={secretVersion?.secretValue}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-700 px-2 py-1.5"
+                      />
                      <div
-                        className={`flex font-mono ${isOldSecretValueVisible || !secretVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
+                        className="absolute right-1 top-1"
+                        onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
                      >
-                        {isOldSecretValueVisible
-                          ? secretVersion?.secretValue || "EMPTY"
-                          : secretVersion?.secretValue
-                            ? secretVersion?.secretValue?.split("").map(() => "•")
-                            : "EMPTY"}{" "}
+                        <FontAwesomeIcon
+                          icon={isOldSecretValueVisible ? faEyeSlash : faEye}
+                          className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                        />
                      </div>
-                      {secretVersion?.secretValue && (
-                        <div className="flex h-10 w-10 items-center justify-center">
-                          <FontAwesomeIcon
-                            icon={isOldSecretValueVisible ? faEyeSlash : faEye}
-                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
-                          />
-                        </div>
-                      )}
                    </div>
                  )}
                </div>
              </div>
              <div className="mb-2">
                <div className="text-sm font-medium text-mineshaft-300">Comment</div>
-                <div className="text-sm">
+                <div className="max-h-[5rem] overflow-y-auto text-sm">
                  {secretVersion?.secretComment || (
                    <span className="text-sm text-mineshaft-300">-</span>
                  )}{" "}
@@ -191,8 +186,7 @@ export const SecretApprovalRequestChangeItem = ({
            </div>
          ) : (
            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
-              {" "}
-              Secret not existent in the previous version.
+              Secret did not exist in the previous version.
            </div>
          )}
          {op === CommitType.UPDATE || op === CommitType.CREATE ? (
@@ -201,7 +195,7 @@ export const SecretApprovalRequestChangeItem = ({
                <span className="text-md font-medium">New Secret</span>
                <div className="rounded-full bg-green-600 px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
                  <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
-                  Current
+                  New
                </div>
              </div>
              <div className="mb-2">
@@ -216,34 +210,29 @@ export const SecretApprovalRequestChangeItem = ({
                      Rotated Secret value will not be affected
                    </span>
                  ) : (
-                    <div
-                      onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
-                      className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2"
-                    >
+                    <div className="relative">
+                      <SecretInput
+                        isReadOnly
+                        isVisible={isNewSecretValueVisible}
+                        value={newVersion?.secretValue}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-700 px-2 py-1.5"
+                      />
                      <div
-                        className={`flex font-mono ${isNewSecretValueVisible || !newVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
+                        className="absolute right-1 top-1"
+                        onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
                      >
-                        {isNewSecretValueVisible
-                          ? newVersion?.secretValue || "EMPTY"
-                          : newVersion?.secretValue
-                            ? newVersion?.secretValue?.split("").map(() => "•")
-                            : "EMPTY"}{" "}
+                        <FontAwesomeIcon
+                          icon={isNewSecretValueVisible ? faEyeSlash : faEye}
+                          className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                        />
                      </div>
-                      {newVersion?.secretValue && (
-                        <div className="flex h-10 w-10 items-center justify-center">
-                          <FontAwesomeIcon
-                            icon={isNewSecretValueVisible ? faEyeSlash : faEye}
-                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
-                          />
-                        </div>
-                      )}
                    </div>
                  )}
                </div>
              </div>
              <div className="mb-2">
                <div className="text-sm font-medium text-mineshaft-300">Comment</div>
-                <div className="text-sm">
+                <div className="max-h-[5rem] overflow-y-auto text-sm">
                  {newVersion?.secretComment || (
                    <span className="text-sm text-mineshaft-300">-</span>
                  )}{" "}
@@ -302,7 +291,7 @@ export const SecretApprovalRequestChangeItem = ({
          ) : (
            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
              {" "}
-              Secret not existent in the new version.
+              Secret did not exist in the previous version.
            </div>
          )}
        </div>
@@ -30,19 +30,24 @@ import {
  TextArea,
  Tooltip
 } from "@app/components/v2";
-import { useUser } from "@app/context";
+import { useUser, useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
  useGetSecretApprovalRequestDetails,
+  useGetSecretImports,
  useUpdateSecretApprovalReviewStatus
 } from "@app/hooks/api";
 import { ApprovalStatus, CommitType } from "@app/hooks/api/types";
-import { formatReservedPaths } from "@app/lib/fn/string";
+import { formatReservedPaths, parsePathFromReplicatedPath } from "@app/lib/fn/string";

 import { SecretApprovalRequestAction } from "./SecretApprovalRequestAction";
 import { SecretApprovalRequestChangeItem } from "./SecretApprovalRequestChangeItem";

-export const generateCommitText = (commits: { op: CommitType }[] = []) => {
+export const generateCommitText = (commits: { op: CommitType }[] = [], isReplicated = false) => {
+  if (isReplicated) {
+    return <span>{commits.length} secret pending import</span>;
+  }
+
  const score: Record<string, number> = {};
  commits.forEach(({ op }) => {
    score[op] = (score?.[op] || 0) + 1;
@@ -74,7 +79,6 @@ export const generateCommitText = (commits: { op: CommitType }[] = []) => {
        <span style={{ color: "#F83030" }}> deleted</span>
      </span>
    );
-
  return text;
 };

@@ -105,6 +109,7 @@ export const SecretApprovalRequestChanges = ({
  workspaceId
 }: Props) => {
  const { user: userSession } = useUser();
+  const { currentWorkspace } = useWorkspace();
  const {
    data: secretApprovalRequestDetails,
    isSuccess: isSecretApprovalRequestSuccess,
@@ -112,6 +117,20 @@ export const SecretApprovalRequestChanges = ({
  } = useGetSecretApprovalRequestDetails({
    id: approvalRequestId
  });
+  const approvalSecretPath = parsePathFromReplicatedPath(
+    secretApprovalRequestDetails?.secretPath || ""
+  );
+  const { data: secretImports } = useGetSecretImports({
+    environment: secretApprovalRequestDetails?.environment || "",
+    projectId: currentWorkspace.id,
+    path: approvalSecretPath
+  });
+
+  const replicatedImport = secretApprovalRequestDetails?.isReplicated
+    ? secretImports?.find(
+        (el) => secretApprovalRequestDetails?.secretPath?.includes(el.id) && el.isReplication
+      )
+    : undefined;

  const {
    mutateAsync: updateSecretApprovalRequestStatus,
@@ -226,34 +245,16 @@ export const SecretApprovalRequestChanges = ({
                : secretApprovalRequestDetails.status}
            </span>
          </div>
-          <div className="flex flex-grow flex-col">
-            <div className="text-lg">
-              {generateCommitText(secretApprovalRequestDetails.commits)}
-              {secretApprovalRequestDetails.isReplicated && (
-                <span className="text-sm text-bunker-300"> (replication)</span>
+          <div className="flex-grow flex-col">
+            <div className="text-xl">
+              {generateCommitText(
+                secretApprovalRequestDetails.commits,
+                secretApprovalRequestDetails.isReplicated
              )}
            </div>
-            <div className="text-sm text-bunker-300">
-              <p className="inline">
-                {secretApprovalRequestDetails?.committerUser?.firstName || ""}
-                {secretApprovalRequestDetails?.committerUser?.lastName || ""} (
-                {secretApprovalRequestDetails?.committerUser?.email}) wants to change{" "}
-                {secretApprovalRequestDetails.commits.length} secret values in
-              </p>
-              <p className="mx-1 inline rounded bg-primary-600/40 px-1 py-1 text-primary-300">
-                {secretApprovalRequestDetails.environment}
-              </p>
-              <div className="inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
-                <p className="cursor-default border-r border-mineshaft-500 pr-1">
-                  <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
-                </p>
-                <p
-                  className="cursor-default truncate pb-0.5 pl-2 text-sm"
-                  style={{ maxWidth: "10rem" }}
-                >
-                  {formatReservedPaths(secretApprovalRequestDetails.secretPath)}
-                </p>
-              </div>
+            <div className="flex items-center space-x-2 text-xs text-gray-400">
+              By {secretApprovalRequestDetails?.committerUser?.firstName} (
+              {secretApprovalRequestDetails?.committerUser?.email})
            </div>
          </div>
          {!hasMerged &&
@@ -367,6 +368,82 @@ export const SecretApprovalRequestChanges = ({
              </DropdownMenu>
            )}
        </div>
+        <div className="mb-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
+          <div>
+            {secretApprovalRequestDetails.isReplicated ? (
+              <div className="text-sm text-bunker-300">
+                A secret import in
+                <p
+                  className="mx-1 inline rounded bg-primary-600/40 text-primary-300"
+                  style={{ padding: "2px 4px" }}
+                >
+                  {secretApprovalRequestDetails?.environment}
+                </p>
+                <div className="mr-2 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
+                  <p className="cursor-default border-r border-mineshaft-500 pr-1">
+                    <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
+                  </p>
+                  <Tooltip content={approvalSecretPath}>
+                    <p
+                      className="cursor-default truncate pb-0.5 pl-2 text-sm"
+                      style={{ maxWidth: "15rem" }}
+                    >
+                      {approvalSecretPath}
+                    </p>
+                  </Tooltip>
+                </div>
+                has pending changes to be accepted from its source at{" "}
+                <p
+                  className="mx-1 inline rounded bg-primary-600/40 text-primary-300"
+                  style={{ padding: "2px 4px" }}
+                >
+                  {replicatedImport?.importEnv?.slug}
+                </p>
+                <div className="inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
+                  <p className="cursor-default border-r border-mineshaft-500 pr-1">
+                    <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
+                  </p>
+                  <Tooltip content={replicatedImport?.importPath}>
+                    <p
+                      className="cursor-default truncate pb-0.5 pl-2 text-sm"
+                      style={{ maxWidth: "15rem" }}
+                    >
+                      {replicatedImport?.importPath}
+                    </p>
+                  </Tooltip>
+                </div>
+                . Approving these changes will add them to that import.
+              </div>
+            ) : (
+              <div className="text-sm text-bunker-300">
+                <p className="inline">Secret(s) in</p>
+                <p
+                  className="mx-1 inline rounded bg-primary-600/40 text-primary-300"
+                  style={{ padding: "2px 4px" }}
+                >
+                  {secretApprovalRequestDetails?.environment}
+                </p>
+                <div className="mr-1 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
+                  <p className="cursor-default border-r border-mineshaft-500 pr-1">
+                    <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
+                  </p>
+                  <Tooltip content={formatReservedPaths(secretApprovalRequestDetails.secretPath)}>
+                    <p
+                      className="cursor-default truncate pb-0.5 pl-2 text-sm"
+                      style={{ maxWidth: "20rem" }}
+                    >
+                      {formatReservedPaths(secretApprovalRequestDetails.secretPath)}
+                    </p>
+                  </Tooltip>
+                </div>
+                <p className="inline">
+                  have pending changes. Approving these changes will add them to that environment
+                  and path.
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
        <div className="flex flex-col space-y-4">
          {secretApprovalRequestDetails.commits.map(
            ({ op, secretVersion, secret, ...newVersion }, index) => (
@@ -20,6 +20,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 const formSchema = z.object({
  provider: z.object({
@@ -54,7 +55,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -36,6 +36,7 @@ import { SapHanaInputForm } from "./SapHanaInputForm";
 import { SnowflakeInputForm } from "./SnowflakeInputForm";
 import { SqlDatabaseInputForm } from "./SqlDatabaseInputForm";
 import { TotpInputForm } from "./TotpInputForm";
+import { VerticaInputForm } from "./VerticaInputForm";

 type Props = {
  isOpen?: boolean;
@@ -127,6 +128,11 @@ const DYNAMIC_SECRET_LIST = [
    provider: DynamicSecretProviders.Totp,
    title: "TOTP"
  },
+  {
+    icon: <FontAwesomeIcon icon={faDatabase} size="lg" />,
+    provider: DynamicSecretProviders.Vertica,
+    title: "Vertica"
+  },
  {
    icon: <SiKubernetes size="1.5rem" />,
    provider: DynamicSecretProviders.Kubernetes,
@@ -498,6 +504,25 @@ export const CreateDynamicSecretForm = ({
                />
              </motion.div>
            )}
+          {wizardStep === WizardSteps.ProviderInputs &&
+            selectedProvider === DynamicSecretProviders.Vertica && (
+              <motion.div
+                key="dynamic-vertica-step"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <VerticaInputForm
+                  onCompleted={handleFormReset}
+                  onCancel={handleFormReset}
+                  projectSlug={projectSlug}
+                  secretPath={secretPath}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
+                />
+              </motion.div>
+            )}
        </AnimatePresence>
      </ModalContent>
    </Modal>
@@ -21,6 +21,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 const authMethods = [
  {
@@ -75,7 +76,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -31,6 +31,7 @@ import { OrgGatewayPermissionActions } from "@app/context/OrgPermissionContext/t
 import { gatewaysQueryKeys, useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 enum CredentialType {
  Dynamic = "dynamic",
@@ -74,7 +75,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() })
 });

@@ -19,6 +19,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 enum CredentialType {
  Dynamic = "dynamic",
@@ -78,7 +79,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -24,6 +24,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 const formSchema = z.object({
  provider: z.object({
@@ -65,7 +66,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -19,6 +19,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 const formSchema = z.object({
  provider: z.object({
@@ -55,7 +56,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -19,6 +19,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 const formSchema = z.object({
  provider: z.object({
@@ -59,7 +60,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -20,6 +20,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 const formSchema = z.object({
  provider: z.object({
@@ -52,7 +53,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -19,6 +19,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 const formSchema = z.object({
  provider: z.object({
@@ -50,7 +51,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -20,6 +20,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 const formSchema = z.object({
  provider: z.object({
@@ -52,7 +53,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -21,6 +21,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 const formSchema = z.object({
  provider: z.object({
@@ -52,11 +53,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z
-    .string()
-    .trim()
-    .min(1)
-    .refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  usernameTemplate: z.string().nullable().optional()
 });
@@ -29,6 +29,7 @@ import {
 import { gatewaysQueryKeys, useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders, SqlProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 import { MetadataForm } from "../../DynamicSecretListView/MetadataForm";

@@ -88,7 +89,7 @@ const formSchema = z.object({
      if (valMs > 24 * 60 * 60 * 1000)
        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
    }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() }),
  metadata: z
    .object({
@@ -16,6 +16,7 @@ import {
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { slugSchema } from "@app/lib/schemas";

 enum ConfigType {
  URL = "url",
@@ -56,11 +57,7 @@ const formSchema = z.object({
      digits: z.number().optional()
    })
  ]),
-  name: z
-    .string()
-    .trim()
-    .min(1)
-    .refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  name: slugSchema(),
  environment: z.object({ name: z.string(), slug: z.string() })
 });

@@ -0,0 +1,610 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FilterableSelect,
+  FormControl,
+  Input,
+  Select,
+  SelectItem,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import { gatewaysQueryKeys, useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
+
+const passwordRequirementsSchema = z
+  .object({
+    length: z.number().min(8).max(250),
+    required: z
+      .object({
+        lowercase: z.number().min(0),
+        uppercase: z.number().min(0),
+        digits: z.number().min(0),
+        symbols: z.number().min(0)
+      })
+      .refine((data) => {
+        const total = Object.values(data).reduce((sum, count) => sum + count, 0);
+        return total <= 250;
+      }, "Sum of required characters cannot exceed 250"),
+    allowedSymbols: z.string().optional()
+  })
+  .refine((data) => {
+    const total = Object.values(data.required).reduce((sum, count) => sum + count, 0);
+    return total <= data.length;
+  }, "Sum of required characters cannot exceed the total length");
+
+const formSchema = z.object({
+  provider: z.object({
+    host: z.string().toLowerCase().min(1),
+    port: z.coerce.number(),
+    database: z.string().min(1),
+    username: z.string().min(1),
+    password: z.string().min(1),
+    passwordRequirements: passwordRequirementsSchema.optional(),
+    creationStatement: z.string().min(1),
+    revocationStatement: z.string().min(1),
+    gatewayId: z.string().optional()
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  usernameTemplate: z.string().nullable().optional()
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onCompleted: () => void;
+  onCancel: () => void;
+  secretPath: string;
+  projectSlug: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
+};
+
+export const VerticaInputForm = ({
+  onCompleted,
+  onCancel,
+  environments,
+  secretPath,
+  projectSlug,
+  isSingleEnvironmentMode
+}: Props) => {
+  const {
+    control,
+    watch,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      provider: {
+        database: "",
+        port: 5433,
+        passwordRequirements: {
+          length: 48,
+          required: {
+            lowercase: 1,
+            uppercase: 1,
+            digits: 1,
+            symbols: 0
+          },
+          allowedSymbols: "-_.~!*"
+        },
+        creationStatement: `CREATE USER {{username}} IDENTIFIED BY '{{password}}';
+GRANT CREATE ON SCHEMA public TO {{username}};`,
+        revocationStatement: "DROP USER {{username}} CASCADE;"
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined,
+      usernameTemplate: "{{randomUsername}}"
+    }
+  });
+
+  const createDynamicSecret = useCreateDynamicSecret();
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
+
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment,
+    usernameTemplate
+  }: TForm) => {
+    if (createDynamicSecret.isPending) return;
+    try {
+      const isDefaultUsernameTemplate = usernameTemplate === "{{randomUsername}}";
+      await createDynamicSecret.mutateAsync({
+        provider: { type: DynamicSecretProviders.Vertica, inputs: provider },
+        maxTTL,
+        name,
+        path: secretPath,
+        defaultTTL,
+        projectSlug,
+        environmentSlug: environment.slug,
+        usernameTemplate:
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
+      });
+      onCompleted();
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Failed to create dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="name"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-secret" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+            </div>
+            <div>
+              <OrgPermissionCan
+                I={OrgGatewayPermissionActions.AttachGateways}
+                a={OrgPermissionSubjects.Gateway}
+              >
+                {(isAllowed) => (
+                  <Controller
+                    control={control}
+                    name="provider.gatewayId"
+                    defaultValue=""
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        label="Gateway"
+                      >
+                        <Tooltip
+                          isDisabled={isAllowed}
+                          content="Restricted access. You don't have permission to attach gateways to resources."
+                        >
+                          <div>
+                            <Select
+                              isDisabled={!isAllowed}
+                              value={value}
+                              onValueChange={onChange}
+                              className="w-full border border-mineshaft-500"
+                              dropdownContainerClassName="max-w-none"
+                              isLoading={isGatewaysLoading}
+                              placeholder="Default: Internet Gateway"
+                              position="popper"
+                            >
+                              <SelectItem
+                                value={null as unknown as string}
+                                onClick={() => onChange(undefined)}
+                              >
+                                Internet Gateway
+                              </SelectItem>
+                              {gateways?.map((el) => (
+                                <SelectItem value={el.id} key={el.id}>
+                                  {el.name}
+                                </SelectItem>
+                              ))}
+                            </Select>
+                          </div>
+                        </Tooltip>
+                      </FormControl>
+                    )}
+                  />
+                )}
+              </OrgPermissionCan>
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.host"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Host"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input placeholder="Vertica Host" {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.port"
+                  defaultValue={5433}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Port"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.database"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Database"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="text" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex w-full items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.username"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className="w-full"
+                      label="User"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} autoComplete="off" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className="w-full"
+                      label="Password"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div>
+                <Accordion type="multiple" className="mb-2 w-full bg-mineshaft-700">
+                  <AccordionItem value="advance-statements">
+                    <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
+                    <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="usernameTemplate"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Username Template"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input
+                              {...field}
+                              value={field.value || undefined}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                              placeholder="{{randomUsername}}"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="provider.creationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Creation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="provider.revocationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Revocation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+                <Accordion type="multiple" className="mb-2 mt-4 w-full bg-mineshaft-700">
+                  <AccordionItem value="password-config">
+                    <AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
+                    <AccordionContent>
+                      <div className="mb-4 text-sm text-mineshaft-300">
+                        Set constraints on the generated database password
+                      </div>
+                      <div className="space-y-4">
+                        <div>
+                          <Controller
+                            control={control}
+                            name="provider.passwordRequirements.length"
+                            defaultValue={48}
+                            render={({ field, fieldState: { error } }) => (
+                              <FormControl
+                                label="Password Length"
+                                isError={Boolean(error)}
+                                errorText={error?.message}
+                              >
+                                <Input
+                                  type="number"
+                                  min={1}
+                                  max={250}
+                                  {...field}
+                                  onChange={(e) => field.onChange(Number(e.target.value))}
+                                />
+                              </FormControl>
+                            )}
+                          />
+                        </div>
+
+                        <div className="space-y-2">
+                          <h4 className="text-sm font-medium">Minimum Required Character Counts</h4>
+                          <div className="text-sm text-gray-500">
+                            {(() => {
+                              const total = Object.values(
+                                watch("provider.passwordRequirements.required") || {}
+                              ).reduce((sum, count) => sum + Number(count || 0), 0);
+                              const length = watch("provider.passwordRequirements.length") || 0;
+                              const isError = total > length;
+                              return (
+                                <span className={isError ? "text-red-500" : ""}>
+                                  Total required characters: {total}{" "}
+                                  {isError ? `(exceeds length of ${length})` : ""}
+                                </span>
+                              );
+                            })()}
+                          </div>
+                          <div className="grid grid-cols-2 gap-4">
+                            <Controller
+                              control={control}
+                              name="provider.passwordRequirements.required.lowercase"
+                              defaultValue={1}
+                              render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                  label="Lowercase Count"
+                                  isError={Boolean(error)}
+                                  errorText={error?.message}
+                                  helperText="Minimum number of lowercase letters"
+                                >
+                                  <Input
+                                    type="number"
+                                    min={0}
+                                    {...field}
+                                    onChange={(e) => field.onChange(Number(e.target.value))}
+                                  />
+                                </FormControl>
+                              )}
+                            />
+                            <Controller
+                              control={control}
+                              name="provider.passwordRequirements.required.uppercase"
+                              defaultValue={1}
+                              render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                  label="Uppercase Count"
+                                  isError={Boolean(error)}
+                                  errorText={error?.message}
+                                  helperText="Minimum number of uppercase letters"
+                                >
+                                  <Input
+                                    type="number"
+                                    min={0}
+                                    {...field}
+                                    onChange={(e) => field.onChange(Number(e.target.value))}
+                                  />
+                                </FormControl>
+                              )}
+                            />
+                            <Controller
+                              control={control}
+                              name="provider.passwordRequirements.required.digits"
+                              defaultValue={1}
+                              render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                  label="Digit Count"
+                                  isError={Boolean(error)}
+                                  errorText={error?.message}
+                                  helperText="Minimum number of digits"
+                                >
+                                  <Input
+                                    type="number"
+                                    min={0}
+                                    {...field}
+                                    onChange={(e) => field.onChange(Number(e.target.value))}
+                                  />
+                                </FormControl>
+                              )}
+                            />
+                            <Controller
+                              control={control}
+                              name="provider.passwordRequirements.required.symbols"
+                              defaultValue={0}
+                              render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                  label="Symbol Count"
+                                  isError={Boolean(error)}
+                                  errorText={error?.message}
+                                  helperText="Minimum number of symbols"
+                                >
+                                  <Input
+                                    type="number"
+                                    min={0}
+                                    {...field}
+                                    onChange={(e) => field.onChange(Number(e.target.value))}
+                                  />
+                                </FormControl>
+                              )}
+                            />
+                          </div>
+                        </div>
+
+                        <div className="space-y-2">
+                          <h4 className="text-sm font-medium">Allowed Symbols</h4>
+                          <Controller
+                            control={control}
+                            name="provider.passwordRequirements.allowedSymbols"
+                            defaultValue="-_.~!*"
+                            render={({ field, fieldState: { error } }) => (
+                              <FormControl
+                                label="Symbols to use in password"
+                                isError={Boolean(error)}
+                                errorText={error?.message}
+                                helperText="Default: -_.~!*"
+                              >
+                                <Input {...field} placeholder="-_.~!*" />
+                              </FormControl>
+                            )}
+                          />
+                        </div>
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+                {!isSingleEnvironmentMode && (
+                  <Controller
+                    control={control}
+                    name="environment"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <FilterableSelect
+                          options={environments}
+                          value={value}
+                          onChange={onChange}
+                          placeholder="Select the environment to create secret in..."
+                          getOptionLabel={(option) => option.name}
+                          getOptionValue={(option) => option.slug}
+                          menuPlacement="top"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
@@ -137,6 +137,7 @@ const renderOutputForm = (
    provider === DynamicSecretProviders.Cassandra ||
    provider === DynamicSecretProviders.MongoAtlas ||
    provider === DynamicSecretProviders.MongoDB ||
+    provider === DynamicSecretProviders.Vertica ||
    provider === DynamicSecretProviders.SapAse
  ) {
    const { DB_PASSWORD, DB_USERNAME } = data as { DB_USERNAME: string; DB_PASSWORD: string };
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`export { SecretScanningLogsTable } from "./SecretScanningLogsTable";`