Merge branch 'main' of https://github.com/Infisical/infisical into feat/adds-GETtokenAuthTokenById-api-endpoint

2026-09-22 13:39:35 +00:00 · 2025-11-19 21:50:03 +05:30
parent 6fe695b71b 4bff4ca20c
commit 48a5891fb2
71 changed files with 3062 additions and 1211 deletions
--- a/frontend/src/hooks/api/certificates/mutations.tsx
+++ b/frontend/src/hooks/api/certificates/mutations.tsx
@@ -27,9 +27,18 @@ export const useDeleteCert = () => {
      );
      return certificate;
    },
-    onSuccess: (_, { projectSlug }) => {
+    onSuccess: (_, { projectId }) => {
      queryClient.invalidateQueries({
-        queryKey: projectKeys.forProjectCertificates(projectSlug)
+        queryKey: ["certificate-profiles", "list"]
+      });
+      queryClient.invalidateQueries({
+        queryKey: pkiSubscriberKeys.allPkiSubscriberCertificates()
+      });
+      queryClient.invalidateQueries({
+        queryKey: projectKeys.allProjectCertificates()
+      });
+      queryClient.invalidateQueries({
+        queryKey: projectKeys.forProjectCertificates(projectId)
      });
    }
  });
@@ -49,16 +58,18 @@ export const useRevokeCert = () => {
      );
      return certificate;
    },
-    onSuccess: (_, { projectSlug }) => {
+    onSuccess: (_, { projectId }) => {
      queryClient.invalidateQueries({
-        queryKey: projectKeys.forProjectCertificates(projectSlug)
+        queryKey: ["certificate-profiles", "list"]
      });
      queryClient.invalidateQueries({
        queryKey: pkiSubscriberKeys.allPkiSubscriberCertificates()
      });
-
      queryClient.invalidateQueries({
-        queryKey: ["certificate-profiles", "list"]
+        queryKey: projectKeys.allProjectCertificates()
+      });
+      queryClient.invalidateQueries({
+        queryKey: projectKeys.forProjectCertificates(projectId)
      });
    }
  });
--- a/frontend/src/hooks/api/certificates/types.ts
+++ b/frontend/src/hooks/api/certificates/types.ts
@@ -24,12 +24,12 @@ export type TCertificate = {
 };

 export type TDeleteCertDTO = {
-  projectSlug: string;
+  projectId: string;
  serialNumber: string;
 };

 export type TRevokeCertDTO = {
-  projectSlug: string;
+  projectId: string;
  serialNumber: string;
  revocationReason: string;
 };
--- a/frontend/src/hooks/api/pam/enums.ts
+++ b/frontend/src/hooks/api/pam/enums.ts
@@ -1,3 +1,4 @@
+// Resources
 export enum PamResourceType {
  Postgres = "postgres",
  MySQL = "mysql",
@@ -18,9 +19,24 @@ export enum PamResourceType {
  DynamoDB = "dynamodb"
 }

+export enum PamResourceOrderBy {
+  Name = "name"
+}
+
+// Sessions
 export enum PamSessionStatus {
  Starting = "starting",
  Active = "active",
  Ended = "ended",
  Terminated = "terminated"
 }
+
+// Accounts
+export enum PamAccountOrderBy {
+  Name = "name"
+}
+
+export enum PamAccountView {
+  Flat = "flat",
+  Nested = "nested"
+}
--- a/frontend/src/hooks/api/pam/mutations.tsx
+++ b/frontend/src/hooks/api/pam/mutations.tsx
@@ -31,7 +31,7 @@ export const useCreatePamResource = () => {
      return data.resource;
    },
    onSuccess: ({ projectId }) => {
-      queryClient.invalidateQueries({ queryKey: pamKeys.listResources(projectId) });
+      queryClient.invalidateQueries({ queryKey: pamKeys.listResources({ projectId }) });
    }
  });
 };
@@ -48,7 +48,7 @@ export const useUpdatePamResource = () => {
      return data.resource;
    },
    onSuccess: ({ projectId }) => {
-      queryClient.invalidateQueries({ queryKey: pamKeys.listResources(projectId) });
+      queryClient.invalidateQueries({ queryKey: pamKeys.listResources({ projectId }) });
    }
  });
 };
@@ -64,7 +64,7 @@ export const useDeletePamResource = () => {
      return data.resource;
    },
    onSuccess: ({ projectId }) => {
-      queryClient.invalidateQueries({ queryKey: pamKeys.listResources(projectId) });
+      queryClient.invalidateQueries({ queryKey: pamKeys.listResources({ projectId }) });
    }
  });
 };
@@ -82,7 +82,7 @@ export const useCreatePamAccount = () => {
      return data.account;
    },
    onSuccess: ({ projectId }) => {
-      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) });
+      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) });
    }
  });
 };
@@ -99,7 +99,7 @@ export const useUpdatePamAccount = () => {
      return data.account;
    },
    onSuccess: ({ projectId }) => {
-      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) });
+      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) });
    }
  });
 };
@@ -115,7 +115,7 @@ export const useDeletePamAccount = () => {
      return data.account;
    },
    onSuccess: ({ projectId }) => {
-      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) });
+      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) });
    }
  });
 };
@@ -130,7 +130,7 @@ export const useCreatePamFolder = () => {
      return data.folder;
    },
    onSuccess: ({ projectId }) => {
-      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) });
+      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) });
    }
  });
 };
@@ -147,7 +147,7 @@ export const useUpdatePamFolder = () => {
      return data.folder;
    },
    onSuccess: ({ projectId }) => {
-      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) });
+      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) });
    }
  });
 };
@@ -163,7 +163,7 @@ export const useDeletePamFolder = () => {
      return data.folder;
    },
    onSuccess: ({ projectId }) => {
-      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) });
+      queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) });
    }
  });
 };
--- a/frontend/src/hooks/api/pam/queries.tsx
+++ b/frontend/src/hooks/api/pam/queries.tsx
@@ -4,7 +4,14 @@ import { apiRequest } from "@app/config/request";

 import { TPamResourceOption } from "./types/resource-options";
 import { PamResourceType } from "./enums";
-import { TPamAccount, TPamFolder, TPamResource, TPamSession } from "./types";
+import {
+  TListPamAccountsDTO,
+  TListPamResourcesDTO,
+  TPamAccount,
+  TPamFolder,
+  TPamResource,
+  TPamSession
+} from "./types";

 export const pamKeys = {
  all: ["pam"] as const,
@@ -12,14 +19,24 @@ export const pamKeys = {
  account: () => [...pamKeys.all, "account"] as const,
  session: () => [...pamKeys.all, "session"] as const,
  listResourceOptions: () => [...pamKeys.resource(), "options"] as const,
-  listResources: (projectId: string) => [...pamKeys.resource(), "list", projectId],
+  listResources: ({ projectId, ...params }: TListPamResourcesDTO) => [
+    ...pamKeys.resource(),
+    "list",
+    projectId,
+    params
+  ],
  getResource: (resourceType: string, resourceId: string) => [
    ...pamKeys.resource(),
    "get",
    resourceType,
    resourceId
  ],
-  listAccounts: (projectId: string) => [...pamKeys.account(), "list", projectId],
+  listAccounts: ({ projectId, ...params }: TListPamAccountsDTO) => [
+    ...pamKeys.account(),
+    "list",
+    projectId,
+    params
+  ],
  getSession: (sessionId: string) => [...pamKeys.session(), "get", sessionId],
  listSessions: (projectId: string) => [...pamKeys.session(), "list", projectId]
 };
@@ -49,28 +66,33 @@ export const useListPamResourceOptions = (
  });
 };

+type TListPamResourcesResponse = {
+  resources: TPamResource[];
+  totalCount: number;
+};
+
 export const useListPamResources = (
-  projectId: string,
+  params: TListPamResourcesDTO,
  options?: Omit<
    UseQueryOptions<
-      TPamResource[],
+      TListPamResourcesResponse,
      unknown,
-      TPamResource[],
+      TListPamResourcesResponse,
      ReturnType<typeof pamKeys.listResources>
    >,
    "queryKey" | "queryFn"
  >
 ) => {
  return useQuery({
-    queryKey: pamKeys.listResources(projectId),
+    queryKey: pamKeys.listResources(params),
    queryFn: async () => {
-      const { data } = await apiRequest.get<{ resources: TPamResource[] }>(
-        "/api/v1/pam/resources",
-        { params: { projectId } }
-      );
+      const { data } = await apiRequest.get<TListPamResourcesResponse>("/api/v1/pam/resources", {
+        params
+      });

-      return data.resources;
+      return data;
    },
+    placeholderData: (prev) => prev,
    ...options
  });
 };
@@ -98,28 +120,36 @@ export const useGetPamResourceById = (
 };

 // Accounts
+type TListPamAccountsResponse = {
+  accounts: TPamAccount[];
+  folders: TPamFolder[];
+  totalCount: number;
+  folderId?: string;
+  folderPaths: Record<string, string>;
+};
+
 export const useListPamAccounts = (
-  projectId: string,
+  params: TListPamAccountsDTO,
  options?: Omit<
    UseQueryOptions<
-      { accounts: TPamAccount[]; folders: TPamFolder[] },
+      TListPamAccountsResponse,
      unknown,
-      { accounts: TPamAccount[]; folders: TPamFolder[] },
+      TListPamAccountsResponse,
      ReturnType<typeof pamKeys.listAccounts>
    >,
    "queryKey" | "queryFn"
  >
 ) => {
  return useQuery({
-    queryKey: pamKeys.listAccounts(projectId),
+    queryKey: pamKeys.listAccounts(params),
    queryFn: async () => {
-      const { data } = await apiRequest.get<{ accounts: TPamAccount[]; folders: TPamFolder[] }>(
-        "/api/v1/pam/accounts",
-        { params: { projectId } }
-      );
+      const { data } = await apiRequest.get<TListPamAccountsResponse>("/api/v1/pam/accounts", {
+        params
+      });

      return data;
    },
+    placeholderData: (prev) => prev,
    ...options
  });
 };
--- a/frontend/src/hooks/api/pam/types/index.ts
+++ b/frontend/src/hooks/api/pam/types/index.ts
@@ -1,13 +1,22 @@
-import { PamResourceType, PamSessionStatus } from "../enums";
+import { OrderByDirection } from "../../generic/types";
+import {
+  PamAccountOrderBy,
+  PamAccountView,
+  PamResourceOrderBy,
+  PamResourceType,
+  PamSessionStatus
+} from "../enums";
 import { TMySQLAccount, TMySQLResource } from "./mysql-resource";
 import { TPostgresAccount, TPostgresResource } from "./postgres-resource";
+import { TSSHAccount, TSSHResource } from "./ssh-resource";

 export * from "./mysql-resource";
 export * from "./postgres-resource";
+export * from "./ssh-resource";

-export type TPamResource = TPostgresResource | TMySQLResource;
+export type TPamResource = TPostgresResource | TMySQLResource | TSSHResource;

-export type TPamAccount = TPostgresAccount | TMySQLAccount;
+export type TPamAccount = TPostgresAccount | TMySQLAccount | TSSHAccount;

 export type TPamFolder = {
  id: string;
@@ -19,6 +28,22 @@ export type TPamFolder = {
  updatedAt: string;
 };

+// Session log types
+export type TPamCommandLog = {
+  input: string;
+  output: string;
+  timestamp: string;
+};
+
+export type TTerminalEvent = {
+  timestamp: string;
+  eventType: "input" | "output" | "resize" | "error";
+  data: string; // Base64 encoded binary data
+  elapsedTime: number; // Seconds since session start (for replay)
+};
+
+export type TPamSessionLog = TPamCommandLog | TTerminalEvent;
+
 export type TPamSession = {
  id: string;
  projectId: string;
@@ -37,14 +62,20 @@ export type TPamSession = {
  endedAt?: string | null;
  createdAt: string;
  updatedAt: string;
-  commandLogs: {
-    input: string;
-    output: string;
-    timestamp: string;
-  }[];
+  logs: TPamSessionLog[];
 };

 // Resource DTOs
+export type TListPamResourcesDTO = {
+  projectId: string;
+  offset?: number;
+  limit?: number;
+  orderBy?: PamResourceOrderBy;
+  orderDirection?: OrderByDirection;
+  search?: string;
+  filterResourceTypes?: string;
+};
+
 export type TCreatePamResourceDTO = Pick<
  TPamResource,
  "name" | "connectionDetails" | "resourceType" | "gatewayId" | "projectId"
@@ -63,6 +94,18 @@ export type TDeletePamResourceDTO = {
 };

 // Account DTOs
+export type TListPamAccountsDTO = {
+  projectId: string;
+  accountPath?: string | null;
+  accountView?: PamAccountView;
+  offset?: number;
+  limit?: number;
+  orderBy?: PamAccountOrderBy;
+  orderDirection?: OrderByDirection;
+  search?: string;
+  filterResourceIds?: string;
+};
+
 export type TCreatePamAccountDTO = Pick<
  TPamAccount,
  "name" | "description" | "credentials" | "projectId" | "resourceId" | "folderId"
--- a/frontend/src/hooks/api/pam/types/ssh-resource.ts
+++ b/frontend/src/hooks/api/pam/types/ssh-resource.ts
@@ -0,0 +1,47 @@
+import { PamResourceType } from "../enums";
+import { TBasePamAccount } from "./base-account";
+import { TBasePamResource } from "./base-resource";
+
+export enum SSHAuthMethod {
+  Password = "password",
+  PublicKey = "public-key",
+  Certificate = "certificate"
+}
+
+export type TSSHConnectionDetails = {
+  host: string;
+  port: number;
+};
+
+export type TSSHPasswordCredentials = {
+  authMethod: SSHAuthMethod.Password;
+  username: string;
+  password: string;
+};
+
+export type TSSHPublicKeyCredentials = {
+  authMethod: SSHAuthMethod.PublicKey;
+  username: string;
+  privateKey: string;
+};
+
+export type TSSHCertificateCredentials = {
+  authMethod: SSHAuthMethod.Certificate;
+  username: string;
+};
+
+export type TSSHCredentials =
+  | TSSHPasswordCredentials
+  | TSSHPublicKeyCredentials
+  | TSSHCertificateCredentials;
+
+// Resources
+export type TSSHResource = TBasePamResource & { resourceType: PamResourceType.SSH } & {
+  connectionDetails: TSSHConnectionDetails;
+  rotationAccountCredentials?: TSSHCredentials | null;
+};
+
+// Accounts
+export type TSSHAccount = TBasePamAccount & {
+  credentials: TSSHCredentials;
+};
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -16,15 +16,19 @@ import {
  faSignOut,
  faToolbox,
  faUser,
+  faUserCog,
+  faUserPlus,
  faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link, useLocation, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
+import { UserPlusIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";

 import { Mfa } from "@app/components/auth/Mfa";
 import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import {
  BreadcrumbContainer,
@@ -44,7 +48,13 @@ import {
 } from "@app/components/v2";
 import { Badge, InstanceIcon, OrgIcon, SubOrgIcon } from "@app/components/v3";
 import { envConfig } from "@app/config/env";
-import { useOrganization, useSubscription, useUser } from "@app/context";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription,
+  useUser
+} from "@app/context";
 import { isInfisicalCloud } from "@app/helpers/platform";
 import { useToggle } from "@app/hooks";
 import {
@@ -567,15 +577,36 @@ export const Navbar = () => {
          </Button>
        </Tooltip>
      )}
-      {user.superAdmin && !location.pathname.startsWith("/admin") && (
-        <Link
-          className="mr-2 flex h-[34px] items-center rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
-          to="/admin"
-        >
-          <InstanceIcon className="inline-block size-3.5" />
-          <span className="ml-2 hidden md:inline-block">Server Console</span>
-        </Link>
-      )}
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {!location.pathname.startsWith("/admin") ? (
+        user.superAdmin ? (
+          <Link
+            className="mr-2 flex h-[34px] items-center rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
+            to="/admin"
+          >
+            <InstanceIcon className="inline-block size-3.5" />
+            <span className="ml-2 hidden md:inline-block">Server Console</span>
+          </Link>
+        ) : (
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
+            {(isAllowed) =>
+              isAllowed ? (
+                <Link
+                  className="mr-2 flex h-[34px] items-center rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
+                  to="/organization/access-management"
+                  search={{
+                    selectedTab: "members",
+                    action: "invite-members"
+                  }}
+                >
+                  <UserPlusIcon className="inline-block size-3.5" />
+                  <span className="ml-2 hidden md:inline-block">Invite Members</span>
+                </Link>
+              ) : null
+            }
+          </OrgPermissionCan>
+        )
+      ) : null}
      <DropdownMenu modal={false}>
        <DropdownMenuTrigger>
          <div className="rounded-l-md border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
@@ -657,8 +688,27 @@ export const Navbar = () => {
            </div>
          </div>
          <Link to="/personal-settings">
-            <DropdownMenuItem>Personal Settings</DropdownMenuItem>
+            <DropdownMenuItem icon={<FontAwesomeIcon icon={faUserCog} />}>
+              Personal Settings
+            </DropdownMenuItem>
          </Link>
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
+            {(isAllowed) =>
+              isAllowed ? (
+                <Link
+                  to="/organization/access-management"
+                  search={{
+                    selectedTab: "members",
+                    action: "invite-members"
+                  }}
+                >
+                  <DropdownMenuItem icon={<FontAwesomeIcon icon={faUserPlus} />}>
+                    Invite Members
+                  </DropdownMenuItem>
+                </Link>
+              ) : null
+            }
+          </OrgPermissionCan>
          <a
            href="https://infisical.com/docs/documentation/getting-started/introduction"
            target="_blank"
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateRevocationModal.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificateRevocationModal.tsx
@@ -53,7 +53,7 @@ export const CertificateRevocationModal = ({ popUp, handlePopUpToggle }: Props)
    const { serialNumber } = popUp.revokeCertificate.data as { serialNumber: string };

    await revokeCertificate({
-      projectSlug: currentProject.slug,
+      projectId: currentProject.id,
      serialNumber,
      revocationReason
    });
--- a/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesSection.tsx
@@ -42,7 +42,10 @@ export const CertificatesSection = () => {
  const onRemoveCertificateSubmit = async (serialNumber: string) => {
    if (!currentProject?.slug) return;

-    await deleteCert({ serialNumber, projectSlug: currentProject.slug });
+    await deleteCert({
+      serialNumber,
+      projectId: currentProject.id
+    });

    createNotification({
      text: "Successfully deleted certificate",
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
@@ -49,7 +49,7 @@ export const OrgGroupsSection = () => {

  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="mb-4 flex flex-wrap items-center justify-between gap-2">
        <div className="flex items-center gap-x-2">
          <p className="text-xl font-medium text-mineshaft-100">Groups</p>
          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/groups" />
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
@@ -97,7 +97,7 @@ export const IdentitySection = withPermission(
    return (
      <div>
        <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-          <div className="mb-4 flex w-full items-center gap-4">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
            <div className="flex flex-1 items-center gap-x-2">
              <p className="text-xl font-medium text-mineshaft-100">Identities</p>
              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/machine-identities" />
@@ -139,7 +139,7 @@ export const IdentitySection = withPermission(
        </div>
        {/* Identity Auth Templates Section */}
        <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-          <div className="mb-4 flex items-center justify-between">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
            <div className="flex items-center gap-x-2">
              <p className="text-xl font-medium text-mineshaft-100">Identity Auth Templates</p>
              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/auth-templates" />
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
@@ -1,7 +1,8 @@
-import { useState } from "react";
-import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { useEffect, useState } from "react";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { BanIcon } from "lucide-react";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { BanIcon, UserPlusIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";

 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -16,6 +17,7 @@ import {
  Tooltip
 } from "@app/components/v2";
 import { Badge, DocumentationLinkBadge } from "@app/components/v3";
+import { ROUTE_PATHS } from "@app/const/routes";
 import {
  OrgPermissionActions,
  OrgPermissionSubjects,
@@ -35,6 +37,7 @@ import { OrgMembersTable } from "./OrgMembersTable";
 export const OrgMembersSection = () => {
  const { subscription } = useSubscription();
  const { currentOrg, isSubOrganization } = useOrganization();
+  const navigate = useNavigate();
  const orgId = currentOrg?.id ?? "";
  const { user } = useUser();
  const userId = user?.id || "";
@@ -55,6 +58,22 @@ export const OrgMembersSection = () => {

  const [selectedMemberIds, setSelectedMemberIds] = useState<string[]>([]);

+  const urlAction = useSearch({
+    from: ROUTE_PATHS.Organization.AccessControlPage.id,
+    select: (el) => el.action,
+    structuralSharing: true
+  });
+
+  useEffect(() => {
+    if (urlAction === "invite-members") {
+      handlePopUpOpen("addMember");
+      navigate({
+        to: ".",
+        search: ({ action, ...search }) => search
+      });
+    }
+  }, [urlAction]);
+
  const { mutateAsync: deleteMutateAsync } = useDeleteOrgMembership();
  const { mutateAsync: deleteBatchMutateAsync } = useDeleteOrgMembershipBatch();
  const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();
@@ -184,7 +203,7 @@ export const OrgMembersSection = () => {
        </div>
      </div>
      <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="mb-4 flex flex-wrap items-center justify-between gap-2">
          <div className="flex items-center gap-x-2">
            <p className="text-xl font-medium text-mineshaft-100">Users</p>
            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/user-identities" />
@@ -194,13 +213,13 @@ export const OrgMembersSection = () => {
              <Button
                colorSchema="secondary"
                type="submit"
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                leftIcon={<UserPlusIcon size={16} />}
                onClick={() =>
                  isSubOrganization ? handlePopUpOpen("addMemberToSubOrg") : handleAddMemberModal()
                }
                isDisabled={!isAllowed}
              >
-                Add Member
+                {isSubOrganization ? "Add Members" : "Invite Members"}
              </Button>
            )}
          </OrgPermissionCan>
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
@@ -392,7 +392,7 @@ export const OrgMembersTable = ({
                  }}
                />
              </Th>
-              <Th className="w-1/3">
+              <Th className="min-w-40 md:w-1/3 md:min-w-0">
                <div className="flex items-center">
                  Name
                  <IconButton
@@ -505,7 +505,7 @@ export const OrgMembersTable = ({
                      <Td
                        className={twMerge("group max-w-0", isActive ? "" : "text-mineshaft-400")}
                      >
-                        <div className="flex items-center gap-x-2">
+                        <div className="flex w-full items-center gap-x-2">
                          <p className="truncate">
                            {name ?? <span className="text-mineshaft-400">Not Set</span>}
                          </p>
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
@@ -189,7 +189,7 @@ export const OrgRoleTable = () => {

  return (
    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
        <div className="flex items-center gap-x-2">
          <p className="text-xl font-medium text-mineshaft-100">
            {isSubOrganization ? "Sub-" : ""}Organization Roles
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
@@ -150,8 +150,8 @@ const Page = () => {
              </DropdownMenuContent>
            </DropdownMenu>
          </PageHeader>
-          <div className="flex">
-            <div className="mr-4 w-96">
+          <div className="flex flex-col gap-4 md:flex-row">
+            <div className="w-full md:w-96">
              <GroupDetailsSection groupId={groupId} handlePopUpOpen={handlePopUpOpen} />
            </div>
            <GroupMembersSection groupId={groupId} groupSlug={data.group.slug} />
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
@@ -116,8 +116,8 @@ const Page = () => {
              )}
            </div>
          </PageHeader>
-          <div className="flex">
-            <div className="mr-4 w-96">
+          <div className="flex flex-col gap-4 md:flex-row">
+            <div className="w-full md:w-96">
              <IdentityDetailsSection
                isOrgIdentity={data.identity.orgId === currentOrg.id}
                identityId={identityId}
--- a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/ExternalMigrationsTab.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/ExternalMigrationsTab.tsx
@@ -37,7 +37,7 @@ export const ExternalMigrationsTab = () => {
          </p>
        </div>

-        <div className="flex items-start justify-between">
+        <div className="flex flex-wrap items-start justify-between gap-2">
          <div>
            <div className="flex items-center gap-2">
              <p className="text-base font-medium text-mineshaft-100">
--- a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultConnectionSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultConnectionSection.tsx
@@ -71,7 +71,7 @@ export const VaultConnectionSection = () => {

  return (
    <div>
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
        <div className="flex items-center gap-3">
          <img
            src="/images/integrations/Vault.png"
--- a/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx
@@ -34,9 +34,11 @@ export const ProjectTemplatesSection = () => {
            project setup
          </p>
          <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <div className="mb-4 flex items-center gap-x-2">
-              <p className="text-xl font-medium text-mineshaft-100">Project Templates</p>
-              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/project-templates" />
+            <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
+              <div className="flex items-center gap-x-2">
+                <p className="text-xl font-medium text-mineshaft-100">Project Templates</p>
+                <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/project-templates" />
+              </div>
              <OrgPermissionCan
                I={OrgPermissionActions.Create}
                a={OrgPermissionSubjects.ProjectTemplates}
@@ -57,7 +59,7 @@ export const ProjectTemplatesSection = () => {
                      handlePopUpOpen("addTemplate");
                    }}
                    isDisabled={!isAllowed}
-                    className="ml-auto"
+                    // className="ml-auto"
                  >
                    Add Template
                  </Button>
--- a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
@@ -242,8 +242,8 @@ const Page = withPermission(
                )}
              </div>
            </PageHeader>
-            <div className="flex">
-              <div className="mr-4 w-96">
+            <div className="flex flex-col gap-4 md:flex-row">
+              <div className="w-full md:w-96">
                <UserDetailsSection membershipId={membershipId} handlePopUpOpen={handlePopUpOpen} />
              </div>
              <div className="w-full space-y-2">
--- a/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx
@@ -1,13 +1,9 @@
 import { Button } from "@app/components/v2";
-
-export enum AccountView {
-  Flat = "flat",
-  Nested = "nested"
-}
+import { PamAccountView } from "@app/hooks/api/pam";

 type Props = {
-  value: AccountView;
-  onChange: (value: AccountView) => void;
+  value: PamAccountView;
+  onChange: (value: PamAccountView) => void;
 };

 export const AccountViewToggle = ({ value, onChange }: Props) => {
@@ -16,11 +12,11 @@ export const AccountViewToggle = ({ value, onChange }: Props) => {
      <Button
        variant="outline_bg"
        onClick={() => {
-          onChange(AccountView.Flat);
+          onChange(PamAccountView.Flat);
        }}
        size="xs"
        className={`${
-          value === AccountView.Flat ? "bg-mineshaft-500" : "bg-transparent"
+          value === PamAccountView.Flat ? "bg-mineshaft-500" : "bg-transparent"
        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
      >
        Hide Folders
@@ -28,11 +24,11 @@ export const AccountViewToggle = ({ value, onChange }: Props) => {
      <Button
        variant="outline_bg"
        onClick={() => {
-          onChange(AccountView.Nested);
+          onChange(PamAccountView.Nested);
        }}
        size="xs"
        className={`${
-          value === AccountView.Nested ? "bg-mineshaft-500" : "bg-transparent"
+          value === PamAccountView.Nested ? "bg-mineshaft-500" : "bg-transparent"
        } min-w-[2.4rem] rounded border-none hover:bg-mineshaft-600`}
      >
        Show Folders
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccessAccountModal.tsx
@@ -58,15 +58,19 @@ export const PamAccessAccountModal = ({ isOpen, onOpenChange, account }: Props)
    return duration;
  }, [duration]);

-  const command = useMemo(
-    () =>
-      account &&
-      (account.resource.resourceType === PamResourceType.Postgres ||
-        account.resource.resourceType === PamResourceType.MySQL)
-        ? `infisical pam db access-account ${account.id} --duration ${cliDuration}`
-        : "",
-    [account, cliDuration]
-  );
+  const command = useMemo(() => {
+    if (!account) return "";
+
+    switch (account.resource.resourceType) {
+      case PamResourceType.Postgres:
+      case PamResourceType.MySQL:
+        return `infisical pam db access-account ${account.id} --duration ${cliDuration}`;
+      case PamResourceType.SSH:
+        return `infisical pam ssh access-account ${account.id} --duration ${cliDuration}`;
+      default:
+        return "";
+    }
+  }, [account, cliDuration]);

  if (!account) return null;

--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/PamAccountForm.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/PamAccountForm.tsx
@@ -10,6 +10,7 @@ import { DiscriminativePick } from "@app/types";
 import { PamAccountHeader } from "../PamAccountHeader";
 import { MySQLAccountForm } from "./MySQLAccountForm";
 import { PostgresAccountForm } from "./PostgresAccountForm";
+import { SshAccountForm } from "./SshAccountForm";

 type FormProps = {
  onComplete: (account: TPamAccount) => void;
@@ -65,6 +66,10 @@ const CreateForm = ({
      return (
        <MySQLAccountForm onSubmit={onSubmit} resourceId={resourceId} resourceType={resourceType} />
      );
+    case PamResourceType.SSH:
+      return (
+        <SshAccountForm onSubmit={onSubmit} resourceId={resourceId} resourceType={resourceType} />
+      );
    default:
      throw new Error(`Unhandled resource: ${resourceType}`);
  }
@@ -90,9 +95,11 @@ const UpdateForm = ({ account, onComplete }: UpdateFormProps) => {

  switch (account.resource.resourceType) {
    case PamResourceType.Postgres:
-      return <PostgresAccountForm account={account} onSubmit={onSubmit} />;
+      return <PostgresAccountForm account={account as any} onSubmit={onSubmit} />;
    case PamResourceType.MySQL:
-      return <MySQLAccountForm account={account} onSubmit={onSubmit} />;
+      return <MySQLAccountForm account={account as any} onSubmit={onSubmit} />;
+    case PamResourceType.SSH:
+      return <SshAccountForm account={account as any} onSubmit={onSubmit} />;
    default:
      throw new Error(`Unhandled resource: ${account.resource.resourceType}`);
  }
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/SshAccountForm.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/SshAccountForm.tsx
@@ -0,0 +1,272 @@
+import { useEffect, useState } from "react";
+import { Controller, FormProvider, useForm, useFormContext, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
+import { PamResourceType, TSSHAccount } from "@app/hooks/api/pam";
+import { UNCHANGED_PASSWORD_SENTINEL } from "@app/hooks/api/pam/constants";
+import { SSHAuthMethod } from "@app/hooks/api/pam/types/ssh-resource";
+
+import { GenericAccountFields, genericAccountFieldsSchema } from "./GenericAccountFields";
+
+type Props = {
+  account?: TSSHAccount;
+  resourceId?: string;
+  resourceType?: PamResourceType;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const SSHPasswordCredentialsSchema = z.object({
+  authMethod: z.literal(SSHAuthMethod.Password),
+  username: z.string().trim().min(1, "Username is required"),
+  password: z.string().trim().min(1, "Password is required")
+});
+
+const SSHPublicKeyCredentialsSchema = z.object({
+  authMethod: z.literal(SSHAuthMethod.PublicKey),
+  username: z.string().trim().min(1, "Username is required"),
+  privateKey: z.string().trim().min(1, "Private key is required")
+});
+
+const SSHCertificateCredentialsSchema = z.object({
+  authMethod: z.literal(SSHAuthMethod.Certificate),
+  username: z.string().trim().min(1, "Username is required")
+});
+
+const BaseSshAccountSchema = z.discriminatedUnion("authMethod", [
+  SSHPasswordCredentialsSchema,
+  SSHPublicKeyCredentialsSchema,
+  SSHCertificateCredentialsSchema
+]);
+
+const formSchema = genericAccountFieldsSchema.extend({
+  credentials: BaseSshAccountSchema,
+  // We don't support rotation for now, just feed a false value to
+  // make the schema happy
+  rotationEnabled: z.boolean().default(false)
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+const SshAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
+  const { control, setValue } = useFormContext();
+  const [showPassword, setShowPassword] = useState(false);
+
+  const authMethod =
+    useWatch({ control, name: "credentials.authMethod" }) || SSHAuthMethod.Password;
+  const password = useWatch({ control, name: "credentials.password" });
+
+  useEffect(() => {
+    if (password === UNCHANGED_PASSWORD_SENTINEL) {
+      setShowPassword(false);
+    }
+  }, [password]);
+
+  return (
+    <div className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3">
+      <Controller
+        name="credentials.authMethod"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            className="mb-3"
+            isError={Boolean(error?.message)}
+            errorText={error?.message}
+            label="Authentication Method"
+          >
+            <Select
+              value={value || SSHAuthMethod.Password}
+              onValueChange={(newAuthMethod) => {
+                onChange(newAuthMethod);
+                // Clear out credentials from other auth methods
+                setValue("credentials.password", undefined, { shouldDirty: true });
+                setValue("credentials.privateKey", undefined, { shouldDirty: true });
+              }}
+              className="w-full border border-mineshaft-500"
+            >
+              <SelectItem value={SSHAuthMethod.Password}>Password</SelectItem>
+              <SelectItem value={SSHAuthMethod.PublicKey}>SSH Key</SelectItem>
+              <SelectItem value={SSHAuthMethod.Certificate}>Certificate</SelectItem>
+            </Select>
+          </FormControl>
+        )}
+      />
+
+      <Controller
+        name="credentials.username"
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            className="mb-3"
+            errorText={error?.message}
+            isError={Boolean(error?.message)}
+            label="Username"
+          >
+            <Input {...field} autoComplete="off" />
+          </FormControl>
+        )}
+      />
+
+      {authMethod === SSHAuthMethod.Password && (
+        <Controller
+          name="credentials.password"
+          control={control}
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              className="mb-0"
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Password"
+            >
+              <Input
+                {...field}
+                type={showPassword ? "text" : "password"}
+                autoComplete="new-password"
+                onFocus={() => {
+                  if (isUpdate && field.value === UNCHANGED_PASSWORD_SENTINEL) {
+                    field.onChange("");
+                  }
+                  setShowPassword(true);
+                }}
+                onBlur={() => {
+                  if (isUpdate && field.value === "") {
+                    field.onChange(UNCHANGED_PASSWORD_SENTINEL);
+                  }
+                  setShowPassword(false);
+                }}
+              />
+            </FormControl>
+          )}
+        />
+      )}
+
+      {authMethod === SSHAuthMethod.PublicKey && (
+        <Controller
+          name="credentials.privateKey"
+          control={control}
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              className="mb-0"
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Private Key"
+            >
+              <TextArea
+                {...field}
+                value={field.value === UNCHANGED_PASSWORD_SENTINEL ? "" : field.value}
+                className="min-h-32 resize-y font-mono text-xs"
+                placeholder={
+                  isUpdate && field.value === UNCHANGED_PASSWORD_SENTINEL
+                    ? "Private key unchanged - click to update"
+                    : "-----BEGIN OPENSSH PRIVATE KEY-----\n...\n-----END OPENSSH PRIVATE KEY-----"
+                }
+                onFocus={() => {
+                  if (isUpdate && field.value === UNCHANGED_PASSWORD_SENTINEL) {
+                    field.onChange("");
+                  }
+                }}
+                onBlur={() => {
+                  if (isUpdate && field.value === "") {
+                    field.onChange(UNCHANGED_PASSWORD_SENTINEL);
+                  }
+                }}
+              />
+            </FormControl>
+          )}
+        />
+      )}
+
+      {authMethod === SSHAuthMethod.Certificate && (
+        <p className="mb-0 text-xs text-mineshaft-400">
+          Certificate-based authentication will use the certificate configured on the SSH resource.
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const SshAccountForm = ({ account, onSubmit }: Props) => {
+  const isUpdate = Boolean(account);
+
+  const getDefaultCredentials = () => {
+    if (!account) return undefined;
+
+    if (account.credentials.authMethod === SSHAuthMethod.Password) {
+      return {
+        ...account.credentials,
+        password: UNCHANGED_PASSWORD_SENTINEL
+      };
+    }
+
+    if (account.credentials.authMethod === SSHAuthMethod.PublicKey) {
+      return {
+        ...account.credentials,
+        privateKey: UNCHANGED_PASSWORD_SENTINEL
+      };
+    }
+
+    return account.credentials;
+  };
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: account
+      ? {
+          ...account,
+          credentials: getDefaultCredentials()
+        }
+      : {
+          name: "",
+          description: "",
+          credentials: {
+            authMethod: SSHAuthMethod.Password,
+            username: "",
+            password: ""
+          }
+        }
+  });
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={(e) => {
+          handleSubmit(onSubmit)(e);
+        }}
+      >
+        <GenericAccountFields />
+        <SshAccountFields isUpdate={isUpdate} />
+        <div className="mt-6 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Account" : "Create Account"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsSection.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsSection.tsx
@@ -1,23 +1,9 @@
-import { ContentLoader } from "@app/components/v2";
 import { useProject } from "@app/context";
-import { useListPamAccounts } from "@app/hooks/api/pam";

 import { PamAccountsTable } from "./PamAccountsTable";

 export const PamAccountsSection = () => {
  const { currentProject } = useProject();

-  const { data, isPending } = useListPamAccounts(currentProject.id, {
-    refetchInterval: 30000
-  });
-
-  if (isPending) return <ContentLoader />;
-
-  return (
-    <PamAccountsTable
-      projectId={currentProject.id}
-      accounts={data?.accounts || []}
-      folders={data?.folders || []}
-    />
-  );
+  return <PamAccountsTable projectId={currentProject.id} />;
 };
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
@@ -29,6 +29,7 @@ import {
  Pagination,
  Table,
  TableContainer,
+  TableSkeleton,
  TBody,
  Th,
  THead,
@@ -40,11 +41,22 @@ import {
  ProjectPermissionPamAccountActions,
  ProjectPermissionSub
 } from "@app/context/ProjectPermissionContext/types";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
-import { PAM_RESOURCE_TYPE_MAP, TPamAccount, TPamFolder } from "@app/hooks/api/pam";
+import {
+  PAM_RESOURCE_TYPE_MAP,
+  PamAccountOrderBy,
+  PamAccountView,
+  TPamFolder
+} from "@app/hooks/api/pam";
+import { useListPamAccounts, useListPamResources } from "@app/hooks/api/pam/queries";

-import { AccountView, AccountViewToggle } from "./AccountViewToggle";
+import { AccountViewToggle } from "./AccountViewToggle";
 import { FolderBreadCrumbs } from "./FolderBreadCrumbs";
 import { PamAccessAccountModal } from "./PamAccessAccountModal";
 import { PamAccountRow } from "./PamAccountRow";
@@ -56,21 +68,15 @@ import { PamFolderRow } from "./PamFolderRow";
 import { PamUpdateAccountModal } from "./PamUpdateAccountModal";
 import { PamUpdateFolderModal } from "./PamUpdateFolderModal";

-enum OrderBy {
-  Name = "name"
-}
-
-type Filters = {
-  resource: string[];
+type PamAccountFilter = {
+  resourceIds: string[];
 };

 type Props = {
-  accounts: TPamAccount[];
-  folders: TPamFolder[];
  projectId: string;
 };

-export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
+export const PamAccountsTable = ({ projectId }: Props) => {
  const navigate = useNavigate({ from: ROUTE_PATHS.Pam.AccountsPage.path });

  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
@@ -92,18 +98,21 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
    from: ROUTE_PATHS.Pam.AccountsPage.id
  });

-  const [accountView, setAccountView] = useState<AccountView>(initAccountView ?? AccountView.Flat);
+  const [accountView, setAccountView] = useState<PamAccountView>(
+    initAccountView ?? PamAccountView.Flat
+  );

-  const [filters, setFilters] = useState<Filters>({
-    resource: []
+  const [filter, setFilter] = useState<PamAccountFilter>({
+    resourceIds: []
  });

  const {
    search,
+    debouncedSearch,
    setSearch,
-    setPage,
    page,
    perPage,
+    setPage,
    setPerPage,
    offset,
    orderDirection,
@@ -111,114 +120,74 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
    orderBy,
    setOrderDirection,
    setOrderBy
-  } = usePagination<OrderBy>(OrderBy.Name, { initPerPage: 20, initSearch });
+  } = usePagination<PamAccountOrderBy>(PamAccountOrderBy.Name, {
+    initPerPage: getUserTablePreference("pamAccountsTable", PreferenceKey.PerPage, 20),
+    initSearch
+  });

-  const { foldersByParentId, pathMap, folderPaths } = useMemo(() => {
-    const foldersById: Record<string, TPamFolder> = {};
-    const tempFoldersByParentId: Record<string, TPamFolder[]> = { null: [] };
-    const tempPathMap: Record<string, string> = { "/": "null" };
-    const tempFolderPaths: Record<string, string> = {};
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("pamAccountsTable", PreferenceKey.PerPage, newPerPage);
+  };

-    folders.forEach((folder) => {
-      foldersById[folder.id] = folder;
-      if (!tempFoldersByParentId[folder.parentId || "null"]) {
-        tempFoldersByParentId[folder.parentId || "null"] = [];
-      }
-      tempFoldersByParentId[folder.parentId || "null"].push(folder);
-    });
+  const { data, isLoading } = useListPamAccounts({
+    projectId,
+    accountPath,
+    accountView,
+    offset,
+    limit: perPage,
+    search: debouncedSearch,
+    orderBy,
+    orderDirection,
+    filterResourceIds: filter.resourceIds.length ? filter.resourceIds.join(",") : undefined
+  });

-    const buildPaths = (parentId: string | null, currentPath: string) => {
-      (tempFoldersByParentId[parentId || "null"] || []).forEach((folder) => {
-        const newPath = `${currentPath}${folder.name}/`;
-        tempPathMap[newPath] = folder.id;
-        tempFolderPaths[folder.id] = newPath;
-        buildPaths(folder.id, newPath);
-      });
-    };
-
-    buildPaths(null, "/");
-
-    return {
-      foldersByParentId: tempFoldersByParentId,
-      pathMap: tempPathMap,
-      folderPaths: tempFolderPaths
-    };
-  }, [folders]);
-
-  const effectiveFolderIdForFiltering = useMemo(() => {
-    if (accountView === AccountView.Flat) {
-      return null;
-    }
-    const folderId = pathMap[accountPath];
-    return folderId === "null" ? null : folderId || null;
-  }, [accountView, accountPath, pathMap]);
-
-  const foldersToRender = useMemo(() => {
-    if (accountView === AccountView.Flat) {
-      return [];
-    }
-    return (foldersByParentId[effectiveFolderIdForFiltering || "null"] || []).filter((folder) =>
-      folder.name.toLowerCase().includes(search.trim().toLowerCase())
-    );
-  }, [accountView, effectiveFolderIdForFiltering, foldersByParentId, search]);
-
-  const accountsToProcess = useMemo(() => {
-    if (accountView === AccountView.Flat) {
-      return accounts;
-    }
-    return accounts.filter(
-      (acc) => (acc.folderId || "null") === (effectiveFolderIdForFiltering || "null")
-    );
-  }, [accountView, accounts, effectiveFolderIdForFiltering]);
-
-  const filteredAccounts = useMemo(
-    () =>
-      accountsToProcess
-        .filter((account) => {
-          const {
-            name,
-            description,
-            resource: { name: resourceName, id: resourceId }
-          } = account;
-
-          if (filters.resource.length && !filters.resource.includes(resourceId)) {
-            return false;
-          }
-
-          const searchValue = search.trim().toLowerCase();
-          const path = (account.folderId && folderPaths[account.folderId]) || "";
-
-          return (
-            name.toLowerCase().includes(searchValue) ||
-            resourceName.toLowerCase().includes(searchValue) ||
-            (description || "").toLowerCase().includes(searchValue) ||
-            path.toLowerCase().includes(searchValue)
-          );
-        })
-        .sort((a, b) => {
-          const [accOne, accTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
-
-          switch (orderBy) {
-            case OrderBy.Name:
-            default:
-              return accOne.name.toLowerCase().localeCompare(accTwo.name.toLowerCase());
-          }
-        }),
-    [accountsToProcess, orderDirection, search, orderBy, filters, folderPaths]
-  );
+  const accounts = data?.accounts || [];
+  const folders = data?.folders || [];
+  const totalCount = data?.totalCount || 0;
+  const folderPaths = data?.folderPaths || {};
+  const currentFolderId = data?.folderId ?? null;

  useResetPageHelper({
-    totalCount: filteredAccounts.length,
+    totalCount,
    offset,
    setPage
  });

-  const currentPageData = useMemo(
-    () => filteredAccounts.slice(offset, perPage * page),
-    [filteredAccounts, offset, perPage, page]
+  const foldersToRender = useMemo(() => {
+    if (accountView === PamAccountView.Flat) {
+      return [];
+    }
+    return folders.filter((folder) =>
+      folder.name.toLowerCase().includes(search.trim().toLowerCase())
+    );
+  }, [accountView, folders, search]);
+
+  const filteredAccounts = useMemo(
+    () =>
+      accounts.filter((account) => {
+        const {
+          name,
+          description,
+          resource: { name: resourceName, id: resourceId }
+        } = account;
+
+        if (filter.resourceIds.length && !filter.resourceIds.includes(resourceId)) {
+          return false;
+        }
+
+        const searchValue = search.trim().toLowerCase();
+
+        return (
+          name.toLowerCase().includes(searchValue) ||
+          resourceName.toLowerCase().includes(searchValue) ||
+          (description || "").toLowerCase().includes(searchValue)
+        );
+      }),
+    [accounts, search, filter]
  );

-  const handleSort = (column: OrderBy) => {
+  const handleSort = (column: PamAccountOrderBy) => {
    if (column === orderBy) {
      toggleOrderDirection();
      return;
@@ -228,15 +197,16 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
    setOrderDirection(OrderByDirection.ASC);
  };

-  const getClassName = (col: OrderBy) => twMerge("ml-2", orderBy === col ? "" : "opacity-30");
+  const getClassName = (col: PamAccountOrderBy) =>
+    twMerge("ml-2", orderBy === col ? "" : "opacity-30");

-  const getColSortIcon = (col: OrderBy) =>
+  const getColSortIcon = (col: PamAccountOrderBy) =>
    orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;

-  const isTableFiltered = Boolean(filters.resource.length);
+  const isTableFiltered = Boolean(filter.resourceIds.length);

  const handleFolderClick = (folder: TPamFolder) => {
-    if (accountView === AccountView.Flat) {
+    if (accountView === PamAccountView.Flat) {
      return;
    }
    const newPath = `${accountPath}${folder.name}/`;
@@ -246,17 +216,17 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
  const isContentEmpty = !filteredAccounts.length && !foldersToRender.length;
  const isSearchEmpty = isContentEmpty && (Boolean(search) || isTableFiltered);

-  const uniqueResources = useMemo(() => {
-    const resourceMap = new Map<string, TPamAccount["resource"]>();
-    accounts.forEach((account) => {
-      resourceMap.set(account.resource.id, account.resource);
-    });
-    return Array.from(resourceMap.values());
-  }, [accounts]);
+  const { data: resourcesData } = useListPamResources({
+    projectId,
+    // temporarily returning a large number until we rework table filtering
+    limit: 100
+  });
+
+  const resources = resourcesData?.resources || [];

  return (
    <div>
-      {accountView === AccountView.Nested && <FolderBreadCrumbs path={accountPath} />}
+      {accountView === PamAccountView.Nested && <FolderBreadCrumbs path={accountPath} />}
      <div className="mt-4 flex gap-2">
        <ProjectPermissionCan I={ProjectPermissionActions.Read} a={ProjectPermissionSub.PamFolders}>
          {(isAllowed) =>
@@ -264,12 +234,14 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
              <AccountViewToggle
                value={accountView}
                onChange={(e) => {
+                  setPage(1);
+                  setFilter({ resourceIds: [] });
                  setAccountView(e);
                  navigate({
                    search: (prev) => ({
                      ...prev,
-                      accountView: e === AccountView.Flat ? undefined : e,
-                      accountPath: e === AccountView.Flat ? "/" : prev.accountPath
+                      accountView: e === PamAccountView.Flat ? undefined : e,
+                      accountPath: e === PamAccountView.Flat ? "/" : prev.accountPath
                    })
                  });
                }}
@@ -307,25 +279,25 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
          </DropdownMenuTrigger>
          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
            <DropdownMenuLabel>Resource</DropdownMenuLabel>
-            {uniqueResources.length ? (
-              uniqueResources.map((resource) => {
+            {resources.length ? (
+              resources.map((resource) => {
                const { name, image } = PAM_RESOURCE_TYPE_MAP[resource.resourceType];

                return (
                  <DropdownMenuItem
                    onClick={(e) => {
                      e.preventDefault();
-                      const newResources = filters.resource.includes(resource.id)
-                        ? filters.resource.filter((a) => a !== resource.id)
-                        : [...filters.resource, resource.id];
-                      setFilters((prev) => ({
+                      const newResources = filter.resourceIds.includes(resource.id)
+                        ? filter.resourceIds.filter((a) => a !== resource.id)
+                        : [...filter.resourceIds, resource.id];
+                      setFilter((prev) => ({
                        ...prev,
-                        resource: newResources
+                        resourceIds: newResources
                      }));
                    }}
                    key={resource.id}
                    icon={
-                      filters.resource.includes(resource.id) && (
+                      filter.resourceIds.includes(resource.id) && (
                        <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
                      )
                    }
@@ -358,12 +330,12 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
                leftIcon={<FontAwesomeIcon icon={faPlus} />}
                onClick={() => handlePopUpOpen("addAccount")}
                isDisabled={!isAllowedToCreateAccounts}
-                className={`h-10 transition-colors ${accountView === AccountView.Flat ? "" : "rounded-r-none"}`}
+                className={`h-10 transition-colors ${accountView === PamAccountView.Flat ? "" : "rounded-r-none"}`}
              >
                Add Account
              </Button>

-              {accountView !== AccountView.Flat && (
+              {accountView !== PamAccountView.Flat && (
                <DropdownMenu
                  open={popUp.misc.isOpen}
                  onOpenChange={(isOpen) => handlePopUpToggle("misc", isOpen)}
@@ -414,11 +386,11 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
                  Accounts
                  <IconButton
                    variant="plain"
-                    className={getClassName(OrderBy.Name)}
+                    className={getClassName(PamAccountOrderBy.Name)}
                    ariaLabel="sort"
-                    onClick={() => handleSort(OrderBy.Name)}
+                    onClick={() => handleSort(PamAccountOrderBy.Name)}
                  >
-                    <FontAwesomeIcon icon={getColSortIcon(OrderBy.Name)} />
+                    <FontAwesomeIcon icon={getColSortIcon(PamAccountOrderBy.Name)} />
                  </IconButton>
                </div>
              </Th>
@@ -426,45 +398,48 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
            </Tr>
          </THead>
          <TBody>
-            {accountView !== AccountView.Flat &&
-              foldersToRender.map((folder) => (
-                <PamFolderRow
-                  key={folder.id}
-                  folder={folder}
-                  search={search}
-                  onClick={() => handleFolderClick(folder)}
-                  onUpdate={(e) => handlePopUpOpen("updateFolder", e)}
-                  onDelete={(e) => handlePopUpOpen("deleteFolder", e)}
-                />
-              ))}
-            {currentPageData.map((account) => (
-              <PamAccountRow
-                key={account.id}
-                account={account}
-                search={search}
-                isFlatView={accountView === AccountView.Flat}
-                accountPath={
-                  account.folderId ? folderPaths[account.folderId]?.slice(0, -1) : undefined
-                }
-                onAccess={(e) => {
-                  handlePopUpOpen("accessAccount", e);
-                }}
-                onUpdate={(e) => handlePopUpOpen("updateAccount", e)}
-                onDelete={(e) => handlePopUpOpen("deleteAccount", e)}
-              />
-            ))}
+            {isLoading && <TableSkeleton columns={2} innerKey="pam-accounts" />}
+            {!isLoading && (
+              <>
+                {accountView !== PamAccountView.Flat &&
+                  foldersToRender.map((folder) => (
+                    <PamFolderRow
+                      key={folder.id}
+                      folder={folder}
+                      search={search}
+                      onClick={() => handleFolderClick(folder)}
+                      onUpdate={(e) => handlePopUpOpen("updateFolder", e)}
+                      onDelete={(e) => handlePopUpOpen("deleteFolder", e)}
+                    />
+                  ))}
+                {filteredAccounts.map((account) => (
+                  <PamAccountRow
+                    key={account.id}
+                    account={account}
+                    search={search}
+                    isFlatView={accountView === PamAccountView.Flat}
+                    accountPath={account.folderId ? folderPaths[account.folderId] : undefined}
+                    onAccess={(e) => {
+                      handlePopUpOpen("accessAccount", e);
+                    }}
+                    onUpdate={(e) => handlePopUpOpen("updateAccount", e)}
+                    onDelete={(e) => handlePopUpOpen("deleteAccount", e)}
+                  />
+                ))}
+              </>
+            )}
          </TBody>
        </Table>
-        {Boolean(filteredAccounts.length) && (
+        {Boolean(totalCount) && !isLoading && (
          <Pagination
-            count={filteredAccounts.length}
+            count={totalCount}
            page={page}
            perPage={perPage}
-            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={handlePerPageChange}
          />
        )}
-        {isContentEmpty && (
+        {!isLoading && isContentEmpty && (
          <EmptyState
            title={isSearchEmpty ? "No accounts match search" : "No accounts"}
            icon={isSearchEmpty ? faSearch : faCircleXmark}
@@ -485,7 +460,7 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
        isOpen={popUp.addFolder.isOpen}
        onOpenChange={(isOpen) => handlePopUpToggle("addFolder", isOpen)}
        projectId={projectId}
-        currentFolderId={effectiveFolderIdForFiltering}
+        currentFolderId={currentFolderId}
      />
      <PamAccessAccountModal
        isOpen={popUp.accessAccount.isOpen}
@@ -506,7 +481,7 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => {
        isOpen={popUp.addAccount.isOpen}
        onOpenChange={(isOpen) => handlePopUpToggle("addAccount", isOpen)}
        projectId={projectId}
-        currentFolderId={effectiveFolderIdForFiltering}
+        currentFolderId={currentFolderId}
      />
    </div>
  );
--- a/frontend/src/pages/pam/PamAccountsPage/components/PamAddFolderModal.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAddFolderModal.tsx
@@ -14,8 +14,6 @@ type Props = {
 export const PamAddFolderModal = ({ isOpen, onOpenChange, projectId, currentFolderId }: Props) => {
  const createPamFolder = useCreatePamFolder();

-  console.log({ currentFolderId });
-
  const onSubmit = async (formData: Pick<TPamFolder, "name" | "description">) => {
    await createPamFolder.mutateAsync({
      ...formData,
--- a/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx
@@ -1,11 +1,12 @@
+import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { SingleValue } from "react-select";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

-import { Button, FilterableSelect, FormControl, ModalClose, Spinner } from "@app/components/v2";
+import { Button, FilterableSelect, FormControl, ModalClose } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import { useDebounce, usePopUp } from "@app/hooks";
 import { PamResourceType, useListPamResources } from "@app/hooks/api/pam";

 import { PamAddResourceModal } from "../../PamResourcesPage/components/PamAddResourceModal";
@@ -28,7 +29,17 @@ type FormData = z.infer<typeof formSchema>;

 export const ResourceSelect = ({ onSubmit, projectId }: Props) => {
  const { permission } = useProjectPermission();
-  const { isPending, data: resources } = useListPamResources(projectId);
+
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebounce(search, 350);
+
+  const { isPending, data } = useListPamResources({
+    projectId,
+    limit: 100,
+    search: debouncedSearch
+  });
+
+  const resources = data?.resources || [];

  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["addResource"] as const);

@@ -43,15 +54,6 @@ export const ResourceSelect = ({ onSubmit, projectId }: Props) => {
    ProjectPermissionSub.PamResources
  );

-  if (isPending) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center py-2.5">
-        <Spinner size="lg" className="text-mineshaft-500" />
-        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
-      </div>
-    );
-  }
-
  return (
    <>
      <FormProvider {...form}>
@@ -65,6 +67,12 @@ export const ResourceSelect = ({ onSubmit, projectId }: Props) => {
              <FormControl isError={Boolean(error)} errorText={error?.message} label="Resource">
                <FilterableSelect
                  value={value}
+                  inputValue={search}
+                  onInputChange={(val, actionMeta) => {
+                    if (actionMeta.action === "input-change") {
+                      setSearch(val);
+                    }
+                  }}
                  onChange={(newValue) => {
                    if ((newValue as SingleValue<{ id: string }>)?.id === "_create") {
                      handlePopUpOpen("addResource");
--- a/frontend/src/pages/pam/PamAccountsPage/route.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/route.tsx
@@ -2,12 +2,13 @@ import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

-import { AccountView } from "./components/AccountViewToggle";
+import { PamAccountView } from "@app/hooks/api/pam";
+
 import { PamAccountsPage } from "./PamAccountsPage";

 const PamAccountsPageQueryParamsSchema = z.object({
  search: z.string().optional(),
-  accountView: z.nativeEnum(AccountView).optional(),
+  accountView: z.nativeEnum(PamAccountView).optional(),
  accountPath: z.string().catch("/")
 });

--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/PamResourceForm.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/PamResourceForm.tsx
@@ -11,6 +11,7 @@ import { DiscriminativePick } from "@app/types";
 import { PamResourceHeader } from "../PamResourceHeader";
 import { MySQLResourceForm } from "./MySQLResourceForm";
 import { PostgresResourceForm } from "./PostgresResourceForm";
+import { SSHResourceForm } from "./SSHResourceForm";

 type FormProps = {
  onComplete: (resource: TPamResource) => void;
@@ -51,6 +52,8 @@ const CreateForm = ({ resourceType, onComplete, projectId }: CreateFormProps) =>
      return <PostgresResourceForm onSubmit={onSubmit} />;
    case PamResourceType.MySQL:
      return <MySQLResourceForm onSubmit={onSubmit} />;
+    case PamResourceType.SSH:
+      return <SSHResourceForm onSubmit={onSubmit} />;
    default:
      throw new Error(`Unhandled resource: ${resourceType}`);
  }
@@ -79,6 +82,8 @@ const UpdateForm = ({ resource, onComplete }: UpdateFormProps) => {
      return <PostgresResourceForm resource={resource} onSubmit={onSubmit} />;
    case PamResourceType.MySQL:
      return <MySQLResourceForm resource={resource} onSubmit={onSubmit} />;
+    case PamResourceType.SSH:
+      return <SSHResourceForm resource={resource} onSubmit={onSubmit} />;
    default:
      throw new Error(`Unhandled resource: ${(resource as any).resourceType}`);
  }
--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/SSHResourceForm.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/SSHResourceForm.tsx
@@ -0,0 +1,72 @@
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, ModalClose } from "@app/components/v2";
+import { PamResourceType, TSSHResource } from "@app/hooks/api/pam";
+
+import { SshResourceFields } from "./shared/SshResourceFields";
+import { GenericResourceFields, genericResourceFieldsSchema } from "./GenericResourceFields";
+
+type Props = {
+  resource?: TSSHResource;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const BaseSshConnectionDetailsSchema = z.object({
+  host: z.string().trim().min(1, "Host is required"),
+  port: z.number().int().min(1).max(65535)
+});
+
+const formSchema = genericResourceFieldsSchema.extend({
+  resourceType: z.literal(PamResourceType.SSH),
+  connectionDetails: BaseSshConnectionDetailsSchema
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export const SSHResourceForm = ({ resource, onSubmit }: Props) => {
+  const isUpdate = Boolean(resource);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: resource ?? {
+      resourceType: PamResourceType.SSH,
+      connectionDetails: {
+        host: "",
+        port: 22
+      }
+    }
+  });
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <GenericResourceFields />
+        <SshResourceFields />
+        <div className="mt-6 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Details" : "Create Resource"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SshResourceFields.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SshResourceFields.tsx
@@ -0,0 +1,42 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { FormControl, Input } from "@app/components/v2";
+
+export const SshResourceFields = () => {
+  const { control } = useFormContext();
+
+  return (
+    <div className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3">
+      <div className="mt-[0.675rem] flex items-start gap-2">
+        <Controller
+          name="connectionDetails.host"
+          control={control}
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              className="flex-1"
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Host"
+            >
+              <Input placeholder="example.com or 192.168.1.1" {...field} />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="connectionDetails.port"
+          control={control}
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              className="w-28"
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Port"
+            >
+              <Input type="number" {...field} />
+            </FormControl>
+          )}
+        />
+      </div>
+    </div>
+  );
+};
--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesSection.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesSection.tsx
@@ -1,17 +1,9 @@
-import { ContentLoader } from "@app/components/v2";
 import { useProject } from "@app/context";
-import { useListPamResources } from "@app/hooks/api/pam";

 import { PamResourcesTable } from "./PamResourcesTable";

 export const PamResourcesSection = () => {
  const { currentProject } = useProject();

-  const { data: resources = [], isPending } = useListPamResources(currentProject.id, {
-    refetchInterval: 30000
-  });
-
-  if (isPending) return <ContentLoader />;
-
-  return <PamResourcesTable resources={resources} projectId={currentProject.id} />;
+  return <PamResourcesTable projectId={currentProject.id} />;
 };
--- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx
@@ -27,6 +27,7 @@ import {
  Pagination,
  Table,
  TableContainer,
+  TableSkeleton,
  TBody,
  Th,
  THead,
@@ -39,29 +40,34 @@ import {
  OrgGatewayPermissionActions,
  OrgPermissionSubjects
 } from "@app/context/OrgPermissionContext/types";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
-import { PAM_RESOURCE_TYPE_MAP, PamResourceType, TPamResource } from "@app/hooks/api/pam";
+import {
+  PAM_RESOURCE_TYPE_MAP,
+  PamResourceOrderBy,
+  PamResourceType,
+  useListPamResources
+} from "@app/hooks/api/pam";

 import { PamAddResourceModal } from "./PamAddResourceModal";
 import { PamDeleteResourceModal } from "./PamDeleteResourceModal";
 import { PamResourceRow } from "./PamResourceRow";
 import { PamUpdateResourceModal } from "./PamUpdateResourceModal";

-enum OrderBy {
-  Name = "name"
-}
-
-type Filters = {
-  resourceType: PamResourceType[];
+type PamResourceFilter = {
+  resourceTypes: PamResourceType[];
 };

 type Props = {
  projectId: string;
-  resources: TPamResource[];
 };

-export const PamResourcesTable = ({ projectId, resources }: Props) => {
+export const PamResourcesTable = ({ projectId }: Props) => {
  const navigate = useNavigate({ from: ROUTE_PATHS.Pam.ResourcesPage.path });

  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
@@ -74,12 +80,13 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => {
    from: ROUTE_PATHS.Pam.ResourcesPage.id
  });

-  const [filters, setFilters] = useState<Filters>({
-    resourceType: []
+  const [filter, setFilter] = useState<PamResourceFilter>({
+    resourceTypes: []
  });

  const {
    search,
+    debouncedSearch,
    setSearch,
    setPage,
    page,
@@ -91,51 +98,55 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => {
    orderBy,
    setOrderDirection,
    setOrderBy
-  } = usePagination<OrderBy>(OrderBy.Name, { initPerPage: 20, initSearch });
+  } = usePagination<PamResourceOrderBy>(PamResourceOrderBy.Name, {
+    initPerPage: getUserTablePreference("pamResourcesTable", PreferenceKey.PerPage, 20),
+    initSearch
+  });

-  const filteredResources = useMemo(
-    () =>
-      resources
-        .filter((resource) => {
-          const { name, resourceType } = resource;
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("pamResourcesTable", PreferenceKey.PerPage, newPerPage);
+  };

-          if (filters.resourceType.length && !filters.resourceType.includes(resourceType)) {
-            return false;
-          }
+  const { data, isLoading } = useListPamResources({
+    projectId,
+    offset,
+    limit: perPage,
+    search: debouncedSearch,
+    orderBy,
+    orderDirection,
+    filterResourceTypes: filter.resourceTypes.length ? filter.resourceTypes.join(",") : undefined
+  });

-          const searchValue = search.trim().toLowerCase();
-
-          const { name: resourceTypeName } = PAM_RESOURCE_TYPE_MAP[resourceType];
-
-          return (
-            name.toLowerCase().includes(searchValue) ||
-            resourceTypeName.toLowerCase().includes(searchValue)
-          );
-        })
-        .sort((a, b) => {
-          const [one, two] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
-
-          switch (orderBy) {
-            case OrderBy.Name:
-            default:
-              return one.name.toLowerCase().localeCompare(two.name.toLowerCase());
-          }
-        }),
-    [resources, orderDirection, search, orderBy, filters]
-  );
+  const resources = data?.resources || [];
+  const totalCount = data?.totalCount || 0;

  useResetPageHelper({
-    totalCount: filteredResources.length,
+    totalCount,
    offset,
    setPage
  });

-  const currentPageData = useMemo(
-    () => filteredResources.slice(offset, perPage * page),
-    [filteredResources, offset, perPage, page]
+  const filteredResources = useMemo(
+    () =>
+      resources.filter((resource) => {
+        const { name, resourceType } = resource;
+
+        if (filter.resourceTypes.length && !filter.resourceTypes.includes(resourceType)) {
+          return false;
+        }
+
+        const searchValue = search.trim().toLowerCase();
+
+        return (
+          name.toLowerCase().includes(searchValue) ||
+          resourceType.toLowerCase().includes(searchValue)
+        );
+      }),
+    [resources, search, filter]
  );

-  const handleSort = (column: OrderBy) => {
+  const handleSort = (column: PamResourceOrderBy) => {
    if (column === orderBy) {
      toggleOrderDirection();
      return;
@@ -145,12 +156,13 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => {
    setOrderDirection(OrderByDirection.ASC);
  };

-  const getClassName = (col: OrderBy) => twMerge("ml-2", orderBy === col ? "" : "opacity-30");
+  const getClassName = (col: PamResourceOrderBy) =>
+    twMerge("ml-2", orderBy === col ? "" : "opacity-30");

-  const getColSortIcon = (col: OrderBy) =>
+  const getColSortIcon = (col: PamResourceOrderBy) =>
    orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;

-  const isTableFiltered = Boolean(filters.resourceType.length);
+  const isTableFiltered = Boolean(filter.resourceTypes.length);
  const isContentEmpty = !filteredResources.length;
  const isSearchEmpty = isContentEmpty && (Boolean(search) || isTableFiltered);

@@ -187,43 +199,38 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => {
          </DropdownMenuTrigger>
          <DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
            <DropdownMenuLabel>Resource Type</DropdownMenuLabel>
-            {resources.length ? (
-              [...new Set(resources.map(({ resourceType }) => resourceType))].map((type) => {
-                const { name, image } = PAM_RESOURCE_TYPE_MAP[type];
-
-                return (
-                  <DropdownMenuItem
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setFilters((prev) => ({
-                        ...prev,
-                        resourceType: prev.resourceType.includes(type)
-                          ? prev.resourceType.filter((a) => a !== type)
-                          : [...prev.resourceType, type]
-                      }));
-                    }}
-                    key={type}
-                    icon={
-                      filters.resourceType.includes(type) && (
-                        <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
-                      )
-                    }
-                    iconPos="right"
-                  >
-                    <div className="flex items-center gap-2">
-                      <img
-                        alt={`${name} resource type`}
-                        src={`/images/integrations/${image}`}
-                        className="h-4 w-4"
-                      />
-                      <span>{name}</span>
-                    </div>
-                  </DropdownMenuItem>
-                );
-              })
-            ) : (
-              <DropdownMenuItem isDisabled>No Resources</DropdownMenuItem>
-            )}
+            {Object.entries(PAM_RESOURCE_TYPE_MAP).map(([type, { name, image }]) => {
+              const resourceType = type as PamResourceType;
+              return (
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setFilter((prev) => ({
+                      ...prev,
+                      resourceTypes: prev.resourceTypes.includes(resourceType)
+                        ? prev.resourceTypes.filter((a) => a !== resourceType)
+                        : [...prev.resourceTypes, resourceType]
+                    }));
+                  }}
+                  key={resourceType}
+                  icon={
+                    filter.resourceTypes.includes(resourceType) && (
+                      <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                    )
+                  }
+                  iconPos="right"
+                >
+                  <div className="flex items-center gap-2">
+                    <img
+                      alt={`${name} resource type`}
+                      src={`/images/integrations/${image}`}
+                      className="h-4 w-4"
+                    />
+                    <span>{name}</span>
+                  </div>
+                </DropdownMenuItem>
+              );
+            })}
          </DropdownMenuContent>
        </DropdownMenu>
        <OrgPermissionCan
@@ -263,11 +270,11 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => {
                  Resource
                  <IconButton
                    variant="plain"
-                    className={getClassName(OrderBy.Name)}
+                    className={getClassName(PamResourceOrderBy.Name)}
                    ariaLabel="sort"
-                    onClick={() => handleSort(OrderBy.Name)}
+                    onClick={() => handleSort(PamResourceOrderBy.Name)}
                  >
-                    <FontAwesomeIcon icon={getColSortIcon(OrderBy.Name)} />
+                    <FontAwesomeIcon icon={getColSortIcon(PamResourceOrderBy.Name)} />
                  </IconButton>
                </div>
              </Th>
@@ -275,27 +282,29 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => {
            </Tr>
          </THead>
          <TBody>
-            {currentPageData.map((resource) => (
-              <PamResourceRow
-                key={resource.id}
-                resource={resource}
-                onUpdate={(e) => handlePopUpOpen("updateResource", e)}
-                onDelete={(e) => handlePopUpOpen("deleteResource", e)}
-                search={search.trim().toLowerCase()}
-              />
-            ))}
+            {isLoading && <TableSkeleton columns={2} innerKey="pam-resources" />}
+            {!isLoading &&
+              filteredResources.map((resource) => (
+                <PamResourceRow
+                  key={resource.id}
+                  resource={resource}
+                  onUpdate={(e) => handlePopUpOpen("updateResource", e)}
+                  onDelete={(e) => handlePopUpOpen("deleteResource", e)}
+                  search={search.trim().toLowerCase()}
+                />
+              ))}
          </TBody>
        </Table>
-        {Boolean(filteredResources.length) && (
+        {Boolean(totalCount) && !isLoading && (
          <Pagination
-            count={filteredResources.length}
+            count={totalCount}
            page={page}
            perPage={perPage}
-            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={handlePerPageChange}
          />
        )}
-        {isContentEmpty && (
+        {!isLoading && isContentEmpty && (
          <EmptyState
            title={isSearchEmpty ? "No resources match search" : "No resources"}
            icon={isSearchEmpty ? faSearch : faCircleXmark}
--- a/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx
@@ -78,7 +78,6 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
    // We temporarily show a special license modal for these because we will have to write some code to complete the integration
    if (
      resource === PamResourceType.RDP ||
-      resource === PamResourceType.SSH ||
      resource === PamResourceType.Kubernetes ||
      resource === PamResourceType.MCP ||
      resource === PamResourceType.Redis ||
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/CommandLogView.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/CommandLogView.tsx
@@ -0,0 +1,129 @@
+import { useMemo, useState } from "react";
+import { faChevronRight, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { Input } from "@app/components/v2";
+import { HighlightText } from "@app/components/v2/HighlightText";
+import { TPamCommandLog } from "@app/hooks/api/pam";
+
+import { formatLogContent } from "./PamSessionLogsSection.utils";
+
+type Props = {
+  logs: TPamCommandLog[];
+};
+
+export const CommandLogView = ({ logs }: Props) => {
+  const [expandedLogTimestamps, setExpandedLogTimestamps] = useState<Set<string>>(new Set());
+  const [search, setSearch] = useState("");
+
+  const toggleExpand = (timestamp: string) => {
+    setExpandedLogTimestamps((prev) => {
+      if (prev.has(timestamp)) {
+        return new Set();
+      }
+      return new Set([timestamp]);
+    });
+  };
+
+  const filteredLogs = useMemo(
+    () =>
+      logs.filter((log) => {
+        const searchValue = search.trim().toLowerCase();
+        return (
+          log.input.toLowerCase().includes(searchValue) ||
+          log.output.toLowerCase().includes(searchValue)
+        );
+      }),
+    [logs, search]
+  );
+
+  return (
+    <>
+      <div className="flex gap-2">
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search logs..."
+          className="flex-1 bg-mineshaft-800"
+          containerClassName="bg-transparent"
+        />
+      </div>
+
+      <div className="flex grow flex-col gap-2 overflow-y-auto text-xs">
+        {filteredLogs.length > 0 ? (
+          filteredLogs.map((log, index) => {
+            const isExpanded = search.length || expandedLogTimestamps.has(log.timestamp);
+            const formattedInput = formatLogContent(log.input);
+            const logKey = `${log.timestamp}-${index}`;
+
+            return (
+              <button
+                type="button"
+                key={logKey}
+                className={`flex w-full flex-col rounded-md border border-mineshaft-700 p-3 text-left focus:inset-ring-2 focus:inset-ring-mineshaft-400 focus:outline-hidden ${
+                  isExpanded ? "bg-mineshaft-700" : "bg-mineshaft-800 hover:bg-mineshaft-700"
+                }`}
+                onClick={() => toggleExpand(log.timestamp)}
+              >
+                <div className="flex items-center justify-between text-bunker-400">
+                  <div className="flex items-center gap-2 select-none">
+                    <FontAwesomeIcon
+                      icon={faChevronRight}
+                      className={twMerge(
+                        "size-3 transition-transform duration-100 ease-in-out",
+                        isExpanded && "rotate-90"
+                      )}
+                    />
+                    <span>{new Date(log.timestamp).toLocaleString()}</span>
+                  </div>
+                </div>
+
+                <div
+                  className={`mt-2 font-mono ${
+                    isExpanded ? "break-all whitespace-pre-wrap" : "truncate"
+                  }`}
+                >
+                  <HighlightText text={formattedInput} highlight={search} />
+                </div>
+
+                <div
+                  className={twMerge(
+                    "grid transition-all duration-100 ease-in-out",
+                    isExpanded && log.output ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                  )}
+                >
+                  <div className="overflow-hidden">
+                    {log.output && (
+                      <div className="pt-2 text-bunker-300">
+                        <HighlightText text={log.output} highlight={search} />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </button>
+            );
+          })
+        ) : (
+          <div className="flex grow items-center justify-center text-bunker-300">
+            {search.length ? (
+              <div className="text-center">
+                <div className="mb-2">No logs match search criteria</div>
+              </div>
+            ) : (
+              <div className="text-center">
+                <div className="mb-2">Session logs are not yet available</div>
+                <div className="text-xs text-bunker-400">
+                  Logs will be uploaded after the session duration has elapsed.
+                  <br />
+                  If logs do not appear after some time, please contact your Gateway administrators.
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -1,44 +1,19 @@
-import { useMemo, useState } from "react";
-import { faChevronRight, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
+import { PamResourceType, TPamCommandLog, TPamSession, TTerminalEvent } from "@app/hooks/api/pam";

-import { Input } from "@app/components/v2";
-import { HighlightText } from "@app/components/v2/HighlightText";
-import { TPamSession } from "@app/hooks/api/pam";
-
-import { formatLogContent } from "./PamSessionLogsSection.utils";
+import { CommandLogView } from "./CommandLogView";
+import { TerminalEventView } from "./TerminalEventView";

 type Props = {
  session: TPamSession;
 };

 export const PamSessionLogsSection = ({ session }: Props) => {
-  const [expandedLogTimestamps, setExpandedLogTimestamps] = useState<Set<string>>(new Set());
-  const [search, setSearch] = useState("");
-
-  const toggleExpand = (timestamp: string) => {
-    setExpandedLogTimestamps((prev) => {
-      if (prev.has(timestamp)) {
-        return new Set();
-      }
-      return new Set([timestamp]);
-    });
-  };
-
-  const filteredLogs = useMemo(
-    () =>
-      session.commandLogs.filter((log) => {
-        const { input, output } = log;
-
-        const searchValue = search.trim().toLowerCase();
-
-        return (
-          input.toLowerCase().includes(searchValue) || output.toLowerCase().includes(searchValue)
-        );
-      }),
-    [session.commandLogs, search]
-  );
+  // Determine log type based on resource type
+  const isSSHSession = session.resourceType === PamResourceType.SSH;
+  const isDatabaseSession =
+    session.resourceType === PamResourceType.Postgres ||
+    session.resourceType === PamResourceType.MySQL;
+  const hasLogs = session.logs.length > 0;

  return (
    <div className="flex h-full w-full flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
@@ -46,91 +21,20 @@ export const PamSessionLogsSection = ({ session }: Props) => {
        <h3 className="text-lg font-medium text-mineshaft-100">Session Logs</h3>
      </div>

-      <div className="flex gap-2">
-        <Input
-          value={search}
-          onChange={(e) => {
-            const newSearch = e.target.value;
-            setSearch(newSearch);
-          }}
-          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          placeholder="Search logs..."
-          className="flex-1 bg-mineshaft-800"
-          containerClassName="bg-transparent"
-        />
-      </div>
-      <div className="flex grow flex-col gap-2 overflow-y-auto text-xs">
-        {filteredLogs.length > 0 ? (
-          filteredLogs.map((log) => {
-            const isExpanded = search.length || expandedLogTimestamps.has(log.timestamp);
-            const formattedInput = formatLogContent(log.input);
-
-            return (
-              <button
-                type="button"
-                key={log.timestamp}
-                className={`flex w-full flex-col rounded-md border border-mineshaft-700 p-3 text-left focus:inset-ring-2 focus:inset-ring-mineshaft-400 focus:outline-hidden ${
-                  isExpanded ? "bg-mineshaft-700" : "bg-mineshaft-800 hover:bg-mineshaft-700"
-                }`}
-                onClick={() => toggleExpand(log.timestamp)}
-              >
-                <div className="flex items-center justify-between text-bunker-400">
-                  <div className="flex items-center gap-2 select-none">
-                    <FontAwesomeIcon
-                      icon={faChevronRight}
-                      className={twMerge(
-                        "size-3 transition-transform duration-100 ease-in-out",
-                        isExpanded && "rotate-90"
-                      )}
-                    />
-                    <span>{new Date(log.timestamp).toLocaleString()}</span>
-                  </div>
-                </div>
-
-                <div
-                  className={`mt-2 font-mono ${
-                    isExpanded ? "break-all whitespace-pre-wrap" : "truncate"
-                  }`}
-                >
-                  <HighlightText text={formattedInput} highlight={search} />
-                </div>
-
-                <div
-                  className={twMerge(
-                    "grid transition-all duration-100 ease-in-out",
-                    isExpanded && log.output ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-                  )}
-                >
-                  <div className="overflow-hidden">
-                    {log.output && (
-                      <div className="pt-2 text-bunker-300">
-                        <HighlightText text={log.output} highlight={search} />
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </button>
-            );
-          })
-        ) : (
-          <div className="flex grow items-center justify-center text-bunker-300">
-            {search.length ? (
-              <div className="text-center">
-                <div className="mb-2">No logs match search criteria</div>
-              </div>
-            ) : (
-              <div className="text-center">
-                <div className="mb-2">Session logs are not yet available</div>
-                <div className="text-xs text-bunker-400">
-                  Logs will be uploaded after the session duration has elapsed.
-                  <br />
-                  If logs do not appear after some time, please contact your Gateway administrators.
-                </div>
-              </div>
-            )}
+      {isDatabaseSession && hasLogs && <CommandLogView logs={session.logs as TPamCommandLog[]} />}
+      {isSSHSession && hasLogs && <TerminalEventView events={session.logs as TTerminalEvent[]} />}
+      {!hasLogs && (
+        <div className="flex grow items-center justify-center text-bunker-300">
+          <div className="text-center">
+            <div className="mb-2">Session logs are not yet available</div>
+            <div className="text-xs text-bunker-400">
+              Logs will be uploaded after the session duration has elapsed.
+              <br />
+              If logs do not appear after some time, please contact your Gateway administrators.
+            </div>
          </div>
-        )}
-      </div>
+        </div>
+      )}
    </div>
  );
 };
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/TerminalEventView.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/TerminalEventView.tsx
@@ -0,0 +1,86 @@
+import { useMemo, useState } from "react";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Input } from "@app/components/v2";
+import { HighlightText } from "@app/components/v2/HighlightText";
+import { TTerminalEvent } from "@app/hooks/api/pam";
+
+import { aggregateTerminalEvents } from "./terminal-utils";
+
+type Props = {
+  events: TTerminalEvent[];
+};
+
+export const TerminalEventView = ({ events }: Props) => {
+  const [search, setSearch] = useState("");
+
+  const aggregatedEvents = useMemo(() => aggregateTerminalEvents(events), [events]);
+
+  const filteredEvents = useMemo(
+    () =>
+      aggregatedEvents.filter((event) => {
+        const searchValue = search.trim().toLowerCase();
+        if (!searchValue) return true;
+        return event.data.toLowerCase().includes(searchValue);
+      }),
+    [aggregatedEvents, search]
+  );
+
+  return (
+    <>
+      <div className="flex gap-2">
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search terminal output..."
+          className="flex-1 bg-mineshaft-800"
+          containerClassName="bg-transparent"
+        />
+      </div>
+
+      <div className="flex grow flex-col gap-2 overflow-y-auto text-xs">
+        {filteredEvents.length > 0 ? (
+          filteredEvents.map((event, index) => {
+            const eventKey = `${event.timestamp}-${index}`;
+
+            return (
+              <div
+                key={eventKey}
+                className="flex w-full flex-col rounded-md border border-mineshaft-700 bg-mineshaft-800 p-3"
+              >
+                <div className="flex items-center justify-between text-bunker-400">
+                  <div className="flex items-center gap-2 text-xs">
+                    <span>{new Date(event.timestamp).toLocaleString()}</span>
+                  </div>
+                </div>
+
+                <div className="mt-2 font-mono whitespace-pre-wrap text-bunker-100">
+                  <HighlightText text={event.data} highlight={search} />
+                </div>
+              </div>
+            );
+          })
+        ) : (
+          <div className="flex grow items-center justify-center text-bunker-300">
+            {search.length ? (
+              <div className="text-center">
+                <div className="mb-2">No terminal output matches search criteria</div>
+              </div>
+            ) : (
+              <div className="text-center">
+                <div className="mb-2">Terminal session logs are not yet available</div>
+                <div className="text-xs text-bunker-400">
+                  Logs will be uploaded after the session duration has elapsed.
+                  <br />
+                  If logs do not appear after some time, please contact your Gateway administrators.
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/terminal-utils.ts
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/terminal-utils.ts
@@ -0,0 +1,72 @@
+import { TTerminalEvent } from "@app/hooks/api/pam";
+
+// Strip ANSI escape codes from terminal output
+export const stripAnsiCodes = (text: string): string => {
+  // Remove ANSI escape sequences
+  // eslint-disable-next-line no-control-regex
+  return text.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, "").replace(/\x1b\][0-9];[^\x07]*\x07/g, "");
+};
+
+export type AggregatedTerminalEvent = {
+  timestamp: string;
+  eventType: string;
+  data: string;
+  elapsedTime: number;
+  eventCount: number;
+};
+
+// Aggregate consecutive output events to avoid character-by-character display
+export const aggregateTerminalEvents = (events: TTerminalEvent[]): AggregatedTerminalEvent[] => {
+  // Filter to only show output events (input is echoed, so redundant)
+  const outputEvents = events.filter((e) => e.eventType === "output");
+
+  if (outputEvents.length === 0) return [];
+
+  // First, combine all events into one string to process
+  const allText = outputEvents
+    .map((e) => {
+      try {
+        return stripAnsiCodes(atob(e.data));
+      } catch {
+        return "";
+      }
+    })
+    .join("");
+
+  // Split on lines that contain shell prompts
+  // Pattern matches: user@hostname:path# or user@hostname:path$
+  const promptPattern = /^[\w-]+@[\w-]+[^\s]*[:#$]\s+/;
+
+  const lines = allText.split("\n");
+  const segments: string[] = [];
+  let currentSegment: string[] = [];
+
+  lines.forEach((line) => {
+    const hasPrompt = promptPattern.test(line);
+
+    if (hasPrompt && currentSegment.length > 0) {
+      // Found a new prompt, save current segment and start new one
+      segments.push(currentSegment.join("\n"));
+      currentSegment = [line];
+    } else {
+      // Add line to current segment
+      currentSegment.push(line);
+    }
+  });
+
+  // Add the last segment
+  if (currentSegment.length > 0) {
+    segments.push(currentSegment.join("\n"));
+  }
+
+  // Filter out empty segments and convert to aggregated events
+  const validSegments = segments.filter((seg) => seg.trim().length > 0);
+
+  return validSegments.map((segment) => ({
+    timestamp: outputEvents[0].timestamp,
+    eventType: "output",
+    data: segment,
+    elapsedTime: outputEvents[0].elapsedTime,
+    eventCount: Math.ceil(outputEvents.length / validSegments.length)
+  }));
+};
--- a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx
+++ b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import {
  faBoxOpen,
  faChevronDown,
@@ -25,18 +25,19 @@ import {
 } from "@app/components/v2";
 import { HighlightText } from "@app/components/v2/HighlightText";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
-import { PAM_RESOURCE_TYPE_MAP, TPamSession } from "@app/hooks/api/pam";
+import { PAM_RESOURCE_TYPE_MAP, TPamSession, TTerminalEvent } from "@app/hooks/api/pam";

 import { formatLogContent } from "../../PamSessionsByIDPage/components/PamSessionLogsSection.utils";
+import { aggregateTerminalEvents } from "../../PamSessionsByIDPage/components/terminal-utils";
 import { PamSessionStatusBadge } from "./PamSessionStatusBadge";

 type Props = {
  session: TPamSession;
  search: string;
-  filteredCommandLogs: TPamSession["commandLogs"];
+  filteredLogs: TPamSession["logs"];
 };

-export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) => {
+export const PamSessionRow = ({ session, search, filteredLogs }: Props) => {
  const router = useRouter();
  const [showAllLogs, setShowAllLogs] = useState(false);

@@ -55,8 +56,24 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =

  const { image, name: resourceTypeName } = PAM_RESOURCE_TYPE_MAP[resourceType];

+  // Check if logs are terminal events and aggregate them
+  const processedLogs = useMemo(() => {
+    if (filteredLogs.length === 0) return [];
+
+    // Check if first log is a terminal event
+    const isTerminalEvents = "data" in filteredLogs[0];
+
+    if (isTerminalEvents) {
+      // Aggregate terminal events for better display
+      return aggregateTerminalEvents(filteredLogs as TTerminalEvent[]);
+    }
+
+    // Return command logs as-is
+    return filteredLogs;
+  }, [filteredLogs]);
+
  const LOGS_TO_SHOW = 5;
-  const logsToShow = showAllLogs ? filteredCommandLogs : filteredCommandLogs.slice(0, LOGS_TO_SHOW);
+  const logsToShow = showAllLogs ? processedLogs : processedLogs.slice(0, LOGS_TO_SHOW);

  return (
    <>
@@ -135,8 +152,8 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
                </DropdownMenuTrigger>
                <DropdownMenuContent sideOffset={2} align="end">
                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Edit}
-                    a={ProjectPermissionSub.PamResources}
+                    I={ProjectPermissionActions.Read}
+                    a={ProjectPermissionSub.PamSessions}
                  >
                    {(isAllowed: boolean) => (
                      <DropdownMenuItem
@@ -157,32 +174,56 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
        </Td>
      </Tr>

-      {filteredCommandLogs.length > 0 && (
+      {filteredLogs.length > 0 && (
        <Tr>
          <Td colSpan={5} className="py-3 text-xs">
            {logsToShow.map((log) => {
-              const formattedInput = formatLogContent(log.input);
+              // Handle command logs (database sessions)
+              if ("input" in log && "output" in log) {
+                const formattedInput = formatLogContent(log.input);

-              return (
-                <div
-                  key={`${id}-log-${log.timestamp}`}
-                  className="mb-4 flex flex-col gap-1 last:mb-0"
-                >
-                  <div className="flex items-center gap-1.5 text-bunker-400">
-                    <FontAwesomeIcon icon={faTerminal} className="size-3" />
-                    <span>{new Date(log.timestamp).toLocaleString()}</span>
-                  </div>
+                return (
+                  <div
+                    key={`${id}-log-${log.timestamp}`}
+                    className="mb-4 flex flex-col gap-1 last:mb-0"
+                  >
+                    <div className="flex items-center gap-1.5 text-bunker-400">
+                      <FontAwesomeIcon icon={faTerminal} className="size-3" />
+                      <span>{new Date(log.timestamp).toLocaleString()}</span>
+                    </div>

-                  <div className="font-mono break-all whitespace-pre-wrap">
-                    <HighlightText text={formattedInput} highlight={search} />
+                    <div className="font-mono break-all whitespace-pre-wrap">
+                      <HighlightText text={formattedInput} highlight={search} />
+                    </div>
+                    <div className="font-mono text-bunker-300">
+                      <HighlightText text={log.output.trim()} highlight={search} />
+                    </div>
                  </div>
-                  <div className="font-mono text-bunker-300">
-                    <HighlightText text={log.output.trim()} highlight={search} />
+                );
+              }
+
+              // Handle aggregated terminal events (SSH sessions)
+              if ("data" in log && typeof log.data === "string") {
+                return (
+                  <div
+                    key={`${id}-log-${log.timestamp}`}
+                    className="mb-4 flex flex-col gap-1 last:mb-0"
+                  >
+                    <div className="flex items-center gap-1.5 text-bunker-400">
+                      <FontAwesomeIcon icon={faTerminal} className="size-3" />
+                      <span>{new Date(log.timestamp).toLocaleString()}</span>
+                    </div>
+
+                    <div className="font-mono break-all whitespace-pre-wrap text-bunker-300">
+                      <HighlightText text={log.data.trim()} highlight={search} />
+                    </div>
                  </div>
-                </div>
-              );
+                );
+              }
+
+              return null;
            })}
-            {filteredCommandLogs.length > LOGS_TO_SHOW && (
+            {filteredLogs.length > LOGS_TO_SHOW && (
              <div className="mt-2">
                <Button
                  variant="link"
@@ -193,7 +234,7 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
                >
                  {showAllLogs
                    ? "Show less"
-                    : `Show ${filteredCommandLogs.length - LOGS_TO_SHOW} more log${filteredCommandLogs.length - LOGS_TO_SHOW === 1 ? "" : "s"}`}
+                    : `Show ${filteredLogs.length - LOGS_TO_SHOW} more log${filteredLogs.length - LOGS_TO_SHOW === 1 ? "" : "s"}`}
                </Button>
              </div>
            )}
--- a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionsTable.tsx
+++ b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionsTable.tsx
@@ -113,7 +113,7 @@ export const PamSessionsTable = ({ sessions }: Props) => {
        id,
        resourceName,
        userId,
-        commandLogs
+        logs
      } = session;

      const { name: resourceTypeName } = PAM_RESOURCE_TYPE_MAP[resourceType];
@@ -131,11 +131,25 @@ export const PamSessionsTable = ({ sessions }: Props) => {

      const filteredLogs =
        searchValue.length >= 2
-          ? commandLogs.filter(
-              (log) =>
-                log.input.toLowerCase().includes(searchValue) ||
-                log.output.toLowerCase().includes(searchValue)
-            )
+          ? logs.filter((log) => {
+              // Handle command logs (database sessions)
+              if ("input" in log && "output" in log) {
+                return (
+                  log.input.toLowerCase().includes(searchValue) ||
+                  log.output.toLowerCase().includes(searchValue)
+                );
+              }
+              // Handle terminal events (SSH sessions)
+              if ("data" in log) {
+                try {
+                  const decodedData = atob(log.data);
+                  return decodedData.toLowerCase().includes(searchValue);
+                } catch {
+                  return false;
+                }
+              }
+              return false;
+            })
          : [];

      return {
@@ -385,7 +399,7 @@ export const PamSessionsTable = ({ sessions }: Props) => {
                key={session.id}
                session={session}
                search={search.trim().toLowerCase()}
-                filteredCommandLogs={filteredLogs}
+                filteredLogs={filteredLogs}
              />
            ))}
          </TBody>