doc: add ab-initio docs

improve sidebars

backend/src/services/secret-sharing/secret-sharing-service.ts

@@ -34,6 +34,25 @@ export const secretSharingServiceFactory = ({
   orgDAL,
   kmsService
 }: TSecretSharingServiceFactoryDep) => {
+  const $validateSharedSecretExpiry = (expiresAt: string) => {
+    if (new Date(expiresAt) < new Date()) {
+      throw new BadRequestError({ message: "Expiration date cannot be in the past" });
+    }
+
+    // Limit Expiry Time to 1 month
+    const expiryTime = new Date(expiresAt).getTime();
+    const currentTime = new Date().getTime();
+    const thirtyDays = 30 * 24 * 60 * 60 * 1000;
+    if (expiryTime - currentTime > thirtyDays) {
+      throw new BadRequestError({ message: "Expiration date cannot be more than 30 days" });
+    }
+
+    const fiveMins = 5 * 60 * 1000;
+    if (expiryTime - currentTime < fiveMins) {
+      throw new BadRequestError({ message: "Expiration time cannot be less than 5 mins" });
+    }
+  };
+
   const createSharedSecret = async ({
     actor,
     actorId,
@@ -49,18 +68,7 @@ export const secretSharingServiceFactory = ({
   }: TCreateSharedSecretDTO) => {
     const { permission } = await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
     if (!permission) throw new ForbiddenRequestError({ name: "User is not a part of the specified organization" });
-
-    if (new Date(expiresAt) < new Date()) {
-      throw new BadRequestError({ message: "Expiration date cannot be in the past" });
-    }
-
-    // Limit Expiry Time to 1 month
-    const expiryTime = new Date(expiresAt).getTime();
-    const currentTime = new Date().getTime();
-    const thirtyDays = 30 * 24 * 60 * 60 * 1000;
-    if (expiryTime - currentTime > thirtyDays) {
-      throw new BadRequestError({ message: "Expiration date cannot be more than 30 days" });
-    }
+    $validateSharedSecretExpiry(expiresAt);
 
     if (secretValue.length > 10_000) {
       throw new BadRequestError({ message: "Shared secret value too long" });
@@ -100,17 +108,7 @@ export const secretSharingServiceFactory = ({
     expiresAfterViews,
     accessType
   }: TCreatePublicSharedSecretDTO) => {
-    if (new Date(expiresAt) < new Date()) {
-      throw new BadRequestError({ message: "Expiration date cannot be in the past" });
-    }
-
-    // Limit Expiry Time to 1 month
-    const expiryTime = new Date(expiresAt).getTime();
-    const currentTime = new Date().getTime();
-    const thirtyDays = 30 * 24 * 60 * 60 * 1000;
-    if (expiryTime - currentTime > thirtyDays) {
-      throw new BadRequestError({ message: "Expiration date cannot exceed more than 30 days" });
-    }
+    $validateSharedSecretExpiry(expiresAt);
 
     const encryptWithRoot = kmsService.encryptWithRootKey();
     const encryptedSecret = encryptWithRoot(Buffer.from(secretValue));

docs/integrations/frameworks/ab-initio.mdx

@@ -0,0 +1,32 @@
+---
+title: "AB Initio"
+description: "How to use Infisical secrets in AB Initio."
+---
+
+## Prerequisites
+
+- Set up and add envars to [Infisical](https://app.infisical.com).
+- Install the [Infisical CLI](https://infisical.com/docs/cli/overview) to your server.
+
+## Setup
+
+<Steps>
+    <Step title="Authorize Infisical for AB Initio">
+        Create a [machine identity](https://infisical.com/docs/documentation/platform/identities/machine-identities#machine-identities) in Infisical and give it the appropriate read permissions for the desired project and secret paths.
+    </Step>
+    <Step title="Add Infisical CLI to your workflow">
+        Update your AB Initio workflows to use Infisical CLI to inject Infisical secrets as environment variables.
+    
+        ```bash
+        # Login using the machine identity. Modify this accordingly based on the authentication method used.
+        export INFISICAL_TOKEN=$(infisical login --method=universal-auth --client-id=$INFISICAL_CLIENT_ID --client-secret=$INFISICAL_CLIENT_SECRET --silent --plain)
+
+        # Fetch secrets from Infisical
+        infisical export --projectId="<>" --env="prod" > infisical.env
+
+        # Inject secrets as environment variables
+        source infisical.env
+        ```
+    </Step>
+
+</Steps>

docs/mint.json

@@ -515,7 +515,8 @@
             "integrations/frameworks/laravel",
             "integrations/frameworks/rails",
             "integrations/frameworks/dotnet",
-            "integrations/platforms/pm2"
+            "integrations/platforms/pm2",
+            "integrations/frameworks/ab-initio"
           ]
         }
       ]

docs/sdks/languages/go.mdx

@@ -297,7 +297,7 @@ secrets, err := client.Secrets().List(infisical.ListSecretsOptions{
 })
 ```
 
-### Parameters
+#### Parameters
 
 <ParamField query="Parameters" type="object">
     <Expandable title="properties">
@@ -348,7 +348,7 @@ secret, err := client.Secrets().Retrieve(infisical.RetrieveSecretOptions{
 })
 ```
 
-### Parameters
+#### Parameters
 
 <ParamField query="Parameters" type="object" optional>
   <Expandable title="properties">
@@ -391,7 +391,7 @@ secret, err := client.Secrets().Create(infisical.CreateSecretOptions{
 })
 ```
 
-### Parameters
+#### Parameters
 
 <ParamField query="Parameters" type="object" optional>
   <Expandable title="properties">
@@ -439,7 +439,7 @@ secret, err := client.Secrets().Update(infisical.UpdateSecretOptions{
 })
 ```
 
-### Parameters
+#### Parameters
 
 <ParamField query="Parameters" type="object" optional>
   <Expandable title="properties">
@@ -490,7 +490,7 @@ secret, err := client.Secrets().Delete(infisical.DeleteSecretOptions{
 })
 ```
 
-### Parameters
+#### Parameters
 
 <ParamField query="Parameters" type="object" optional>
   <Expandable title="properties">
@@ -514,7 +514,77 @@ secret, err := client.Secrets().Delete(infisical.DeleteSecretOptions{
   </Expandable>
 </ParamField>
 
-## Working With folders
+
+### Batch Create Secrets
+
+`client.Secrets().Batch().Create(options)`
+
+Create multiple secrets in Infisical.
+
+```go
+	createdSecrets, err := client.Secrets().Batch().Create(infisical.BatchCreateSecretsOptions{
+		Environment: "<environment-slug>",
+		SecretPath:  "<secret-path>",
+		ProjectID:   "<project-id>",
+		Secrets: []infisical.BatchCreateSecret{
+			{
+				SecretKey:   "SECRET-1",
+				SecretValue: "test-value-1",
+			},
+			{
+				SecretKey:   "SECRET-2",
+				SecretValue: "test-value-2",
+			},
+		},
+	})
+```
+
+#### Parameters
+<ParamField query="Parameters" type="object" optional>
+  <Expandable title="properties">
+    <ParamField query="Environment" type="string" required>
+      The slug name (dev, prod, etc) of the environment from where secrets should be fetched from.
+    </ParamField>
+    <ParamField query="ProjectID" type="string" required>
+      The project ID where the secret lives in.
+    </ParamField>
+    <ParamField query="SecretPath" type="string" optional>
+      The path from where secret should be created.
+    </ParamField>
+    <ParamField query="Secrets" type="array" required>
+    <Expandable>
+      <ParamField query="SecretKey" type="string" required>
+        The key of the secret to create.
+      </ParamField>
+      <ParamField query="SecretValue" type="string" required>
+        The value of the secret.
+      </ParamField>
+      <ParamField query="SecretComment" type="string" optional>
+      The comment to add to the secret.
+      </ParamField>
+      <ParamField query="SkipMultiLineEncoding" type="boolean" optional>
+        Whether or not to skip multiline encoding for the secret value.
+      </ParamField>
+      <ParamField query="TagIDs" type="string[]" optional>
+        The tag IDs to associate with the secret.
+      </ParamField>
+
+      <ParamField query="SecretMetadata" type="object" optional>
+        <Expandable>
+          <ParamField query="Key" type="string" required>
+            The key of the metadata.
+          </ParamField>
+          <ParamField query="Value" type="string" required>
+            The value of the metadata.
+          </ParamField>
+        </Expandable>
+      </ParamField>
+    </Expandable>
+    </ParamField>
+  </Expandable>
+</ParamField>
+
+## Working With Folders
 
 ###
 
@@ -532,7 +602,7 @@ folders, err := client.Folders().List(infisical.ListFoldersOptions{
 })
 ```
 
-### Parameters
+#### Parameters
 
 <ParamField query="Parameters" type="object">
     <Expandable title="properties">
@@ -568,7 +638,7 @@ folder, err := client.Folders().Create(infisical.CreateFolderOptions{
 })
 ```
 
-### Parameters
+#### Parameters
 
 <ParamField query="Parameters" type="object" optional>
   <Expandable title="properties">
@@ -606,7 +676,7 @@ folder, err := client.Folders().Update(infisical.UpdateFolderOptions{
 })
 ```
 
-### Parameters
+#### Parameters
 
 <ParamField query="Parameters" type="object" optional>
   <Expandable title="properties">
@@ -648,7 +718,7 @@ deletedFolder, err := client.Folders().Delete(infisical.DeleteFolderOptions{
 })
 ```
 
-### Parameters
+#### Parameters
 
 <ParamField query="Parameters" type="object" optional>
     <Expandable title="properties">

frontend/src/components/v2/Dropdown/Dropdown.tsx

@@ -20,7 +20,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
     return (
       <DropdownMenuPrimitive.Portal>
         <DropdownMenuPrimitive.Content
-          sideOffset={10}
+          sideOffset={-8}
           {...props}
           ref={forwardedRef}
           className={twMerge(

frontend/src/layouts/OrganizationLayout/components/MenuIconButton/MenuIconButton.tsx

@@ -20,44 +20,46 @@ export const MenuIconButton = <T extends ElementType = "button">({
   ComponentPropsWithRef<T> & { lottieIconMode?: "reverse" | "forward" }): JSX.Element => {
   const iconRef = useRef<DotLottie | null>(null);
   return (
-    <Item
-      type="button"
-      role="menuitem"
-      className={twMerge(
-        "group relative flex w-full cursor-pointer flex-col items-center justify-center rounded p-2 font-inter text-sm text-bunker-100 transition-all duration-150 hover:bg-mineshaft-700",
-        isSelected && "bg-bunker-800 hover:bg-mineshaft-600",
-        isDisabled && "cursor-not-allowed hover:bg-transparent",
-        className
-      )}
-      onMouseEnter={() => iconRef.current?.play()}
-      onMouseLeave={() => iconRef.current?.stop()}
-      ref={inputRef}
-      {...props}
-    >
-      <div
-        className={`${
-          isSelected ? "opacity-100" : "opacity-0"
-        } absolute -left-[0.28rem] h-full w-1 rounded-md bg-primary transition-all duration-150`}
-      />
-      {icon && (
-        <div className="my-auto mb-2 h-6 w-6">
-          <DotLottieReact
-            dotLottieRefCallback={(el) => {
-              iconRef.current = el;
-            }}
-            src={`/lotties/${icon}.json`}
-            loop
-            className="h-full w-full"
-            mode={lottieIconMode}
-          />
-        </div>
-      )}
-      <div
-        className="flex-grow justify-center break-words text-center"
-        style={{ fontSize: "10px" }}
+    <div className={!isSelected ? "hover:px-1" : ""}>
+      <Item
+        type="button"
+        role="menuitem"
+        className={twMerge(
+          "group relative flex w-full cursor-pointer flex-col items-center justify-center rounded my-1 p-2 font-inter text-sm text-bunker-100 transition-all duration-150 hover:bg-mineshaft-700",
+          isSelected && "bg-bunker-800 hover:bg-mineshaft-600 rounded-none",
+          isDisabled && "cursor-not-allowed hover:bg-transparent",
+          className
+        )}
+        onMouseEnter={() => iconRef.current?.play()}
+        onMouseLeave={() => iconRef.current?.stop()}
+        ref={inputRef}
+        {...props}
       >
-        {children}
-      </div>
-    </Item>
+        <div
+          className={`${
+            isSelected ? "opacity-100" : "opacity-0"
+          } absolute left-0 h-full w-1 bg-primary transition-all duration-150`}
+        />
+        {icon && (
+          <div className="my-auto mb-2 h-6 w-6">
+            <DotLottieReact
+              dotLottieRefCallback={(el) => {
+                iconRef.current = el;
+              }}
+              src={`/lotties/${icon}.json`}
+              loop
+              className="h-full w-full"
+              mode={lottieIconMode}
+            />
+          </div>
+        )}
+        <div
+          className="flex-grow justify-center break-words text-center"
+          style={{ fontSize: "10px" }}
+        >
+          {children}
+        </div>
+      </Item>
+    </div>
   );
 };

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -84,6 +84,10 @@ export const MinimizedOrgSidebar = () => {
   const [requiredMfaMethod, setRequiredMfaMethod] = useState(MfaMethod.EMAIL);
   const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {});
   const { subscription } = useSubscription();
+  const [open, setOpen] = useState(false);
+  const [openSupport, setOpenSupport] = useState(false);
+  const [openUser, setOpenUser] = useState(false);
+  const [openOrg, setOpenOrg] = useState(false);
 
   const { user } = useUser();
   const { mutateAsync } = useGetOrgTrialUrl();
@@ -160,23 +164,29 @@ export const MinimizedOrgSidebar = () => {
       >
         <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
           <div>
-            <div className="flex cursor-pointer items-center p-2 pt-4 hover:bg-mineshaft-700">
-              <DropdownMenu modal>
-                <DropdownMenuTrigger asChild>
-                  <div className="flex w-full items-center justify-center rounded-md border border-none border-mineshaft-600 p-1 transition-all">
+            <div className="flex items-center hover:bg-mineshaft-700">
+              <DropdownMenu open={openOrg} onOpenChange={setOpenOrg} modal>
+                <DropdownMenuTrigger
+                  onMouseEnter={() => setOpenOrg(true)}
+                  onMouseLeave={() => setOpenOrg(false)}
+                  asChild
+                >
+                  <div className="flex w-full items-center justify-center rounded-md border border-none border-mineshaft-600 p-3 pb-5 pt-6 transition-all">
                     <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary">
                       {currentOrg?.name.charAt(0)}
                     </div>
                   </div>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent
+                  onMouseEnter={() => setOpenOrg(true)}
+                  onMouseLeave={() => setOpenOrg(false)}
                   align="start"
                   side="right"
-                  className="p-1 shadow-mineshaft-600 drop-shadow-md"
-                  style={{ minWidth: "320px" }}
+                  className="mt-6 cursor-default p-1 shadow-mineshaft-600 drop-shadow-md"
+                  style={{ minWidth: "220px" }}
                 >
-                  <div className="px-2 py-1">
-                    <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 p-1 transition-all duration-150 hover:bg-mineshaft-700">
+                  <div className="px-0.5 py-1">
+                    <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-gradient-to-tr from-primary-500/5 to-mineshaft-800 p-1 transition-all duration-300">
                       <div className="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-primary text-black">
                         {currentOrg?.name.charAt(0)}
                       </div>
@@ -241,7 +251,7 @@ export const MinimizedOrgSidebar = () => {
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
-            <div className="space-y-1 px-1">
+            <div className="space-y-1">
               <Link to="/organization/secret-manager/overview">
                 {({ isActive }) => (
                   <MenuIconButton
@@ -251,7 +261,7 @@ export const MinimizedOrgSidebar = () => {
                     }
                     icon="sliding-carousel"
                   >
-                    Secret Manager
+                    Secrets
                   </MenuIconButton>
                 )}
               </Link>
@@ -264,7 +274,7 @@ export const MinimizedOrgSidebar = () => {
                     }
                     icon="note"
                   >
-                    Cert Manager
+                    PKI
                   </MenuIconButton>
                 )}
               </Link>
@@ -296,31 +306,41 @@ export const MinimizedOrgSidebar = () => {
               <Link to="/organization/secret-scanning">
                 {({ isActive }) => (
                   <MenuIconButton isSelected={isActive} icon="secret-scan">
-                    Secret Scanning
+                    Scanner
                   </MenuIconButton>
                 )}
               </Link>
               <Link to="/organization/secret-sharing">
                 {({ isActive }) => (
                   <MenuIconButton isSelected={isActive} icon="lock-closed">
-                    Secret Sharing
+                    Share
                   </MenuIconButton>
                 )}
               </Link>
               <div className="my-1 w-full bg-mineshaft-500" style={{ height: "1px" }} />
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
+              <DropdownMenu open={open} onOpenChange={setOpen}>
+                <DropdownMenuTrigger
+                  onMouseEnter={() => setOpen(true)}
+                  onMouseLeave={() => setOpen(false)}
+                  asChild
+                >
                   <div className="w-full">
                     <MenuIconButton
                       lottieIconMode="reverse"
                       icon="settings-cog"
                       isSelected={isMoreSelected}
                     >
-                      Org Controls
+                      Admin
                     </MenuIconButton>
                   </div>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" side="right" className="p-1">
+                <DropdownMenuContent
+                  onMouseEnter={() => setOpen(true)}
+                  onMouseLeave={() => setOpen(false)}
+                  align="start"
+                  side="right"
+                  className="p-1"
+                >
                   <DropdownMenuLabel>Organization Options</DropdownMenuLabel>
                   <Link to="/organization/access-management">
                     <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faUsers} />}>
@@ -364,14 +384,24 @@ export const MinimizedOrgSidebar = () => {
                 : "mb-4"
             } flex w-full cursor-default flex-col items-center px-1 text-sm text-mineshaft-400`}
           >
-            <DropdownMenu>
-              <DropdownMenuTrigger className="w-full">
+            <DropdownMenu open={openSupport} onOpenChange={setOpenSupport}>
+              <DropdownMenuTrigger
+                onMouseEnter={() => setOpenSupport(true)}
+                onMouseLeave={() => setOpenSupport(false)}
+                className="w-full"
+              >
                 <MenuIconButton>
                   <FontAwesomeIcon icon={faInfoCircle} className="mb-3 text-lg" />
                   Support
                 </MenuIconButton>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="p-1">
+              <DropdownMenuContent
+                onMouseEnter={() => setOpenSupport(true)}
+                onMouseLeave={() => setOpenSupport(false)}
+                align="end"
+                side="right"
+                className="p-1"
+              >
                 {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => (
                   <DropdownMenuItem key={url as string}>
                     <a
@@ -419,17 +449,28 @@ export const MinimizedOrgSidebar = () => {
                 </button>
               </Tooltip>
             )}
-            <DropdownMenu>
-              <DropdownMenuTrigger className="w-full" asChild>
+            <DropdownMenu open={openUser} onOpenChange={setOpenUser}>
+              <DropdownMenuTrigger
+                onMouseEnter={() => setOpenUser(true)}
+                onMouseLeave={() => setOpenUser(false)}
+                className="w-full"
+                asChild
+              >
                 <div>
                   <MenuIconButton icon="user">User</MenuIconButton>
                 </div>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="p-1">
-                <div className="px-2 py-1">
-                  <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 p-1 transition-all duration-150 hover:bg-mineshaft-700">
-                    <div className="p-2">
-                      <FontAwesomeIcon icon={faUser} className="text-mineshaft-400" />
+              <DropdownMenuContent
+                onMouseEnter={() => setOpenUser(true)}
+                onMouseLeave={() => setOpenUser(false)}
+                side="right"
+                align="end"
+                className="p-1"
+              >
+                <div className="cursor-default px-1 py-1">
+                  <div className="flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-gradient-to-tr from-primary-500/10 to-mineshaft-800 p-1 px-2 transition-all duration-150">
+                    <div className="p-1 pr-3">
+                      <FontAwesomeIcon icon={faUser} className="text-xl text-mineshaft-400" />
                     </div>
                     <div className="flex flex-grow flex-col text-white">
                       <div className="max-w-36 truncate text-ellipsis text-sm font-medium capitalize">
@@ -477,11 +518,11 @@ export const MinimizedOrgSidebar = () => {
                     </DropdownMenuItem>
                   </Link>
                 )}
-                <Link to="/organization/admin">
-                  <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
-                    Organization Admin Console
-                  </DropdownMenuItem>
-                </Link>
+                <div className="mt-1 border-t border-mineshaft-600 pt-1">
+                  <Link to="/organization/admin">
+                    <DropdownMenuItem>Organization Admin Console</DropdownMenuItem>
+                  </Link>
+                </div>
                 <div className="mt-1 h-1 border-t border-mineshaft-600" />
                 <DropdownMenuItem onClick={logOutUser} icon={<FontAwesomeIcon icon={faSignOut} />}>
                   Log Out

frontend/src/pages/public/ShareSecretPage/components/ShareSecretForm.tsx

@@ -120,7 +120,7 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
               isError={Boolean(error)}
               errorText={error?.message}
             >
-              <Input {...field} placeholder="API Key" type="text" />
+              <Input {...field} placeholder="API Key" type="text" autoComplete="off" autoCorrect="off" spellCheck="false" />
             </FormControl>
           )}
         />
@@ -155,7 +155,7 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
             errorText={error?.message}
             isOptional
           >
-            <Input {...field} placeholder="Password" type="password" />
+            <Input {...field} placeholder="Password" type="password" autoComplete="new-password" autoCorrect="off" spellCheck="false" aria-autocomplete="none" data-form-type="other" />
           </FormControl>
         )}
       />

frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx

@@ -59,7 +59,12 @@ export const PitDrawer = ({
                   onClick={() => onSelectSnapshot(id)}
                 >
                   <div className="flex w-full justify-between">
-                    <div>{formatDistance(new Date(createdAt), new Date())}</div>
+                    <div>
+                      {(() => {
+                        const distance = formatDistance(new Date(createdAt), new Date());
+                        return distance.charAt(0).toUpperCase() + distance.slice(1) + " ago";
+                      })()}
+                    </div>
                     <div>{getButtonLabel(i === 0 && index === 0, snapshotId === id)}</div>
                   </div>
                 </Button>
@@ -70,7 +75,7 @@ export const PitDrawer = ({
         <Button
           className="mt-8 px-4 py-3 text-sm"
           isFullWidth
-          variant="star"
+          variant="outline_bg"
           isLoading={isFetchingNextPage}
           isDisabled={isFetchingNextPage || !hasNextPage}
           onClick={fetchNextPage}

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx

@@ -1,11 +1,11 @@
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
-import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
+import { faCircleQuestion, faEye } from "@fortawesome/free-regular-svg-icons";
 import {
+  faArrowRotateRight,
   faCheckCircle,
-  faCircle,
-  faCircleDot,
   faClock,
+  faEyeSlash,
   faPlus,
   faShare,
   faTag,
@@ -236,44 +236,102 @@ export const SecretDetailSidebar = ({
         }}
         isOpen={isOpen}
       >
-        <DrawerContent title="Secret">
+        <DrawerContent title={`Secret – ${secret?.key}`} className="thin-scrollbar">
           <form onSubmit={handleSubmit(handleFormSubmit)} className="h-full">
             <div className="flex h-full flex-col">
-              <FormControl label="Key">
-                <Input isDisabled {...register("key")} />
-              </FormControl>
-              <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
-                a={subject(ProjectPermissionSub.Secrets, {
-                  environment,
-                  secretPath,
-                  secretName: secretKey,
-                  secretTags: selectTagSlugs
-                })}
-              >
-                {(isAllowed) => (
+              <div className="flex flex-row">
+                <div className="w-full">
+                  <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 label="Value">
+                            <InfisicalSecretInput
+                              isReadOnly={isReadOnly}
+                              environment={environment}
+                              secretPath={secretPath}
+                              key="secret-value"
+                              isDisabled={isOverridden || !isAllowed}
+                              containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800 px-2 py-1.5"
+                              {...field}
+                              autoFocus={false}
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    )}
+                  </ProjectPermissionCan>
+                </div>
+                <div className="ml-1 mt-1.5 flex items-center">
+                  <Button
+                    className="w-full 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>
+                </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
-                    name="value"
-                    key="secret-value"
                     control={control}
-                    render={({ field }) => (
-                      <FormControl label="Value">
-                        <InfisicalSecretInput
-                          isReadOnly={isReadOnly}
-                          environment={environment}
-                          secretPath={secretPath}
-                          key="secret-value"
-                          isDisabled={isOverridden || !isAllowed}
-                          containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
-                          {...field}
-                          autoFocus={false}
-                        />
-                      </FormControl>
+                    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>
                     )}
                   />
-                )}
-              </ProjectPermissionCan>
-              <div className="mb-2 border-b border-mineshaft-600 pb-4">
+                </div>
+                <div
+                  className={`mb-4 w-full border-t border-mineshaft-600 ${isOverridden ? "block" : "hidden"}`}
+                />
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Edit}
                   a={subject(ProjectPermissionSub.Secrets, {
@@ -284,194 +342,243 @@ export const SecretDetailSidebar = ({
                   })}
                 >
                   {(isAllowed) => (
-                    <Switch
-                      isDisabled={!isAllowed}
-                      id="personal-override"
-                      onCheckedChange={handleOverrideClick}
-                      isChecked={isOverridden}
-                    >
-                      Override with a personal value
-                    </Switch>
+                    <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>
-              {isOverridden && (
-                <Controller
-                  name="valueOverride"
-                  control={control}
-                  render={({ field }) => (
-                    <FormControl label="Value Override">
-                      <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>
-                  )}
-                />
-              )}
-              <FormControl label="Metadata">
-                <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)}
+              <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" : ""}`}
                       >
-                        <FontAwesomeIcon icon={faTrash} />
-                      </IconButton>
-                    </div>
-                  ))}
-                  <div className="mt-2">
-                    <Button
-                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                      size="xs"
-                      variant="outline_bg"
-                      onClick={() => metadataFormFields.append({ key: "", value: "" })}
-                    >
-                      Add Key
-                    </Button>
+                        {tagFields.fields.map(({ tagColor, id: formId, slug, id }) => (
+                          <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(({ id: tagId }) => id === tagId);
+                              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>
-              </FormControl>
-              <FormControl label="Tags" className="">
-                <div className="grid auto-cols-min grid-flow-col gap-2 overflow-hidden pt-2">
-                  {tagFields.fields.map(({ tagColor, id: formId, slug, id }) => (
-                    <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(({ id: tagId }) => id === tagId);
-                        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="end" className="z-[100]">
-                      <DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
-                      {tags.map((tag) => {
-                        const { id: tagId, slug, color } = tag;
+                <div
+                  className={`mb-4 w-full border-t border-mineshaft-600 ${tagFields.fields.length > 0 || metadataFormFields.fields.length > 0 ? "block" : "hidden"}`}
+                />
 
-                        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" }}
+                <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
                               />
-                              {slug}
-                            </div>
-                          </DropdownMenuItem>
-                        );
-                      })}
-                      <ProjectPermissionCan
-                        I={ProjectPermissionActions.Create}
-                        a={ProjectPermissionSub.Tags}
-                      >
-                        {(isAllowed) => (
-                          <DropdownMenuItem asChild>
-                            <Button
-                              size="xs"
-                              className="w-full"
-                              colorSchema="primary"
-                              variant="outline_bg"
-                              leftIcon={<FontAwesomeIcon icon={faTag} />}
-                              onClick={onCreateTag}
-                              isDisabled={!isAllowed}
-                            >
-                              Create a tag
-                            </Button>
-                          </DropdownMenuItem>
-                        )}
-                      </ProjectPermissionCan>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
+                            )}
+                            <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>
+              <FormControl label="Comments & Notes">
+                <TextArea
+                  className="border border-mineshaft-600 bg-bunker-800 text-sm"
+                  {...register("comment")}
+                  readOnly={isReadOnly}
+                  rows={5}
+                />
               </FormControl>
-              <FormControl label="Reminder">
+              <FormControl>
                 {secretReminderRepeatDays && secretReminderRepeatDays > 0 ? (
-                  <div className="ml-1 mt-2 flex items-center justify-between">
+                  <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">
@@ -490,9 +597,9 @@ export const SecretDetailSidebar = ({
                     </div>
                   </div>
                 ) : (
-                  <div className="ml-1 mt-2 flex items-center space-x-2">
+                  <div className="ml-1 flex items-center space-x-2">
                     <Button
-                      className="w-full px-2 py-1"
+                      className="w-full px-2 py-2 font-normal"
                       variant="outline_bg"
                       leftIcon={<FontAwesomeIcon icon={faClock} />}
                       onClick={() => setCreateReminderFormOpen.on()}
@@ -503,92 +610,147 @@ export const SecretDetailSidebar = ({
                   </div>
                 )}
               </FormControl>
-              <FormControl label="Comments & Notes">
-                <TextArea
-                  className="border border-mineshaft-600 text-sm"
-                  {...register("comment")}
-                  readOnly={isReadOnly}
-                  rows={5}
-                />
-              </FormControl>
-              <div className="my-2 mb-4 border-b border-mineshaft-600 pb-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) => (
-                        <Switch
-                          id="skipmultiencoding-option"
-                          onCheckedChange={(isChecked) => onChange(isChecked)}
-                          isChecked={value}
-                          onBlur={onBlur}
-                          isDisabled={!isAllowed}
-                          className="items-center"
-                        >
-                          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-1" size="sm" />
-                          </Tooltip>
-                        </Switch>
-                      )}
-                    </ProjectPermissionCan>
-                  )}
-                />
-              </div>
-              <div className="ml-1 flex items-center space-x-4">
-                <Button
-                  className="w-full px-2 py-1"
-                  variant="outline_bg"
-                  leftIcon={<FontAwesomeIcon icon={faShare} />}
-                  onClick={() => {
-                    const value = secret?.valueOverride ?? secret?.value;
-                    if (value) {
-                      handleSecretShare(value);
-                    }
-                  }}
-                >
-                  Share Secret
-                </Button>
-              </div>
-              <div className="dark mb-4 mt-4 flex-grow text-sm text-bunker-300">
-                <div className="mb-2">Version History</div>
-                <div className="flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-bunker-800 p-2 dark:[color-scheme:dark]">
-                  {secretVersion?.map(({ createdAt, secretValue, id }, i) => (
-                    <div key={id} className="flex flex-col space-y-1">
-                      <div className="flex items-center space-x-2">
-                        <div>
-                          <FontAwesomeIcon icon={i === 0 ? faCircleDot : faCircle} size="sm" />
+              <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, version, id }) => (
+                    <div className="flex flex-row">
+                      <div key={id} 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 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"
+                                  onClick={(e) => {
+                                    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 (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);
+                                    }
+                                  }}
+                                >
+                                  {secretValue}
+                                </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");
+                                    }
+                                  }}
+                                >
+                                  <FontAwesomeIcon icon={faEyeSlash} />
+                                </button>
+                              </div>
+                              <span className="group-[.show-value]:hidden">
+                                {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");
+                                    }
+                                  }}
+                                >
+                                  <FontAwesomeIcon icon={faEye} />
+                                </button>
+                              </span>
+                            </div>
+                          </div>
                         </div>
-                        <div>{format(new Date(createdAt), "Pp")}</div>
                       </div>
-                      <div className="ml-1.5 flex items-center space-x-2 border-l border-bunker-300 pl-4">
-                        <div className="self-start rounded-sm bg-primary-500/30 px-1">Value:</div>
-                        <div className="break-all font-mono">{secretValue}</div>
+                      <div
+                        className={`flex items-center justify-center ${version === secretVersion.length ? "hidden" : ""}`}
+                      >
+                        <Tooltip content="Restore Secret Value">
+                          <IconButton
+                            ariaLabel="Restore"
+                            variant="outline_bg"
+                            size="sm"
+                            className="h-8 w-8 rounded-md"
+                            onClick={() => setValue("value", secretValue)}
+                          >
+                            <FontAwesomeIcon icon={faArrowRotateRight} />
+                          </IconButton>
+                        </Tooltip>
                       </div>
                     </div>
                   ))}
                 </div>
               </div>
               <div className="dark mb-4 flex-grow text-sm text-bunker-300">
-                <div className="mb-2">
+                <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-1" size="sm" />
+                    <FontAwesomeIcon icon={faCircleQuestion} className="ml-2" />
                   </Tooltip>
                 </div>
                 {isPending && (
@@ -608,14 +770,22 @@ export const SecretDetailSidebar = ({
                   </Button>
                 )}
                 {!isPending && secretAccessList && (
-                  <div className="flex max-h-72 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-bunker-800 p-2 dark:[color-scheme:dark]">
+                  <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 px-1">
-                              <Tooltip content={user.allowedActions.join(", ")} className="z-[100]">
+                            <div className="rounded-md bg-bunker-500">
+                              <Tooltip
+                                content={user.allowedActions
+                                  .map(
+                                    (action) =>
+                                      action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()
+                                  )
+                                  .join(", ")}
+                                className="z-[100]"
+                              >
                                 <Link
                                   to={
                                     `/${ProjectType.SecretManager}/$projectId/members/$membershipId` as const
@@ -624,7 +794,7 @@ export const SecretDetailSidebar = ({
                                     projectId: currentWorkspace.id,
                                     membershipId: user.membershipId
                                   }}
-                                  className="text-secondary/80 text-sm hover:text-primary"
+                                  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>
@@ -639,9 +809,14 @@ export const SecretDetailSidebar = ({
                         <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 px-1">
+                            <div className="rounded-md bg-bunker-500">
                               <Tooltip
-                                content={identity.allowedActions.join(", ")}
+                                content={identity.allowedActions
+                                  .map(
+                                    (action) =>
+                                      action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()
+                                  )
+                                  .join(", ")}
                                 className="z-[100]"
                               >
                                 <Link
@@ -652,7 +827,7 @@ export const SecretDetailSidebar = ({
                                     projectId: currentWorkspace.id,
                                     identityId: identity.id
                                   }}
-                                  className="text-secondary/80 text-sm hover:text-primary"
+                                  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>
@@ -667,9 +842,14 @@ export const SecretDetailSidebar = ({
                         <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 px-1">
+                            <div className="rounded-md bg-bunker-500">
                               <Tooltip
-                                content={group.allowedActions.join(", ")}
+                                content={group.allowedActions
+                                  .map(
+                                    (action) =>
+                                      action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()
+                                  )
+                                  .join(", ")}
                                 className="z-[100]"
                               >
                                 <Link
@@ -677,7 +857,7 @@ export const SecretDetailSidebar = ({
                                   params={{
                                     groupId: group.id
                                   }}
-                                  className="text-secondary/80 text-sm hover:text-primary"
+                                  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>
@@ -691,7 +871,7 @@ export const SecretDetailSidebar = ({
                 )}
               </div>
               <div className="flex flex-col space-y-4">
-                <div className="mb-2 flex items-center space-x-4">
+                <div className="mb-4 flex items-center space-x-4">
                   <ProjectPermissionCan
                     I={ProjectPermissionActions.Edit}
                     a={subject(ProjectPermissionSub.Secrets, {
@@ -705,6 +885,7 @@ export const SecretDetailSidebar = ({
                       <Button
                         isFullWidth
                         type="submit"
+                        variant="outline_bg"
                         isDisabled={isSubmitting || !isDirty || !isAllowed}
                         isLoading={isSubmitting}
                       >
@@ -722,9 +903,17 @@ export const SecretDetailSidebar = ({
                     })}
                   >
                     {(isAllowed) => (
-                      <Button colorSchema="danger" isDisabled={!isAllowed} onClick={onDeleteSecret}>
-                        Delete
-                      </Button>
+                      <IconButton
+                        colorSchema="danger"
+                        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}
+                      >
+                        <Tooltip content="Delete Secret">
+                          <FontAwesomeIcon icon={faTrash} />
+                        </Tooltip>
+                      </IconButton>
                     )}
                   </ProjectPermissionCan>
                 </div>