From d4609829fa7155598d7a33ffe161ff3e91f5c255 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Tue, 9 Dec 2025 11:56:41 -0500
Subject: [PATCH 1/7] improve some wording & hide max request TTL for
 simplicity

---
 .../PolicyTab/components/PoliciesTable.tsx           | 12 +++++-------
 .../components/PolicySteps/PolicyDetailsStep.tsx     |  4 +++-
 .../components/PolicySteps/PolicyReviewStep.tsx      |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
index bcfbf6220..4810dbe96 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
@@ -98,9 +98,7 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
             <Tr>
               <Th className="w-10" />
               <Th>Policy Name</Th>
-              <Th>Max Approval Request TTL</Th>
-              <Th>Min Access Duration</Th>
-              <Th>Max Access Duration</Th>
+              <Th>Access Duration (min - max)</Th>
               <Th>Conditions</Th>
               <Th className="w-5" />
             </Tr>
@@ -117,7 +115,6 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
             {!isPoliciesLoading &&
               policies.map((policy) => {
                 const isExpanded = expandedRows.has(policy.id);
-                const maxTtl = policy.maxRequestTtl ? policy.maxRequestTtl : "No limit";
                 const conditionsCount = policy.conditions.conditions.length;
 
                 return (
@@ -144,9 +141,10 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
                         </IconButton>
                       </Td>
                       <Td>{policy.name}</Td>
-                      <Td>{maxTtl}</Td>
-                      <Td>{policy.constraints.constraints.accessDuration.min}</Td>
-                      <Td>{policy.constraints.constraints.accessDuration.max}</Td>
+                      <Td>
+                        {policy.constraints.constraints.accessDuration.min} -{" "}
+                        {policy.constraints.constraints.accessDuration.max}
+                      </Td>
                       <Td>
                         {conditionsCount} condition{conditionsCount !== 1 ? "s" : ""}
                       </Td>
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
index ef6800c71..228d474ad 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
@@ -24,7 +24,8 @@ export const PolicyDetailsStep = () => {
           </FormControl>
         )}
       />
-      <Controller
+      {/*
+        <Controller
         control={control}
         name="maxRequestTtl"
         render={({ field, fieldState: { error } }) => (
@@ -38,6 +39,7 @@ export const PolicyDetailsStep = () => {
           </FormControl>
         )}
       />
+      */}
       <div className="border-t border-mineshaft-600 pt-4">
         <div className="mb-3">
           <p className="pb-0.5 text-sm font-medium text-mineshaft-200">
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
index 7dacb73c9..7abb78867 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
@@ -187,8 +187,8 @@ export const PolicyReviewStep = () => {
       {/* Summary Notice */}
       <div className="rounded-md border border-primary/30 bg-primary/5 p-3">
         <p className="text-xs text-mineshaft-300">
-          Please review all the details above. Click &quot;Create&quot; to save this policy or
-          &quot;Back&quot; to make changes.
+          Please review all the details above. Submit to save this policy or go back to make
+          changes.
         </p>
       </div>
     </div>

From 36768f05b28e13ef788d604283039103aa8f0a9a Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Tue, 9 Dec 2025 12:00:45 -0500
Subject: [PATCH 2/7] fix empty policy step name issue

---
 .../components/PolicyTab/components/PolicySchema.tsx       | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx
index ff76ddd1b..e371c0663 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx
@@ -40,7 +40,12 @@ export const PolicyFormSchema = z.object({
   }),
   steps: z
     .object({
-      name: z.string().max(128).nullable().optional(),
+      name: z
+        .string()
+        .max(128)
+        .nullable()
+        .optional()
+        .transform((name) => name || null),
       requiredApprovals: z.number().min(1).max(100),
       notifyApprovers: z.boolean().optional(),
       approvers: z

From e40cbe7e58648b16c17d45bc7f00de1eb21233f7 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Tue, 9 Dec 2025 13:31:41 -0500
Subject: [PATCH 3/7] general improvements

---
 .../ApprovalRequestDetailPage.tsx             |   4 +-
 .../components/ApprovalStepsSection.tsx       |   2 +-
 .../components/RequestActionsSection.tsx      |   2 +-
 .../ApprovalRequestTab/ApprovalRequestTab.tsx |  14 +--
 .../components/PolicyTab/PolicyTab.tsx        |  11 +-
 .../PolicyTab/components/PoliciesTable.tsx    |   7 +-
 .../PolicyTab/components/PolicyModal.tsx      |  21 ++--
 .../PolicyTab/components/PolicySchema.tsx     |   8 +-
 .../PolicySteps/PolicyApprovalSteps.tsx       |   2 +-
 .../PolicySteps/PolicyConstraintsStep.tsx     | 102 ---------------
 .../PolicySteps/PolicyDetailsStep.tsx         | 117 ++++++++----------
 .../PolicySteps/PolicyReviewStep.tsx          |  60 ++-------
 .../RequestGrantTab/RequestGrantTab.tsx       |   7 +-
 13 files changed, 110 insertions(+), 247 deletions(-)
 delete mode 100644 frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyConstraintsStep.tsx

diff --git a/frontend/src/pages/pam/ApprovalRequestDetailPage/ApprovalRequestDetailPage.tsx b/frontend/src/pages/pam/ApprovalRequestDetailPage/ApprovalRequestDetailPage.tsx
index 65ba38e78..31a846d4c 100644
--- a/frontend/src/pages/pam/ApprovalRequestDetailPage/ApprovalRequestDetailPage.tsx
+++ b/frontend/src/pages/pam/ApprovalRequestDetailPage/ApprovalRequestDetailPage.tsx
@@ -119,8 +119,8 @@ const PageContent = () => {
               )}
           </div>
         </PageHeader>
-        <div className="flex justify-center gap-4">
-          <div className="flex w-96 flex-col gap-4">
+        <div className="flex flex-col justify-center gap-4 lg:flex-row">
+          <div className="flex flex-col gap-4 lg:w-96">
             <RequestDetailsSection request={request} />
             <RequestActionsSection request={request} />
           </div>
diff --git a/frontend/src/pages/pam/ApprovalRequestDetailPage/components/ApprovalStepsSection.tsx b/frontend/src/pages/pam/ApprovalRequestDetailPage/components/ApprovalStepsSection.tsx
index 17bfae8a0..74ff4b4e7 100644
--- a/frontend/src/pages/pam/ApprovalRequestDetailPage/components/ApprovalStepsSection.tsx
+++ b/frontend/src/pages/pam/ApprovalRequestDetailPage/components/ApprovalStepsSection.tsx
@@ -75,7 +75,7 @@ export const ApprovalStepsSection = ({ request }: Props) => {
   return (
     <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
       <div className="mb-2 flex items-center justify-between border-b border-mineshaft-500 pb-2">
-        <h3 className="text-lg font-medium text-mineshaft-100">Approval Workflow</h3>
+        <h3 className="text-lg font-medium text-mineshaft-100">Approval Sequence</h3>
       </div>
       <div className="space-y-6">
         {request.steps.map((step, index) => (
diff --git a/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestActionsSection.tsx b/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestActionsSection.tsx
index 1fb216ebd..20dc6b1e1 100644
--- a/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestActionsSection.tsx
+++ b/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestActionsSection.tsx
@@ -127,7 +127,7 @@ export const RequestActionsSection = ({ request }: Props) => {
               Review
             </Button>
           </PopoverTrigger>
-          <PopoverContent align="start" title="Finish your review" className="w-96">
+          <PopoverContent align="start" title="Finish your review" className="w-96 pt-4">
             <FormLabel label="Finish your review" />
             <TextArea
               value={comment}
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx b/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx
index 42997f9a7..686021ea3 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx
@@ -152,8 +152,11 @@ export const ApprovalRequestTab = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Approval Requests</p>
+      <div className="mb-4">
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Access Requests</p>
+        </div>
+        <p className="text-sm text-bunker-300">View pending access requests to PAM accounts</p>
       </div>
       <div>
         <div className="flex gap-2">
@@ -262,7 +265,7 @@ export const ApprovalRequestTab = () => {
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search approval requests..."
+            placeholder="Search access requests..."
           />
         </div>
         <TableContainer className="mt-4">
@@ -286,10 +289,7 @@ export const ApprovalRequestTab = () => {
                   return (
                     <Tr
                       key={request.id}
-                      className={twMerge(
-                        "cursor-pointer transition-colors hover:bg-mineshaft-700",
-                        needsApproval && "bg-primary/5 hover:bg-primary/10"
-                      )}
+                      className="cursor-pointer transition-colors hover:bg-mineshaft-700"
                       onClick={() => handleRowClick(request.id)}
                     >
                       <Td>
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/PolicyTab.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/PolicyTab.tsx
index 397631508..c767f5e48 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/PolicyTab.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/PolicyTab.tsx
@@ -38,10 +38,14 @@ export const PolicyTab = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-x-2">
-          <p className="text-xl font-medium text-mineshaft-100">Approval Policies</p>
+      <div className="mb-4 flex items-center">
+        <div className="flex-1">
+          <div className="flex items-center gap-x-2">
+            <p className="text-xl font-medium text-mineshaft-100">Access Policies</p>
+          </div>
+          <p className="text-sm text-bunker-300">View and manage PAM access policies</p>
         </div>
+
         <Button
           variant="outline_bg"
           type="submit"
@@ -51,6 +55,7 @@ export const PolicyTab = () => {
           Create Policy
         </Button>
       </div>
+
       <PoliciesTable handlePopUpOpen={handlePopUpOpen} />
       <PolicyModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
index 4810dbe96..3e8801239 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
@@ -98,7 +98,7 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
             <Tr>
               <Th className="w-10" />
               <Th>Policy Name</Th>
-              <Th>Access Duration (min - max)</Th>
+              <Th>Max. Access Duration</Th>
               <Th>Conditions</Th>
               <Th className="w-5" />
             </Tr>
@@ -141,10 +141,7 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
                         </IconButton>
                       </Td>
                       <Td>{policy.name}</Td>
-                      <Td>
-                        {policy.constraints.constraints.accessDuration.min} -{" "}
-                        {policy.constraints.constraints.accessDuration.max}
-                      </Td>
+                      <Td>{policy.constraints.constraints.accessDuration.max}</Td>
                       <Td>
                         {conditionsCount} condition{conditionsCount !== 1 ? "s" : ""}
                       </Td>
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx
index 790ade93f..2cbd2f104 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx
@@ -15,7 +15,6 @@ import {
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { PolicyApprovalSteps } from "./PolicySteps/PolicyApprovalSteps";
-import { PolicyConstraintsStep } from "./PolicySteps/PolicyConstraintsStep";
 import { PolicyDetailsStep } from "./PolicySteps/PolicyDetailsStep";
 import { PolicyReviewStep } from "./PolicySteps/PolicyReviewStep";
 import { PolicyFormSchema, TPolicyForm } from "./PolicySchema";
@@ -26,9 +25,12 @@ type Props = {
 };
 
 const FORM_STEPS: { name: string; key: string; fields: (keyof TPolicyForm)[] }[] = [
-  { name: "Details", key: "details", fields: ["name", "maxRequestTtl", "constraints"] },
-  { name: "Conditions", key: "conditions", fields: ["conditions"] },
-  { name: "Approvals", key: "approvals", fields: ["steps"] },
+  {
+    name: "Configuration",
+    key: "configuration",
+    fields: ["name", "constraints", "conditions"]
+  },
+  { name: "Approval Sequence", key: "approvals", fields: ["steps"] },
   { name: "Review", key: "review", fields: [] }
 ];
 
@@ -61,8 +63,7 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
           approvers: []
         }
       ]
-    },
-    mode: "onChange"
+    }
   });
 
   const { handleSubmit, trigger, reset } = formMethods;
@@ -184,7 +185,7 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
   return (
     <Modal isOpen={isOpen} onOpenChange={(open) => handlePopUpToggle("policy", open)}>
       <ModalContent
-        title={policyData?.policyId ? "Edit Policy" : "Create Policy"}
+        title={policyData?.policyId ? "Edit Access Policy" : "Create Access Policy"}
         className="max-w-3xl"
       >
         <FormProvider {...formMethods}>
@@ -215,9 +216,6 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
                 <Tab.Panel>
                   <PolicyDetailsStep />
                 </Tab.Panel>
-                <Tab.Panel>
-                  <PolicyConstraintsStep />
-                </Tab.Panel>
                 <Tab.Panel>
                   <PolicyApprovalSteps />
                 </Tab.Panel>
@@ -237,7 +235,8 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
                 isLoading={isCreating || isUpdating}
                 isDisabled={isCreating || isUpdating}
               >
-                {policyData?.policyId ? "Update" : "Create"} {isFinalStep ? "" : "Next"}
+                {isFinalStep && (policyData?.policyId ? "Update" : "Create")}
+                {!isFinalStep && "Next"}
               </Button>
             </div>
           </form>
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx
index e371c0663..6115a1a93 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx
@@ -28,7 +28,13 @@ export const PolicyFormSchema = z.object({
   ).nullish(),
   conditions: z
     .object({
-      accountPaths: z.array(z.string().min(1))
+      accountPaths: z
+        .string()
+        .array()
+        .min(1, "Must have at least one account path")
+        .refine((val) => val.every((path) => path.length > 0), {
+          message: "All account paths must be non-empty"
+        })
     })
     .array()
     .min(1, "At least one condition is required"),
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyApprovalSteps.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyApprovalSteps.tsx
index a1ca976be..1d0fa9993 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyApprovalSteps.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyApprovalSteps.tsx
@@ -78,7 +78,7 @@ export const PolicyApprovalSteps = () => {
 
       <div className="space-y-4">
         {stepFields.map((field, index) => (
-          <div key={field.id} className="rounded border border-mineshaft-600 bg-mineshaft-800 p-4">
+          <div key={field.id} className="rounded border border-mineshaft-600 bg-mineshaft-700 p-4">
             <div className="mb-3 flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/20 text-xs font-semibold text-primary">
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyConstraintsStep.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyConstraintsStep.tsx
deleted file mode 100644
index 52289ef14..000000000
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyConstraintsStep.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Button, FormControl, IconButton, Input } from "@app/components/v2";
-
-import { TPolicyForm } from "../PolicySchema";
-
-export const PolicyConstraintsStep = () => {
-  const { control } = useFormContext<TPolicyForm>();
-
-  const {
-    fields: conditionFields,
-    append: appendCondition,
-    remove: removeCondition
-  } = useFieldArray({
-    control,
-    name: "conditions"
-  });
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <div className="mb-3 flex items-center justify-between">
-          <div>
-            <p className="pb-0.5 text-sm font-medium text-mineshaft-200">Conditions</p>
-            <p className="text-xs text-mineshaft-400">
-              Define which resources and account paths this policy applies to
-            </p>
-          </div>
-          <Button
-            type="button"
-            variant="outline_bg"
-            size="xs"
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={() => appendCondition({ accountPaths: [] })}
-          >
-            Add Condition
-          </Button>
-        </div>
-        <div>
-          {conditionFields.map((field, index) => (
-            <div key={field.id}>
-              <div className="rounded border border-mineshaft-600 bg-mineshaft-800 p-4">
-                <div className="mb-3 flex items-center justify-between">
-                  <span className="text-sm font-medium text-mineshaft-300">
-                    Condition {index + 1}
-                  </span>
-                  {conditionFields.length > 1 && (
-                    <IconButton
-                      ariaLabel="Remove condition"
-                      variant="plain"
-                      size="xs"
-                      onClick={() => removeCondition(index)}
-                    >
-                      <FontAwesomeIcon icon={faTrash} className="text-red-500" />
-                    </IconButton>
-                  )}
-                </div>
-                <div className="space-y-3">
-                  <Controller
-                    control={control}
-                    name={`conditions.${index}.accountPaths`}
-                    render={({ field: pathField, fieldState: { error } }) => (
-                      <FormControl
-                        label="Account Paths"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        helperText="Matches any of the comma-separated account paths this condition applies to"
-                      >
-                        <Input
-                          value={pathField.value.join(", ")}
-                          onChange={(e) => {
-                            const paths = e.target.value
-                              .split(",")
-                              .map((path) => path.trim())
-                              .filter(Boolean);
-                            pathField.onChange(paths);
-                          }}
-                          placeholder="e.g., /admin/**, /users/john, /**"
-                        />
-                      </FormControl>
-                    )}
-                  />
-                </div>
-              </div>
-              {index < conditionFields.length - 1 && (
-                <div className="flex items-center">
-                  <div className="flex flex-col items-center">
-                    <div className="h-3 w-px bg-mineshaft-500" />
-                    <span className="px-2 text-xs font-medium text-mineshaft-400">OR</span>
-                    <div className="h-3 w-px bg-mineshaft-500" />
-                  </div>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
index 228d474ad..d365283d0 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
 import { TtlFormLabel } from "@app/components/features";
@@ -6,80 +7,72 @@ import { FormControl, Input } from "@app/components/v2";
 import { TPolicyForm } from "../PolicySchema";
 
 export const PolicyDetailsStep = () => {
-  const { control } = useFormContext<TPolicyForm>();
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext<TPolicyForm>();
+
+  useEffect(() => {
+    console.log("YOOOO");
+    console.log(errors);
+  }, [errors]);
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
+      <div className="flex w-full gap-4">
+        <Controller
+          control={control}
+          name="name"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Policy Name"
+              className="mb-0 flex-1"
+              isRequired
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input {...field} placeholder="Enter policy name" />
+            </FormControl>
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="constraints.accessDuration.max"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label={<TtlFormLabel label="Max. Access Duration" />}
+              className="mb-0"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input {...field} />
+            </FormControl>
+          )}
+        />
+      </div>
+
       <Controller
         control={control}
-        name="name"
-        render={({ field, fieldState: { error } }) => (
+        name="conditions.0.accountPaths"
+        render={({ field: pathField, fieldState: { error } }) => (
           <FormControl
-            label="Policy Name"
             isRequired
+            label="Account Paths"
             isError={Boolean(error)}
             errorText={error?.message}
+            helperText="Policy matches any of these comma-separated account paths"
           >
-            <Input {...field} placeholder="Enter policy name" />
+            <Input
+              value={pathField.value.join(",")}
+              onChange={(e) => {
+                pathField.onChange(e.target.value.split(",").map((path) => path.trim()));
+              }}
+              placeholder="e.g., /admin/**, /users/john, /**"
+            />
           </FormControl>
         )}
       />
-      {/*
-        <Controller
-        control={control}
-        name="maxRequestTtl"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            isError={Boolean(error)}
-            errorText={error?.message}
-            label={<TtlFormLabel label="Max Approval Request TTL" />}
-            helperText="Maximum time-to-live for requests. Must be between 1 hour and 30 days. Leave empty for no limit."
-          >
-            <Input {...field} value={field.value ?? ""} placeholder="1h" />
-          </FormControl>
-        )}
-      />
-      */}
-      <div className="border-t border-mineshaft-600 pt-4">
-        <div className="mb-3">
-          <p className="pb-0.5 text-sm font-medium text-mineshaft-200">
-            PAM Account Access Duration TTL
-          </p>
-          <p className="text-xs text-mineshaft-400">
-            Set minimum and maximum duration (in seconds) for pam account access
-          </p>
-        </div>
-        <div className="grid grid-cols-2 gap-4">
-          <Controller
-            control={control}
-            name="constraints.accessDuration.min"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label={<TtlFormLabel label="Minimum TTL" />}
-                isError={Boolean(error)}
-                errorText={error?.message}
-                helperText="Must be between 30s and 7 days"
-              >
-                <Input {...field} />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="constraints.accessDuration.max"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label={<TtlFormLabel label="Maximum TTL" />}
-                isError={Boolean(error)}
-                errorText={error?.message}
-                helperText="Must be between 30s and 7 days"
-              >
-                <Input {...field} />
-              </FormControl>
-            )}
-          />
-        </div>
-      </div>
     </div>
   );
 };
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
index 7abb78867..d4c4a46bc 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
@@ -45,61 +45,23 @@ export const PolicyReviewStep = () => {
     <div className="space-y-6">
       <div>
         <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">Policy Details</h3>
+          <h3 className="text-sm font-medium text-mineshaft-200">Policy Configuration</h3>
         </div>
-        <div className="space-y-2">
+        <div className="grid grid-cols-2 gap-2">
           <ReviewField label="Policy Name" value={name || "Not set"} />
-          <ReviewField label="Max Approval Request TTL" value={maxRequestTtl || "No Limit"} />
+          <ReviewField label="Max. Access Duration" value={constraints.accessDuration.max} />
+          <ReviewField
+            label="Account Paths"
+            value={
+              conditions[0].accountPaths.length ? conditions[0].accountPaths.join(",") : "Not set"
+            }
+          />
         </div>
       </div>
 
       <div>
         <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">
-            PAM Account Access Duration TTL
-          </h3>
-        </div>
-        <div className="space-y-2">
-          <ReviewField label="Minimum Duration" value={constraints.accessDuration.min} />
-          <ReviewField label="Maximum Duration" value={constraints.accessDuration.max} />
-        </div>
-      </div>
-
-      <div>
-        <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">
-            Conditions ({conditions.length})
-          </h3>
-        </div>
-        <div className="space-y-3">
-          {conditions.map((condition, index) => (
-            <div
-              key={`condition-${index + 1}`}
-              className="rounded border border-mineshaft-600 bg-mineshaft-800/50 p-3"
-            >
-              <div className="mb-2 text-xs font-medium text-mineshaft-300">
-                Condition {index + 1}
-              </div>
-              <div className="space-y-2">
-                <div>
-                  <span className="text-xs text-mineshaft-400">Account Paths: </span>
-                  <span className="text-xs text-mineshaft-200">
-                    {condition.accountPaths.length > 0
-                      ? condition.accountPaths.join(", ")
-                      : "None specified"}
-                  </span>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div>
-        <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">
-            Approval Workflow ({steps.length} step{steps.length !== 1 ? "s" : ""})
-          </h3>
+          <h3 className="text-sm font-medium text-mineshaft-200">Approval Sequence</h3>
         </div>
         <div className="space-y-3">
           {steps.map((step, index) => {
@@ -109,7 +71,7 @@ export const PolicyReviewStep = () => {
             return (
               <div
                 key={`step-${index + 1}`}
-                className="rounded border border-mineshaft-600 bg-mineshaft-800/50 p-3"
+                className="rounded border border-mineshaft-600 bg-mineshaft-700 p-3"
               >
                 <div className="mb-3 flex items-center justify-between">
                   <div className="flex items-center gap-2">
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx b/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx
index 9f611aa00..92e3ce40e 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx
@@ -180,8 +180,11 @@ export const RequestGrantTab = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Access Grants</p>
+      <div className="mb-4">
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Access Grants</p>
+        </div>
+        <p className="text-sm text-bunker-300">View and revoke access grants to PAM accounts</p>
       </div>
       <div>
         <div className="flex gap-2">

From 5a106ecd300241585b4a6d80c140309b44c095c2 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Tue, 9 Dec 2025 13:43:39 -0500
Subject: [PATCH 4/7] Add descrption

---
 .../components/PolicyTab/components/PolicyModal.tsx              | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx
index 2cbd2f104..8ecfad6da 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx
@@ -186,6 +186,7 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
     <Modal isOpen={isOpen} onOpenChange={(open) => handlePopUpToggle("policy", open)}>
       <ModalContent
         title={policyData?.policyId ? "Edit Access Policy" : "Create Access Policy"}
+        subTitle="Configure a policy dictating account access with constraints"
         className="max-w-3xl"
       >
         <FormProvider {...formMethods}>

From 491cd6b7fa394b619445513e65329bf5f25dd363 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Tue, 9 Dec 2025 13:54:27 -0500
Subject: [PATCH 5/7] final touches

---
 .../components/PolicyTab/components/PoliciesTable.tsx |  2 +-
 .../components/PolicySteps/PolicyDetailsStep.tsx      | 11 +----------
 .../components/PolicySteps/PolicyReviewStep.tsx       |  2 +-
 .../PolicyTab/components/PolicySteps/index.tsx        |  1 -
 .../PamAccountsPage/components/PamAccountsTable.tsx   |  6 +++---
 .../components/PamRequestAccountAccessModal.tsx       |  5 ++---
 6 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
index 3e8801239..03bc83ac9 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
@@ -197,7 +197,7 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
                     {isExpanded && (
                       <Tr className="bg-mineshaft-800">
                         <Td colSpan={7} className="p-0">
-                          <div className="flex max-h-80 w-full gap-2 gap-4 overflow-auto overflow-x-hidden p-4">
+                          <div className="flex max-h-80 w-full gap-4 overflow-auto overflow-x-hidden p-4">
                             <div className="flex-1">
                               <div className="mb-2 text-sm font-medium text-mineshaft-300">
                                 Approval Conditions
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
index d365283d0..c6f4a3878 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
 import { TtlFormLabel } from "@app/components/features";
@@ -7,15 +6,7 @@ import { FormControl, Input } from "@app/components/v2";
 import { TPolicyForm } from "../PolicySchema";
 
 export const PolicyDetailsStep = () => {
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext<TPolicyForm>();
-
-  useEffect(() => {
-    console.log("YOOOO");
-    console.log(errors);
-  }, [errors]);
+  const { control } = useFormContext<TPolicyForm>();
 
   return (
     <div className="flex flex-col gap-4">
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
index d4c4a46bc..8caf65eea 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
@@ -24,7 +24,7 @@ export const PolicyReviewStep = () => {
   const { data: members = [] } = useGetWorkspaceUsers(projectId);
   const { data: groups = [] } = useListWorkspaceGroups(projectId);
 
-  const { name, maxRequestTtl, conditions, constraints, steps } = watch();
+  const { name, conditions, constraints, steps } = watch();
 
   const getApproverLabel = (approverId: string, approverType: ApproverType) => {
     if (approverType === ApproverType.User) {
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/index.tsx b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/index.tsx
index 3a59d2b78..6534a1727 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/index.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/index.tsx
@@ -1,4 +1,3 @@
 export { PolicyApprovalSteps } from "./PolicyApprovalSteps";
-export { PolicyConstraintsStep } from "./PolicyConstraintsStep";
 export { PolicyDetailsStep } from "./PolicyDetailsStep";
 export { PolicyReviewStep } from "./PolicyReviewStep";
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
index 61a09c1b0..b3bd9676b 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
@@ -5,10 +5,10 @@ import {
   faArrowDown,
   faArrowUp,
   faCheckCircle,
+  faClipboardCheck,
   faFilter,
   faFolderPlus,
   faMagnifyingGlass,
-  faPen,
   faPlus,
   faSearch
 } from "@fortawesome/free-solid-svg-icons";
@@ -328,11 +328,11 @@ export const PamAccountsTable = ({ projectId }: Props) => {
         </DropdownMenu>
         <Button
           variant="outline_bg"
-          leftIcon={<FontAwesomeIcon icon={faPen} />}
+          leftIcon={<FontAwesomeIcon icon={faClipboardCheck} />}
           onClick={() => handlePopUpOpen("requestAccount")}
           className="h-10 transition-colors"
         >
-          Request Account
+          Request Access
         </Button>
         <ProjectPermissionCan
           I={ProjectPermissionPamAccountActions.Create}
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamRequestAccountAccessModal.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamRequestAccountAccessModal.tsx
index 0e37d8af6..243c0c132 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamRequestAccountAccessModal.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamRequestAccountAccessModal.tsx
@@ -111,6 +111,7 @@ const Content = ({ onOpenChange, account, accountPath }: Props) => {
         control={control}
         render={({ field, fieldState: { error } }) => (
           <FormControl
+            isRequired
             helperText="Account path including the account name. Supports glob patterns (e.g., /folder/**, /*/account-name)"
             errorText={error?.message}
             isError={Boolean(error?.message)}
@@ -126,7 +127,6 @@ const Content = ({ onOpenChange, account, accountPath }: Props) => {
         render={({ field, fieldState: { error } }) => (
           <FormControl
             label={<TtlFormLabel label="Access Duration" />}
-            helperText="Duration of access requested"
             errorText={error?.message}
             isError={Boolean(error?.message)}
           >
@@ -139,7 +139,6 @@ const Content = ({ onOpenChange, account, accountPath }: Props) => {
         control={control}
         render={({ field, fieldState: { error } }) => (
           <FormControl
-            helperText="Provide a reason for requesting access"
             errorText={error?.message}
             isError={Boolean(error?.message)}
             label="Justification"
@@ -178,7 +177,7 @@ export const PamRequestAccountAccessModal = (props: Props) => {
       <ModalContent
         className="max-w-2xl pb-2"
         title="Request Account Access"
-        subTitle="Request access to this account path"
+        subTitle="Request access to an account path"
       >
         <Content {...props} />
       </ModalContent>

From b24a6488552cedc0f88b82c353ceb96f402b9bc4 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Tue, 9 Dec 2025 14:08:47 -0500
Subject: [PATCH 6/7] rename duration to access duration

---
 .../components/ApprovalRequestTab/ApprovalRequestTab.tsx        | 2 +-
 .../components/RequestGrantTab/RequestGrantTab.tsx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx b/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx
index 686021ea3..139369421 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx
@@ -274,7 +274,7 @@ export const ApprovalRequestTab = () => {
               <Tr>
                 <Th>Requester</Th>
                 <Th>Account Path</Th>
-                <Th>Duration</Th>
+                <Th>Access Duration</Th>
                 <Th>Status</Th>
                 <Th>Requested</Th>
               </Tr>
diff --git a/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx b/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx
index 92e3ce40e..4adbd2ff2 100644
--- a/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx
@@ -272,7 +272,7 @@ export const RequestGrantTab = () => {
               <Tr>
                 <Th>User</Th>
                 <Th>Account Path</Th>
-                <Th>Duration</Th>
+                <Th>Access Duration</Th>
                 <Th>Status</Th>
                 <Th>Granted</Th>
                 <Th>Expires</Th>

From 06ff87b586136751c3e30036066527f9f874cbc9 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Tue, 9 Dec 2025 14:09:43 -0500
Subject: [PATCH 7/7] req detail page tweak

---
 .../components/RequestDetailsSection.tsx                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestDetailsSection.tsx b/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestDetailsSection.tsx
index c37390037..48f1cfa27 100644
--- a/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestDetailsSection.tsx
+++ b/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestDetailsSection.tsx
@@ -43,7 +43,7 @@ export const RequestDetailsSection = ({ request }: Props) => {
           </GenericFieldLabel>
           <GenericFieldLabel label="Requester Email">{request.requesterEmail}</GenericFieldLabel>
           <GenericFieldLabel label="Account Path">{accountPath}</GenericFieldLabel>
-          <GenericFieldLabel label="Duration">{accessDuration}</GenericFieldLabel>
+          <GenericFieldLabel label="Access Duration">{accessDuration}</GenericFieldLabel>
           {request.justification && (
             <GenericFieldLabel label="Justification">
               <p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">