diff --git a/backend/src/server/routes/v1/dashboard-router.ts b/backend/src/server/routes/v1/dashboard-router.ts
index 029d4a848..48d536c14 100644
--- a/backend/src/server/routes/v1/dashboard-router.ts
+++ b/backend/src/server/routes/v1/dashboard-router.ts
@@ -2,6 +2,7 @@ import { ForbiddenError } from "@casl/ability";
 import { z } from "zod";
 
 import { SecretFoldersSchema, SecretImportsSchema, UsersSchema } from "@app/db/schemas";
+import { RemindersSchema } from "@app/db/schemas/reminders";
 import { EventType, UserAgentType } from "@app/ee/services/audit-log/audit-log-types";
 import { ProjectPermissionSecretActions } from "@app/ee/services/permission/project-permission";
 import { SecretRotationV2Schema } from "@app/ee/services/secret-rotation-v2/secret-rotation-v2-union-schema";
@@ -628,7 +629,10 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
               secretValueHidden: z.boolean(),
               secretPath: z.string().optional(),
               secretMetadata: ResourceMetadataSchema.optional(),
-              tags: SanitizedTagSchema.array().optional()
+              tags: SanitizedTagSchema.array().optional(),
+              reminder: RemindersSchema.extend({
+                recipients: z.string().array().optional()
+              }).nullish()
             })
             .array()
             .optional(),
@@ -706,7 +710,11 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
 
       let imports: Awaited<ReturnType<typeof server.services.secretImport.getImports>> | undefined;
       let folders: Awaited<ReturnType<typeof server.services.folder.getFolders>> | undefined;
-      let secrets: Awaited<ReturnType<typeof server.services.secret.getSecretsRaw>>["secrets"] | undefined;
+      let secrets:
+        | (Awaited<ReturnType<typeof server.services.secret.getSecretsRaw>>["secrets"][number] & {
+            reminder: Awaited<ReturnType<typeof server.services.reminder.getRemindersForDashboard>>[string] | null;
+          })[]
+        | undefined;
       let dynamicSecrets: Awaited<ReturnType<typeof server.services.dynamicSecret.listDynamicSecretsByEnv>> | undefined;
       let secretRotations:
         | Awaited<ReturnType<typeof server.services.secretRotationV2.getDashboardSecretRotations>>
@@ -904,7 +912,7 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
           });
 
           if (remainingLimit > 0 && totalSecretCount > adjustedOffset) {
-            secrets = (
+            const rawSecrets = (
               await server.services.secret.getSecretsRaw({
                 actorId: req.permission.id,
                 actor: req.permission.type,
@@ -925,6 +933,15 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
                 includeMetadataInSearch: true
               })
             ).secrets;
+
+            const reminders = await server.services.reminder.getRemindersForDashboard(
+              rawSecrets.map((secret) => secret.id)
+            );
+
+            secrets = rawSecrets.map((secret) => ({
+              ...secret,
+              reminder: reminders[secret.id] ?? null
+            }));
           }
         }
       } catch (error) {
diff --git a/backend/src/services/reminder/reminder-dal.ts b/backend/src/services/reminder/reminder-dal.ts
index 0e5d7b895..897a75234 100644
--- a/backend/src/services/reminder/reminder-dal.ts
+++ b/backend/src/services/reminder/reminder-dal.ts
@@ -124,10 +124,35 @@ export const reminderDALFactory = (db: TDbClient) => {
     return reminders[0] || null;
   };
 
+  const findSecretReminders = async (secretIds: string[], tx?: Knex) => {
+    const rawReminders = await (tx || db)(TableName.Reminder)
+      .whereIn(`${TableName.Reminder}.secretId`, secretIds)
+      .leftJoin(TableName.ReminderRecipient, `${TableName.Reminder}.id`, `${TableName.ReminderRecipient}.reminderId`)
+      .select(selectAllTableCols(TableName.Reminder))
+      .select(db.ref("userId").withSchema(TableName.ReminderRecipient));
+    const reminders = sqlNestRelationships({
+      data: rawReminders,
+      key: "id",
+      parentMapper: (el) => ({
+        _id: el.id,
+        ...RemindersSchema.parse(el)
+      }),
+      childrenMapper: [
+        {
+          key: "userId",
+          label: "recipients" as const,
+          mapper: ({ userId }) => userId
+        }
+      ]
+    });
+    return reminders;
+  };
+
   return {
     ...reminderOrm,
     findSecretDailyReminders,
     findUpcomingReminders,
-    findSecretReminder
+    findSecretReminder,
+    findSecretReminders
   };
 };
diff --git a/backend/src/services/reminder/reminder-service.ts b/backend/src/services/reminder/reminder-service.ts
index 181f0cdb9..86788c249 100644
--- a/backend/src/services/reminder/reminder-service.ts
+++ b/backend/src/services/reminder/reminder-service.ts
@@ -372,6 +372,21 @@ export const reminderServiceFactory = ({
     };
   };
 
+  const getRemindersForDashboard: TReminderServiceFactory["getRemindersForDashboard"] = async (secretIds) => {
+    // scott we don't need to check permissions/secret existence because these are the
+    // secrets from the dashboard that have already gone through these checks
+
+    const reminders = await reminderDAL.findSecretReminders(secretIds);
+
+    const reminderMap: Record<string, (typeof reminders)[number]> = {};
+
+    reminders.forEach((reminder) => {
+      if (reminder.secretId) reminderMap[reminder.secretId] = reminder;
+    });
+
+    return reminderMap;
+  };
+
   return {
     createReminder,
     getReminder,
@@ -379,6 +394,7 @@ export const reminderServiceFactory = ({
     deleteReminder,
     deleteReminderBySecretId,
     batchCreateReminders,
-    createReminderInternal
+    createReminderInternal,
+    getRemindersForDashboard
   };
 };
diff --git a/backend/src/services/reminder/reminder-types.ts b/backend/src/services/reminder/reminder-types.ts
index 54726ab66..078e049b5 100644
--- a/backend/src/services/reminder/reminder-types.ts
+++ b/backend/src/services/reminder/reminder-types.ts
@@ -103,4 +103,6 @@ export interface TReminderServiceFactory {
     id: string;
     created: boolean;
   }>;
+
+  getRemindersForDashboard: (secretIds: string[]) => Promise<Record<string, TReminder & { recipients: string[] }>>;
 }
diff --git a/frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx b/frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx
index b8724f5dc..a9542c90c 100644
--- a/frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx
+++ b/frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx
@@ -125,7 +125,7 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
   if (isPending) {
     return (
       <div className="flex items-center justify-center py-4">
-        <Spinner size="xs" />
+        <Spinner className="text-mineshaft-400" />
       </div>
     );
   }
diff --git a/frontend/src/components/v2/Drawer/Drawer.tsx b/frontend/src/components/v2/Drawer/Drawer.tsx
index e74995333..7ebbe1350 100644
--- a/frontend/src/components/v2/Drawer/Drawer.tsx
+++ b/frontend/src/components/v2/Drawer/Drawer.tsx
@@ -13,6 +13,7 @@ export type DrawerContentProps = DialogPrimitive.DialogContentProps & {
   subTitle?: ReactNode;
   footerContent?: ReactNode;
   onClose?: () => void;
+  cardBodyClassName?: string;
 } & VariantProps<typeof drawerContentVariation>;
 
 const drawerContentVariation = cva(
@@ -32,7 +33,17 @@ const drawerContentVariation = cva(
 
 export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
   (
-    { children, title, subTitle, className, footerContent, direction = "right", onClose, ...props },
+    {
+      children,
+      title,
+      subTitle,
+      className,
+      footerContent,
+      direction = "right",
+      onClose,
+      cardBodyClassName,
+      ...props
+    },
     forwardedRef
   ) => (
     <DialogPrimitive.Portal>
@@ -47,11 +58,16 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
       >
         <Card isRounded={false} className="dark h-full w-full">
           {title && (
-            <CardTitle subTitle={subTitle} className="px-4">
+            <CardTitle subTitle={subTitle} className="mb-0 px-4">
               {title}
             </CardTitle>
           )}
-          <CardBody className="flex-grow overflow-y-auto overflow-x-hidden px-4 dark:[color-scheme:dark]">
+          <CardBody
+            className={twMerge(
+              "flex-grow overflow-y-auto overflow-x-hidden px-4 pt-4 dark:[color-scheme:dark]",
+              cardBodyClassName
+            )}
+          >
             {children}
           </CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}{" "}
diff --git a/frontend/src/hooks/api/secrets/queries.tsx b/frontend/src/hooks/api/secrets/queries.tsx
index 10796c6e2..443b74df8 100644
--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -88,7 +88,8 @@ export const mergePersonalSecrets = (rawSecrets: SecretV3Raw[]) => {
       path: el.secretPath,
       secretMetadata: el.secretMetadata,
       isRotatedSecret: el.isRotatedSecret,
-      rotationId: el.rotationId
+      rotationId: el.rotationId,
+      reminder: el.reminder
     };
 
     if (el.type === SecretType.Personal) {
diff --git a/frontend/src/hooks/api/secrets/types.ts b/frontend/src/hooks/api/secrets/types.ts
index 29da8e578..1b232cfac 100644
--- a/frontend/src/hooks/api/secrets/types.ts
+++ b/frontend/src/hooks/api/secrets/types.ts
@@ -1,4 +1,5 @@
 import { ProjectPermissionActions } from "@app/context";
+import { Reminder } from "@app/hooks/api/reminders/types";
 
 import { PendingAction } from "../secretFolders/types";
 import type { WsTag } from "../tags/types";
@@ -69,6 +70,7 @@ export type SecretV3RawSanitized = {
   rotationId?: string;
   isPending?: boolean;
   pendingAction?: PendingAction;
+  reminder?: Reminder;
 };
 
 export type SecretV3Raw = {
@@ -94,6 +96,7 @@ export type SecretV3Raw = {
   isRotatedSecret?: boolean;
   rotationId?: string;
   secretReminderRecipients?: SecretReminderRecipient[];
+  reminder?: Reminder;
 };
 
 export type SecretV3RawResponse = {
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
index 92565b7ad..d3845fcbc 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
@@ -1,15 +1,16 @@
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
 import { faCircleQuestion, faEye } from "@fortawesome/free-regular-svg-icons";
 import {
   faArrowRotateRight,
   faCheckCircle,
-  faClock,
   faCopy,
   faDesktop,
   faEyeSlash,
   faPlus,
+  faProjectDiagram,
+  faSearch,
   faServer,
   faShare,
   faTag,
@@ -26,6 +27,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 { hasSecretReference, SecretReferenceTree } from "@app/components/secrets/SecretReferenceDetails";
 import {
   Button,
   Drawer,
@@ -39,30 +41,26 @@ import {
   FormLabel,
   IconButton,
   Input,
+  Modal,
+  ModalContent,
   Switch,
   Tag,
   TextArea,
   Tooltip
 } from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useProjectPermission,
-  useWorkspace
-} from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission, useWorkspace } from "@app/context";
+
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { getProjectBaseURL } from "@app/helpers/project";
-import { usePopUp, useToggle } from "@app/hooks";
+import { usePopUp } from "@app/hooks";
 import { useGetSecretVersion } from "@app/hooks/api";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
-import { useGetReminder } from "@app/hooks/api/reminders";
 import { useGetSecretAccessList } from "@app/hooks/api/secrets/queries";
 import { SecretV3RawSanitized, WsTag } from "@app/hooks/api/types";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 import { camelCaseToSpaces } from "@app/lib/fn/string";
 
-import { CreateReminderForm } from "./CreateReminderForm";
 import { HIDDEN_SECRET_VALUE } from "./SecretItem";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 
@@ -102,7 +100,7 @@ export const SecretDetailSidebar = ({
     handleSubmit,
     setValue,
     reset,
-    formState: { isDirty, isSubmitting }
+    formState: { isDirty }
   } = useForm<TFormSchema>({
     resolver: zodResolver(formSchema),
     values: secret,
@@ -110,12 +108,12 @@ export const SecretDetailSidebar = ({
   });
 
   const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
-    "secretAccessUpgradePlan"
+    "secretAccessUpgradePlan",
+    "secretReferenceTree"
   ] as const);
 
   const { permission } = useProjectPermission();
   const { currentWorkspace } = useWorkspace();
-  const { data: reminderData } = useGetReminder(secret?.id);
 
   const tagFields = useFieldArray({
     control,
@@ -188,25 +186,6 @@ export const SecretDetailSidebar = ({
     secretKey
   });
 
-  const handleOverrideClick = () => {
-    if (isOverridden) {
-      // override need not be flagged delete if it was never saved in server
-      // meaning a new unsaved personal secret but user toggled back later
-      const isUnsavedOverride = !secret.idOverride;
-      setValue(
-        "overrideAction",
-        isUnsavedOverride ? secret?.overrideAction : SecretActionType.Deleted,
-        {
-          shouldDirty: !isUnsavedOverride
-        }
-      );
-      setValue("valueOverride", secret?.valueOverride, { shouldDirty: !isUnsavedOverride });
-    } else {
-      setValue("overrideAction", SecretActionType.Modified, { shouldDirty: true });
-      setValue("valueOverride", "", { shouldDirty: true });
-    }
-  };
-
   const handleTagSelect = (tag: WsTag) => {
     if (selectedTagsGroupById?.[tag.id]) {
       const tagPos = selectedTags.findIndex(({ id }) => id === tag.id);
@@ -222,8 +201,6 @@ export const SecretDetailSidebar = ({
     await onSaveSecret(secret, { ...secret, ...data }, () => reset());
   };
 
-  const [createReminderFormOpen, setCreateReminderFormOpen] = useToggle(false);
-
   useEffect(() => {
     setValue(
       "reminderRecipients",
@@ -289,34 +266,8 @@ export const SecretDetailSidebar = ({
     }
   };
 
-  const getDaysUntilReminder = useMemo(() => {
-    return (): string => {
-      const now = new Date();
-      now.setHours(0, 0, 0, 0);
-
-      const target = new Date(reminderData?.nextReminderDate || "");
-      target.setHours(0, 0, 0, 0);
-
-      const diffTime = target.getTime() - now.getTime();
-      const daysRemaining = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-
-      return `Days until next reminder: ${daysRemaining}`;
-    };
-  }, [reminderData]);
-
   return (
     <>
-      <CreateReminderForm
-        isOpen={createReminderFormOpen}
-        onOpenChange={() => {
-          setCreateReminderFormOpen.toggle();
-        }}
-        workspaceId={currentWorkspace.id}
-        environment={environment}
-        secretPath={secretPath}
-        secretId={secret?.id}
-        reminder={reminderData}
-      />
       <UpgradePlanModal
         isOpen={popUp.secretAccessUpgradePlan.isOpen}
         onOpenChange={(isUpgradeModalOpen) =>
@@ -324,28 +275,125 @@ export const SecretDetailSidebar = ({
         }
         text="Secret access analysis is only available on Infisical's Pro plan and above."
       />
+      <Modal
+        isOpen={popUp.secretReferenceTree.isOpen}
+        onOpenChange={(isSecretRefOpen) =>
+          handlePopUpToggle("secretReferenceTree", isSecretRefOpen)
+        }
+      >
+        <ModalContent
+          title="Secret Reference Details"
+          subTitle="Visual breakdown of secrets referenced by this secret."
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <SecretReferenceTree
+            secretPath={secretPath}
+            environment={environment}
+            secretKey={popUp.secretReferenceTree.data}
+          />
+        </ModalContent>
+      </Modal>
       <Drawer
-        onOpenChange={(state) => {
+        onOpenChange={async (state) => {
           if (isOpen && isDirty) {
-            if (
-              // eslint-disable-next-line no-alert
-              window.confirm(
-                "You have edited the secret. Are you sure you want to reset the change?"
-              )
-            ) {
-              onToggle(false);
-              reset();
-            } else return;
+            await handleSubmit(handleFormSubmit)();
           }
           onToggle(state);
         }}
         isOpen={isOpen}
       >
-        <DrawerContent title={`Secret – ${secret?.key}`} className="thin-scrollbar">
-          <form onSubmit={handleSubmit(handleFormSubmit)} className="h-full">
-            <div className="flex h-full flex-col">
-              <div className="flex flex-row">
-                <div className="w-full">
+        <DrawerContent
+          title={`Secret – ${secret?.key}`}
+          className="thin-scrollbar h-full"
+          cardBodyClassName="pb-0"
+        >
+          <form
+            onSubmit={handleSubmit(handleFormSubmit)}
+            className="flex h-full flex-1 flex-col gap-y-4"
+          >
+            <span className="text-sm text-bunker-300">
+              Changes will automatically be applied for commit
+            </span>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={subject(ProjectPermissionSub.Secrets, {
+                environment,
+                secretPath,
+                secretName: secretKey,
+                secretTags: selectTagSlugs
+              })}
+            >
+              {(isAllowed) => (
+                <Controller
+                  name="value"
+                  key="secret-value"
+                  control={control}
+                  render={({ field }) => (
+                    <FormControl
+                      className="mb-0"
+                      helperText={
+                        cannotReadSecretValue ? (
+                          <div className="flex space-x-2">
+                            <FontAwesomeIcon
+                              icon={faTriangleExclamation}
+                              className="mt-0.5 text-yellow-400"
+                            />
+                            <span>
+                              The value of this secret is hidden because you do not have the read
+                              secret value permission.
+                            </span>
+                          </div>
+                        ) : undefined
+                      }
+                      label="Value"
+                    >
+                      <div className="flex items-start gap-x-2">
+                        <InfisicalSecretInput
+                          isReadOnly={isReadOnly || !isAllowed || secret?.isRotatedSecret}
+                          environment={environment}
+                          secretPath={secretPath}
+                          key="secret-value"
+                          isDisabled={isOverridden}
+                          containerClassName="text-bunker-300 w-full hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                          {...field}
+                          autoFocus={false}
+                        />
+                        <Tooltip
+                          content={
+                            !currentWorkspace.secretSharing
+                              ? "This project does not allow secret sharing."
+                              : "You don't have permission to view the secret value."
+                          }
+                          isDisabled={!secret?.secretValueHidden && currentWorkspace.secretSharing}
+                        >
+                          <Button
+                            isDisabled={
+                              secret?.secretValueHidden || !currentWorkspace.secretSharing
+                            }
+                            className="px-2 py-[0.43rem] font-normal"
+                            variant="outline_bg"
+                            leftIcon={<FontAwesomeIcon icon={faShare} />}
+                            onClick={() => {
+                              const value = secret?.valueOverride ?? secret?.value;
+                              if (value) {
+                                handleSecretShare(value);
+                              }
+                            }}
+                          >
+                            Share
+                          </Button>
+                        </Tooltip>
+                      </div>
+                    </FormControl>
+                  )}
+                />
+              )}
+            </ProjectPermissionCan>
+            <div className="rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4">
+              <Controller
+                control={control}
+                name="skipMultilineEncoding"
+                render={({ field: { value, onChange, onBlur } }) => (
                   <ProjectPermissionCan
                     I={ProjectPermissionActions.Edit}
                     a={subject(ProjectPermissionSub.Secrets, {
@@ -356,466 +404,317 @@ export const SecretDetailSidebar = ({
                     })}
                   >
                     {(isAllowed) => (
-                      <Controller
-                        name="value"
-                        key="secret-value"
-                        control={control}
-                        render={({ field }) => (
-                          <div className="flex items-center gap-2">
-                            <FormControl
-                              className="flex-1"
-                              helperText={
-                                cannotReadSecretValue ? (
-                                  <div className="flex space-x-2">
-                                    <FontAwesomeIcon
-                                      icon={faTriangleExclamation}
-                                      className="mt-0.5 text-yellow-400"
-                                    />
-                                    <span>
-                                      The value of this secret is hidden because you do not have the
-                                      read secret value permission.
-                                    </span>
-                                  </div>
-                                ) : undefined
-                              }
-                              label="Value"
-                            >
-                              <div className="flex items-center gap-2">
-                                <InfisicalSecretInput
-                                  isReadOnly={isReadOnly || !isAllowed || secret?.isRotatedSecret}
-                                  environment={environment}
-                                  secretPath={secretPath}
-                                  key="secret-value"
-                                  isDisabled={isOverridden}
-                                  containerClassName="text-bunker-300 w-full hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800 px-2 py-1.5"
-                                  {...field}
-                                  autoFocus={false}
-                                />
-                                <Tooltip
-                                  content={
-                                    !currentWorkspace.secretSharing
-                                      ? "This project does not allow secret sharing."
-                                      : "You don't have permission to view the secret value."
-                                  }
-                                  isDisabled={
-                                    !secret?.secretValueHidden && currentWorkspace.secretSharing
-                                  }
-                                >
-                                  <Button
-                                    isDisabled={
-                                      secret?.secretValueHidden || !currentWorkspace.secretSharing
-                                    }
-                                    className="px-2 py-[0.43rem] font-normal"
-                                    variant="outline_bg"
-                                    leftIcon={<FontAwesomeIcon icon={faShare} />}
-                                    onClick={() => {
-                                      const value = secret?.valueOverride ?? secret?.value;
-                                      if (value) {
-                                        handleSecretShare(value);
-                                      }
-                                    }}
-                                  >
-                                    Share
-                                  </Button>
-                                </Tooltip>
-                              </div>
-                            </FormControl>
-                          </div>
-                        )}
-                      />
+                      <div className="flex items-center justify-between">
+                        <span className="w-max text-sm text-mineshaft-300">
+                          Multi-line encoding
+                          <Tooltip
+                            content="When enabled, multiline secrets will be handled by escaping newlines and enclosing the entire value in double quotes."
+                            className="z-[100]"
+                          >
+                            <FontAwesomeIcon icon={faCircleQuestion} className="ml-2" />
+                          </Tooltip>
+                        </span>
+                        <Switch
+                          id="skipmultiencoding-option"
+                          onCheckedChange={(isChecked) => onChange(isChecked)}
+                          isChecked={value}
+                          onBlur={onBlur}
+                          isDisabled={!isAllowed}
+                          className="items-center justify-between"
+                        />
+                      </div>
                     )}
                   </ProjectPermissionCan>
-                </div>
-              </div>
-              <div className="mb-2 rounded border border-mineshaft-600 bg-mineshaft-900 p-4 px-0 pb-0">
-                <div className="mb-4 px-4">
-                  <Controller
-                    control={control}
-                    name="skipMultilineEncoding"
-                    render={({ field: { value, onChange, onBlur } }) => (
-                      <ProjectPermissionCan
-                        I={ProjectPermissionActions.Edit}
-                        a={subject(ProjectPermissionSub.Secrets, {
-                          environment,
-                          secretPath,
-                          secretName: secretKey,
-                          secretTags: selectTagSlugs
-                        })}
-                      >
-                        {(isAllowed) => (
-                          <div className="flex items-center justify-between">
-                            <span className="w-max text-sm text-mineshaft-300">
-                              Multi-line encoding
-                              <Tooltip
-                                content="When enabled, multiline secrets will be handled by escaping newlines and enclosing the entire value in double quotes."
-                                className="z-[100]"
-                              >
-                                <FontAwesomeIcon icon={faCircleQuestion} className="ml-2" />
-                              </Tooltip>
-                            </span>
-                            <Switch
-                              id="skipmultiencoding-option"
-                              onCheckedChange={(isChecked) => onChange(isChecked)}
-                              isChecked={value}
-                              onBlur={onBlur}
-                              isDisabled={!isAllowed}
-                              className="items-center justify-between"
-                            />
-                          </div>
-                        )}
-                      </ProjectPermissionCan>
-                    )}
-                  />
-                </div>
-                <div
-                  className={`mb-4 w-full border-t border-mineshaft-600 ${isOverridden ? "block" : "hidden"}`}
-                />
-                <ProjectPermissionCan
-                  I={ProjectPermissionActions.Edit}
-                  a={subject(ProjectPermissionSub.Secrets, {
-                    environment,
-                    secretPath,
-                    secretName: secretKey,
-                    secretTags: selectTagSlugs
-                  })}
-                >
-                  {(isAllowed) => (
-                    <div className="flex items-center justify-between px-4 pb-4">
-                      <span className="w-max text-sm text-mineshaft-300">
-                        Override with a personal value
-                        <Tooltip
-                          content="Override the secret value with a personal value that does not get shared with other users and machines."
-                          className="z-[100]"
-                        >
-                          <FontAwesomeIcon icon={faCircleQuestion} className="ml-2" />
-                        </Tooltip>
-                      </span>
-                      <Switch
-                        isDisabled={!isAllowed}
-                        id="personal-override"
-                        onCheckedChange={handleOverrideClick}
-                        isChecked={isOverridden}
-                        className="justify-start"
-                      />
-                    </div>
-                  )}
-                </ProjectPermissionCan>
-                {isOverridden && (
-                  <Controller
-                    name="valueOverride"
-                    control={control}
-                    render={({ field }) => (
-                      <FormControl label="Override Value" className="px-4">
-                        <InfisicalSecretInput
-                          isReadOnly={isReadOnly}
-                          environment={environment}
-                          secretPath={secretPath}
-                          containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800 px-2 py-1.5"
-                          {...field}
-                        />
-                      </FormControl>
-                    )}
-                  />
-                )}
-              </div>
-              <div className="mb-4 mt-2 flex flex-col rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 px-0 pb-0">
-                <div
-                  className={`flex justify-between px-4 text-mineshaft-100 ${tagFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
-                >
-                  <div
-                    className={`text-sm text-mineshaft-300 ${tagFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
-                  >
-                    Tags
-                  </div>
-                  <div>
-                    <FormControl>
-                      <div
-                        className={`grid auto-cols-min grid-flow-col gap-2 overflow-hidden ${tagFields.fields.length > 0 ? "pt-2" : ""}`}
-                      >
-                        {tagFields.fields.map(({ tagColor, id: formId, slug }) => (
-                          <Tag
-                            className="flex w-min items-center space-x-2"
-                            key={formId}
-                            onClose={() => {
-                              if (cannotEditSecret) {
-                                createNotification({ type: "error", text: "Access denied" });
-                                return;
-                              }
-
-                              const tag = tags?.find(({ slug: tagSlug }) => slug === tagSlug);
-                              if (tag) handleTagSelect(tag);
-                            }}
-                          >
-                            <div
-                              className="h-3 w-3 rounded-full"
-                              style={{ backgroundColor: tagColor || "#bec2c8" }}
-                            />
-                            <div className="text-sm">{slug}</div>
-                          </Tag>
-                        ))}
-                        <DropdownMenu>
-                          <ProjectPermissionCan
-                            I={ProjectPermissionActions.Edit}
-                            a={subject(ProjectPermissionSub.Secrets, {
-                              environment,
-                              secretPath,
-                              secretName: secretKey,
-                              secretTags: selectTagSlugs
-                            })}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuTrigger asChild>
-                                <IconButton
-                                  ariaLabel="add"
-                                  variant="outline_bg"
-                                  size="xs"
-                                  className="rounded-md"
-                                  isDisabled={!isAllowed}
-                                >
-                                  <FontAwesomeIcon icon={faPlus} />
-                                </IconButton>
-                              </DropdownMenuTrigger>
-                            )}
-                          </ProjectPermissionCan>
-                          <DropdownMenuContent align="start" side="right" className="z-[100]">
-                            <DropdownMenuLabel className="pl-2">
-                              Add tags to this secret
-                            </DropdownMenuLabel>
-                            {tags.map((tag) => {
-                              const { id: tagId, slug, color } = tag;
-
-                              const isSelected = selectedTagsGroupById?.[tagId];
-                              return (
-                                <DropdownMenuItem
-                                  onClick={() => handleTagSelect(tag)}
-                                  key={tagId}
-                                  icon={isSelected && <FontAwesomeIcon icon={faCheckCircle} />}
-                                  iconPos="right"
-                                >
-                                  <div className="flex items-center">
-                                    <div
-                                      className="mr-2 h-2 w-2 rounded-full"
-                                      style={{ background: color || "#bec2c8" }}
-                                    />
-                                    {slug}
-                                  </div>
-                                </DropdownMenuItem>
-                              );
-                            })}
-                            <ProjectPermissionCan
-                              I={ProjectPermissionActions.Create}
-                              a={ProjectPermissionSub.Tags}
-                            >
-                              {(isAllowed) => (
-                                <div className="p-2">
-                                  <Button
-                                    size="xs"
-                                    className="w-full"
-                                    colorSchema="primary"
-                                    variant="outline_bg"
-                                    leftIcon={<FontAwesomeIcon icon={faTag} />}
-                                    onClick={onCreateTag}
-                                    isDisabled={!isAllowed}
-                                  >
-                                    Create a tag
-                                  </Button>
-                                </div>
-                              )}
-                            </ProjectPermissionCan>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </FormControl>
-                  </div>
-                </div>
-                <div
-                  className={`mb-4 w-full border-t border-mineshaft-600 ${tagFields.fields.length > 0 || metadataFormFields.fields.length > 0 ? "block" : "hidden"}`}
-                />
-
-                <div
-                  className={`flex justify-between px-4 text-mineshaft-100 ${metadataFormFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
-                >
-                  <div
-                    className={`text-sm text-mineshaft-300 ${metadataFormFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
-                  >
-                    Metadata
-                  </div>
-                  <FormControl>
-                    <div className="flex flex-col space-y-2">
-                      {metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
-                        <div key={metadataFieldId} className="flex items-end space-x-2">
-                          <div className="flex-grow">
-                            {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
-                            <Controller
-                              control={control}
-                              name={`secretMetadata.${i}.key`}
-                              render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                  isError={Boolean(error?.message)}
-                                  errorText={error?.message}
-                                  className="mb-0"
-                                >
-                                  <Input {...field} className="max-h-8" />
-                                </FormControl>
-                              )}
-                            />
-                          </div>
-                          <div className="flex-grow">
-                            {i === 0 && (
-                              <FormLabel
-                                label="Value"
-                                className="text-xs text-mineshaft-400"
-                                isOptional
-                              />
-                            )}
-                            <Controller
-                              control={control}
-                              name={`secretMetadata.${i}.value`}
-                              render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                  isError={Boolean(error?.message)}
-                                  errorText={error?.message}
-                                  className="mb-0"
-                                >
-                                  <Input {...field} className="max-h-8" />
-                                </FormControl>
-                              )}
-                            />
-                          </div>
-                          <IconButton
-                            ariaLabel="delete key"
-                            className="bottom-0.5 max-h-8"
-                            variant="outline_bg"
-                            onClick={() => metadataFormFields.remove(i)}
-                          >
-                            <FontAwesomeIcon icon={faTrash} />
-                          </IconButton>
-                        </div>
-                      ))}
-                      <div className={`${metadataFormFields.fields.length > 0 ? "pt-2" : ""}`}>
-                        <IconButton
-                          ariaLabel="Add Key"
-                          variant="outline_bg"
-                          size="xs"
-                          className="rounded-md"
-                          onClick={() => metadataFormFields.append({ key: "", value: "" })}
-                        >
-                          <FontAwesomeIcon icon={faPlus} />
-                        </IconButton>
-                      </div>
-                    </div>
-                  </FormControl>
-                </div>
-              </div>
-              <Controller
-                control={control}
-                name="comment"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="Comments & Notes"
-                    isError={Boolean(error?.message)}
-                    errorText={error?.message}
-                    className="mb-0"
-                  >
-                    <TextArea
-                      className="border border-mineshaft-600 bg-bunker-800 text-sm"
-                      readOnly={isReadOnly}
-                      rows={5}
-                      {...field}
-                    />
-                  </FormControl>
                 )}
               />
-              <FormControl>
-                {reminderData && reminderData.nextReminderDate ? (
-                  <div className="flex items-center justify-between px-2">
-                    <div className="flex items-center space-x-2">
-                      <FontAwesomeIcon className="text-primary-500" icon={faClock} />
-                      <span className="text-sm text-bunker-300">{getDaysUntilReminder()}</span>
-                    </div>
-                    <div>
-                      <Button
-                        className="px-2 py-1"
-                        variant="outline_bg"
-                        onClick={() => setCreateReminderFormOpen.on()}
-                      >
-                        Update
-                      </Button>
-                    </div>
-                  </div>
-                ) : (
-                  <div className="ml-1 flex items-center space-x-2">
-                    <Button
-                      className="w-full px-2 py-2 font-normal"
-                      variant="outline_bg"
-                      leftIcon={<FontAwesomeIcon icon={faClock} />}
-                      onClick={() => setCreateReminderFormOpen.on()}
-                      isDisabled={cannotEditSecret}
+            </div>
+            <div className="flex flex-col rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 px-0 pb-0">
+              <div
+                className={`flex justify-between px-4 text-mineshaft-100 ${tagFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
+              >
+                <div
+                  className={`text-sm text-mineshaft-300 ${tagFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
+                >
+                  Tags
+                </div>
+                <div>
+                  <FormControl>
+                    <div
+                      className={`flex flex-wrap gap-2 overflow-hidden ${tagFields.fields.length > 0 ? "pt-2" : ""}`}
                     >
-                      Create Reminder
-                    </Button>
-                  </div>
-                )}
-              </FormControl>
-              <div className="mb-4flex-grow dark cursor-default text-sm text-bunker-300">
-                <div className="mb-2 pl-1">Version History</div>
-                <div className="thin-scrollbar flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 dark:[color-scheme:dark]">
-                  {secretVersion?.map(
-                    ({ createdAt, secretValue, secretValueHidden, version, id, actor }) => (
-                      <div className="flex flex-row" key={id}>
-                        <div className="flex w-full flex-col space-y-1">
-                          <div className="flex items-center">
-                            <div className="w-10">
-                              <div className="w-fit rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 text-sm text-mineshaft-300">
-                                v{version}
-                              </div>
-                            </div>
-                            <div>{format(new Date(createdAt), "Pp")}</div>
-                          </div>
-                          <div className="flex w-full cursor-default">
-                            <div className="relative w-10">
-                              <div className="absolute bottom-0 left-3 top-0 mt-0.5 border-l border-mineshaft-400/60" />
-                            </div>
-                            <div className="flex w-full cursor-default flex-col">
-                              {actor && (
-                                <div className="flex flex-row">
-                                  <div className="flex w-fit flex-row text-sm">
-                                    Modified by:
-                                    <Tooltip
-                                      content={getModifiedByName(actor.actorType, actor.name)}
-                                    >
-                                      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-                                      <div
-                                        onClick={() =>
-                                          onModifyHistoryClick(
-                                            actor.actorId,
-                                            actor.actorType,
-                                            actor.membershipId
-                                          )
-                                        }
-                                        className="cursor-pointer"
-                                      >
-                                        <FontAwesomeIcon
-                                          icon={getModifiedByIcon(actor.actorType)}
-                                          className="ml-2"
-                                        />
-                                      </div>
-                                    </Tooltip>
-                                  </div>
-                                </div>
-                              )}
-                              <div className="flex flex-row">
-                                <div className="h-min w-fit rounded-sm bg-primary-500/10 px-1 text-primary-300/70">
-                                  Value:
-                                </div>
-                                <div className="group break-all pl-1 font-mono">
-                                  <div className="relative hidden cursor-pointer transition-all duration-200 group-[.show-value]:inline">
-                                    <button
-                                      type="button"
-                                      className="select-none text-left"
-                                      onClick={(e) => {
-                                        if (secretValueHidden) return;
+                      {tagFields.fields.map(({ tagColor, id: formId, slug }) => (
+                        <Tag
+                          className="flex w-min items-center space-x-2"
+                          key={formId}
+                          onClose={() => {
+                            if (cannotEditSecret) {
+                              createNotification({ type: "error", text: "Access denied" });
+                              return;
+                            }
 
+                            const tag = tags?.find(({ slug: tagSlug }) => slug === tagSlug);
+                            if (tag) handleTagSelect(tag);
+                          }}
+                        >
+                          <div
+                            className="h-3 w-3 rounded-full"
+                            style={{ backgroundColor: tagColor || "#bec2c8" }}
+                          />
+                          <div className="text-sm">{slug}</div>
+                        </Tag>
+                      ))}
+                      <DropdownMenu>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Edit}
+                          a={subject(ProjectPermissionSub.Secrets, {
+                            environment,
+                            secretPath,
+                            secretName: secretKey,
+                            secretTags: selectTagSlugs
+                          })}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuTrigger asChild>
+                              <IconButton
+                                ariaLabel="add"
+                                variant="outline_bg"
+                                size="xs"
+                                className="rounded-md"
+                                isDisabled={!isAllowed}
+                              >
+                                <FontAwesomeIcon icon={faPlus} />
+                              </IconButton>
+                            </DropdownMenuTrigger>
+                          )}
+                        </ProjectPermissionCan>
+                        <DropdownMenuContent align="start" side="right" className="z-[100]">
+                          <DropdownMenuLabel className="pl-2">
+                            Add tags to this secret
+                          </DropdownMenuLabel>
+                          {tags.map((tag) => {
+                            const { id: tagId, slug, color } = tag;
+
+                            const isSelected = selectedTagsGroupById?.[tagId];
+                            return (
+                              <DropdownMenuItem
+                                onClick={() => handleTagSelect(tag)}
+                                key={tagId}
+                                icon={isSelected && <FontAwesomeIcon icon={faCheckCircle} />}
+                                iconPos="right"
+                              >
+                                <div className="flex items-center">
+                                  <div
+                                    className="mr-2 h-2 w-2 rounded-full"
+                                    style={{ background: color || "#bec2c8" }}
+                                  />
+                                  {slug}
+                                </div>
+                              </DropdownMenuItem>
+                            );
+                          })}
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Create}
+                            a={ProjectPermissionSub.Tags}
+                          >
+                            {(isAllowed) => (
+                              <div className="p-2">
+                                <Button
+                                  size="xs"
+                                  className="w-full"
+                                  colorSchema="primary"
+                                  variant="outline_bg"
+                                  leftIcon={<FontAwesomeIcon icon={faTag} />}
+                                  onClick={onCreateTag}
+                                  isDisabled={!isAllowed}
+                                >
+                                  Create a tag
+                                </Button>
+                              </div>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </FormControl>
+                </div>
+              </div>
+              <div
+                className={`mb-4 w-full border-t border-mineshaft-600 ${tagFields.fields.length > 0 || metadataFormFields.fields.length > 0 ? "block" : "hidden"}`}
+              />
+              <div
+                className={`flex justify-between px-4 text-mineshaft-100 ${metadataFormFields.fields.length > 0 ? "flex-col" : "flex-row"}`}
+              >
+                <div
+                  className={`text-sm text-mineshaft-300 ${metadataFormFields.fields.length > 0 ? "mb-2" : "mt-0.5"}`}
+                >
+                  Metadata
+                </div>
+                <FormControl>
+                  <div className="flex flex-col space-y-2">
+                    {metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
+                      <div key={metadataFieldId} className="flex items-end space-x-2">
+                        <div className="flex-grow">
+                          {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+                          <Controller
+                            control={control}
+                            name={`secretMetadata.${i}.key`}
+                            render={({ field, fieldState: { error } }) => (
+                              <FormControl
+                                isError={Boolean(error?.message)}
+                                errorText={error?.message}
+                                className="mb-0"
+                              >
+                                <Input {...field} className="max-h-8" />
+                              </FormControl>
+                            )}
+                          />
+                        </div>
+                        <div className="flex-grow">
+                          {i === 0 && (
+                            <FormLabel
+                              label="Value"
+                              className="text-xs text-mineshaft-400"
+                              isOptional
+                            />
+                          )}
+                          <Controller
+                            control={control}
+                            name={`secretMetadata.${i}.value`}
+                            render={({ field, fieldState: { error } }) => (
+                              <FormControl
+                                isError={Boolean(error?.message)}
+                                errorText={error?.message}
+                                className="mb-0"
+                              >
+                                <Input {...field} className="max-h-8" />
+                              </FormControl>
+                            )}
+                          />
+                        </div>
+                        <IconButton
+                          ariaLabel="delete key"
+                          className="bottom-0.5 max-h-8"
+                          variant="outline_bg"
+                          onClick={() => metadataFormFields.remove(i)}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </IconButton>
+                      </div>
+                    ))}
+                    <div className={`${metadataFormFields.fields.length > 0 ? "pt-2" : ""}`}>
+                      <IconButton
+                        ariaLabel="Add Key"
+                        variant="outline_bg"
+                        size="xs"
+                        className="rounded-md"
+                        onClick={() => metadataFormFields.append({ key: "", value: "" })}
+                      >
+                        <FontAwesomeIcon icon={faPlus} />
+                      </IconButton>
+                    </div>
+                  </div>
+                </FormControl>
+              </div>
+            </div>
+            <Controller
+              control={control}
+              name="comment"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Comments & Notes"
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                  className="mb-0 h-[125px] pb-0"
+                >
+                  <TextArea
+                    className="mb-0 !resize-none border border-mineshaft-600 bg-mineshaft-900 text-sm"
+                    readOnly={isReadOnly}
+                    placeholder="add a comment or note to this secret..."
+                    rows={4}
+                    {...field}
+                  />
+                </FormControl>
+              )}
+            />
+            <div className="dark flex max-h-[24rem] flex-1 cursor-default flex-col text-sm text-bunker-300">
+              <div className="mb-0.5 text-mineshaft-400">Version History</div>
+              <div className="thin-scrollbar flex flex-1 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 dark:[color-scheme:dark]">
+                {secretVersion?.map(
+                  ({ createdAt, secretValue, secretValueHidden, version, id, actor }) => (
+                    <div className="flex flex-row" key={id}>
+                      <div className="flex w-full flex-col space-y-1">
+                        <div className="flex items-center">
+                          <div className="w-10">
+                            <div className="w-fit rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 text-sm text-mineshaft-300">
+                              v{version}
+                            </div>
+                          </div>
+                          <div>{format(new Date(createdAt), "Pp")}</div>
+                        </div>
+                        <div className="flex w-full cursor-default">
+                          <div className="relative w-10">
+                            <div className="absolute bottom-0 left-3 top-0 mt-0.5 border-l border-mineshaft-400/60" />
+                          </div>
+                          <div className="flex w-full cursor-default flex-col">
+                            {actor && (
+                              <div className="flex flex-row">
+                                <div className="flex w-fit flex-row text-sm">
+                                  Modified by:
+                                  <Tooltip content={getModifiedByName(actor.actorType, actor.name)}>
+                                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+                                    <div
+                                      onClick={() =>
+                                        onModifyHistoryClick(
+                                          actor.actorId,
+                                          actor.actorType,
+                                          actor.membershipId
+                                        )
+                                      }
+                                      className="cursor-pointer"
+                                    >
+                                      <FontAwesomeIcon
+                                        icon={getModifiedByIcon(actor.actorType)}
+                                        className="ml-2"
+                                      />
+                                    </div>
+                                  </Tooltip>
+                                </div>
+                              </div>
+                            )}
+                            <div className="flex flex-row">
+                              <div className="h-min w-fit rounded-sm bg-primary-500/10 px-1 text-primary-300/70">
+                                Value:
+                              </div>
+                              <div className="group break-all pl-1 font-mono">
+                                <div className="relative hidden cursor-pointer transition-all duration-200 group-[.show-value]:inline">
+                                  <button
+                                    type="button"
+                                    className="select-none text-left"
+                                    onClick={(e) => {
+                                      if (secretValueHidden) return;
+
+                                      navigator.clipboard.writeText(secretValue || "");
+                                      const target = e.currentTarget;
+                                      target.style.borderBottom = "1px dashed";
+                                      target.style.paddingBottom = "-1px";
+
+                                      // Create and insert popup
+                                      const popup = document.createElement("div");
+                                      popup.className =
+                                        "w-16 flex justify-center absolute top-6 left-0 text-xs text-primary-100 bg-mineshaft-800 px-1 py-0.5 rounded-md border border-primary-500/50";
+                                      popup.textContent = "Copied!";
+                                      target.parentElement?.appendChild(popup);
+
+                                      // Remove popup and border after delay
+                                      setTimeout(() => {
+                                        popup.remove();
+                                        target.style.borderBottom = "none";
+                                      }, 3000);
+                                    }}
+                                    onKeyDown={(e) => {
+                                      if (secretValueHidden) return;
+
+                                      if (e.key === "Enter" || e.key === " ") {
                                         navigator.clipboard.writeText(secretValue || "");
                                         const target = e.currentTarget;
                                         target.style.borderBottom = "1px dashed";
@@ -833,304 +732,272 @@ export const SecretDetailSidebar = ({
                                           popup.remove();
                                           target.style.borderBottom = "none";
                                         }, 3000);
-                                      }}
-                                      onKeyDown={(e) => {
-                                        if (secretValueHidden) return;
-
-                                        if (e.key === "Enter" || e.key === " ") {
-                                          navigator.clipboard.writeText(secretValue || "");
-                                          const target = e.currentTarget;
-                                          target.style.borderBottom = "1px dashed";
-                                          target.style.paddingBottom = "-1px";
-
-                                          // Create and insert popup
-                                          const popup = document.createElement("div");
-                                          popup.className =
-                                            "w-16 flex justify-center absolute top-6 left-0 text-xs text-primary-100 bg-mineshaft-800 px-1 py-0.5 rounded-md border border-primary-500/50";
-                                          popup.textContent = "Copied!";
-                                          target.parentElement?.appendChild(popup);
-
-                                          // Remove popup and border after delay
-                                          setTimeout(() => {
-                                            popup.remove();
-                                            target.style.borderBottom = "none";
-                                          }, 3000);
-                                        }
-                                      }}
+                                      }
+                                    }}
+                                  >
+                                    <span
+                                      className={twMerge(
+                                        secretValueHidden && "text-xs text-bunker-300 opacity-40"
+                                      )}
                                     >
-                                      <span
-                                        className={twMerge(
-                                          secretValueHidden && "text-xs text-bunker-300 opacity-40"
-                                        )}
-                                      >
-                                        {secretValueHidden ? "Hidden" : secretValue}
-                                      </span>
-                                    </button>
-                                    <button
-                                      type="button"
-                                      className="ml-1 cursor-pointer"
-                                      onClick={(e) => {
+                                      {secretValueHidden ? "Hidden" : secretValue}
+                                    </span>
+                                  </button>
+                                  <button
+                                    type="button"
+                                    className="ml-1 cursor-pointer"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      e.currentTarget
+                                        .closest(".group")
+                                        ?.classList.remove("show-value");
+                                    }}
+                                    onKeyDown={(e) => {
+                                      if (e.key === "Enter" || e.key === " ") {
                                         e.stopPropagation();
                                         e.currentTarget
                                           .closest(".group")
                                           ?.classList.remove("show-value");
-                                      }}
-                                      onKeyDown={(e) => {
-                                        if (e.key === "Enter" || e.key === " ") {
-                                          e.stopPropagation();
-                                          e.currentTarget
-                                            .closest(".group")
-                                            ?.classList.remove("show-value");
-                                        }
-                                      }}
-                                    >
-                                      <FontAwesomeIcon icon={faEyeSlash} />
-                                    </button>
-                                  </div>
-                                  <span className="group-[.show-value]:hidden">
-                                    {secretValueHidden
-                                      ? HIDDEN_SECRET_VALUE
-                                      : secretValue?.replace(/./g, "*")}
-                                    <button
-                                      type="button"
-                                      className="ml-1 cursor-pointer"
-                                      onClick={(e) => {
+                                      }
+                                    }}
+                                  >
+                                    <FontAwesomeIcon icon={faEyeSlash} />
+                                  </button>
+                                </div>
+                                <span className="group-[.show-value]:hidden">
+                                  {secretValueHidden
+                                    ? HIDDEN_SECRET_VALUE
+                                    : secretValue?.replace(/./g, "*")}
+                                  <button
+                                    type="button"
+                                    className="ml-1 cursor-pointer"
+                                    onClick={(e) => {
+                                      e.currentTarget
+                                        .closest(".group")
+                                        ?.classList.add("show-value");
+                                    }}
+                                    onKeyDown={(e) => {
+                                      if (e.key === "Enter" || e.key === " ") {
                                         e.currentTarget
                                           .closest(".group")
                                           ?.classList.add("show-value");
-                                      }}
-                                      onKeyDown={(e) => {
-                                        if (e.key === "Enter" || e.key === " ") {
-                                          e.currentTarget
-                                            .closest(".group")
-                                            ?.classList.add("show-value");
-                                        }
-                                      }}
-                                    >
-                                      <FontAwesomeIcon icon={faEye} />
-                                    </button>
-                                  </span>
-                                </div>
+                                      }
+                                    }}
+                                  >
+                                    <FontAwesomeIcon icon={faEye} />
+                                  </button>
+                                </span>
                               </div>
                             </div>
                           </div>
                         </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, { shouldDirty: true })
+                      </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, { shouldDirty: true })}
+                            >
+                              <FontAwesomeIcon icon={faArrowRotateRight} />
+                            </IconButton>
+                          </Tooltip>
+                        </div>
+                      )}
+                    </div>
+                  )
+                )}
+              </div>
+            </div>
+            <div className="dark flex flex-col text-sm text-bunker-300">
+              <div className="mb-0.5 text-mineshaft-400">
+                Access List
+                <Tooltip
+                  content="Lists all users, machine identities, and groups that have been granted any permission level (read, create, edit, or delete) for this secret."
+                  className="z-[100]"
+                >
+                  <FontAwesomeIcon icon={faCircleQuestion} className="ml-2" />
+                </Tooltip>
+              </div>
+              {secretAccessList ? (
+                <div className="flex flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 dark:[color-scheme:dark]">
+                  {secretAccessList.users.length > 0 && (
+                    <div className="pb-3">
+                      <div className="mb-2 font-bold">Users</div>
+                      <div className="flex flex-wrap gap-2">
+                        {secretAccessList.users.map((user) => (
+                          <div className="rounded-md bg-bunker-500">
+                            <Tooltip
+                              side="left"
+                              content={user.allowedActions
+                                .map((action) => camelCaseToSpaces(action))
+                                .join(", ")}
+                              className="z-[100] capitalize"
+                            >
+                              <Link
+                                to={
+                                  `${getProjectBaseURL(currentWorkspace.type)}/members/$membershipId` as const
                                 }
+                                params={{
+                                  projectId: currentWorkspace.id,
+                                  membershipId: user.membershipId
+                                }}
+                                className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-mineshaft-100"
                               >
-                                <FontAwesomeIcon icon={faArrowRotateRight} />
-                              </IconButton>
+                                {user.name}
+                              </Link>
                             </Tooltip>
                           </div>
-                        )}
+                        ))}
                       </div>
-                    )
+                    </div>
+                  )}
+                  {secretAccessList.identities.length > 0 && (
+                    <div className="pb-3">
+                      <div className="mb-2 font-bold">Identities</div>
+                      <div className="flex flex-wrap gap-2">
+                        {secretAccessList.identities.map((identity) => (
+                          <div className="rounded-md bg-bunker-500">
+                            <Tooltip
+                              side="left"
+                              content={identity.allowedActions
+                                .map(
+                                  (action) =>
+                                    action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()
+                                )
+                                .join(", ")}
+                              className="z-[100]"
+                            >
+                              <Link
+                                to={
+                                  `${getProjectBaseURL(currentWorkspace.type)}/identities/$identityId` as const
+                                }
+                                params={{
+                                  projectId: currentWorkspace.id,
+                                  identityId: identity.id
+                                }}
+                                className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-mineshaft-100"
+                              >
+                                {identity.name}
+                              </Link>
+                            </Tooltip>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  {secretAccessList.groups.length > 0 && (
+                    <div className="pb-3">
+                      <div className="mb-2 font-bold">Groups</div>
+                      <div className="flex flex-wrap gap-2">
+                        {secretAccessList.groups.map((group) => (
+                          <div className="rounded-md bg-bunker-500">
+                            <Tooltip
+                              side="left"
+                              content={group.allowedActions
+                                .map(
+                                  (action) =>
+                                    action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()
+                                )
+                                .join(", ")}
+                              className="z-[100]"
+                            >
+                              <Link
+                                to={"/organization/groups/$groupId" as const}
+                                params={{
+                                  groupId: group.id
+                                }}
+                                className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-mineshaft-100"
+                              >
+                                {group.name}
+                              </Link>
+                            </Tooltip>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
                   )}
                 </div>
-              </div>
-              <div className="dark mb-4 flex-grow text-sm text-bunker-300">
-                <div className="mb-2 mt-4">
-                  Access List
-                  <Tooltip
-                    content="Lists all users, machine identities, and groups that have been granted any permission level (read, create, edit, or delete) for this secret."
-                    className="z-[100]"
-                  >
-                    <FontAwesomeIcon icon={faCircleQuestion} className="ml-2" />
-                  </Tooltip>
-                </div>
-                {isPending && (
-                  <Button className="w-full px-2 py-1" variant="outline_bg" isDisabled>
-                    Analyze Access
-                  </Button>
-                )}
-                {!isPending && secretAccessList === undefined && (
+              ) : (
+                <Button
+                  className="w-full"
+                  leftIcon={<FontAwesomeIcon icon={faSearch} />}
+                  variant="outline_bg"
+                  isDisabled={isPending}
+                  isLoading={isPending}
+                  onClick={() => handlePopUpOpen("secretAccessUpgradePlan")}
+                >
+                  Analyze Access
+                </Button>
+              )}
+            </div>
+            <div className="mt-auto flex items-center space-x-2 pb-4">
+              <Tooltip
+                content={
+                  hasSecretReference(secret?.value)
+                    ? undefined
+                    : "Secret does not contain any references."
+                }
+                className="z-[100] text-center"
+              >
+                <div className="flex-1">
                   <Button
-                    className="w-full px-2 py-1"
+                    className="w-full"
                     variant="outline_bg"
-                    onClick={() => {
-                      handlePopUpOpen("secretAccessUpgradePlan");
-                    }}
+                    isDisabled={cannotReadSecretValue || !hasSecretReference(secret?.value)}
+                    leftIcon={<FontAwesomeIcon icon={faProjectDiagram} />}
+                    onClick={() => handlePopUpOpen("secretReferenceTree", secretKey)}
                   >
-                    Analyze Access
+                    Secret Reference Tree
                   </Button>
-                )}
-                {!isPending && secretAccessList && (
-                  <div className="mb-4 flex max-h-72 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 dark:[color-scheme:dark]">
-                    {secretAccessList.users.length > 0 && (
-                      <div className="pb-3">
-                        <div className="mb-2 font-bold">Users</div>
-                        <div className="flex flex-wrap gap-2">
-                          {secretAccessList.users.map((user) => (
-                            <div className="rounded-md bg-bunker-500">
-                              <Tooltip
-                                content={user.allowedActions
-                                  .map((action) => camelCaseToSpaces(action))
-                                  .join(", ")}
-                                className="z-[100] capitalize"
-                              >
-                                <Link
-                                  to={
-                                    `${getProjectBaseURL(currentWorkspace.type)}/members/$membershipId` as const
-                                  }
-                                  params={{
-                                    projectId: currentWorkspace.id,
-                                    membershipId: user.membershipId
-                                  }}
-                                  className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-primary"
-                                >
-                                  {user.name}
-                                </Link>
-                              </Tooltip>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                    {secretAccessList.identities.length > 0 && (
-                      <div className="pb-3">
-                        <div className="mb-2 font-bold">Identities</div>
-                        <div className="flex flex-wrap gap-2">
-                          {secretAccessList.identities.map((identity) => (
-                            <div className="rounded-md bg-bunker-500">
-                              <Tooltip
-                                content={identity.allowedActions
-                                  .map(
-                                    (action) =>
-                                      action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()
-                                  )
-                                  .join(", ")}
-                                className="z-[100]"
-                              >
-                                <Link
-                                  to={
-                                    `${getProjectBaseURL(currentWorkspace.type)}/identities/$identityId` as const
-                                  }
-                                  params={{
-                                    projectId: currentWorkspace.id,
-                                    identityId: identity.id
-                                  }}
-                                  className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-primary"
-                                >
-                                  {identity.name}
-                                </Link>
-                              </Tooltip>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                    {secretAccessList.groups.length > 0 && (
-                      <div className="pb-3">
-                        <div className="mb-2 font-bold">Groups</div>
-                        <div className="flex flex-wrap gap-2">
-                          {secretAccessList.groups.map((group) => (
-                            <div className="rounded-md bg-bunker-500">
-                              <Tooltip
-                                content={group.allowedActions
-                                  .map(
-                                    (action) =>
-                                      action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()
-                                  )
-                                  .join(", ")}
-                                className="z-[100]"
-                              >
-                                <Link
-                                  to={"/organization/groups/$groupId" as const}
-                                  params={{
-                                    groupId: group.id
-                                  }}
-                                  className="text-secondary/80 rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 py-0.5 text-sm hover:text-primary"
-                                >
-                                  {group.name}
-                                </Link>
-                              </Tooltip>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-              <div className="flex flex-col space-y-4">
-                <div className="mb-4 flex items-center space-x-4">
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Edit}
-                    a={subject(ProjectPermissionSub.Secrets, {
-                      environment,
-                      secretPath,
-                      secretName: secretKey,
-                      secretTags: selectTagSlugs
-                    })}
-                  >
-                    {(isAllowed) => (
-                      <Button
-                        isFullWidth
-                        type="submit"
-                        variant="outline_bg"
-                        isDisabled={isSubmitting || !isDirty || !isAllowed}
-                        isLoading={isSubmitting}
-                      >
-                        Apply Changes
-                      </Button>
-                    )}
-                  </ProjectPermissionCan>
-                  <div className="flex items-center gap-2">
-                    <Tooltip content="Copy Secret ID">
-                      <IconButton
-                        variant="outline_bg"
-                        ariaLabel="Copy Secret ID"
-                        onClick={async () => {
-                          await navigator.clipboard.writeText(secret.id);
-
-                          createNotification({
-                            title: "Secret ID Copied",
-                            text: "The secret ID has been copied to your clipboard.",
-                            type: "success"
-                          });
-                        }}
-                      >
-                        <FontAwesomeIcon icon={faCopy} />
-                      </IconButton>
-                    </Tooltip>
-                    <ProjectPermissionCan
-                      I={ProjectPermissionActions.Delete}
-                      a={subject(ProjectPermissionSub.Secrets, {
-                        environment,
-                        secretPath,
-                        secretName: secretKey,
-                        secretTags: selectTagSlugs
-                      })}
-                    >
-                      {(isAllowed) => (
-                        <Tooltip content="Delete Secret">
-                          <IconButton
-                            colorSchema="danger"
-                            variant="outline_bg"
-                            ariaLabel="Delete Secret"
-                            className="border border-mineshaft-600 bg-mineshaft-700 hover:border-red-500/70 hover:bg-red-600/20"
-                            isDisabled={!isAllowed}
-                            onClick={onDeleteSecret}
-                          >
-                            <FontAwesomeIcon icon={faTrash} />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                    </ProjectPermissionCan>
-                  </div>
                 </div>
-              </div>
+              </Tooltip>
+              <Tooltip content="Copy Secret ID" className="z-[100]">
+                <IconButton
+                  variant="outline_bg"
+                  ariaLabel="Copy Secret ID"
+                  onClick={async () => {
+                    await navigator.clipboard.writeText(secret.id);
+
+                    createNotification({
+                      title: "Secret ID Copied",
+                      text: "The secret ID has been copied to your clipboard.",
+                      type: "success"
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faCopy} />
+                </IconButton>
+              </Tooltip>
+              <ProjectPermissionCan
+                I={ProjectPermissionActions.Delete}
+                a={subject(ProjectPermissionSub.Secrets, {
+                  environment,
+                  secretPath,
+                  secretName: secretKey,
+                  secretTags: selectTagSlugs
+                })}
+              >
+                {(isAllowed) => (
+                  <Tooltip content="Delete Secret" align="end" className="z-[100]">
+                    <IconButton
+                      colorSchema="danger"
+                      variant="outline_bg"
+                      ariaLabel="Delete Secret"
+                      className="h-min border border-mineshaft-600 bg-mineshaft-700 hover:border-red-500/70 hover:bg-red-600/20"
+                      isDisabled={!isAllowed}
+                      onClick={onDeleteSecret}
+                    >
+                      <FontAwesomeIcon icon={faTrash} />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </ProjectPermissionCan>
             </div>
           </form>
         </DrawerContent>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
index 0452a28bd..77bec882c 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
@@ -12,11 +12,9 @@ import {
   DropdownMenuTrigger,
   FontAwesomeSymbol,
   FormControl,
+  GenericFieldLabel,
   IconButton,
   Input,
-  Modal,
-  ModalContent,
-  ModalTrigger,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -41,16 +39,14 @@ import { AnimatePresence, motion } from "framer-motion";
 import { memo, useCallback, useEffect, useRef } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { twMerge } from "tailwind-merge";
-import {
-  hasSecretReference,
-  SecretReferenceTree
-} from "@app/components/secrets/SecretReferenceDetails";
 
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEyeSlash, faKey, faRotate } from "@fortawesome/free-solid-svg-icons";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
+import { format } from "date-fns";
+import { CreateReminderForm } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm";
 import {
   FontAwesomeSpriteName,
   formSchema,
@@ -113,7 +109,8 @@ export const SecretItem = memo(
     colWidth
   }: Props) => {
     const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
-      "editSecret"
+      "editSecret",
+      "reminder"
     ] as const);
     const { currentWorkspace } = useWorkspace();
     const { permission } = useProjectPermission();
@@ -186,7 +183,7 @@ export const SecretItem = memo(
       name: "tags"
     });
 
-    const isOverriden =
+    const isOverridden =
       overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
     const hasTagsApplied = Boolean(fields.length);
 
@@ -272,7 +269,7 @@ export const SecretItem = memo(
     }, [isSecValueCopied]);
 
     const handleOverrideClick = () => {
-      if (isOverriden) {
+      if (isOverridden) {
         // override need not be flagged delete if it was never saved in server
         // meaning a new unsaved personal secret but user toggled back later
         const isUnsavedOverride = !secret.idOverride;
@@ -327,7 +324,7 @@ export const SecretItem = memo(
 
     const copyTokenToClipboard = () => {
       const [overrideValue, value] = getValues(["value", "valueOverride"]);
-      if (isOverriden) {
+      if (isOverridden) {
         navigator.clipboard.writeText(value as string);
       } else {
         navigator.clipboard.writeText(overrideValue as string);
@@ -335,7 +332,7 @@ export const SecretItem = memo(
       setIsSecValueCopied.on();
     };
 
-    const isInAutoSaveMode = isDirty && !isSubmitting && !isOverriden;
+    const isInAutoSaveMode = isDirty && !isSubmitting && !isOverridden;
 
     return (
       <form onSubmit={handleSubmit(handleFormSubmit)}>
@@ -398,7 +395,7 @@ export const SecretItem = memo(
                     isReadOnly={isReadOnly || isRotatedSecret}
                     autoCapitalization={currentWorkspace?.autoCapitalization}
                     variant="plain"
-                    isDisabled={isOverriden}
+                    isDisabled={isOverridden}
                     placeholder={error?.message}
                     isError={Boolean(error)}
                     onKeyUp={() => trigger("key")}
@@ -413,14 +410,14 @@ export const SecretItem = memo(
               tabIndex={0}
               role="button"
             >
-              {secretValueHidden && !isOverriden && !isPending && (
+              {secretValueHidden && !isOverridden && !isPending && (
                 <Tooltip
                   content={`You do not have access to view the current value${canEditSecretValue && !isRotatedSecret ? ", but you can set a new one" : "."}`}
                 >
                   <FontAwesomeIcon className="pr-2" size="sm" icon={faEyeSlash} />
                 </Tooltip>
               )}
-              {isOverriden ? (
+              {isOverridden ? (
                 <Controller
                   name="valueOverride"
                   key="value-overriden"
@@ -445,7 +442,7 @@ export const SecretItem = memo(
                       isReadOnly={isReadOnlySecret}
                       key="secret-value"
                       isVisible={isVisible && (!secretValueHidden || isPending)}
-                      canEditButNotView={secretValueHidden && !isOverriden && !isPending}
+                      canEditButNotView={secretValueHidden && !isOverridden && !isPending}
                       environment={environment}
                       secretPath={secretPath}
                       {...field}
@@ -462,15 +459,15 @@ export const SecretItem = memo(
                   key="actions"
                   className="flex h-full flex-shrink-0 self-start transition-all group-hover:gap-x-2"
                 >
-                  <Tooltip content="Copy secret">
-                    <IconButton
-                      isDisabled={secret.secretValueHidden}
-                      ariaLabel="copy-value"
-                      variant="plain"
-                      size="sm"
-                      className="w-0 overflow-hidden p-0 group-hover:w-5"
-                      onClick={copyTokenToClipboard}
-                    >
+                  <IconButton
+                    isDisabled={secret.secretValueHidden}
+                    ariaLabel="copy-value"
+                    variant="plain"
+                    size="sm"
+                    className="w-0 overflow-hidden p-0 group-hover:w-5"
+                    onClick={copyTokenToClipboard}
+                  >
+                    <Tooltip content="Copy secret">
                       <FontAwesomeSymbol
                         className="h-3.5 w-3"
                         symbolName={
@@ -479,8 +476,8 @@ export const SecretItem = memo(
                             : FontAwesomeSpriteName.ClipboardCopy
                         }
                       />
-                    </IconButton>
-                  </Tooltip>
+                    </Tooltip>
+                  </IconButton>
                   <ProjectPermissionCan
                     I={ProjectPermissionActions.Edit}
                     a={subject(ProjectPermissionSub.Secrets, {
@@ -491,41 +488,47 @@ export const SecretItem = memo(
                     })}
                   >
                     {(isAllowed) => (
-                      <Modal>
-                        <ModalTrigger asChild>
-                          <IconButton
-                            className="w-0 overflow-hidden p-0 group-hover:w-5"
-                            variant="plain"
-                            size="md"
-                            ariaLabel="reference-tree"
-                            isDisabled={!isAllowed || !hasSecretReference(secret?.value)}
-                          >
-                            <Tooltip
-                              content={
-                                hasSecretReference(secret?.value)
-                                  ? "Secret Reference Tree"
-                                  : "Secret does not contain references"
-                              }
-                            >
-                              <FontAwesomeSymbol
-                                className="h-3.5 w-3.5"
-                                symbolName={FontAwesomeSpriteName.SecretReferenceTree}
-                              />
-                            </Tooltip>
-                          </IconButton>
-                        </ModalTrigger>
-                        <ModalContent
-                          title="Secret Reference Details"
-                          subTitle="Visual breakdown of secrets referenced by this secret."
-                          onOpenAutoFocus={(e) => e.preventDefault()}
+                      <IconButton
+                        className={twMerge(
+                          "w-0 overflow-hidden p-0 group-hover:w-5",
+                          secret.reminder && "w-5 text-primary"
+                        )}
+                        onClick={() => handlePopUpOpen("reminder")}
+                        variant="plain"
+                        size="md"
+                        ariaLabel="Secret reminder"
+                        isDisabled={!isAllowed || isOverridden}
+                      >
+                        <Tooltip
+                          className="max-w-2xl"
+                          content={
+                            isOverridden ? (
+                              "Unavailable with override"
+                            ) : secret.reminder ? (
+                              <div className="flex flex-col gap-y-1">
+                                <GenericFieldLabel label="Reminder Date">
+                                  {secret.reminder.nextReminderDate
+                                    ? format(
+                                        new Date(secret.reminder.nextReminderDate),
+                                        "h:mm aa - MMM d yyyy"
+                                      )
+                                    : undefined}
+                                </GenericFieldLabel>
+                                <GenericFieldLabel label="Message">
+                                  {secret.reminder.message}
+                                </GenericFieldLabel>
+                              </div>
+                            ) : (
+                              "Set Secret Reminder"
+                            )
+                          }
                         >
-                          <SecretReferenceTree
-                            secretPath={secretPath}
-                            environment={environment}
-                            secretKey={secret?.key}
+                          <FontAwesomeSymbol
+                            className="h-3.5 w-3.5"
+                            symbolName={FontAwesomeSpriteName.Reminder}
                           />
-                        </ModalContent>
-                      </Modal>
+                        </Tooltip>
+                      </IconButton>
                     )}
                   </ProjectPermissionCan>
                   <DropdownMenu>
@@ -539,7 +542,7 @@ export const SecretItem = memo(
                       })}
                     >
                       {(isAllowed) => (
-                        <DropdownMenuTrigger asChild disabled={!isAllowed}>
+                        <DropdownMenuTrigger asChild disabled={!isAllowed || isOverridden}>
                           <IconButton
                             ariaLabel="tags"
                             variant="plain"
@@ -548,9 +551,9 @@ export const SecretItem = memo(
                               "w-0 overflow-hidden p-0 group-hover:w-5 data-[state=open]:w-5",
                               hasTagsApplied && "w-5 text-primary"
                             )}
-                            isDisabled={!isAllowed}
+                            isDisabled={!isAllowed || isOverridden}
                           >
-                            <Tooltip content="Tags">
+                            <Tooltip content={isOverridden ? "Unavailable with override" : "Tags"}>
                               <FontAwesomeSymbol
                                 className="h-3.5 w-3.5"
                                 symbolName={FontAwesomeSpriteName.Tags}
@@ -617,8 +620,6 @@ export const SecretItem = memo(
                       secretName,
                       secretTags: selectedTagSlugs
                     })}
-                    renderTooltip
-                    allowedLabel="Override"
                   >
                     {(isAllowed) => (
                       <IconButton
@@ -629,13 +630,15 @@ export const SecretItem = memo(
                         onClick={handleOverrideClick}
                         className={twMerge(
                           "w-0 overflow-hidden p-0 group-hover:w-5",
-                          isOverriden && "w-5 text-primary"
+                          isOverridden && "w-5 text-primary"
                         )}
                       >
-                        <FontAwesomeSymbol
-                          symbolName={FontAwesomeSpriteName.Override}
-                          className="h-3.5 w-3.5"
-                        />
+                        <Tooltip content={`${isOverridden ? "Remove" : "Add"} Override`}>
+                          <FontAwesomeSymbol
+                            symbolName={FontAwesomeSpriteName.Override}
+                            className="h-3.5 w-3.5"
+                          />
+                        </Tooltip>
                       </IconButton>
                     )}
                   </ProjectPermissionCan>
@@ -650,7 +653,7 @@ export const SecretItem = memo(
                       })}
                     >
                       {(isAllowed) => (
-                        <PopoverTrigger asChild disabled={!isAllowed}>
+                        <PopoverTrigger asChild disabled={!isAllowed || isOverridden}>
                           <IconButton
                             className={twMerge(
                               "w-0 overflow-hidden p-0 group-hover:w-5",
@@ -659,9 +662,11 @@ export const SecretItem = memo(
                             variant="plain"
                             size="md"
                             ariaLabel="add-comment"
-                            isDisabled={!isAllowed}
+                            isDisabled={!isAllowed || isOverridden}
                           >
-                            <Tooltip content="Comment">
+                            <Tooltip
+                              content={isOverridden ? "Unavailable with override" : "Comment"}
+                            >
                               <FontAwesomeSymbol
                                 className="h-3.5 w-3.5"
                                 symbolName={FontAwesomeSpriteName.Comment}
@@ -851,12 +856,13 @@ export const SecretItem = memo(
                     animate={{ x: 0, opacity: 1 }}
                     exit={{ x: 10, opacity: 0 }}
                   >
-                    <Tooltip content="More">
+                    <Tooltip content={isOverridden ? "Unavailable with override" : "More"}>
                       <IconButton
                         ariaLabel="more"
                         variant="plain"
                         size="md"
                         className="h-5 w-4 p-0 opacity-0 group-hover:opacity-100"
+                        isDisabled={isOverridden}
                         onClick={() => onDetailViewSecret(secret)}
                       >
                         <FontAwesomeSymbol
@@ -874,7 +880,13 @@ export const SecretItem = memo(
                         secretTags: selectedTagSlugs
                       })}
                       renderTooltip
-                      allowedLabel={isRotatedSecret ? "Cannot Delete Rotated Secret" : "Delete"}
+                      allowedLabel={
+                        isOverridden
+                          ? "Unavailable with override"
+                          : isRotatedSecret
+                            ? "Cannot Delete Rotated Secret"
+                            : "Delete"
+                      }
                     >
                       {(isAllowed) => (
                         <IconButton
@@ -884,7 +896,7 @@ export const SecretItem = memo(
                           size="md"
                           className="p-0 opacity-0 group-hover:opacity-100"
                           onClick={() => onDeleteSecret(secret)}
-                          isDisabled={!isAllowed || isRotatedSecret}
+                          isDisabled={!isAllowed || isRotatedSecret || isOverridden}
                         >
                           <FontAwesomeSymbol
                             symbolName={FontAwesomeSpriteName.Trash}
@@ -959,6 +971,15 @@ export const SecretItem = memo(
             </AnimatePresence>
           </div>
         </div>
+        <CreateReminderForm
+          isOpen={popUp.reminder.isOpen}
+          onOpenChange={() => handlePopUpToggle("reminder")}
+          workspaceId={currentWorkspace.id}
+          environment={environment}
+          secretPath={secretPath}
+          secretId={secret?.id}
+          reminder={secret.reminder}
+        />
         <DeleteActionModal
           isOpen={popUp.editSecret.isOpen}
           deleteKey="confirm"
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.utils.ts b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.utils.ts
index 53bf28d08..abc726cc0 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.utils.ts
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.utils.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 import {
+  faBell,
   faCheck,
   faClock,
   faClone,
@@ -11,7 +12,6 @@ import {
   faEllipsis,
   faKey,
   faLock,
-  faProjectDiagram,
   faShare,
   faTags,
   faTrash
@@ -83,7 +83,7 @@ export enum FontAwesomeSpriteName {
   ReplicatedSecretKey = "secret-replicated",
   ShareSecret = "share-secret",
   KeyLock = "key-lock",
-  SecretReferenceTree = "secret-reference-tree",
+  Reminder = "secret-reminder",
   Trash = "trash"
 }
 
@@ -103,6 +103,6 @@ export const FontAwesomeSpriteSymbols = [
   { icon: faClone, symbol: FontAwesomeSpriteName.ReplicatedSecretKey },
   { icon: faShare, symbol: FontAwesomeSpriteName.ShareSecret },
   { icon: faLock, symbol: FontAwesomeSpriteName.KeyLock },
-  { icon: faProjectDiagram, symbol: FontAwesomeSpriteName.SecretReferenceTree },
+  { icon: faBell, symbol: FontAwesomeSpriteName.Reminder },
   { icon: faTrash, symbol: FontAwesomeSpriteName.Trash }
 ];