Merge branch 'main' into feat/vercelSecretSyncIntegration

2026-10-15 07:35:09 +00:00 · 2025-04-09 09:15:52 -03:00
parent 419dd37d03 bfcfffbabf
commit 6dc085b970
410 changed files with 14274 additions and 1902 deletions
@@ -14,7 +14,8 @@ import {
  faFolderPlus,
  faKey,
  faList,
-  faPlus
+  faPlus,
+  faRotate
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, useNavigate, useRouter, useSearch } from "@tanstack/react-router";
@@ -23,6 +24,11 @@ import { twMerge } from "tailwind-merge";
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
+import { CreateSecretRotationV2Modal } from "@app/components/secret-rotations-v2";
+import { DeleteSecretRotationV2Modal } from "@app/components/secret-rotations-v2/DeleteSecretRotationV2Modal";
+import { EditSecretRotationV2Modal } from "@app/components/secret-rotations-v2/EditSecretRotationV2Modal";
+import { RotateSecretRotationV2Modal } from "@app/components/secret-rotations-v2/RotateSecretRotationV2Modal";
+import { ViewSecretRotationV2GeneratedCredentialsModal } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials";
 import {
  Button,
  Checkbox,
@@ -57,6 +63,7 @@ import {
  useSubscription,
  useWorkspace
 } from "@app/context";
+import { ProjectPermissionSecretRotationActions } from "@app/context/ProjectPermissionContext/types";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import {
  useCreateFolder,
@@ -71,9 +78,16 @@ import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
 import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
+import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
 import { SecretType, SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/types";
 import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
-import { useDynamicSecretOverview, useFolderOverview, useSecretOverview } from "@app/hooks/utils";
+import {
+  useDynamicSecretOverview,
+  useFolderOverview,
+  useSecretOverview,
+  useSecretRotationOverview
+} from "@app/hooks/utils";
+import { SecretOverviewSecretRotationRow } from "@app/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow";

 import { CreateDynamicSecretForm } from "../SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm";
 import { FolderForm } from "../SecretDashboardPage/components/ActionBar/FolderForm";
@@ -99,7 +113,8 @@ enum RowType {
  Folder = "folder",
  DynamicSecret = "dynamic",
  Secret = "secret",
-  Import = "import"
+  Import = "import",
+  SecretRotation = "rotation"
 }

 type Filter = {
@@ -110,7 +125,8 @@ const DEFAULT_FILTER_STATE = {
  [RowType.Folder]: true,
  [RowType.DynamicSecret]: true,
  [RowType.Secret]: true,
-  [RowType.Import]: true
+  [RowType.Import]: true,
+  [RowType.SecretRotation]: true
 };

 export const OverviewPage = () => {
@@ -195,6 +211,15 @@ export const OverviewPage = () => {
      })
    )
  );
+  const userAvailableSecretRotationEnvs = userAvailableEnvs.filter((env) =>
+    permission.can(
+      ProjectPermissionSecretRotationActions.Create,
+      subject(ProjectPermissionSub.SecretRotation, {
+        environment: env.slug,
+        secretPath
+      })
+    )
+  );

  const [visibleEnvs, setVisibleEnvs] = useState(userAvailableEnvs);

@@ -224,6 +249,7 @@ export const OverviewPage = () => {
      includeDynamicSecrets: filter.dynamic,
      includeSecrets: filter.secret,
      includeImports: filter.import,
+      includeSecretRotations: filter.rotation,
      search: debouncedSearchFilter,
      limit,
      offset
@@ -235,15 +261,18 @@ export const OverviewPage = () => {
    secrets,
    folders,
    dynamicSecrets,
+    secretRotations,
    totalFolderCount,
    totalSecretCount,
    totalDynamicSecretCount,
+    totalSecretRotationCount,
    totalImportCount,
    totalCount = 0,
    totalUniqueFoldersInPage,
    totalUniqueSecretsInPage,
    totalUniqueSecretImportsInPage,
-    totalUniqueDynamicSecretsInPage
+    totalUniqueDynamicSecretsInPage,
+    totalUniqueSecretRotationsInPage
  } = overview ?? {};

  const secretImportsShaped = secretImports
@@ -273,6 +302,13 @@ export const OverviewPage = () => {
  const { dynamicSecretNames, isDynamicSecretPresentInEnv } =
    useDynamicSecretOverview(dynamicSecrets);

+  const {
+    secretRotationNames,
+    isSecretRotationPresentInEnv,
+    getSecretRotationByName,
+    getSecretRotationStatusesByName
+  } = useSecretRotationOverview(secretRotations);
+
  const { secKeys, getEnvSecretKeyCount } = useSecretOverview(
    secrets?.concat(secretImportsShaped) || []
  );
@@ -301,6 +337,11 @@ export const OverviewPage = () => {
    "misc",
    "updateFolder",
    "addDynamicSecret",
+    "addSecretRotation",
+    "editSecretRotation",
+    "rotateSecretRotation",
+    "viewSecretRotationGeneratedCredentials",
+    "deleteSecretRotation",
    "upgradePlan"
  ] as const);

@@ -841,6 +882,21 @@ export const OverviewPage = () => {
                      <span>Dynamic Secrets</span>
                    </div>
                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleToggleRowType(RowType.SecretRotation);
+                    }}
+                    icon={
+                      filter[RowType.SecretRotation] && <FontAwesomeIcon icon={faCheckCircle} />
+                    }
+                    iconPos="right"
+                  >
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
+                      <span>Secret Rotations</span>
+                    </div>
+                  </DropdownMenuItem>
                  <DropdownMenuItem
                    onClick={(e) => {
                      e.preventDefault();
@@ -952,6 +1008,29 @@ export const OverviewPage = () => {
                          Add Dynamic Secret
                        </Button>
                      </Tooltip>
+                      <Tooltip
+                        content={
+                          userAvailableSecretRotationEnvs.length === 0 ? "Access restricted" : ""
+                        }
+                      >
+                        <Button
+                          leftIcon={<FontAwesomeIcon icon={faRotate} className="pr-2" />}
+                          onClick={() => {
+                            if (subscription?.secretRotation) {
+                              handlePopUpOpen("addSecretRotation");
+                              handlePopUpClose("misc");
+                              return;
+                            }
+                            handlePopUpOpen("upgradePlan");
+                          }}
+                          isDisabled={userAvailableSecretRotationEnvs.length === 0}
+                          variant="outline_bg"
+                          className="h-10 text-left"
+                          isFullWidth
+                        >
+                          Add Secret Rotation
+                        </Button>
+                      </Tooltip>
                    </div>
                  </DropdownMenuContent>
                </DropdownMenu>
@@ -1141,6 +1220,29 @@ export const OverviewPage = () => {
                        key={`overview-${dynamicSecretName}-${index + 1}`}
                      />
                    ))}
+                    {secretRotationNames.map((secretRotationName, index) => (
+                      <SecretOverviewSecretRotationRow
+                        secretRotationName={secretRotationName}
+                        isSecretRotationInEnv={isSecretRotationPresentInEnv}
+                        environments={visibleEnvs}
+                        getSecretRotationByName={getSecretRotationByName}
+                        getSecretRotationStatusesByName={getSecretRotationStatusesByName}
+                        key={`overview-${secretRotationName}-${index + 1}`}
+                        scrollOffset={scrollOffset}
+                        onEdit={(secretRotation) =>
+                          handlePopUpOpen("editSecretRotation", secretRotation)
+                        }
+                        onRotate={(secretRotation) =>
+                          handlePopUpOpen("rotateSecretRotation", secretRotation)
+                        }
+                        onViewGeneratedCredentials={(secretRotation) =>
+                          handlePopUpOpen("viewSecretRotationGeneratedCredentials", secretRotation)
+                        }
+                        onDelete={(secretRotation) =>
+                          handlePopUpOpen("deleteSecretRotation", secretRotation)
+                        }
+                      />
+                    ))}
                    {secKeys.map((key, index) => (
                      <SecretOverviewTableRow
                        isSelected={Boolean(selectedEntries.secret[key])}
@@ -1165,7 +1267,8 @@ export const OverviewPage = () => {
                          (totalUniqueFoldersInPage || 0) -
                          (totalUniqueDynamicSecretsInPage || 0) -
                          (totalUniqueSecretsInPage || 0) -
-                          (totalUniqueSecretImportsInPage || 0),
+                          (totalUniqueSecretImportsInPage || 0) -
+                          (totalUniqueSecretRotationsInPage || 0),
                        0
                      )}
                    />
@@ -1206,6 +1309,7 @@ export const OverviewPage = () => {
                  secretCount={totalSecretCount}
                  folderCount={totalFolderCount}
                  importCount={totalImportCount}
+                  secretRotationCount={totalSecretRotationCount}
                />
              }
              className="rounded-b-md border-t border-solid border-t-mineshaft-600"
@@ -1277,6 +1381,34 @@ export const OverviewPage = () => {
          }
        />
      )}
+      <CreateSecretRotationV2Modal
+        secretPath={secretPath}
+        environments={userAvailableSecretRotationEnvs}
+        isOpen={popUp.addSecretRotation.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("addSecretRotation", isOpen)}
+      />
+      <EditSecretRotationV2Modal
+        isOpen={popUp.editSecretRotation.isOpen}
+        secretRotation={popUp.editSecretRotation.data as TSecretRotationV2}
+        onOpenChange={(isOpen) => handlePopUpToggle("editSecretRotation", isOpen)}
+      />
+      <RotateSecretRotationV2Modal
+        isOpen={popUp.rotateSecretRotation.isOpen}
+        secretRotation={popUp.rotateSecretRotation.data as TSecretRotationV2}
+        onOpenChange={(isOpen) => handlePopUpToggle("rotateSecretRotation", isOpen)}
+      />
+      <ViewSecretRotationV2GeneratedCredentialsModal
+        isOpen={popUp.viewSecretRotationGeneratedCredentials.isOpen}
+        secretRotation={popUp.viewSecretRotationGeneratedCredentials.data as TSecretRotationV2}
+        onOpenChange={(isOpen) =>
+          handlePopUpToggle("viewSecretRotationGeneratedCredentials", isOpen)
+        }
+      />
+      <DeleteSecretRotationV2Modal
+        isOpen={popUp.deleteSecretRotation.isOpen}
+        secretRotation={popUp.deleteSecretRotation.data as TSecretRotationV2}
+        onOpenChange={(isOpen) => handlePopUpToggle("deleteSecretRotation", isOpen)}
+      />
    </div>
  );
 };
@@ -7,7 +7,13 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
-import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  Input,
+  PasswordGenerator
+} from "@app/components/v2";
 import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import {
@@ -226,10 +232,13 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
            isError={Boolean(errors?.value)}
            errorText={errors?.value?.message}
          >
-            <InfisicalSecretInput
-              {...field}
-              containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-            />
+            <div className="flex items-center gap-2">
+              <InfisicalSecretInput
+                {...field}
+                containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+              />
+              <PasswordGenerator onUsePassword={field.onChange} />
+            </div>
          </FormControl>
        )}
      />
@@ -0,0 +1,318 @@
+import { subject } from "@casl/ability";
+import {
+  faAsterisk,
+  faCheck,
+  faClose,
+  faEdit,
+  faEye,
+  faEyeSlash,
+  faInfoCircle,
+  faRotate,
+  faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { SecretRotationV2StatusBadge } from "@app/components/secret-rotations-v2/SecretRotationV2StatusBadge";
+import { Badge, IconButton, TableContainer, Tag, Td, Tooltip, Tr } from "@app/components/v2";
+import { Blur } from "@app/components/v2/Blur";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
+import {
+  ProjectPermissionSecretRotationActions,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
+import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { useToggle } from "@app/hooks";
+import { SecretRotationStatus, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+import { getExpandedRowStyle } from "@app/pages/secret-manager/OverviewPage/components/utils";
+
+type Props = {
+  secretRotationName: string;
+  environments: { name: string; slug: string }[];
+  isSecretRotationInEnv: (name: string, env: string) => boolean;
+  getSecretRotationByName: (slug: string, name: string) => TSecretRotationV2 | undefined;
+  getSecretRotationStatusesByName: (name: string) => (SecretRotationStatus | null)[] | undefined;
+  scrollOffset: number;
+  onEdit: (secretRotation: TSecretRotationV2) => void;
+  onRotate: (secretRotation: TSecretRotationV2) => void;
+  onViewGeneratedCredentials: (secretRotation: TSecretRotationV2) => void;
+  onDelete: (secretRotation: TSecretRotationV2) => void;
+};
+
+export const SecretOverviewSecretRotationRow = ({
+  secretRotationName,
+  environments = [],
+  isSecretRotationInEnv,
+  scrollOffset,
+  getSecretRotationByName,
+  getSecretRotationStatusesByName,
+  onEdit,
+  onRotate,
+  onViewGeneratedCredentials,
+  onDelete
+}: Props) => {
+  const [isExpanded, setIsExpanded] = useToggle(false);
+  const [isSecretVisible, setIsSecretVisible] = useToggle();
+
+  const totalCols = environments.length + 1; // secret key row
+
+  const statuses = getSecretRotationStatusesByName(secretRotationName);
+
+  return (
+    <>
+      <Tr isHoverable isSelectable onClick={setIsExpanded.toggle} className="group">
+        <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
+          <div className="flex w-full items-center space-x-5 border-r border-mineshaft-600 py-2.5 pl-5 pr-2">
+            <div className="text-mineshaft-400">
+              <FontAwesomeIcon icon={faRotate} />
+            </div>
+            <div className="flex-1">{secretRotationName}</div>
+            {statuses?.some((status) => status === SecretRotationStatus.Failed) && (
+              <Tooltip className="max-w-sm" content="One or more secrets failed to rotate.">
+                <div>
+                  <Badge
+                    variant="danger"
+                    className="flex h-5 w-min items-center gap-1 whitespace-nowrap"
+                  >
+                    <FontAwesomeIcon icon={faXmark} />
+                    <span>Rotation Failed</span>
+                  </Badge>
+                </div>
+              </Tooltip>
+            )}
+          </div>
+        </Td>
+        {environments.map(({ slug }, i) => {
+          const isPresent = isSecretRotationInEnv(secretRotationName, slug);
+
+          return (
+            <Td
+              key={`sec-overview-${slug}-${i + 1}-folder`}
+              className={twMerge(
+                "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
+                isPresent ? "text-green-600" : "text-red-600"
+              )}
+            >
+              <div className="flex justify-center">
+                <FontAwesomeIcon
+                  // eslint-disable-next-line no-nested-ternary
+                  icon={isPresent ? faCheck : faXmark}
+                />
+              </div>
+            </Td>
+          );
+        })}
+      </Tr>
+      {isExpanded &&
+        environments.map(({ name: envName, slug }) => {
+          const secretRotation = getSecretRotationByName(slug, secretRotationName);
+
+          if (!secretRotation) return null;
+
+          const { type, secrets, environment, folder, description } = secretRotation;
+
+          const { name: rotationType, image } = SECRET_ROTATION_MAP[type];
+
+          return (
+            <Tr key={`secret-rotation-${slug}-${secretRotationName}`}>
+              <Td
+                colSpan={totalCols}
+                className={`bg-bunker-600 px-0 py-0 ${isExpanded && "border-b-2 border-mineshaft-500"}`}
+              >
+                <div style={getExpandedRowStyle(scrollOffset)} className="ml-2 p-2">
+                  <TableContainer>
+                    <table className="secret-table">
+                      <thead className="!border-b">
+                        <tr className="h-10">
+                          <th
+                            style={{ padding: "0.5rem 1rem" }}
+                            className="min-table-row min-w-[30vw] !border-r-0"
+                          >
+                            <div className="flex w-full flex-wrap items-center">
+                              <span>{envName}</span>
+                              <Tag className="mx-2.5 flex items-center gap-1 px-1.5 py-0 text-xs normal-case">
+                                <img
+                                  src={`/images/integrations/${image}`}
+                                  style={{
+                                    height: "11px",
+                                    width: "11px"
+                                  }}
+                                  alt={`${rotationType} logo`}
+                                />
+                                {rotationType}
+                              </Tag>
+                              {description && (
+                                <Tooltip content={description}>
+                                  <FontAwesomeIcon
+                                    icon={faInfoCircle}
+                                    className="text-mineshaft-400"
+                                  />
+                                </Tooltip>
+                              )}
+                            </div>
+                          </th>
+                          <div className="absolute right-1 top-0.5 ml-auto mr-1 mt-1 w-min">
+                            <div className="flex items-center gap-2">
+                              <SecretRotationV2StatusBadge secretRotation={secretRotation} />
+                              <Tooltip content={isSecretVisible ? "Hide Values" : "Reveal Values"}>
+                                <IconButton
+                                  ariaLabel={isSecretVisible ? "Hide Values" : "Reveal Values"}
+                                  variant="plain"
+                                  size="md"
+                                  onClick={() => setIsSecretVisible.toggle()}
+                                >
+                                  <FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />
+                                </IconButton>
+                              </Tooltip>
+                              <ProjectPermissionCan
+                                I={ProjectPermissionSecretRotationActions.ReadGeneratedCredentials}
+                                a={subject(ProjectPermissionSub.SecretRotation, {
+                                  environment: environment.slug,
+                                  secretPath: folder.path
+                                })}
+                                renderTooltip
+                                allowedLabel="View Generated Credentials"
+                              >
+                                {(isAllowed) => (
+                                  <IconButton
+                                    ariaLabel="View generated credentials"
+                                    variant="plain"
+                                    size="sm"
+                                    isDisabled={!isAllowed}
+                                    onClick={() => onViewGeneratedCredentials(secretRotation)}
+                                  >
+                                    <FontAwesomeIcon icon={faAsterisk} />
+                                  </IconButton>
+                                )}
+                              </ProjectPermissionCan>
+                              <ProjectPermissionCan
+                                I={ProjectPermissionSecretRotationActions.RotateSecrets}
+                                a={subject(ProjectPermissionSub.SecretRotation, {
+                                  environment: environment.slug,
+                                  secretPath: folder.path
+                                })}
+                                renderTooltip
+                                allowedLabel="Rotate Secrets"
+                              >
+                                {(isAllowed) => (
+                                  <IconButton
+                                    ariaLabel="Rotate secrets"
+                                    variant="plain"
+                                    size="sm"
+                                    isDisabled={!isAllowed}
+                                    onClick={() => onRotate(secretRotation)}
+                                  >
+                                    <FontAwesomeIcon icon={faRotate} />
+                                  </IconButton>
+                                )}
+                              </ProjectPermissionCan>
+                              <ProjectPermissionCan
+                                I={ProjectPermissionSecretRotationActions.Edit}
+                                a={subject(ProjectPermissionSub.SecretRotation, {
+                                  environment: environment.slug,
+                                  secretPath: folder.path
+                                })}
+                                renderTooltip
+                                allowedLabel="Edit"
+                              >
+                                {(isAllowed) => (
+                                  <IconButton
+                                    ariaLabel="Edit rotation"
+                                    variant="plain"
+                                    size="md"
+                                    isDisabled={!isAllowed}
+                                    onClick={() => onEdit(secretRotation)}
+                                  >
+                                    <FontAwesomeIcon icon={faEdit} />
+                                  </IconButton>
+                                )}
+                              </ProjectPermissionCan>
+                              <ProjectPermissionCan
+                                I={ProjectPermissionSecretRotationActions.Delete}
+                                a={subject(ProjectPermissionSub.SecretRotation, {
+                                  environment: environment.slug,
+                                  secretPath: folder.path
+                                })}
+                                renderTooltip
+                                allowedLabel="Delete"
+                              >
+                                {(isAllowed) => (
+                                  <IconButton
+                                    ariaLabel="Delete rotation"
+                                    variant="plain"
+                                    colorSchema="danger"
+                                    size="md"
+                                    onClick={() => onDelete(secretRotation)}
+                                    isDisabled={!isAllowed}
+                                  >
+                                    <FontAwesomeIcon icon={faClose} size="lg" />
+                                  </IconButton>
+                                )}
+                              </ProjectPermissionCan>
+                            </div>
+                          </div>
+                        </tr>
+                      </thead>
+                      <tbody className="border-t-2 border-mineshaft-600">
+                        {secrets.map((secret, index) => {
+                          return (
+                            <Tooltip
+                              className="max-w-sm"
+                              content={
+                                secret
+                                  ? undefined
+                                  : "You do not have permission to view this secret."
+                              }
+                            >
+                              <tr
+                                // eslint-disable-next-line react/no-array-index-key
+                                key={`rotation-secret-${secretRotation.id}-${index}`}
+                                className="!last:border-b-0 h-full hover:bg-mineshaft-700"
+                              >
+                                <td
+                                  className="flex h-full items-center"
+                                  style={{ padding: "0.5rem 1rem" }}
+                                >
+                                  <span className={twMerge(!secret && "blur")}>
+                                    {secret?.key ?? "********"}
+                                  </span>
+                                </td>
+                                <td
+                                  className="col-span-2 h-full w-full"
+                                  style={{ padding: "0.5rem 1rem" }}
+                                >
+                                  {/* eslint-disable-next-line no-nested-ternary */}
+                                  {!secret ? (
+                                    <div className="h-full pl-4 blur">********</div>
+                                  ) : secret.secretValueHidden ? (
+                                    <Blur
+                                      className="py-0"
+                                      tooltipText="You do not have permission to read the value of this secret."
+                                    />
+                                  ) : (
+                                    <InfisicalSecretInput
+                                      isReadOnly
+                                      value={secret.value}
+                                      isVisible={isSecretVisible}
+                                      secretPath={secretRotation.folder.path}
+                                      environment={secretRotation.environment.slug}
+                                      onChange={() => {}}
+                                    />
+                                  )}
+                                </td>
+                              </tr>
+                            </Tooltip>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </TableContainer>
+                </div>
+              </Td>
+            </Tr>
+          );
+        })}
+    </>
+  );
+};
@@ -0,0 +1 @@
+export { SecretOverviewSecretRotationRow } from "./SecretOverviewSecretRotationRow";
@@ -53,6 +53,7 @@ type Props = {
    secretId?: string
  ) => Promise<void>;
  onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
+  isRotatedSecret?: boolean;
 };

 export const SecretEditRow = ({
@@ -68,7 +69,8 @@ export const SecretEditRow = ({
  environment,
  secretPath,
  isVisible,
-  secretId
+  secretId,
+  isRotatedSecret
 }: Props) => {
  const {
    handleSubmit,
@@ -148,7 +150,7 @@ export const SecretEditRow = ({
        isOpen={isModalOpen}
        onClose={toggleModal}
        title="Do you want to delete the selected secret?"
-        deleteKey="delete"
+        deleteKey={secretName}
        onDeleteApproved={handleDeleteSecret}
      />

@@ -163,7 +165,7 @@ export const SecretEditRow = ({
            render={({ field }) => (
              <InfisicalSecretInput
                {...field}
-                isReadOnly={isImportedSecret}
+                isReadOnly={isImportedSecret || isRotatedSecret}
                value={field.value as string}
                key="secret-input"
                isVisible={isVisible}
@@ -287,13 +289,13 @@ export const SecretEditRow = ({
            >
              {(isAllowed) => (
                <div className="opacity-0 group-hover:opacity-100">
-                  <Tooltip content="Delete">
+                  <Tooltip content={isRotatedSecret ? "Cannot Delete Rotated Secret" : "Delete"}>
                    <IconButton
                      variant="plain"
                      ariaLabel="delete-value"
                      className="h-full"
                      onClick={toggleModal}
-                      isDisabled={isDeleting || !isAllowed}
+                      isDisabled={isDeleting || !isAllowed || isRotatedSecret}
                    >
                      <FontAwesomeIcon icon={faTrash} />
                    </IconButton>
@@ -2,10 +2,12 @@ import { faCircle } from "@fortawesome/free-regular-svg-icons";
 import {
  faAngleDown,
  faCheck,
+  faCodeBranch,
  faEye,
  faEyeSlash,
  faFileImport,
  faKey,
+  faRotate,
  faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -15,6 +17,7 @@ import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/componen
 import { useToggle } from "@app/hooks";
 import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
+import { getExpandedRowStyle } from "@app/pages/secret-manager/OverviewPage/components/utils";

 import { SecretEditRow } from "./SecretEditRow";
 import SecretRenameRow from "./SecretRenameRow";
@@ -149,14 +152,7 @@ export const SecretOverviewTableRow = ({
              isFormExpanded && "border-b-2 border-mineshaft-500"
            }`}
          >
-            <div
-              className="ml-2 p-2"
-              style={{
-                marginLeft: scrollOffset,
-                width: "calc(100vw - 350px)", // 350px accounts for sidebar and margin
-                maxWidth: "1270px" // largest width of table on ultra wide
-              }}
-            >
+            <div className="ml-2 p-2" style={getExpandedRowStyle(scrollOffset)}>
              <SecretRenameRow
                secretKey={secretKey}
                environments={environments}
@@ -214,6 +210,16 @@ export const SecretOverviewTableRow = ({
                                  <FontAwesomeIcon icon={faFileImport} />
                                </Tooltip>
                              )}
+                              {secret?.isRotatedSecret && (
+                                <Tooltip content="Rotated Secret">
+                                  <FontAwesomeIcon icon={faRotate} />
+                                </Tooltip>
+                              )}
+                              {secret?.valueOverride && (
+                                <Tooltip content="Personal Override">
+                                  <FontAwesomeIcon icon={faCodeBranch} />
+                                </Tooltip>
+                              )}
                            </div>
                          </td>
                          <td className="col-span-2 h-8 w-full">
@@ -237,6 +243,7 @@ export const SecretOverviewTableRow = ({
                              onSecretCreate={onSecretCreate}
                              onSecretUpdate={onSecretUpdate}
                              environment={slug}
+                              isRotatedSecret={secret?.isRotatedSecret}
                            />
                          </td>
                        </tr>
@@ -6,7 +6,8 @@ import {
  faFingerprint,
  faFolder,
  faKey,
-  faMagnifyingGlass
+  faMagnifyingGlass,
+  faRotate
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
@@ -34,6 +35,7 @@ import { useDebounce } from "@app/hooks";
 import { useGetProjectSecretsQuickSearch } from "@app/hooks/api/dashboard";
 import { WsTag } from "@app/hooks/api/tags/types";
 import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
+import { QuickSearchSecretRotationItem } from "@app/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretRotationItem";
 import { RowType } from "@app/pages/secret-manager/SecretDashboardPage/SecretMainPage.types";

 import { QuickSearchDynamicSecretItem } from "./QuickSearchDynamicSecretItem";
@@ -51,7 +53,11 @@ export type QuickSearchModalProps = {
  onOpenChange: (isOpen: boolean) => void;
 };

-type ResourceType = RowType.Secret | RowType.DynamicSecret | RowType.Folder;
+type ResourceType =
+  | RowType.Secret
+  | RowType.DynamicSecret
+  | RowType.Folder
+  | RowType.SecretRotation;

 const Content = ({
  environments,
@@ -67,7 +73,8 @@ const Content = ({
  const [showFilter, setShowFilter] = useState<Record<ResourceType, boolean>>({
    [RowType.Secret]: true,
    [RowType.Folder]: true,
-    [RowType.DynamicSecret]: true
+    [RowType.DynamicSecret]: true,
+    [RowType.SecretRotation]: true
  });
  const isEnabled = Boolean(search.trim()) || Boolean(Object.values(filterTags).length);
  const { data, isPending } = useGetProjectSecretsQuickSearch(
@@ -81,12 +88,13 @@ const Content = ({
    { enabled: isEnabled }
  );

-  const { folders = {}, secrets = {}, dynamicSecrets = {} } = data ?? {};
+  const { folders = {}, secrets = {}, dynamicSecrets = {}, secretRotations = {} } = data ?? {};

  const isEmpty =
    (!showFilter[RowType.Folder] || Object.values(folders).length === 0) &&
    (!showFilter[RowType.Secret] || Object.values(secrets).length === 0) &&
-    (!showFilter[RowType.DynamicSecret] || Object.values(dynamicSecrets).length === 0);
+    (!showFilter[RowType.DynamicSecret] || Object.values(dynamicSecrets).length === 0) &&
+    (!showFilter[RowType.SecretRotation] || Object.values(secretRotations).length === 0);

  const handleToggleTag = (tag: string) => {
    setFilterTags((prev) => {
@@ -161,6 +169,19 @@ const Content = ({
                <span>Dynamic Secrets</span>
              </div>
            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                handleToggleShowType(RowType.SecretRotation);
+              }}
+              icon={showFilter[RowType.SecretRotation] && <FontAwesomeIcon icon={faCheckCircle} />}
+              iconPos="right"
+            >
+              <div className="flex items-center gap-2">
+                <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
+                <span>Secret Rotations</span>
+              </div>
+            </DropdownMenuItem>
            <DropdownMenuItem
              onClick={(e) => {
                e.preventDefault();
@@ -240,6 +261,14 @@ const Content = ({
                      key={key}
                    />
                  ))}
+                {showFilter[RowType.SecretRotation] &&
+                  Object.entries(secretRotations).map(([key, secretRotationGroup]) => (
+                    <QuickSearchSecretRotationItem
+                      key={key}
+                      onClose={onClose}
+                      secretRotationGroup={secretRotationGroup}
+                    />
+                  ))}
                {showFilter[RowType.Secret] &&
                  Object.entries(secrets).map(([key, secretGroup]) => (
                    <QuickSearchSecretItem
@@ -0,0 +1,57 @@
+import { faChevronRight, faFolder, faRotate } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+
+import { Td, Tooltip, Tr } from "@app/components/v2";
+import { reverseTruncate } from "@app/helpers/reverseTruncate";
+import { TDashboardProjectSecretsQuickSearch } from "@app/hooks/api/dashboard/types";
+
+type Props = {
+  secretRotationGroup: TDashboardProjectSecretsQuickSearch["secretRotations"][string];
+  onClose: () => void;
+};
+
+export const QuickSearchSecretRotationItem = ({ secretRotationGroup, onClose }: Props) => {
+  const navigate = useNavigate({
+    from: "/secret-manager/$projectId/overview"
+  });
+
+  const [groupSecretRotation] = secretRotationGroup;
+
+  const handleNavigate = () => {
+    navigate({
+      search: (prev) => ({
+        ...prev,
+        secretPath: groupSecretRotation.folder.path,
+        search: groupSecretRotation.name
+      })
+    });
+    onClose();
+  };
+
+  return (
+    <Tr
+      className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
+      onClick={handleNavigate}
+    >
+      <Td className="w-full">
+        <div className="inline-flex max-w-[20rem] flex-col">
+          <span className="truncate">
+            <FontAwesomeIcon className="mr-2 self-center text-mineshaft-400" icon={faRotate} />
+            {groupSecretRotation.name}
+          </span>
+          <span className="text-xs text-mineshaft-400">
+            <FontAwesomeIcon size="xs" className="mr-0.5 text-yellow-700" icon={faFolder} />{" "}
+            <Tooltip className="max-w-7xl" content={groupSecretRotation.folder.path}>
+              <span>{reverseTruncate(groupSecretRotation.folder.path)}</span>
+            </Tooltip>
+          </span>
+        </div>
+      </Td>
+      <Td />
+      <Td>
+        <FontAwesomeIcon icon={faChevronRight} />
+      </Td>
+    </Tr>
+  );
+};
@@ -1,4 +1,10 @@
-import { faFileImport, faFingerprint, faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
+import {
+  faFileImport,
+  faFingerprint,
+  faFolder,
+  faKey,
+  faRotate
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { Tooltip } from "@app/components/v2";
@@ -8,13 +14,15 @@ type Props = {
  importCount?: number;
  secretCount?: number;
  dynamicSecretCount?: number;
+  secretRotationCount?: number;
 };

 export const SecretTableResourceCount = ({
  folderCount = 0,
  dynamicSecretCount = 0,
  secretCount = 0,
-  importCount = 0
+  importCount = 0,
+  secretRotationCount = 0
 }: Props) => {
  return (
    <div className="flex items-center gap-2 divide-x divide-mineshaft-500 text-sm text-mineshaft-400">
@@ -66,6 +74,22 @@ export const SecretTableResourceCount = ({
          </div>
        </Tooltip>
      )}
+      {secretRotationCount > 0 && (
+        <Tooltip
+          className="max-w-sm"
+          content={
+            <p className="whitespace-nowrap text-center">
+              Total secret rotation count{" "}
+              <span className="text-center text-mineshaft-400">(matching filters)</span>
+            </p>
+          }
+        >
+          <div className="flex items-center gap-2 pl-2">
+            <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
+            <span>{secretRotationCount}</span>
+          </div>
+        </Tooltip>
+      )}
      {secretCount > 0 && (
        <Tooltip
          className="max-w-sm"
@@ -46,6 +46,9 @@ export const SelectionPanel = ({ secretPath, resetSelectedEntries, selectedEntri

  const selectedFolderCount = Object.keys(selectedEntries.folder).length;
  const selectedKeysCount = Object.keys(selectedEntries.secret).length;
+  const isRotatedSecretSelected = Object.values(selectedEntries.secret).some((record) =>
+    Object.values(record).some((secret) => secret.isRotatedSecret)
+  );
  const selectedCount = selectedFolderCount + selectedKeysCount;

  const { currentWorkspace } = useWorkspace();
@@ -121,7 +124,7 @@ export const SelectionPanel = ({ secretPath, resetSelectedEntries, selectedEntri
            })
          );

-          if (entry && canDeleteSecret) {
+          if (entry && canDeleteSecret && !entry.isRotatedSecret) {
            return [
              ...accum,
              {
@@ -186,6 +189,11 @@ export const SelectionPanel = ({ secretPath, resetSelectedEntries, selectedEntri
            </IconButton>
          </Tooltip>
          <div className="ml-1 flex-grow px-2 text-sm">{selectedCount} Selected</div>
+          {isRotatedSecretSelected && (
+            <span className="text-sm text-mineshaft-400">
+              Rotated Secrets will not be affected by action.
+            </span>
+          )}
          {shouldShowDelete && (
            <>
              <Tooltip content={areFoldersSelected ? "Moving folders is not supported" : undefined}>
@@ -156,7 +156,10 @@ const Content = ({
    );

    Object.values(secrets).forEach((secretRecord) =>
-      Object.entries(secretRecord).map(([env, secret]) => secretsByEnv[env].push(secret))
+      Object.entries(secretRecord).forEach(([env, secret]) => {
+        if (secret.isRotatedSecret) return;
+        secretsByEnv[env].push(secret);
+      })
    );

    // eslint-disable-next-line no-restricted-syntax
@@ -0,0 +1,5 @@
+export const getExpandedRowStyle = (scrollOffset: number) => ({
+  marginLeft: scrollOffset,
+  width: "calc(100vw - 355px)", // 350px accounts for sidebar and margin
+  maxWidth: "1270px" // largest width of table on ultra-wide
+});
@@ -97,7 +97,13 @@ export const SecretApprovalRequestChangeItem = ({
                <Td className="text-red-600">OLD</Td>
                <Td>{secretVersion?.secretKey}</Td>
                <Td>
-                  <SecretInput isReadOnly value={secretVersion?.secretValue} />
+                  {newVersion?.isRotatedSecret ? (
+                    <span className="text-mineshaft-400">
+                      Rotated Secret value will not be affected
+                    </span>
+                  ) : (
+                    <SecretInput isReadOnly value={secretVersion?.secretValue} />
+                  )}
                </Td>
                <Td>{secretVersion?.secretComment}</Td>
                <Td className="flex flex-wrap gap-2">
@@ -146,7 +152,13 @@ export const SecretApprovalRequestChangeItem = ({
                <Td className="text-green-600">NEW</Td>
                <Td>{newVersion?.secretKey}</Td>
                <Td>
-                  <SecretInput isReadOnly value={newVersion?.secretValue} />
+                  {newVersion?.isRotatedSecret ? (
+                    <span className="text-mineshaft-400">
+                      Rotated Secret value will not be affected
+                    </span>
+                  ) : (
+                    <SecretInput isReadOnly value={newVersion?.secretValue} />
+                  )}
                </Td>
                <Td>{newVersion?.secretComment}</Td>
                <Td className="flex flex-wrap gap-2">
@@ -25,7 +25,10 @@ import {
  useProjectPermission,
  useWorkspace
 } from "@app/context";
-import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
+import {
+  ProjectPermissionSecretActions,
+  ProjectPermissionSecretRotationActions
+} from "@app/context/ProjectPermissionContext/types";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import {
  useGetImportedSecretsSingleEnv,
@@ -39,6 +42,7 @@ import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
+import { SecretRotationListView } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView";

 import { SecretTableResourceCount } from "../OverviewPage/components/SecretTableResourceCount";
 import { SecretV2MigrationSection } from "../OverviewPage/components/SecretV2MigrationSection";
@@ -137,6 +141,11 @@ const Page = () => {
    subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })
  );

+  const canReadSecretRotations = permission.can(
+    ProjectPermissionSecretRotationActions.Read,
+    subject(ProjectPermissionSub.SecretRotation, { environment, secretPath })
+  );
+
  const canDoReadRollback = permission.can(
    ProjectPermissionActions.Read,
    ProjectPermissionSub.SecretRollback
@@ -150,7 +159,8 @@ const Page = () => {
      [RowType.Folder]: true,
      [RowType.Import]: true,
      [RowType.DynamicSecret]: true,
-      [RowType.Secret]: true
+      [RowType.Secret]: true,
+      [RowType.SecretRotation]: true
    }
  };

@@ -194,6 +204,7 @@ const Page = () => {
    viewSecretValue: canReadSecretValue,
    includeDynamicSecrets: canReadDynamicSecret && filter.include.dynamic,
    includeSecrets: canReadSecret && filter.include.secret,
+    includeSecretRotations: canReadSecretRotations && filter.include.rotation,
    tags: filter.tags
  });

@@ -201,12 +212,14 @@ const Page = () => {
    imports,
    folders,
    dynamicSecrets,
+    secretRotations,
    secrets,
    totalImportCount = 0,
    totalFolderCount = 0,
    totalDynamicSecretCount = 0,
    totalSecretCount = 0,
-    totalCount = 0
+    totalCount = 0,
+    totalSecretRotationCount = 0
  } = data ?? {};

  useResetPageHelper({
@@ -266,7 +279,8 @@ const Page = () => {
      (imports?.length || 0) -
      (folders?.length || 0) -
      (secrets?.length || 0) -
-      (dynamicSecrets?.length || 0),
+      (dynamicSecrets?.length || 0) -
+      (secretRotations?.length || 0),
    0
  );
  const isNotEmpty = Boolean(
@@ -274,6 +288,7 @@ const Page = () => {
      folders?.length ||
      imports?.length ||
      dynamicSecrets?.length ||
+      secretRotations?.length ||
      noAccessSecretCount
  );

@@ -363,6 +378,8 @@ const Page = () => {
  const selectedSecretActions = useSelectedSecretActions();

  const allRowsSelectedOnPage = useMemo(() => {
+    if (!secrets?.length) return { isChecked: false, isIndeterminate: false };
+
    if (secrets?.every((secret) => selectedSecrets[secret.id]))
      return { isChecked: true, isIndeterminate: false };

@@ -498,6 +515,9 @@ const Page = () => {
                  dynamicSecrets={dynamicSecrets}
                />
              )}
+              {canReadSecretRotations && Boolean(secretRotations?.length) && (
+                <SecretRotationListView secretRotations={secretRotations} />
+              )}
              {canReadSecret && Boolean(secrets?.length) && (
                <SecretListView
                  secrets={secrets}
@@ -524,6 +544,7 @@ const Page = () => {
                  importCount={totalImportCount}
                  secretCount={totalSecretCount}
                  folderCount={totalFolderCount}
+                  secretRotationCount={totalSecretRotationCount}
                />
              }
              className="rounded-b-md border-t border-solid border-t-mineshaft-600"
@@ -10,5 +10,6 @@ export enum RowType {
  Folder = "folder",
  Import = "import",
  DynamicSecret = "dynamic",
-  Secret = "secret"
+  Secret = "secret",
+  SecretRotation = "rotation"
 }
@@ -19,6 +19,7 @@ import {
  faMinusSquare,
  faPaste,
  faPlus,
+  faRotate,
  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -30,6 +31,7 @@ import { twMerge } from "tailwind-merge";
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
+import { CreateSecretRotationV2Modal } from "@app/components/secret-rotations-v2";
 import {
  Button,
  DeleteActionModal,
@@ -54,6 +56,7 @@ import {
  useSubscription,
  useWorkspace
 } from "@app/context";
+import { ProjectPermissionSecretRotationActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 import {
  useCreateFolder,
@@ -133,6 +136,7 @@ export const ActionBar = ({
    "addDynamicSecret",
    "addSecretImport",
    "bulkDeleteSecrets",
+    "addSecretRotation",
    "moveSecrets",
    "misc",
    "upgradePlan",
@@ -673,6 +677,23 @@ export const ActionBar = ({
                  <span>Dynamic Secrets</span>
                </div>
              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onToggleRowType(RowType.SecretRotation);
+                }}
+                icon={
+                  filter?.include[RowType.SecretRotation] && (
+                    <FontAwesomeIcon icon={faCheckCircle} />
+                  )
+                }
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
+                  <span>Secret Rotations</span>
+                </div>
+              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={(e) => {
                  e.preventDefault();
@@ -856,6 +877,33 @@ export const ActionBar = ({
                    </Button>
                  )}
                </ProjectPermissionCan>
+                <ProjectPermissionCan
+                  I={ProjectPermissionSecretRotationActions.Create}
+                  a={subject(ProjectPermissionSub.SecretRotation, {
+                    environment,
+                    secretPath
+                  })}
+                >
+                  {(isAllowed) => (
+                    <Button
+                      leftIcon={<FontAwesomeIcon icon={faRotate} className="pr-2" />}
+                      onClick={() => {
+                        if (subscription && subscription.secretRotation) {
+                          handlePopUpOpen("addSecretRotation");
+                          handlePopUpClose("misc");
+                          return;
+                        }
+                        handlePopUpOpen("upgradePlan");
+                      }}
+                      variant="outline_bg"
+                      className="h-10 text-left"
+                      isFullWidth
+                      isDisabled={!isAllowed}
+                    >
+                      Add Secret Rotation
+                    </Button>
+                  )}
+                </ProjectPermissionCan>
                <ProjectPermissionCan
                  I={ProjectPermissionActions.Create}
                  a={subject(ProjectPermissionSub.SecretImports, {
@@ -991,6 +1039,12 @@ export const ActionBar = ({
        secretPath={secretPath}
        isSingleEnvironmentMode
      />
+      <CreateSecretRotationV2Modal
+        secretPath={secretPath}
+        environment={environment}
+        isOpen={popUp.addSecretRotation.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("addSecretRotation", isOpen)}
+      />
      <Modal
        isOpen={popUp.addFolder.isOpen}
        onOpenChange={(isOpen) => handlePopUpToggle("addFolder", isOpen)}
@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input } from "@app/components/v2";
+import { Button, FormControl, Input, PasswordGenerator } from "@app/components/v2";
 import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
@@ -162,12 +162,15 @@ export const CreateSecretForm = ({
            isError={Boolean(errors?.value)}
            errorText={errors?.value?.message}
          >
-            <InfisicalSecretInput
-              {...field}
-              environment={environment}
-              secretPath={secretPath}
-              containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-            />
+            <div className="flex items-center gap-2">
+              <InfisicalSecretInput
+                {...field}
+                environment={environment}
+                secretPath={secretPath}
+                containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+              />
+              <PasswordGenerator onUsePassword={field.onChange} />
+            </div>
          </FormControl>
        )}
      />
@@ -366,7 +366,7 @@ export const SecretDetailSidebar = ({
                            >
                              <div className="flex items-center gap-2">
                                <InfisicalSecretInput
-                                  isReadOnly={isReadOnly || !isAllowed}
+                                  isReadOnly={isReadOnly || !isAllowed || secret?.isRotatedSecret}
                                  environment={environment}
                                  secretPath={secretPath}
                                  key="secret-value"
@@ -881,21 +881,23 @@ export const SecretDetailSidebar = ({
                            </div>
                          </div>
                        </div>
-                        <div
-                          className={`flex items-center justify-center ${version === secretVersion.length ? "hidden" : ""}`}
-                        >
-                          <Tooltip content="Restore Secret Value">
-                            <IconButton
-                              ariaLabel="Restore"
-                              variant="outline_bg"
-                              size="sm"
-                              className="h-8 w-8 rounded-md"
-                              onClick={() => setValue("value", secretValue)}
-                            >
-                              <FontAwesomeIcon icon={faArrowRotateRight} />
-                            </IconButton>
-                          </Tooltip>
-                        </div>
+                        {!secret?.isRotatedSecret && (
+                          <div
+                            className={`flex items-center justify-center ${version === secretVersion.length ? "hidden" : ""}`}
+                          >
+                            <Tooltip content="Restore Secret Value">
+                              <IconButton
+                                ariaLabel="Restore"
+                                variant="outline_bg"
+                                size="sm"
+                                className="h-8 w-8 rounded-md"
+                                onClick={() => setValue("value", secretValue)}
+                              >
+                                <FontAwesomeIcon icon={faArrowRotateRight} />
+                              </IconButton>
+                            </Tooltip>
+                          </div>
+                        )}
                      </div>
                    )
                  )}
@@ -48,6 +48,8 @@ import {
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { Blur } from "@app/components/v2/Blur";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faKey, faRotate } from "@fortawesome/free-solid-svg-icons";
 import {
  FontAwesomeSpriteName,
  formSchema,
@@ -91,6 +93,7 @@ export const SecretItem = memo(
  }: Props) => {
    const { currentWorkspace } = useWorkspace();
    const { permission } = useProjectPermission();
+    const { isRotatedSecret } = secret;

    const {
      handleSubmit,
@@ -151,7 +154,6 @@ export const SecretItem = memo(
          secretTags: selectedTagSlugs
        })
      );
-
    const { secretValueHidden } = secret;

    const [isSecValueCopied, setIsSecValueCopied] = useToggle(false);
@@ -221,29 +223,43 @@ export const SecretItem = memo(
        <div
          className={twMerge(
            "border-b border-mineshaft-600 bg-mineshaft-800 shadow-none hover:bg-mineshaft-700",
-            isDirty && "border-primary-400/50"
+            isDirty && "border-primary-400/50",
+            isRotatedSecret && "bg-mineshaft-700/60"
          )}
        >
          <div className="group flex">
            <div
              className={twMerge(
-                "flex h-11 w-11 items-center justify-center px-4 py-3",
+                "flex h-11 w-11 items-center justify-center px-4 py-3 text-mineshaft-300",
                isDirty && "text-primary"
              )}
            >
-              <Checkbox
-                id={`checkbox-${secret.id}`}
-                isChecked={isSelected}
-                onCheckedChange={() => onToggleSecretSelect(secret)}
-                className={twMerge("ml-3 hidden group-hover:flex", isSelected && "flex")}
-              />
-              <FontAwesomeSymbol
-                className={twMerge(
-                  "ml-3 block h-3.5 w-3.5 group-hover:hidden",
-                  isSelected && "hidden"
-                )}
-                symbolName={FontAwesomeSpriteName.SecretKey}
-              />
+              {secret.isRotatedSecret ? (
+                <div className="relative">
+                  <FontAwesomeIcon icon={faKey} size="xs" className={twMerge("ml-3 h-3.5 w-3.5")} />
+                  <FontAwesomeIcon
+                    icon={faRotate}
+                    size="xs"
+                    className="absolute -bottom-[0.05rem] -right-[0.2rem] text-mineshaft-400"
+                  />
+                </div>
+              ) : (
+                <>
+                  <Checkbox
+                    id={`checkbox-${secret.id}`}
+                    isChecked={isSelected}
+                    onCheckedChange={() => onToggleSecretSelect(secret)}
+                    className={twMerge("ml-3 hidden group-hover:flex", isSelected && "flex")}
+                  />
+                  <FontAwesomeSymbol
+                    className={twMerge(
+                      "ml-3 block h-3.5 w-3.5 group-hover:hidden",
+                      isSelected && "hidden"
+                    )}
+                    symbolName={FontAwesomeSpriteName.SecretKey}
+                  />
+                </>
+              )}
            </div>
            <div className="flex h-11 w-80 flex-shrink-0 items-center px-4 py-2">
              <Controller
@@ -252,7 +268,7 @@ export const SecretItem = memo(
                render={({ field, fieldState: { error } }) => (
                  <Input
                    autoComplete="off"
-                    isReadOnly={isReadOnly}
+                    isReadOnly={isReadOnly || isRotatedSecret}
                    autoCapitalization={currentWorkspace?.autoCapitalization}
                    variant="plain"
                    isDisabled={isOverriden}
@@ -294,7 +310,7 @@ export const SecretItem = memo(
                  control={control}
                  render={({ field }) => (
                    <InfisicalSecretInput
-                      isReadOnly={isReadOnly}
+                      isReadOnly={isReadOnly || isRotatedSecret}
                      key="secret-value"
                      isVisible={isVisible}
                      environment={environment}
@@ -582,7 +598,7 @@ export const SecretItem = memo(
                      secretTags: selectedTagSlugs
                    })}
                    renderTooltip
-                    allowedLabel="Delete"
+                    allowedLabel={isRotatedSecret ? "Cannot Delete Rotated Secret" : "Delete"} // just using label for isRotatedSecret, disabled below
                  >
                    {(isAllowed) => (
                      <IconButton
@@ -592,7 +608,7 @@ export const SecretItem = memo(
                        size="md"
                        className="p-0 opacity-0 group-hover:opacity-100"
                        onClick={() => onDeleteSecret(secret)}
-                        isDisabled={!isAllowed}
+                        isDisabled={!isAllowed || isRotatedSecret}
                      >
                        <FontAwesomeSymbol
                          symbolName={FontAwesomeSpriteName.Close}
@@ -79,7 +79,8 @@ export const SecretListView = ({
      skipMultilineEncoding,
      newKey,
      secretId,
-      secretMetadata
+      secretMetadata,
+      isRotatedSecret
    }: Partial<{
      value: string;
      comment: string;
@@ -90,6 +91,7 @@ export const SecretListView = ({
      newKey: string;
      secretId: string;
      secretMetadata?: { key: string; value: string }[];
+      isRotatedSecret?: boolean;
    }> = {}
  ) => {
    if (operation === "delete") {
@@ -110,14 +112,16 @@ export const SecretListView = ({
        workspaceId,
        secretPath,
        secretKey: key,
-        secretValue: value || "",
+        ...(!isRotatedSecret && {
+          newSecretName: newKey,
+          secretValue: value || ""
+        }),
        type,
        tagIds: tags,
        secretComment: comment,
        secretReminderRepeatDays: reminderRepeatDays,
        secretReminderNote: reminderNote,
        skipMultilineEncoding,
-        newSecretName: newKey,
        secretMetadata
      });
      return;
@@ -213,7 +217,8 @@ export const SecretListView = ({
            secretId: orgSecret.id,
            newKey: hasKeyChanged ? key : undefined,
            skipMultilineEncoding: modSecret.skipMultilineEncoding,
-            secretMetadata
+            secretMetadata,
+            isRotatedSecret: orgSecret.isRotatedSecret
          });
          if (cb) cb();
        }
@@ -1,3 +1,7 @@
+import { faLock, faRotate } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
 import { FontAwesomeSymbol, Input, Tooltip } from "@app/components/v2";
 import { Blur } from "@app/components/v2/Blur";

@@ -5,9 +9,10 @@ import { FontAwesomeSpriteName } from "./SecretListView.utils";

 type Props = {
  count: number;
+  isRotationView?: boolean;
 };

-export const SecretNoAccessListView = ({ count }: Props) => {
+export const SecretNoAccessListView = ({ count, isRotationView }: Props) => {
  return (
    <>
      {Array.from(Array(count)).map((_, i) => (
@@ -17,15 +22,34 @@ export const SecretNoAccessListView = ({ count }: Props) => {
          content="You do not have permission to view this secret"
          key={`no-access-secret-${i + 1}`}
        >
-          <div className="flex border-b border-mineshaft-600 bg-mineshaft-800 shadow-none hover:bg-mineshaft-700">
+          <div
+            className={twMerge(
+              "flex border-b border-mineshaft-600 shadow-none hover:bg-mineshaft-700",
+              isRotationView ? "bg-mineshaft-700/60" : "bg-mineshaft-800"
+            )}
+          >
            <div className="flex h-11 w-11 items-center justify-center px-4 py-3">
-              <FontAwesomeSymbol
-                className="ml-3 block h-3.5 w-3.5"
-                symbolName={FontAwesomeSpriteName.KeyLock}
-              />
+              {isRotationView ? (
+                <div className="relative">
+                  <FontAwesomeIcon
+                    icon={faLock}
+                    size="xs"
+                    className={twMerge("ml-3 h-3.5 w-3.5")}
+                  />
+                  <FontAwesomeIcon
+                    icon={faRotate}
+                    size="xs"
+                    className="absolute -bottom-[0.05rem] -right-[0.2rem] text-mineshaft-400"
+                  />
+                </div>
+              ) : (
+                <FontAwesomeSymbol
+                  className="ml-3 block h-3.5 w-3.5"
+                  symbolName={FontAwesomeSpriteName.KeyLock}
+                />
+              )}
            </div>
-
-            <div className="flex h-11 w-80 flex-shrink-0 items-center px-4 py-2">
+            <div className="ml-[0.05rem] flex h-11 w-80 flex-shrink-0 items-center border-r border-mineshaft-600 px-4 py-2">
              <Input
                autoComplete="off"
                isReadOnly
@@ -35,7 +59,7 @@ export const SecretNoAccessListView = ({ count }: Props) => {
                className="w-full px-0 blur-sm placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
              />
            </div>
-            <Blur />
+            <Blur className="pl-8" />
          </div>
        </Tooltip>
      ))}
@@ -0,0 +1,261 @@
+import { useState } from "react";
+import { subject } from "@casl/ability";
+import {
+  faAsterisk,
+  faClose,
+  faEdit,
+  faInfoCircle,
+  faKey,
+  faRotate
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { SecretRotationV2StatusBadge } from "@app/components/secret-rotations-v2/SecretRotationV2StatusBadge";
+import { IconButton, Modal, ModalContent, TableContainer, Tag, Tooltip } from "@app/components/v2";
+import { Blur } from "@app/components/v2/Blur";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretRotationActions } from "@app/context/ProjectPermissionContext/types";
+import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+
+type Props = {
+  secretRotation: TSecretRotationV2;
+  onEdit: () => void;
+  onRotate: () => void;
+  onViewGeneratedCredentials: () => void;
+  onDelete: () => void;
+};
+
+export const SecretRotationItem = ({
+  secretRotation,
+  onEdit,
+  onRotate,
+  onViewGeneratedCredentials,
+  onDelete
+}: Props) => {
+  const { name, type, environment, folder, secrets, description } = secretRotation;
+
+  const { name: rotationType, image } = SECRET_ROTATION_MAP[type];
+  const [showSecrets, setShowSecrets] = useState(false);
+
+  return (
+    <>
+      <div className={twMerge("group flex border-b border-mineshaft-600 hover:bg-mineshaft-700")}>
+        <div className="text- flex w-11 items-center py-2 pl-5 text-mineshaft-400">
+          <FontAwesomeIcon icon={faRotate} />
+        </div>
+        <div className="flex flex-grow items-center border-r border-mineshaft-600 py-2 pl-4 pr-2">
+          <div className="flex w-full flex-wrap items-center">
+            <span>{name}</span>
+            <Tag className="mx-2.5 flex items-center gap-1 px-1.5 py-0 text-xs normal-case">
+              <img
+                src={`/images/integrations/${image}`}
+                style={{
+                  height: "11px",
+                  width: "11px"
+                }}
+                alt={`${rotationType} logo`}
+              />
+              {rotationType}
+            </Tag>
+            {description && (
+              <Tooltip content={description}>
+                <FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400" />
+              </Tooltip>
+            )}
+          </div>
+          <SecretRotationV2StatusBadge className="mx-2" secretRotation={secretRotation} />
+          <div
+            key="actions"
+            className="flex h-full flex-shrink-0 self-start transition-all group-hover:gap-x-2"
+          >
+            <Tooltip content="View Rotation Secrets">
+              <IconButton
+                ariaLabel="View rotation secrets"
+                variant="plain"
+                size="sm"
+                className="w-0 overflow-hidden p-0 group-hover:w-5"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowSecrets(true);
+                }}
+              >
+                <FontAwesomeIcon icon={faKey} />
+              </IconButton>
+            </Tooltip>
+            <ProjectPermissionCan
+              I={ProjectPermissionSecretRotationActions.ReadGeneratedCredentials}
+              a={subject(ProjectPermissionSub.SecretRotation, {
+                environment: environment.slug,
+                secretPath: folder.path
+              })}
+              renderTooltip
+              allowedLabel="View Generated Credentials"
+            >
+              {(isAllowed) => (
+                <IconButton
+                  ariaLabel="View generated credentials"
+                  variant="plain"
+                  size="sm"
+                  isDisabled={!isAllowed}
+                  className="w-0 overflow-hidden p-0 group-hover:w-5"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onViewGeneratedCredentials();
+                  }}
+                >
+                  <FontAwesomeIcon icon={faAsterisk} />
+                </IconButton>
+              )}
+            </ProjectPermissionCan>
+            <ProjectPermissionCan
+              I={ProjectPermissionSecretRotationActions.RotateSecrets}
+              a={subject(ProjectPermissionSub.SecretRotation, {
+                environment: environment.slug,
+                secretPath: folder.path
+              })}
+              renderTooltip
+              allowedLabel="Rotate Secrets"
+            >
+              {(isAllowed) => (
+                <IconButton
+                  ariaLabel="Rotate secrets"
+                  variant="plain"
+                  size="sm"
+                  isDisabled={!isAllowed}
+                  className="w-0 overflow-hidden p-0 group-hover:w-5"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRotate();
+                  }}
+                >
+                  <FontAwesomeIcon icon={faRotate} />
+                </IconButton>
+              )}
+            </ProjectPermissionCan>
+          </div>
+        </div>
+        <AnimatePresence mode="wait">
+          <motion.div
+            key="options"
+            className="flex h-10 flex-shrink-0 items-center space-x-1 px-[0.665rem]"
+            initial={{ x: 0, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: 10, opacity: 0 }}
+          >
+            <ProjectPermissionCan
+              I={ProjectPermissionSecretRotationActions.Edit}
+              a={subject(ProjectPermissionSub.SecretRotation, {
+                environment: environment.slug,
+                secretPath: folder.path
+              })}
+              renderTooltip
+              allowedLabel="Edit"
+            >
+              {(isAllowed) => (
+                <IconButton
+                  ariaLabel="Edit rotation"
+                  variant="plain"
+                  size="md"
+                  isDisabled={!isAllowed}
+                  className="opacity-0 group-hover:opacity-100"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit();
+                  }}
+                >
+                  <FontAwesomeIcon icon={faEdit} />
+                </IconButton>
+              )}
+            </ProjectPermissionCan>
+            <ProjectPermissionCan
+              I={ProjectPermissionSecretRotationActions.Delete}
+              a={subject(ProjectPermissionSub.SecretRotation, {
+                environment: environment.slug,
+                secretPath: folder.path
+              })}
+              renderTooltip
+              allowedLabel="Delete"
+            >
+              {(isAllowed) => (
+                <IconButton
+                  ariaLabel="Delete rotation"
+                  variant="plain"
+                  colorSchema="danger"
+                  size="md"
+                  className="opacity-0 group-hover:opacity-100"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete();
+                  }}
+                  isDisabled={!isAllowed}
+                >
+                  <FontAwesomeIcon icon={faClose} size="lg" />
+                </IconButton>
+              )}
+            </ProjectPermissionCan>
+          </motion.div>
+        </AnimatePresence>
+      </div>
+      <Modal onOpenChange={setShowSecrets} isOpen={showSecrets}>
+        <ModalContent
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          className="max-w-3xl"
+          title="Rotation Secrets"
+        >
+          <TableContainer>
+            <table className="secret-table">
+              <tbody>
+                {secrets.map((secret, index) => {
+                  return (
+                    <Tooltip
+                      className="max-w-sm"
+                      content={
+                        secret ? undefined : "You do not have permission to view this secret."
+                      }
+                    >
+                      <tr
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={`rotation-secret-${secretRotation.id}-${index}`}
+                        className="h-full last:!border-b-0 hover:bg-mineshaft-700"
+                      >
+                        <td className="flex h-full items-center" style={{ padding: "0.5rem 1rem" }}>
+                          <span className={twMerge(!secret && "blur")}>
+                            {secret?.key ?? "********"}
+                          </span>
+                        </td>
+                        <td className="col-span-2 h-full w-full" style={{ padding: "0.5rem 1rem" }}>
+                          {/* eslint-disable-next-line no-nested-ternary */}
+                          {!secret ? (
+                            <div className="h-full pl-4 blur">********</div>
+                          ) : secret.secretValueHidden ? (
+                            <Blur
+                              className="py-0"
+                              tooltipText="You do not have permission to read the value of this secret."
+                            />
+                          ) : (
+                            <InfisicalSecretInput
+                              isReadOnly
+                              value={secret.value}
+                              secretPath={secretRotation.folder.path}
+                              environment={secretRotation.environment.slug}
+                              onChange={() => {}}
+                            />
+                          )}
+                        </td>
+                      </tr>
+                    </Tooltip>
+                  );
+                })}
+              </tbody>
+            </table>
+          </TableContainer>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
@@ -0,0 +1,60 @@
+import { DeleteSecretRotationV2Modal } from "@app/components/secret-rotations-v2/DeleteSecretRotationV2Modal";
+import { EditSecretRotationV2Modal } from "@app/components/secret-rotations-v2/EditSecretRotationV2Modal";
+import { RotateSecretRotationV2Modal } from "@app/components/secret-rotations-v2/RotateSecretRotationV2Modal";
+import { ViewSecretRotationV2GeneratedCredentialsModal } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials";
+import { usePopUp } from "@app/hooks";
+import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretRotationItem } from "./SecretRotationItem";
+
+type Props = {
+  secretRotations?: TSecretRotationV2[];
+};
+
+export const SecretRotationListView = ({ secretRotations }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "editSecretRotation",
+    "rotateSecretRotation",
+    "viewSecretRotationGeneratedCredentials",
+    "deleteSecretRotation"
+  ] as const);
+
+  return (
+    <>
+      {secretRotations?.map((secretRotation) => (
+        <SecretRotationItem
+          key={secretRotation.id}
+          secretRotation={secretRotation}
+          onEdit={() => handlePopUpOpen("editSecretRotation", secretRotation)}
+          onRotate={() => handlePopUpOpen("rotateSecretRotation", secretRotation)}
+          onViewGeneratedCredentials={() =>
+            handlePopUpOpen("viewSecretRotationGeneratedCredentials", secretRotation)
+          }
+          onDelete={() => handlePopUpOpen("deleteSecretRotation", secretRotation)}
+        />
+      ))}
+      <EditSecretRotationV2Modal
+        isOpen={popUp.editSecretRotation.isOpen}
+        secretRotation={popUp.editSecretRotation.data as TSecretRotationV2}
+        onOpenChange={(isOpen) => handlePopUpToggle("editSecretRotation", isOpen)}
+      />
+      <RotateSecretRotationV2Modal
+        isOpen={popUp.rotateSecretRotation.isOpen}
+        secretRotation={popUp.rotateSecretRotation.data as TSecretRotationV2}
+        onOpenChange={(isOpen) => handlePopUpToggle("rotateSecretRotation", isOpen)}
+      />
+      <ViewSecretRotationV2GeneratedCredentialsModal
+        isOpen={popUp.viewSecretRotationGeneratedCredentials.isOpen}
+        secretRotation={popUp.viewSecretRotationGeneratedCredentials.data as TSecretRotationV2}
+        onOpenChange={(isOpen) =>
+          handlePopUpToggle("viewSecretRotationGeneratedCredentials", isOpen)
+        }
+      />
+      <DeleteSecretRotationV2Modal
+        isOpen={popUp.deleteSecretRotation.isOpen}
+        secretRotation={popUp.deleteSecretRotation.data as TSecretRotationV2}
+        onOpenChange={(isOpen) => handlePopUpToggle("deleteSecretRotation", isOpen)}
+      />
+    </>
+  );
+};
@@ -0,0 +1 @@
+export { SecretRotationListView } from "./SecretRotationListView";
@@ -76,7 +76,7 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
          <FontAwesomeIcon icon={faKey} />
        </div>
        <div className="flex flex-grow items-center space-x-4 px-4 py-3">
-          {mode === "modified" ? (
+          {mode === "modified" && !preSecret?.isRotatedSecret ? (
            <>
              <div>{preSecret?.key}</div>
              <div className="rounded-lg bg-primary px-1 py-0.5 text-xs font-bold text-black">
@@ -90,7 +90,14 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
              </div>
            </>
          ) : (
-            postSecret.key
+            <>
+              {postSecret.key}
+              {postSecret.isRotatedSecret && (
+                <span className="ml-2 text-mineshaft-400">
+                  Rotated Secrets are not affected by Rollback
+                </span>
+              )}
+            </>
          )}
        </div>
      </div>
@@ -98,9 +98,12 @@ export const SnapshotView = ({
      const doesExist = Boolean(secretGroupById?.[id]);
      if (doesExist) {
        diffView.push({
-          mode: deepCompareSecrets(rollSecret, secretGroupById[id])
-            ? TDiffModes.NoChange
-            : TDiffModes.Modified,
+          mode:
+            rollSecret.isRotatedSecret ||
+            secretGroupById[id]?.isRotatedSecret ||
+            deepCompareSecrets(rollSecret, secretGroupById[id])
+              ? TDiffModes.NoChange
+              : TDiffModes.Modified,
          pre: secretGroupById[id],
          post: rollSecret
        });
@@ -11,15 +11,19 @@ import {
  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { formatDistance } from "date-fns";

 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
+  Button,
  DeleteActionModal,
  EmptyState,
  IconButton,
+  Modal,
+  ModalContent,
  PageHeader,
  Skeleton,
  Spinner,
@@ -33,13 +37,9 @@ import {
  Tooltip,
  Tr
 } from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useProjectPermission,
-  useSubscription,
-  useWorkspace
-} from "@app/context";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import { ProjectPermissionSub, useWorkspace } from "@app/context";
+import { ProjectPermissionSecretRotationActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 import {
  useDeleteSecretRotation,
@@ -47,26 +47,20 @@ import {
  useGetSecretRotations,
  useRestartSecretRotation
 } from "@app/hooks/api";
-import { TSecretRotationProviderTemplate } from "@app/hooks/api/types";
-
-import { CreateRotationForm } from "./components/CreateRotationForm";
+import { ProjectType } from "@app/hooks/api/workspace/types";

 const Page = () => {
  const { currentWorkspace } = useWorkspace();
-  const { permission } = useProjectPermission();
+
+  const navigate = useNavigate();

  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
-    "createRotation",
    "activeBot",
    "deleteRotation",
-    "upgradePlan"
+    "upgradePlan",
+    "secretRotationV2"
  ] as const);
  const workspaceId = currentWorkspace?.id || "";
-  const canCreateRotation = permission.can(
-    ProjectPermissionActions.Create,
-    ProjectPermissionSub.SecretRotation
-  );
-  const { subscription } = useSubscription();

  const { data: secretRotationProviders, isPending: isRotationProviderLoading } =
    useGetSecretRotationProviders({ workspaceId });
@@ -125,18 +119,6 @@ const Page = () => {
    }
  };

-  const handleCreateRotation = async (provider: TSecretRotationProviderTemplate) => {
-    if (subscription && !subscription?.secretRotation) {
-      handlePopUpOpen("upgradePlan");
-      return;
-    }
-    if (!canCreateRotation) {
-      createNotification({ type: "error", text: "Access permission denied!!" });
-      return;
-    }
-    handlePopUpOpen("createRotation", provider);
-  };
-
  return (
    <div className="container mx-auto w-full max-w-7xl bg-bunker-800 text-white">
      <PageHeader
@@ -157,6 +139,22 @@ const Page = () => {
          </span>
        </a>
      </PageHeader>
+      <NoticeBannerV2 title="Secret Rotations Update">
+        <p className="text-sm text-bunker-200">
+          Infisical is revamping its Secret Rotation experience.
+        </p>
+        <p className="mt-2 text-sm text-bunker-200">
+          Secret Rotations can now be created from the{" "}
+          <Link
+            className="text-mineshaft-100 underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+            to={`/${ProjectType.SecretManager}/$projectId/overview` as const}
+            params={{ projectId: currentWorkspace.id }}
+          >
+            Secret Manager Dashboard
+          </Link>{" "}
+          from the actions dropdown.
+        </p>
+      </NoticeBannerV2>
      <div className="mb-6">
        <div className="mb-2 mt-6 text-xl font-semibold text-gray-200">Rotated Secrets</div>
        <div className="flex flex-col space-y-2">
@@ -241,7 +239,7 @@ const Page = () => {
                        <Td>
                          <div className="flex justify-end space-x-2">
                            <ProjectPermissionCan
-                              I={ProjectPermissionActions.Edit}
+                              I={ProjectPermissionSecretRotationActions.Edit}
                              a={ProjectPermissionSub.SecretRotation}
                              allowedLabel="Rotate now"
                              renderTooltip
@@ -263,7 +261,7 @@ const Page = () => {
                              )}
                            </ProjectPermissionCan>
                            <ProjectPermissionCan
-                              I={ProjectPermissionActions.Delete}
+                              I={ProjectPermissionSecretRotationActions.Delete}
                              a={ProjectPermissionSub.SecretRotation}
                              allowedLabel="Rotate now"
                              renderTooltip
@@ -310,10 +308,12 @@ const Page = () => {
              key={`infisical-rotation-provider-${provider.name}`}
              tabIndex={0}
              role="button"
-              onKeyDown={(evt) => {
-                if (evt.key === "Enter") handlePopUpOpen("createRotation", provider);
+              onKeyDown={() => {
+                handlePopUpOpen("secretRotationV2", provider.title);
+              }}
+              onClick={() => {
+                handlePopUpOpen("secretRotationV2", provider.title);
              }}
-              onClick={() => handleCreateRotation(provider)}
            >
              <img
                src={`/images/secretRotation/${provider.image}`}
@@ -344,12 +344,6 @@ const Page = () => {
          </div>
        </a>
      </div>
-      <CreateRotationForm
-        isOpen={popUp.createRotation.isOpen}
-        workspaceId={workspaceId}
-        onToggle={(isOpen) => handlePopUpToggle("createRotation", isOpen)}
-        provider={(popUp.createRotation.data as TSecretRotationProviderTemplate) || {}}
-      />
      <DeleteActionModal
        isOpen={popUp.deleteRotation.isOpen}
        title="Are you sure want to delete this rotation?"
@@ -363,6 +357,45 @@ const Page = () => {
        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
        text="You can add secret rotation if you switch to Infisical's Team plan."
      />
+      <Modal
+        isOpen={popUp.secretRotationV2.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("secretRotationV2", isOpen)}
+      >
+        <ModalContent className="max-w-5xl" title="Secret Rotation Update">
+          <div className="flex flex-col gap-2">
+            <p className="text-mineshaft-200">
+              Infisical is revamping its Secret Rotation experience. Navigate to the{" "}
+              <Link
+                className="text-mineshaft-100 underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+                to={`/${ProjectType.SecretManager}/$projectId/overview` as const}
+                params={{ projectId: currentWorkspace.id }}
+              >
+                Secret Manager Dashboard
+              </Link>{" "}
+              to create a Secret Rotation.
+            </p>
+            <div className="overflow-clip rounded border border-mineshaft-600">
+              <img
+                src="/images/secretRotation/secret-rotations-v2-location.png"
+                alt="Secret Rotation V2 location"
+              />
+            </div>
+            <div className="mt-2 flex gap-2">
+              <Button
+                onClick={() =>
+                  navigate({
+                    to: `/${ProjectType.SecretManager}/$projectId/overview` as const,
+                    params: { projectId: currentWorkspace.id }
+                  })
+                }
+                colorSchema="secondary"
+              >
+                Navigate to Secret Manager
+              </Button>
+            </div>
+          </div>
+        </ModalContent>
+      </Modal>
    </div>
  );
 };
@@ -377,7 +410,7 @@ export const SecretRotationPage = () => {
        <meta property="og:image" content="/images/message.png" />
      </Helmet>
      <ProjectPermissionCan
-        I={ProjectPermissionActions.Read}
+        I={ProjectPermissionSecretRotationActions.Read}
        a={ProjectPermissionSub.SecretRotation}
        passThrough={false}
        renderGuardBanner
@@ -1,4 +1,4 @@
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { Badge } from "@app/components/v2";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 import { TAwsParameterStoreSync } from "@app/hooks/api/secretSyncs/types/aws-parameter-store-sync";
@@ -16,13 +16,13 @@ export const AwsParameterStoreSyncDestinationSection = ({ secretSync }: Props) =

  return (
    <>
-      <SecretSyncLabel label="Region">
+      <GenericFieldLabel label="Region">
        {awsRegion?.name}
        <Badge className="ml-1" variant="success">
          {awsRegion?.slug}{" "}
        </Badge>
-      </SecretSyncLabel>
-      <SecretSyncLabel label="Path">{path}</SecretSyncLabel>
+      </GenericFieldLabel>
+      <GenericFieldLabel label="Path">{path}</GenericFieldLabel>
    </>
  );
 };
@@ -1,4 +1,4 @@
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { Badge } from "@app/components/v2";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
 import {
@@ -17,17 +17,17 @@ export const AwsSecretsManagerSyncDestinationSection = ({ secretSync }: Props) =

  return (
    <>
-      <SecretSyncLabel label="Region">
+      <GenericFieldLabel label="Region">
        {awsRegion?.name}
        <Badge className="ml-1" variant="success">
          {awsRegion?.slug}{" "}
        </Badge>
-      </SecretSyncLabel>
-      <SecretSyncLabel label="Mapping Behavior" className="capitalize">
+      </GenericFieldLabel>
+      <GenericFieldLabel label="Mapping Behavior" className="capitalize">
        {destinationConfig.mappingBehavior}
-      </SecretSyncLabel>
+      </GenericFieldLabel>
      {destinationConfig.mappingBehavior === AwsSecretsManagerSyncMappingBehavior.ManyToOne && (
-        <SecretSyncLabel label="Secret Name">{destinationConfig.secretName}</SecretSyncLabel>
+        <GenericFieldLabel label="Secret Name">{destinationConfig.secretName}</GenericFieldLabel>
      )}
    </>
  );
@@ -1,4 +1,4 @@
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TAzureAppConfigurationSync } from "@app/hooks/api/secretSyncs/types/azure-app-configuration-sync";

 type Props = {
@@ -12,8 +12,8 @@ export const AzureAppConfigurationSyncDestinationSection = ({ secretSync }: Prop

  return (
    <>
-      <SecretSyncLabel label="Configuration URL">{configurationUrl}</SecretSyncLabel>
-      <SecretSyncLabel label="Label">{label}</SecretSyncLabel>
+      <GenericFieldLabel label="Configuration URL">{configurationUrl}</GenericFieldLabel>
+      <GenericFieldLabel label="Label">{label}</GenericFieldLabel>
    </>
  );
 };
@@ -1,4 +1,4 @@
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TAzureKeyVaultSync } from "@app/hooks/api/secretSyncs/types/azure-key-vault-sync";

 type Props = {
@@ -10,5 +10,5 @@ export const AzureKeyVaultSyncDestinationSection = ({ secretSync }: Props) => {
    destinationConfig: { vaultBaseUrl }
  } = secretSync;

-  return <SecretSyncLabel label="Vault URL">{vaultBaseUrl}</SecretSyncLabel>;
+  return <GenericFieldLabel label="Vault URL">{vaultBaseUrl}</GenericFieldLabel>;
 };
@@ -1,4 +1,4 @@
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TDatabricksSync } from "@app/hooks/api/secretSyncs/types/databricks-sync";

 type Props = {
@@ -10,5 +10,5 @@ export const DatabricksSyncDestinationSection = ({ secretSync }: Props) => {
    destinationConfig: { scope }
  } = secretSync;

-  return <SecretSyncLabel label="Secret Scope">{scope}</SecretSyncLabel>;
+  return <GenericFieldLabel label="Secret Scope">{scope}</GenericFieldLabel>;
 };
@@ -1,4 +1,4 @@
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TGcpSync } from "@app/hooks/api/secretSyncs/types/gcp-sync";

 type Props = {
@@ -10,5 +10,5 @@ export const GcpSyncDestinationSection = ({ secretSync }: Props) => {
    destinationConfig: { projectId }
  } = secretSync;

-  return <SecretSyncLabel label="Project ID">{projectId}</SecretSyncLabel>;
+  return <GenericFieldLabel label="Project ID">{projectId}</GenericFieldLabel>;
 };
@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { GitHubSyncSelectedRepositoriesTooltipContent } from "@app/components/secret-syncs/github";
 import { Tooltip } from "@app/components/v2";
 import {
@@ -23,12 +23,12 @@ export const GitHubSyncDestinationSection = ({ secretSync }: Props) => {
    case GitHubSyncScope.Organization:
      Components = (
        <>
-          <SecretSyncLabel label="Organization">{destinationConfig.org}</SecretSyncLabel>
-          <SecretSyncLabel label="Visibility" className="capitalize">
+          <GenericFieldLabel label="Organization">{destinationConfig.org}</GenericFieldLabel>
+          <GenericFieldLabel label="Visibility" className="capitalize">
            {destinationConfig.visibility} Repositories
-          </SecretSyncLabel>
+          </GenericFieldLabel>
          {destinationConfig.visibility === GitHubSyncVisibility.Selected && (
-            <SecretSyncLabel label="Selected Repositories">
+            <GenericFieldLabel label="Selected Repositories">
              {destinationConfig.selectedRepositoryIds?.length ?? 0} Repositories
              <Tooltip
                side="bottom"
@@ -36,25 +36,25 @@ export const GitHubSyncDestinationSection = ({ secretSync }: Props) => {
              >
                <FontAwesomeIcon size="xs" className="ml-1 text-bunker-300" icon={faInfoCircle} />
              </Tooltip>
-            </SecretSyncLabel>
+            </GenericFieldLabel>
          )}
        </>
      );
      break;
    case GitHubSyncScope.Repository:
      Components = (
-        <SecretSyncLabel label="Repository">
+        <GenericFieldLabel label="Repository">
          {destinationConfig.owner}/{destinationConfig.repo}
-        </SecretSyncLabel>
+        </GenericFieldLabel>
      );
      break;
    case GitHubSyncScope.RepositoryEnvironment:
      Components = (
        <>
-          <SecretSyncLabel label="Repository">
+          <GenericFieldLabel label="Repository">
            {destinationConfig.owner}/{destinationConfig.repo}
-          </SecretSyncLabel>
-          <SecretSyncLabel label="Environment">{destinationConfig.env}</SecretSyncLabel>
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Environment">{destinationConfig.env}</GenericFieldLabel>
        </>
      );
      break;
@@ -66,9 +66,9 @@ export const GitHubSyncDestinationSection = ({ secretSync }: Props) => {

  return (
    <>
-      <SecretSyncLabel className="capitalize" label="Scope">
+      <GenericFieldLabel className="capitalize" label="Scope">
        {destinationConfig.scope.replace("-", " ")}
-      </SecretSyncLabel>
+      </GenericFieldLabel>
      {Components}
    </>
  );
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";

-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import {
  HumanitecSyncScope,
  THumanitecSync
@@ -18,17 +18,17 @@ export const HumanitecSyncDestinationSection = ({ secretSync }: Props) => {
    case HumanitecSyncScope.Application:
      Components = (
        <>
-          <SecretSyncLabel label="Application">{destinationConfig.app}</SecretSyncLabel>
-          <SecretSyncLabel label="Organization">{destinationConfig.org}</SecretSyncLabel>
+          <GenericFieldLabel label="Application">{destinationConfig.app}</GenericFieldLabel>
+          <GenericFieldLabel label="Organization">{destinationConfig.org}</GenericFieldLabel>
        </>
      );
      break;
    case HumanitecSyncScope.Environment:
      Components = (
        <>
-          <SecretSyncLabel label="Application">{destinationConfig.app}</SecretSyncLabel>
-          <SecretSyncLabel label="Organization">{destinationConfig.org}</SecretSyncLabel>
-          <SecretSyncLabel label="Environment">{destinationConfig.env}</SecretSyncLabel>
+          <GenericFieldLabel label="Application">{destinationConfig.app}</GenericFieldLabel>
+          <GenericFieldLabel label="Organization">{destinationConfig.org}</GenericFieldLabel>
+          <GenericFieldLabel label="Environment">{destinationConfig.env}</GenericFieldLabel>
        </>
      );
      break;
@@ -40,9 +40,9 @@ export const HumanitecSyncDestinationSection = ({ secretSync }: Props) => {

  return (
    <>
-      <SecretSyncLabel className="capitalize" label="Scope">
+      <GenericFieldLabel className="capitalize" label="Scope">
        {destinationConfig.scope.replace("-", " ")}
-      </SecretSyncLabel>
+      </GenericFieldLabel>
      {Components}
    </>
  );
@@ -3,7 +3,7 @@ import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { ProjectPermissionCan } from "@app/components/permissions";
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { IconButton } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -87,7 +87,7 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
        </ProjectPermissionCan>
      </div>
      <div className="flex w-full flex-wrap gap-8">
-        <SecretSyncLabel label={`${app} Connection`}>{connection.name}</SecretSyncLabel>
+        <GenericFieldLabel label={`${app} Connection`}>{connection.name}</GenericFieldLabel>
        {DestinationComponents}
      </div>
    </div>
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";

-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TVercelSync, VercelEnvironmentType } from "@app/hooks/api/secretSyncs/types/vercel-sync";

 type Props = {
@@ -14,16 +14,16 @@ export const VercelSyncDestinationSection = ({ secretSync }: Props) => {
  if (destinationConfig.env === VercelEnvironmentType.Preview && destinationConfig.branch) {
    Components = (
      <>
-        <SecretSyncLabel label="Vercel App">{destinationConfig.app}</SecretSyncLabel>
-        <SecretSyncLabel label="Environment">{destinationConfig.env}</SecretSyncLabel>
-        <SecretSyncLabel label="Preview Branch">{destinationConfig.branch}</SecretSyncLabel>
+        <GenericFieldLabel label="Vercel App">{destinationConfig.app}</GenericFieldLabel>
+        <GenericFieldLabel label="Environment">{destinationConfig.env}</GenericFieldLabel>
+        <GenericFieldLabel label="Preview Branch">{destinationConfig.branch}</GenericFieldLabel>
      </>
    );
  } else {
    Components = (
      <>
-        <SecretSyncLabel label="Vercel App">{destinationConfig.app}</SecretSyncLabel>
-        <SecretSyncLabel label="Environment">{destinationConfig.env}</SecretSyncLabel>
+        <GenericFieldLabel label="Vercel App">{destinationConfig.app}</GenericFieldLabel>
+        <GenericFieldLabel label="Environment">{destinationConfig.env}</GenericFieldLabel>
      </>
    );
  }
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";

 import { ProjectPermissionCan } from "@app/components/permissions";
-import { SecretSyncLabel, SecretSyncStatusBadge } from "@app/components/secret-syncs";
+import { GenericFieldLabel, SecretSyncStatusBadge } from "@app/components/secret-syncs";
 import { IconButton } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -55,22 +55,22 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
      </div>
      <div>
        <div className="space-y-3">
-          <SecretSyncLabel label="Name">{name}</SecretSyncLabel>
-          <SecretSyncLabel label="Description">{description}</SecretSyncLabel>
+          <GenericFieldLabel label="Name">{name}</GenericFieldLabel>
+          <GenericFieldLabel label="Description">{description}</GenericFieldLabel>
          {syncStatus && (
-            <SecretSyncLabel label="Status">
+            <GenericFieldLabel label="Status">
              <SecretSyncStatusBadge status={syncStatus} />
-            </SecretSyncLabel>
+            </GenericFieldLabel>
          )}
          {lastSyncedAt && (
-            <SecretSyncLabel label="Last Synced">
+            <GenericFieldLabel label="Last Synced">
              {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
-            </SecretSyncLabel>
+            </GenericFieldLabel>
          )}
          {syncStatus === SecretSyncStatus.Failed && failureMessage && (
-            <SecretSyncLabel labelClassName="text-red" label="Last Sync Error">
+            <GenericFieldLabel labelClassName="text-red" label="Last Sync Error">
              <p className="break-words rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</p>
-            </SecretSyncLabel>
+            </GenericFieldLabel>
          )}
        </div>
      </div>
@@ -1,7 +1,7 @@
 import { faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
 import { TAwsParameterStoreSync } from "@app/hooks/api/secretSyncs/types/aws-parameter-store-sync";

@@ -16,9 +16,9 @@ export const AwsParameterStoreSyncOptionsSection = ({ secretSync }: Props) => {

  return (
    <>
-      {keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
+      {keyId && <GenericFieldLabel label="KMS Key">{keyId}</GenericFieldLabel>}
      {tags && tags.length > 0 && (
-        <SecretSyncLabel label="Resource Tags">
+        <GenericFieldLabel label="Resource Tags">
          <Tooltip
            side="right"
            className="max-w-xl p-1"
@@ -48,12 +48,12 @@ export const AwsParameterStoreSyncOptionsSection = ({ secretSync }: Props) => {
              </Badge>
            </div>
          </Tooltip>
-        </SecretSyncLabel>
+        </GenericFieldLabel>
      )}
      {syncSecretMetadataAsTags && (
-        <SecretSyncLabel label="Sync Secret Metadata as Resource Tags">
+        <GenericFieldLabel label="Sync Secret Metadata as Resource Tags">
          <Badge variant="success">Enabled</Badge>
-        </SecretSyncLabel>
+        </GenericFieldLabel>
      )}
    </>
  );
@@ -1,7 +1,7 @@
 import { faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
 import { TAwsSecretsManagerSync } from "@app/hooks/api/secretSyncs/types/aws-secrets-manager-sync";

@@ -16,9 +16,9 @@ export const AwsSecretsManagerSyncOptionsSection = ({ secretSync }: Props) => {

  return (
    <>
-      {keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
+      {keyId && <GenericFieldLabel label="KMS Key">{keyId}</GenericFieldLabel>}
      {tags && tags.length > 0 && (
-        <SecretSyncLabel label="Tags">
+        <GenericFieldLabel label="Tags">
          <Tooltip
            side="right"
            className="max-w-xl p-1"
@@ -48,12 +48,12 @@ export const AwsSecretsManagerSyncOptionsSection = ({ secretSync }: Props) => {
              </Badge>
            </div>
          </Tooltip>
-        </SecretSyncLabel>
+        </GenericFieldLabel>
      )}
      {syncSecretMetadataAsTags && (
-        <SecretSyncLabel label="Sync Secret Metadata as Tags">
+        <GenericFieldLabel label="Sync Secret Metadata as Tags">
          <Badge variant="success">Enabled</Badge>
-        </SecretSyncLabel>
+        </GenericFieldLabel>
      )}
    </>
  );
@@ -3,7 +3,7 @@ import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { ProjectPermissionCan } from "@app/components/permissions";
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { Badge, IconButton } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -79,16 +79,16 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
        </div>
        <div>
          <div className="space-y-3">
-            <SecretSyncLabel label="Initial Sync Behavior">
+            <GenericFieldLabel label="Initial Sync Behavior">
              {SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP[initialSyncBehavior](destination).name}
-            </SecretSyncLabel>
+            </GenericFieldLabel>
            {/* <SecretSyncLabel label="Prefix">{prependPrefix}</SecretSyncLabel>
            <SecretSyncLabel label="Suffix">{appendSuffix}</SecretSyncLabel> */}
            {AdditionalSyncOptionsComponent}
            {disableSecretDeletion && (
-              <SecretSyncLabel label="Secret Deletion">
+              <GenericFieldLabel label="Secret Deletion">
                <Badge variant="primary">Disabled</Badge>
-              </SecretSyncLabel>
+              </GenericFieldLabel>
            )}
          </div>
        </div>
@@ -2,7 +2,7 @@ import { faEdit, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { ProjectPermissionCan } from "@app/components/permissions";
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { Badge, IconButton, Tooltip } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
@@ -55,8 +55,8 @@ export const SecretSyncSourceSection = ({ secretSync, onEditSource }: Props) =>
        </div>
        <div>
          <div className="space-y-3">
-            <SecretSyncLabel label="Environment">{environment?.name}</SecretSyncLabel>
-            <SecretSyncLabel label="Path">{folder?.path}</SecretSyncLabel>
+            <GenericFieldLabel label="Environment">{environment?.name}</GenericFieldLabel>
+            <GenericFieldLabel label="Path">{folder?.path}</GenericFieldLabel>
          </div>
        </div>
      </div>
				`@@ -0,0 +1 @@`
				`export { SecretOverviewSecretRotationRow } from "./SecretOverviewSecretRotationRow";`
				`@@ -0,0 +1 @@`
				`export { SecretRotationListView } from "./SecretRotationListView";`