From 4cd8a641b1b0f652ecf228bf8b02fc64b1d49f45 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Wed, 10 Dec 2025 20:19:36 -0500
Subject: [PATCH] tweaks

---
 .../components/PamAccountCard.tsx             | 38 ++++++++++---------
 .../components/PamAccountsTable.tsx           |  6 +--
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountCard.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountCard.tsx
index 235607e9b5..032483a636 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountCard.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountCard.tsx
@@ -1,6 +1,6 @@
-import { LogInIcon } from "lucide-react";
-
+import { Badge, UnstableButton } from "@app/components/v3";
 import { PAM_RESOURCE_TYPE_MAP, TPamAccount } from "@app/hooks/api/pam";
+import { LogInIcon, PackageOpenIcon } from "lucide-react";
 
 type Props = {
   account: TPamAccount;
@@ -9,39 +9,43 @@ type Props = {
 };
 
 export const PamAccountCard = ({ account, onAccess, accountPath }: Props) => {
-  const { name, description } = account;
+  const { name, description, resource } = account;
 
   const { image, name: resourceTypeName } = PAM_RESOURCE_TYPE_MAP[account.resource.resourceType];
 
   return (
     <button
-      onClick={() => onAccess(account)}
       type="button"
       key={account.id}
-      className="flex cursor-pointer flex-col overflow-clip rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4 text-start transition-transform duration-100 hover:scale-[103%] hover:bg-mineshaft-700"
+      className="flex flex-col overflow-clip rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4 text-start transition-transform duration-100"
     >
-      <div className="flex items-center gap-4">
-        <div className="rounded-sm border border-mineshaft-500 bg-mineshaft-600 p-1.5 shadow-inner">
-          <img
-            alt={resourceTypeName}
-            src={`/images/integrations/${image}`}
-            className="size-7 object-contain"
-          />
-        </div>
+      <div className="flex items-center gap-3.5">
+        <img
+          alt={resourceTypeName}
+          src={`/images/integrations/${image}`}
+          className="size-10 object-contain"
+        />
         <div className="min-w-0 flex-1">
-          <div className="flex justify-between gap-2">
+          <div className="flex items-center justify-between gap-2">
             <p className="truncate text-lg font-medium text-mineshaft-100">{name}</p>
-            <LogInIcon className="size-5 text-mineshaft-400" />
+            <UnstableButton onClick={() => onAccess(account)} size="xs" variant="outline">
+              <LogInIcon />
+              Connect
+            </UnstableButton>
           </div>
 
           <p
             className={`${accountPath ? "text-mineshaft-300" : "text-mineshaft-400"} truncate text-xs leading-4`}
           >
-            {accountPath || "root"}
+            {resourceTypeName} - {accountPath || "root"}
           </p>
         </div>
       </div>
-      <p className="mt-4 truncate text-sm text-mineshaft-400">{description || "No description"}</p>
+      <Badge variant="neutral" className="mt-3.5">
+        <PackageOpenIcon />
+        {resource.name}
+      </Badge>
+      <p className="mt-2 truncate text-sm text-mineshaft-400">{description || "No description"}</p>
     </button>
   );
 };
diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
index 153680775e..7c44a4fa91 100644
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
@@ -262,7 +262,7 @@ export const PamAccountsTable = ({ projectId }: Props) => {
                   setAccountView(e);
 
                   // Reset perPage to appropriate default for the view
-                  const newPerPage = e === PamAccountView.Flat ? 16 : 10;
+                  const newPerPage = e === PamAccountView.Flat ? 12 : 10;
                   setPerPage(newPerPage);
                   setUserTablePreference("pamAccountsTable", PreferenceKey.PerPage, newPerPage);
 
@@ -417,7 +417,7 @@ export const PamAccountsTable = ({ projectId }: Props) => {
       {accountView === PamAccountView.Nested && <FolderBreadCrumbs path={accountPath} />}
       {accountView === PamAccountView.Flat ? (
         <>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
             {filteredAccounts.map((account) => (
               <PamAccountCard
                 key={account.id}
@@ -434,7 +434,7 @@ export const PamAccountsTable = ({ projectId }: Props) => {
             perPage={perPage}
             onChangePage={(newPage) => setPage(newPage)}
             onChangePerPage={handlePerPageChange}
-            perPageList={[8, 12, 16, 20, 40]}
+            perPageList={[9, 12, 15, 18, 27]}
           />
         </>
       ) : (