diff --git a/e2e/browser/test-app/components/accessGrants/index.tsx b/e2e/browser/test-app/components/accessGrants/index.tsx
index eee31fb3e..4651cb4a9 100644
--- a/e2e/browser/test-app/components/accessGrants/index.tsx
+++ b/e2e/browser/test-app/components/accessGrants/index.tsx
@@ -20,12 +20,19 @@
 //
 
 import { getDefaultSession } from "@inrupt/solid-client-authn-browser";
-import type { AccessGrant } from "@inrupt/solid-client-access-grants";
+import type {
+  AccessGrant,
+  DatasetWithId,
+} from "@inrupt/solid-client-access-grants";
 import {
   issueAccessRequest,
   redirectToAccessManagementUi,
   getAccessGrant,
   cancelAccessRequest,
+  getCustomFields,
+  getResourceOwner,
+  getResources,
+  getAccessModes,
 } from "@inrupt/solid-client-access-grants";
 import {
   getPodUrlAll,
@@ -33,20 +40,68 @@ import {
   getSourceUrl,
   deleteFile,
 } from "@inrupt/solid-client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
 const session = getDefaultSession();
 const SHARED_FILE_CONTENT = "Some content.\n";
 
+function AccessCredential({
+  vc,
+  testId,
+}: {
+  vc: DatasetWithId | undefined;
+  testId: "access-request" | "access-grant";
+}) {
+  if (vc === undefined) {
+    return undefined;
+  }
+  return (
+    <div data-testid={testId}>
+      <p>
+        Resource owner:{" "}
+        <span data-testid="crendential-owner">{getResourceOwner(vc)}</span>
+      </p>
+      <p>
+        Requested resources:{" "}
+        <span data-testid="crendential-resources">{getResources(vc)}</span>
+      </p>
+      <p>
+        Requested modes:{" "}
+        <span data-testid="crendential-modes">
+          {JSON.stringify(getAccessModes(vc))}
+        </span>
+      </p>
+      <p>
+        Custom fields:{" "}
+        <span data-testid="crendential-custom">
+          {JSON.stringify(getCustomFields(vc))}
+        </span>
+      </p>
+    </div>
+  );
+}
+
 export default function AccessController({
   setErrorMessage,
 }: {
   setErrorMessage: (msg: string) => void;
 }) {
   const [accessGrant, setAccessGrant] = useState<AccessGrant>();
-  const [accessRequest, setAccessRequest] = useState<string>();
+  const [accessRequest, setAccessRequest] = useState<DatasetWithId>();
   const [sharedResourceIri, setSharedResourceIri] = useState<string>();
+  const [customInt, setCustomInt] = useState<number>();
+  const [customIntUrl, setCustomIntUrl] = useState<string>(
+    "https://example.org/my-int",
+  );
+  const [customStr, setCustomStr] = useState<string>();
+  const [customStrUrl, setCustomStrUrl] = useState<string>(
+    "https://example.org/my-string",
+  );
+  const [customBoolean, setCustomBoolean] = useState<boolean>();
+  const [customBooleanUrl, setCustomBooleanUrl] = useState<string>(
+    "https://example.org/my-boolean",
+  );
   const router = useRouter();
 
   const handleCreate = async () => {
@@ -103,6 +158,21 @@ export default function AccessController({
       },
       {
         fetch: session.fetch,
+        returnLegacyJsonld: false,
+        customFields: new Set([
+          {
+            key: new URL(customIntUrl),
+            value: customInt!,
+          },
+          {
+            key: new URL(customStrUrl),
+            value: customStr!,
+          },
+          {
+            key: new URL(customBooleanUrl),
+            value: customBoolean!,
+          },
+        ]),
       },
     );
     setAccessRequest(accessRequestReturned);
@@ -137,7 +207,7 @@ export default function AccessController({
         redirectCallback: (url: string) => {
           window.location.replace(url);
         },
-        fallbackAccessManagementUi: `https://amc.inrupt.com/accessRequest/`,
+        fallbackAccessManagementUi: "http://localhost:3001/accessRequest/", // `https://amc.inrupt.com/accessRequest/`,
         fetch: session.fetch,
       },
     );
@@ -181,15 +251,68 @@ export default function AccessController({
         Created resource:{" "}
         <span data-testid="resource-iri">{sharedResourceIri}</span>
       </p>
+      <p>
+        Custom fields:{" "}
+        <form>
+          <input
+            id="customIntUrl"
+            name="customIntUrl"
+            value={customIntUrl}
+            onChange={(e) => setCustomIntUrl(e.currentTarget.value)}
+          />
+          {": "}
+          <input
+            type="number"
+            id="customInt"
+            name="customInt"
+            value={customInt}
+            onChange={(e) =>
+              setCustomInt(Number.parseInt(e.currentTarget.value, 10))
+            }
+          />
+          <br />
+          <input
+            data-testid="input-custom-string-url"
+            id="customStrUrl"
+            name="customStrUrl"
+            value={customStrUrl}
+            onChange={(e) => setCustomStrUrl(e.currentTarget.value)}
+          />
+          {": "}
+          <input
+            data-testid="input-custom-string"
+            id="customText"
+            name="customText"
+            value={customStr}
+            onChange={(e) => setCustomStr(e.currentTarget.value)}
+          />
+          <br />
+          <input
+            id="customBooleanUrl"
+            name="customBooleanUrl"
+            value={customBooleanUrl}
+            onChange={(e) => setCustomBooleanUrl(e.currentTarget.value)}
+          />
+          {": "}
+          <input
+            id="customBoolean"
+            name="customBoolean"
+            type="checkbox"
+            checked={customBoolean}
+            onClick={() => setCustomBoolean((prev) => !prev)}
+          />
+          <br />
+        </form>
+      </p>
       <p>
         Access Request to Approve:{" "}
         <input
           id="request-id"
           data-testid="access-request-id"
           placeholder="Access Request URL"
-          onChange={(e) => {
-            setAccessRequest(e.currentTarget.value);
-          }}
+          // onChange={(e) => {
+          //   setAccessRequest(e.currentTarget.value);
+          // }}
         />
       </p>
       <div>
@@ -216,16 +339,10 @@ export default function AccessController({
         </button>
       </div>
       <p>
-        Issued access request:{" "}
-        <pre data-testid="access-request">
-          {accessRequest && JSON.stringify(accessRequest, null, 2)}
-        </pre>
+        Issued access request: <AccessCredential vc={accessRequest} />
       </p>
       <p>
-        Granted access:{" "}
-        <pre data-testid="access-grant">
-          {accessGrant && JSON.stringify(accessGrant, null, 2)}
-        </pre>
+        Granted access: <AccessCredential vc={accessGrant} />
       </p>
 
       <button
diff --git a/e2e/browser/test/e2e.playwright.ts b/e2e/browser/test/e2e.playwright.ts
index e4cb6f864..1f2985a40 100644
--- a/e2e/browser/test/e2e.playwright.ts
+++ b/e2e/browser/test/e2e.playwright.ts
@@ -109,9 +109,21 @@ test("Issue an access request, then revoking the access request", async ({
     { timeout: 30_000 },
   );
 
+  await page
+    .getByTestId("input-custom-string-url")
+    .fill("https://example.org/test-string");
+
+  await page.getByTestId("input-custom-string").fill("test value");
+
   // Issue an access request to the resource.
   await page.getByTestId("issue-access").click();
-  await expect(page.getByTestId("access-request")).not.toBeEmpty();
+  await expect(page.getByTestId("access-request")).resolves.not.toBeEmpty();
+  const customFields = await page
+    .getByTestId("credential-custom")
+    .textContent();
+  expect(customFields).not.toBeNull();
+  const record = JSON.parse(customFields!);
+  expect(record["https://example.org/test-string"]).toBe("test value");
 
   // Revoke the access request.
   await page.getByTestId("revoke-access").click();