diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
index 3f5c14931..abb38b372 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
@@ -1,13 +1,9 @@
 import { useState } from "react";
 import {
   faCheck,
-  faCircleCheck,
-  faCircleXmark,
   faClose,
   faLandMineOn,
   faLockOpen,
-  faSquareCheck,
-  faSquareXmark,
   faTriangleExclamation,
   faUserLock,
   faXmark
@@ -115,25 +111,34 @@ export const SecretApprovalRequestAction = ({
 
   if (!hasMerged && status === "open") {
     return (
-      <div className="flex flex-col w-full items-start justify-between transition-all py-4">
+      <div className="flex w-full flex-col items-start justify-between py-4 transition-all">
         <div className="flex items-center space-x-4 px-4">
-          <div className={`flex items-center justify-center rounded-full ${isMergable ? "bg-green w-10 h-10" : "bg-red-600 w-11 h-11"}`}>
+          <div
+            className={`flex items-center justify-center rounded-full ${isMergable ? "h-10 w-10 bg-green" : "h-11 w-11 bg-red-600"}`}
+          >
             <FontAwesomeIcon
               icon={isMergable ? faCheck : faXmark}
-              className={isMergable ? "text-black text-lg" : "text-white text-2xl"}
+              className={isMergable ? "text-lg text-black" : "text-2xl text-white"}
             />
           </div>
           <span className="flex flex-col">
-            <p className={`text-md font-medium ${isMergable && "text-lg"}`}>{isMergable ? "Good to merge" : "Merging is blocked"}</p>
-            {!isMergable && <span className="inline-block text-xs text-bunker-200">
-              At least {approvals} approving review{`${approvals > 1 ? "s" : ""}`} required by eligible reviewers.
-              {Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
-            </span>}
+            <p className={`text-md font-medium ${isMergable && "text-lg"}`}>
+              {isMergable ? "Good to merge" : "Merging is blocked"}
+            </p>
+            {!isMergable && (
+              <span className="inline-block text-xs text-bunker-200">
+                At least {approvals} approving review{`${approvals > 1 ? "s" : ""}`} required by
+                eligible reviewers.
+                {Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
+              </span>
+            )}
           </span>
         </div>
-        <div className={`w-full px-5 border-mineshaft-600 mt-4 ${isMergable ? "border-t pb-2" : "border-y pb-4"}`}>
+        <div
+          className={`mt-4 w-full border-mineshaft-600 px-5 ${isMergable ? "border-t pb-2" : "border-y pb-4"}`}
+        >
           {isSoftEnforcement && !isMergable && canBypassApprovalPermission && (
-            <div className="mt-2 pt-2 flex flex-col space-y-2">
+            <div className="mt-2 flex flex-col space-y-2 pt-2">
               <Checkbox
                 onCheckedChange={(checked) => setByPassApproval(checked === true)}
                 isChecked={byPassApproval}
@@ -166,7 +171,7 @@ export const SecretApprovalRequestAction = ({
             </div>
           )}
         </div>
-        <div className="flex items-center justify-end w-full space-x-2 px-4 mt-2">
+        <div className="mt-2 flex w-full items-center justify-end space-x-2 px-4">
           {canApprove || isSoftEnforcement ? (
             <div className="flex items-center space-x-4">
               <Button
@@ -175,7 +180,7 @@ export const SecretApprovalRequestAction = ({
                 variant="outline_bg"
                 colorSchema="primary"
                 leftIcon={<FontAwesomeIcon icon={faClose} />}
-                className="hover:bg-red/10 hover:border-red/60"
+                className="hover:border-red/60 hover:bg-red/10"
               >
                 Close request
               </Button>
@@ -205,7 +210,7 @@ export const SecretApprovalRequestAction = ({
 
   if (hasMerged && status === "close")
     return (
-      <div className="flex w-full items-center justify-between bg-primary/10 border border-primary/60 rounded-md">
+      <div className="flex w-full items-center justify-between rounded-md border border-primary/60 bg-primary/10">
         <div className="flex items-start space-x-4 p-4">
           <FontAwesomeIcon icon={faCheck} className="pt-1 text-2xl text-primary" />
           <span className="flex flex-col">
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
index 35f6474d5..b7a6a8149 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
@@ -1,12 +1,19 @@
-import { faCircleXmark, faExclamationTriangle, faEye, faEyeSlash, faInfo, faKey } from "@fortawesome/free-solid-svg-icons";
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable no-nested-ternary */
+import { useState } from "react";
+import {
+  faCircleXmark,
+  faExclamationTriangle,
+  faEye,
+  faEyeSlash,
+  faInfo,
+  faKey
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import {
-  Tag,
-  Tooltip
-} from "@app/components/v2";
+import { Tag, Tooltip } from "@app/components/v2";
 import { CommitType, SecretV3Raw, TSecretApprovalSecChange, WsTag } from "@app/hooks/api/types";
-import { useState } from "react";
 
 export type Props = {
   op: CommitType;
@@ -27,7 +34,7 @@ const generateItemTitle = (op: CommitType) => {
   else text = { label: "deletion", color: "#F83030" };
 
   return (
-    <div className="text-md font-medium pb-2">
+    <div className="text-md pb-2 font-medium">
       Request for <span style={{ color: text.color }}>secret {text.label}</span>
     </div>
   );
@@ -56,7 +63,7 @@ export const SecretApprovalRequestChangeItem = ({
   const [isNewSecretValueVisible, setIsNewSecretValueVisible] = useState(false);
 
   return (
-    <div className="rounded-lg bg-mineshaft-900 px-4 pb-4 pt-2 border border-mineshaft-600">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 pb-4 pt-2">
       <div className="flex items-center px-1 py-1">
         <div className="flex-grow">{generateItemTitle(op)}</div>
         {!hasMerged && isStale && (
@@ -75,57 +82,84 @@ export const SecretApprovalRequestChangeItem = ({
         )}
       </div>
       <div>
-        <div className="flex flex-col xl:flex-row space-y-4 xl:space-y-0 space-x-0 xl:space-x-4">
+        <div className="flex flex-col space-x-0 space-y-4 xl:flex-row xl:space-x-4 xl:space-y-0">
           {op === CommitType.UPDATE || op === CommitType.DELETE ? (
-            <div className="flex flex-col border border-red-600/60 bg-red-600/10 p-4 w-full xl:w-1/2 rounded-md cursor-default">
-              <div className="flex flex-row justify-between mb-4">
+            <div className="flex w-full cursor-default flex-col rounded-md border border-red-600/60 bg-red-600/10 p-4 xl:w-1/2">
+              <div className="mb-4 flex flex-row justify-between">
                 <span className="text-md font-medium">Legacy Secret</span>
-                <div className="pt-[0.2rem] pb-[0.14rem] px-2 bg-red text-xs rounded-full font-medium">
-                  <FontAwesomeIcon icon={faCircleXmark} className="text-white pr-1" />
+                <div className="rounded-full bg-red px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
+                  <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
                   Deprecated
                 </div>
               </div>
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Key</div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Key</div>
                 <div className="text-sm">{secretVersion?.secretKey} </div>
               </div>
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Value</div>
-                <div className="text-sm">{newVersion?.isRotatedSecret ? (
-                      <span className="text-mineshaft-400">
-                        Rotated Secret value will not be affected
-                      </span>
-                    ) : (
-                      <div onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)} className="pl-2 border border-mineshaft-500 bg-mineshaft-900 rounded-md flex flex-row justify-between items-center">
-                        <div className={`flex font-mono ${isOldSecretValueVisible || !secretVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}>{isOldSecretValueVisible ? (secretVersion?.secretValue || "EMPTY") : (secretVersion?.secretValue ? secretVersion?.secretValue?.split('').map((_, index) => "•") : "EMPTY")} </div>
-                        {secretVersion?.secretValue && <div className="flex items-center w-10 h-10 justify-center"><FontAwesomeIcon icon={isOldSecretValueVisible ? faEyeSlash : faEye} className="text-mineshaft-300 p-1.5 border border-mineshaft-500 rounded-md bg-mineshaft-800 hover:bg-mineshaft-700 cursor-pointer" /></div>}
-                      </div>
-                    )} 
-                </div>
-              </div>
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Comment</div>
-                <div className="text-sm">{secretVersion?.secretComment || <span className="text-sm text-mineshaft-300">-</span>} </div>
-              </div>  
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Tags</div>
-                <div className="flex flex-wrap gap-2">
-                  {secretVersion?.tags?.length ?? 0 ? secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
-                    <Tag
-                      className="flex w-min items-center space-x-2"
-                      key={`${secretVersion.id}-${tagId}`}
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Value</div>
+                <div className="text-sm">
+                  {newVersion?.isRotatedSecret ? (
+                    <span className="text-mineshaft-400">
+                      Rotated Secret value will not be affected
+                    </span>
+                  ) : (
+                    <div
+                      onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
+                      className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2"
                     >
                       <div
-                        className="h-3 w-3 rounded-full"
-                        style={{ backgroundColor: color || "#bec2c8" }}
-                      />
-                      <div className="text-sm">{slug}</div>
-                    </Tag>
-                  )) : <span className="text-sm text-mineshaft-300">-</span>}
+                        className={`flex font-mono ${isOldSecretValueVisible || !secretVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
+                      >
+                        {isOldSecretValueVisible
+                          ? secretVersion?.secretValue || "EMPTY"
+                          : secretVersion?.secretValue
+                            ? secretVersion?.secretValue?.split("").map(() => "•")
+                            : "EMPTY"}{" "}
+                      </div>
+                      {secretVersion?.secretValue && (
+                        <div className="flex h-10 w-10 items-center justify-center">
+                          <FontAwesomeIcon
+                            icon={isOldSecretValueVisible ? faEyeSlash : faEye}
+                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  )}
                 </div>
               </div>
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Metadata</div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Comment</div>
+                <div className="text-sm">
+                  {secretVersion?.secretComment || (
+                    <span className="text-sm text-mineshaft-300">-</span>
+                  )}{" "}
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Tags</div>
+                <div className="flex flex-wrap gap-2">
+                  {(secretVersion?.tags?.length ?? 0) ? (
+                    secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
+                      <Tag
+                        className="flex w-min items-center space-x-2"
+                        key={`${secretVersion.id}-${tagId}`}
+                      >
+                        <div
+                          className="h-3 w-3 rounded-full"
+                          style={{ backgroundColor: color || "#bec2c8" }}
+                        />
+                        <div className="text-sm">{slug}</div>
+                      </Tag>
+                    ))
+                  ) : (
+                    <span className="text-sm text-mineshaft-300">-</span>
+                  )}
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Metadata</div>
                 <div>
                   {secretVersion?.secretMetadata?.length ? (
                     <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
@@ -153,59 +187,91 @@ export const SecretApprovalRequestChangeItem = ({
                     <p className="text-sm text-mineshaft-300">-</p>
                   )}
                 </div>
-              </div>  
-            </div>)
-            : <div className="w-full xl:w-1/2 bg-mineshaft-800 border border-mineshaft-600 rounded-md flex items-center justify-center text-md text-mineshaft-300"> Secret not existent in the previous version.</div>}
-            {op === CommitType.UPDATE || op === CommitType.CREATE ? (
-            <div className="flex flex-col border border-green-600/60 bg-green-600/10 p-4 w-full xl:w-1/2 rounded-md cursor-default">
-              <div className="flex flex-row justify-between mb-4">
+              </div>
+            </div>
+          ) : (
+            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
+              {" "}
+              Secret not existent in the previous version.
+            </div>
+          )}
+          {op === CommitType.UPDATE || op === CommitType.CREATE ? (
+            <div className="flex w-full cursor-default flex-col rounded-md border border-green-600/60 bg-green-600/10 p-4 xl:w-1/2">
+              <div className="mb-4 flex flex-row justify-between">
                 <span className="text-md font-medium">New Secret</span>
-                <div className="pt-[0.2rem] pb-[0.14rem] px-2 bg-green-600 text-xs rounded-full font-medium">
-                  <FontAwesomeIcon icon={faCircleXmark} className="text-white pr-1" />
+                <div className="rounded-full bg-green-600 px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
+                  <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
                   Current
                 </div>
               </div>
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Key</div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Key</div>
                 <div className="text-sm">{newVersion?.secretKey} </div>
               </div>
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Value</div>
-                <div className="text-sm">{newVersion?.isRotatedSecret ? (
-                      <span className="text-mineshaft-400">
-                        Rotated Secret value will not be affected
-                      </span>
-                    ) : (
-                      <div onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)} className="pl-2 border border-mineshaft-500 bg-mineshaft-900 rounded-md flex flex-row justify-between items-center">
-                        <div className={`flex font-mono ${isNewSecretValueVisible || !newVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}>{isNewSecretValueVisible ? (newVersion?.secretValue || "EMPTY") : (newVersion?.secretValue ? newVersion?.secretValue?.split('').map((_, index) => "•") : "EMPTY")} </div>
-                        {newVersion?.secretValue && <div className="flex items-center w-10 h-10 justify-center"><FontAwesomeIcon icon={isNewSecretValueVisible ? faEyeSlash : faEye} className="text-mineshaft-300 p-1.5 border border-mineshaft-500 rounded-md bg-mineshaft-800 hover:bg-mineshaft-700 cursor-pointer" /></div>}
-                      </div>
-                    )} 
-                </div>
-              </div>
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Comment</div>
-                <div className="text-sm">{newVersion?.secretComment || <span className="text-sm text-mineshaft-300">-</span>} </div>
-              </div> 
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Tags</div>
-                <div className="flex flex-wrap gap-2">
-                  {newVersion?.tags?.length ?? 0 ? newVersion?.tags?.map(({ slug, id: tagId, color }) => (
-                    <Tag
-                      className="flex w-min items-center space-x-2"
-                      key={`${newVersion.id}-${tagId}`}
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Value</div>
+                <div className="text-sm">
+                  {newVersion?.isRotatedSecret ? (
+                    <span className="text-mineshaft-400">
+                      Rotated Secret value will not be affected
+                    </span>
+                  ) : (
+                    <div
+                      onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
+                      className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2"
                     >
                       <div
-                        className="h-3 w-3 rounded-full"
-                        style={{ backgroundColor: color || "#bec2c8" }}
-                      />
-                      <div className="text-sm">{slug}</div>
-                    </Tag>
-                  )) : <span className="text-sm text-mineshaft-300">-</span>}
+                        className={`flex font-mono ${isNewSecretValueVisible || !newVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
+                      >
+                        {isNewSecretValueVisible
+                          ? newVersion?.secretValue || "EMPTY"
+                          : newVersion?.secretValue
+                            ? newVersion?.secretValue?.split("").map(() => "•")
+                            : "EMPTY"}{" "}
+                      </div>
+                      {newVersion?.secretValue && (
+                        <div className="flex h-10 w-10 items-center justify-center">
+                          <FontAwesomeIcon
+                            icon={isNewSecretValueVisible ? faEyeSlash : faEye}
+                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  )}
                 </div>
               </div>
-              <div className="mb-2"> 
-                <div className="text-sm text-mineshaft-300 font-medium">Metadata</div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Comment</div>
+                <div className="text-sm">
+                  {newVersion?.secretComment || (
+                    <span className="text-sm text-mineshaft-300">-</span>
+                  )}{" "}
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Tags</div>
+                <div className="flex flex-wrap gap-2">
+                  {(newVersion?.tags?.length ?? 0) ? (
+                    newVersion?.tags?.map(({ slug, id: tagId, color }) => (
+                      <Tag
+                        className="flex w-min items-center space-x-2"
+                        key={`${newVersion.id}-${tagId}`}
+                      >
+                        <div
+                          className="h-3 w-3 rounded-full"
+                          style={{ backgroundColor: color || "#bec2c8" }}
+                        />
+                        <div className="text-sm">{slug}</div>
+                      </Tag>
+                    ))
+                  ) : (
+                    <span className="text-sm text-mineshaft-300">-</span>
+                  )}
+                </div>
+              </div>
+              <div className="mb-2">
+                <div className="text-sm font-medium text-mineshaft-300">Metadata</div>
                 {newVersion?.secretMetadata?.length ? (
                   <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
                     {newVersion.secretMetadata?.map((el) => (
@@ -232,9 +298,14 @@ export const SecretApprovalRequestChangeItem = ({
                   <p className="text-sm text-mineshaft-300">-</p>
                 )}
               </div>
-            </div>) 
-            : <div className="w-full xl:w-1/2 bg-mineshaft-800 border border-mineshaft-600 rounded-md flex items-center justify-center text-md text-mineshaft-300"> Secret not existent in the new version.</div>}
-          </div>
+            </div>
+          ) : (
+            <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
+              {" "}
+              Secret not existent in the new version.
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
index 9e611d3dc..17046450e 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
@@ -13,6 +13,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "@radix-ui/react-radio-group";
+import { format } from "date-fns";
 import { twMerge } from "tailwind-merge";
 import z from "zod";
 
@@ -40,7 +41,6 @@ import { formatReservedPaths } from "@app/lib/fn/string";
 
 import { SecretApprovalRequestAction } from "./SecretApprovalRequestAction";
 import { SecretApprovalRequestChangeItem } from "./SecretApprovalRequestChangeItem";
-import { format } from "date-fns";
 
 export const generateCommitText = (commits: { op: CommitType }[] = []) => {
   const score: Record<string, number> = {};
@@ -235,14 +235,17 @@ export const SecretApprovalRequestChanges = ({
                 {secretApprovalRequestDetails?.committerUser?.email}) wants to change{" "}
                 {secretApprovalRequestDetails.commits.length} secret values in
               </p>
-              <p className="inline rounded bg-primary-600/40 mx-1 px-1 py-1 text-primary-300">
+              <p className="mx-1 inline rounded bg-primary-600/40 px-1 py-1 text-primary-300">
                 {secretApprovalRequestDetails.environment}
               </p>
               <div className="inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
-                <p className="border-r border-mineshaft-500 pr-1 cursor-default">
+                <p className="cursor-default border-r border-mineshaft-500 pr-1">
                   <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
                 </p>
-                <p className="truncate pb-0.5 pl-2 text-sm cursor-default" style={{ maxWidth: "10rem" }}>
+                <p
+                  className="cursor-default truncate pb-0.5 pl-2 text-sm"
+                  style={{ maxWidth: "10rem" }}
+                >
                   {formatReservedPaths(secretApprovalRequestDetails.secretPath)}
                 </p>
               </div>
@@ -256,10 +259,7 @@ export const SecretApprovalRequestChanges = ({
                 onOpenChange={(isOpen) => handlePopUpToggle("reviewChanges", isOpen)}
               >
                 <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="primary"
-                    rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
-                  >
+                  <Button rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}>
                     Review
                   </Button>
                 </DropdownMenuTrigger>
@@ -397,7 +397,8 @@ export const SecretApprovalRequestChanges = ({
                     >
                       {reviewer?.status === ApprovalStatus.APPROVED ? "approved" : "rejected"}
                     </span>{" "}
-                    the request on {format(new Date(secretApprovalRequestDetails.createdAt), "PPpp zzz")}.
+                    the request on{" "}
+                    {format(new Date(secretApprovalRequestDetails.createdAt), "PPpp zzz")}.
                   </div>
                   {reviewer?.comment && (
                     <FormControl label="Comment" className="mb-0 mt-4">
@@ -410,7 +411,7 @@ export const SecretApprovalRequestChanges = ({
               );
             })}
         </div>
-        <div className="flex items-center space-x-6 mt-2 rounded-lg bg-mineshaft-800 border border-mineshaft-600">
+        <div className="mt-2 flex items-center space-x-6 rounded-lg border border-mineshaft-600 bg-mineshaft-800">
           <SecretApprovalRequestAction
             canApprove={canApprove}
             approvalRequestId={secretApprovalRequestDetails.id}
@@ -424,7 +425,7 @@ export const SecretApprovalRequestChanges = ({
           />
         </div>
       </div>
-      <div className="sticky top-0 w-1/5 pt-4 cursor-default" style={{ minWidth: "240px" }}>
+      <div className="sticky top-0 w-1/5 cursor-default pt-4" style={{ minWidth: "240px" }}>
         <div className="text-sm text-bunker-300">Reviewers</div>
         <div className="mt-2 flex flex-col space-y-2 text-sm">
           {secretApprovalRequestDetails?.policy?.approvers
@@ -436,7 +437,7 @@ export const SecretApprovalRequestChanges = ({
               const reviewer = reviewedUsers?.[requiredApprover.userId];
               return (
                 <div
-                  className="flex justify-between flex-nowrap items-center space-x-2 rounded bg-mineshaft-800 border border-mineshaft-600 px-2 py-1"
+                  className="flex flex-nowrap items-center justify-between space-x-2 rounded border border-mineshaft-600 bg-mineshaft-800 px-2 py-1"
                   key={`required-approver-${requiredApprover.userId}`}
                 >
                   <div className="flex text-sm">