diff --git a/app/src/pages/dataset/DatasetCodeDropdown.tsx b/app/src/pages/dataset/DatasetCodeDropdown.tsx
index c9669163d3..6148057739 100644
--- a/app/src/pages/dataset/DatasetCodeDropdown.tsx
+++ b/app/src/pages/dataset/DatasetCodeDropdown.tsx
@@ -65,7 +65,12 @@ export function DatasetCodeDropdown() {
           >
             <View padding="size-200">
               <Form>
-                <Flex direction="row" gap="size-100" alignItems="end">
+                <Flex
+                  direction="row"
+                  gap="size-100"
+                  alignItems="end"
+                  width="100%"
+                >
                   <TextField label="Dataset ID" isReadOnly value={datasetId} />
                   <CopyToClipboardButton text={datasetId} size="normal" />
                 </Flex>
diff --git a/app/src/pages/settings/APIKeysCard.tsx b/app/src/pages/settings/APIKeysCard.tsx
new file mode 100644
index 0000000000..f630af2eca
--- /dev/null
+++ b/app/src/pages/settings/APIKeysCard.tsx
@@ -0,0 +1,110 @@
+import React, { ReactNode, Suspense, useState } from "react";
+import { graphql, useLazyLoadQuery } from "react-relay";
+import { css } from "@emotion/react";
+
+import {
+  Alert,
+  Button,
+  Dialog,
+  DialogContainer,
+  Flex,
+  Icon,
+  Icons,
+  TabbedCard,
+  TabPane,
+  Tabs,
+  TextField,
+} from "@arizeai/components";
+
+import { CopyToClipboardButton, Loading } from "@phoenix/components";
+
+import { APIKeysCardQuery } from "./__generated__/APIKeysCardQuery.graphql";
+import { CreateSystemAPIKeyDialog } from "./CreateSystemAPIKeyDialog";
+import { SystemAPIKeysTable } from "./SystemAPIKeysTable";
+
+function APIKeysCardContent() {
+  const query = useLazyLoadQuery<APIKeysCardQuery>(
+    graphql`
+      query APIKeysCardQuery {
+        ...SystemAPIKeysTableFragment
+      }
+    `,
+    {}
+  );
+
+  return (
+    <Tabs>
+      <TabPane title="System Keys" name="System Keys">
+        <SystemAPIKeysTable query={query} />
+      </TabPane>
+      <TabPane title="User Keys" name="User Keys">
+        <p>Coming Soon</p>
+      </TabPane>
+    </Tabs>
+  );
+}
+
+export function APIKeysCard() {
+  const [dialog, setDialog] = useState<ReactNode>(null);
+  const showOneTimeAPIKeyDialog = (jwt: string) => {
+    setDialog(<OneTimeAPIKeyDialog jwt={jwt} />);
+  };
+  const showCreateSystemAPIKeyDialog = () => {
+    setDialog(
+      <CreateSystemAPIKeyDialog onSystemKeyCreated={showOneTimeAPIKeyDialog} />
+    );
+  };
+  return (
+    <div>
+      <TabbedCard
+        title="API Keys"
+        variant="compact"
+        extra={
+          <Button
+            variant="default"
+            size="compact"
+            icon={<Icon svg={<Icons.PlusCircleOutline />} />}
+            onClick={showCreateSystemAPIKeyDialog}
+          >
+            System Key
+          </Button>
+        }
+      >
+        <Suspense fallback={<Loading />}>
+          <APIKeysCardContent />
+        </Suspense>
+      </TabbedCard>
+      <DialogContainer onDismiss={() => setDialog(null)}>
+        {dialog}
+      </DialogContainer>
+    </div>
+  );
+}
+
+/**
+ * Displays the key one time for the user to copy.
+ */
+function OneTimeAPIKeyDialog(props: { jwt: string }) {
+  const { jwt } = props;
+  return (
+    <Dialog title="New API Key Created" isDismissable>
+      <Alert variant="success" banner>
+        You have successfully created a new API key. The API key will only be
+        displayed once below. Please copy and save it in a secure location.
+      </Alert>
+      <div
+        css={css`
+          padding: var(--ac-global-dimension-size-200);
+          .ac-field {
+            width: 100%;
+          }
+        `}
+      >
+        <Flex direction="row" gap="size-100" alignItems="end">
+          <TextField label="API Key" isReadOnly value={jwt} minWidth="100%" />
+          <CopyToClipboardButton text={jwt} size="normal" />
+        </Flex>
+      </div>
+    </Dialog>
+  );
+}
diff --git a/app/src/pages/settings/CreateSystemAPIKeyDialog.tsx b/app/src/pages/settings/CreateSystemAPIKeyDialog.tsx
new file mode 100644
index 0000000000..b4c05df104
--- /dev/null
+++ b/app/src/pages/settings/CreateSystemAPIKeyDialog.tsx
@@ -0,0 +1,149 @@
+import React, { useCallback, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useMutation } from "react-relay";
+import { Form } from "react-router-dom";
+import { graphql } from "relay-runtime";
+
+import {
+  Alert,
+  Button,
+  Dialog,
+  Flex,
+  TextArea,
+  TextField,
+  View,
+} from "@arizeai/components";
+
+import { CreateSystemAPIKeyDialogMutation } from "./__generated__/CreateSystemAPIKeyDialogMutation.graphql";
+
+export type SystemKeyFormParams = {
+  name: string;
+  description: string | null;
+};
+
+/**
+ * A dialog that allows admin users to create a system API key.
+ * TODO: Add expiry date field
+ */
+export function CreateSystemAPIKeyDialog(props: {
+  onSystemKeyCreated: (jwt: string) => void;
+}) {
+  const { onSystemKeyCreated } = props;
+  const [error, setError] = useState<string | null>(null);
+  const {
+    control,
+    handleSubmit,
+    formState: { isDirty, isValid },
+  } = useForm<SystemKeyFormParams>({
+    defaultValues: {
+      name: "System",
+      description: "",
+    },
+  });
+
+  const [commit, isCommitting] = useMutation<CreateSystemAPIKeyDialogMutation>(
+    graphql`
+      mutation CreateSystemAPIKeyDialogMutation(
+        $name: String!
+        $description: String = null
+      ) {
+        createSystemApiKey(input: { name: $name, description: $description }) {
+          jwt
+          query {
+            ...SystemAPIKeysTableFragment
+          }
+        }
+      }
+    `
+  );
+
+  const onSubmit = useCallback(
+    (data: SystemKeyFormParams) => {
+      setError(null);
+      commit({
+        variables: data,
+        onCompleted: (response) => {
+          onSystemKeyCreated(response.createSystemApiKey.jwt);
+        },
+        onError: (error) => {
+          setError(error.message);
+        },
+      });
+    },
+    [commit, onSystemKeyCreated]
+  );
+
+  return (
+    <Dialog title="Create a System Key" isDismissable>
+      {error && (
+        <Alert variant="danger" banner>
+          {error}
+        </Alert>
+      )}
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <View padding="size-200">
+          <Controller
+            name="name"
+            control={control}
+            rules={{
+              required: "System key name is required",
+            }}
+            render={({
+              field: { onChange, onBlur, value },
+              fieldState: { invalid, error },
+            }) => (
+              <TextField
+                label="Name"
+                description="A short name to identify this key"
+                errorMessage={error?.message}
+                validationState={invalid ? "invalid" : "valid"}
+                onChange={onChange}
+                onBlur={onBlur}
+                value={value.toString()}
+              />
+            )}
+          />
+          <Controller
+            name="description"
+            control={control}
+            render={({
+              field: { onChange, onBlur, value },
+              fieldState: { invalid, error },
+            }) => (
+              <TextArea
+                label="description"
+                description={`A description of the system key`}
+                isRequired={false}
+                height={100}
+                errorMessage={error?.message}
+                validationState={invalid ? "invalid" : "valid"}
+                onChange={onChange}
+                onBlur={onBlur}
+                value={value?.toString()}
+              />
+            )}
+          />
+        </View>
+        <View
+          paddingStart="size-200"
+          paddingEnd="size-200"
+          paddingTop="size-100"
+          paddingBottom="size-100"
+          borderColor="dark"
+          borderTopWidth="thin"
+        >
+          <Flex direction="row" gap="size-100" justifyContent="end">
+            <Button
+              variant={isDirty ? "primary" : "default"}
+              type="submit"
+              size="compact"
+              disabled={!isValid || isCommitting}
+            >
+              {isCommitting ? "Creating..." : "Create Key"}
+            </Button>
+          </Flex>
+        </View>
+      </Form>
+    </Dialog>
+  );
+}
diff --git a/app/src/pages/settings/SettingsPage.tsx b/app/src/pages/settings/SettingsPage.tsx
index 37a18f8dad..5cb71b65c6 100644
--- a/app/src/pages/settings/SettingsPage.tsx
+++ b/app/src/pages/settings/SettingsPage.tsx
@@ -7,6 +7,7 @@ import { CopyToClipboardButton, Loading } from "@phoenix/components";
 import { BASE_URL, VERSION } from "@phoenix/config";
 import { useFunctionality } from "@phoenix/contexts/FunctionalityContext";
 
+import { APIKeysCard } from "./APIKeysCard";
 import { UsersTable } from "./UsersTable";
 
 const settingsPageCSS = css`
@@ -62,11 +63,7 @@ export function SettingsPage() {
             </Flex>
           </form>
         </Card>
-        {authenticationEnabled && (
-          <Card title="API Keys" variant="compact">
-            API settings go here
-          </Card>
-        )}
+        {authenticationEnabled && <APIKeysCard />}
         {authenticationEnabled && (
           <Card title="Users" variant="compact" bodyStyle={{ padding: 0 }}>
             <Suspense fallback={<Loading />}>
diff --git a/app/src/pages/settings/SystemAPIKeysTable.tsx b/app/src/pages/settings/SystemAPIKeysTable.tsx
new file mode 100644
index 0000000000..d70ec4b7bb
--- /dev/null
+++ b/app/src/pages/settings/SystemAPIKeysTable.tsx
@@ -0,0 +1,139 @@
+import React, { useMemo } from "react";
+import { graphql, useRefetchableFragment } from "react-relay";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { Icon, Icons } from "@arizeai/components";
+
+import { tableCSS } from "@phoenix/components/table/styles";
+import { TableEmpty } from "@phoenix/components/table/TableEmpty";
+import { TimestampCell } from "@phoenix/components/table/TimestampCell";
+
+import { SystemAPIKeysTableFragment$key } from "./__generated__/SystemAPIKeysTableFragment.graphql";
+import { SystemAPIKeysTableRefetchQuery } from "./__generated__/SystemAPIKeysTableRefetchQuery.graphql";
+
+export function SystemAPIKeysTable({
+  query,
+}: {
+  query: SystemAPIKeysTableFragment$key;
+}) {
+  const [data] = useRefetchableFragment<
+    SystemAPIKeysTableRefetchQuery,
+    SystemAPIKeysTableFragment$key
+  >(
+    graphql`
+      fragment SystemAPIKeysTableFragment on Query
+      @refetchable(queryName: "SystemAPIKeysTableRefetchQuery") {
+        systemApiKeys {
+          name
+          description
+          createdAt
+          expiresAt
+        }
+      }
+    `,
+    query
+  );
+
+  const tableData = useMemo(() => {
+    return [...data.systemApiKeys];
+  }, [data]);
+
+  type TableRow = (typeof tableData)[number];
+  const table = useReactTable<TableRow>({
+    columns: [
+      {
+        header: "Name",
+        accessorKey: "name",
+      },
+      {
+        header: "Description",
+        accessorKey: "description",
+      },
+      {
+        header: "Created At",
+        accessorKey: "createdAt",
+        cell: TimestampCell,
+      },
+      {
+        header: "Expires At",
+        accessorKey: "expiresAt",
+        cell: TimestampCell,
+      },
+    ],
+    data: tableData,
+    getCoreRowModel: getCoreRowModel(),
+  });
+  const rows = table.getRowModel().rows;
+  const isEmpty = table.getRowModel().rows.length === 0;
+  return (
+    <table css={tableCSS}>
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th colSpan={header.colSpan} key={header.id}>
+                {header.isPlaceholder ? null : (
+                  <div
+                    {...{
+                      className: header.column.getCanSort()
+                        ? "cursor-pointer"
+                        : "",
+                      onClick: header.column.getToggleSortingHandler(),
+                      style: {
+                        left: header.getStart(),
+                        width: header.getSize(),
+                      },
+                    }}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {header.column.getIsSorted() ? (
+                      <Icon
+                        className="sort-icon"
+                        svg={
+                          header.column.getIsSorted() === "asc" ? (
+                            <Icons.ArrowUpFilled />
+                          ) : (
+                            <Icons.ArrowDownFilled />
+                          )
+                        }
+                      />
+                    ) : null}
+                  </div>
+                )}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      {isEmpty ? (
+        <TableEmpty />
+      ) : (
+        <tbody>
+          {rows.map((row) => {
+            return (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      )}
+    </table>
+  );
+}
diff --git a/app/src/pages/settings/__generated__/APIKeysCardQuery.graphql.ts b/app/src/pages/settings/__generated__/APIKeysCardQuery.graphql.ts
new file mode 100644
index 0000000000..ce15c08795
--- /dev/null
+++ b/app/src/pages/settings/__generated__/APIKeysCardQuery.graphql.ts
@@ -0,0 +1,97 @@
+/**
+ * @generated SignedSource<<bb31c00d7f49e04c1352dfa7effc2d2a>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Query } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type APIKeysCardQuery$variables = Record<PropertyKey, never>;
+export type APIKeysCardQuery$data = {
+  readonly " $fragmentSpreads": FragmentRefs<"SystemAPIKeysTableFragment">;
+};
+export type APIKeysCardQuery = {
+  response: APIKeysCardQuery$data;
+  variables: APIKeysCardQuery$variables;
+};
+
+const node: ConcreteRequest = {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "APIKeysCardQuery",
+    "selections": [
+      {
+        "args": null,
+        "kind": "FragmentSpread",
+        "name": "SystemAPIKeysTableFragment"
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "APIKeysCardQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "SystemApiKey",
+        "kind": "LinkedField",
+        "name": "systemApiKeys",
+        "plural": true,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "name",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "description",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "createdAt",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "expiresAt",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "f1b81e2adefe303b9fef38d2dcbad2b9",
+    "id": null,
+    "metadata": {},
+    "name": "APIKeysCardQuery",
+    "operationKind": "query",
+    "text": "query APIKeysCardQuery {\n  ...SystemAPIKeysTableFragment\n}\n\nfragment SystemAPIKeysTableFragment on Query {\n  systemApiKeys {\n    name\n    description\n    createdAt\n    expiresAt\n  }\n}\n"
+  }
+};
+
+(node as any).hash = "c3d10193f41d6556ae921b604ec89d8c";
+
+export default node;
diff --git a/app/src/pages/settings/__generated__/CreateSystemAPIKeyDialogMutation.graphql.ts b/app/src/pages/settings/__generated__/CreateSystemAPIKeyDialogMutation.graphql.ts
new file mode 100644
index 0000000000..431bb42929
--- /dev/null
+++ b/app/src/pages/settings/__generated__/CreateSystemAPIKeyDialogMutation.graphql.ts
@@ -0,0 +1,194 @@
+/**
+ * @generated SignedSource<<12c34e1a89e15a7a847340e3d87082bf>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Mutation } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type CreateSystemAPIKeyDialogMutation$variables = {
+  description?: string | null;
+  name: string;
+};
+export type CreateSystemAPIKeyDialogMutation$data = {
+  readonly createSystemApiKey: {
+    readonly jwt: string;
+    readonly query: {
+      readonly " $fragmentSpreads": FragmentRefs<"SystemAPIKeysTableFragment">;
+    };
+  };
+};
+export type CreateSystemAPIKeyDialogMutation = {
+  response: CreateSystemAPIKeyDialogMutation$data;
+  variables: CreateSystemAPIKeyDialogMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "description"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "name"
+},
+v2 = [
+  {
+    "fields": [
+      {
+        "kind": "Variable",
+        "name": "description",
+        "variableName": "description"
+      },
+      {
+        "kind": "Variable",
+        "name": "name",
+        "variableName": "name"
+      }
+    ],
+    "kind": "ObjectValue",
+    "name": "input"
+  }
+],
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "jwt",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "CreateSystemAPIKeyDialogMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateSystemApiKeyMutationPayload",
+        "kind": "LinkedField",
+        "name": "createSystemApiKey",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "Query",
+            "kind": "LinkedField",
+            "name": "query",
+            "plural": false,
+            "selections": [
+              {
+                "args": null,
+                "kind": "FragmentSpread",
+                "name": "SystemAPIKeysTableFragment"
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "CreateSystemAPIKeyDialogMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateSystemApiKeyMutationPayload",
+        "kind": "LinkedField",
+        "name": "createSystemApiKey",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "Query",
+            "kind": "LinkedField",
+            "name": "query",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "SystemApiKey",
+                "kind": "LinkedField",
+                "name": "systemApiKeys",
+                "plural": true,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "name",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "description",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "createdAt",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "expiresAt",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "dc1630ef456778d03268573b67317959",
+    "id": null,
+    "metadata": {},
+    "name": "CreateSystemAPIKeyDialogMutation",
+    "operationKind": "mutation",
+    "text": "mutation CreateSystemAPIKeyDialogMutation(\n  $name: String!\n  $description: String = null\n) {\n  createSystemApiKey(input: {name: $name, description: $description}) {\n    jwt\n    query {\n      ...SystemAPIKeysTableFragment\n    }\n  }\n}\n\nfragment SystemAPIKeysTableFragment on Query {\n  systemApiKeys {\n    name\n    description\n    createdAt\n    expiresAt\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "fff330c7ecaecfd389821773621a52eb";
+
+export default node;
diff --git a/app/src/pages/settings/__generated__/SystemAPIKeysTableFragment.graphql.ts b/app/src/pages/settings/__generated__/SystemAPIKeysTableFragment.graphql.ts
new file mode 100644
index 0000000000..04c3f02b77
--- /dev/null
+++ b/app/src/pages/settings/__generated__/SystemAPIKeysTableFragment.graphql.ts
@@ -0,0 +1,87 @@
+/**
+ * @generated SignedSource<<2f9e63ef0040e4c11fb576435e5e5fcc>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ReaderFragment, RefetchableFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type SystemAPIKeysTableFragment$data = {
+  readonly systemApiKeys: ReadonlyArray<{
+    readonly createdAt: string;
+    readonly description: string | null;
+    readonly expiresAt: string | null;
+    readonly name: string;
+  }>;
+  readonly " $fragmentType": "SystemAPIKeysTableFragment";
+};
+export type SystemAPIKeysTableFragment$key = {
+  readonly " $data"?: SystemAPIKeysTableFragment$data;
+  readonly " $fragmentSpreads": FragmentRefs<"SystemAPIKeysTableFragment">;
+};
+
+import SystemAPIKeysTableRefetchQuery_graphql from './SystemAPIKeysTableRefetchQuery.graphql';
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": {
+    "refetch": {
+      "connection": null,
+      "fragmentPathInResult": [],
+      "operation": SystemAPIKeysTableRefetchQuery_graphql
+    }
+  },
+  "name": "SystemAPIKeysTableFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "SystemApiKey",
+      "kind": "LinkedField",
+      "name": "systemApiKeys",
+      "plural": true,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "description",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "createdAt",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "expiresAt",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "type": "Query",
+  "abstractKey": null
+};
+
+(node as any).hash = "5b1b306f178fa0e790415c5e375cba5f";
+
+export default node;
diff --git a/app/src/pages/settings/__generated__/SystemAPIKeysTableRefetchQuery.graphql.ts b/app/src/pages/settings/__generated__/SystemAPIKeysTableRefetchQuery.graphql.ts
new file mode 100644
index 0000000000..a39583fbb6
--- /dev/null
+++ b/app/src/pages/settings/__generated__/SystemAPIKeysTableRefetchQuery.graphql.ts
@@ -0,0 +1,97 @@
+/**
+ * @generated SignedSource<<27a738645f32bdb25f49fac2071d291a>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Query } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type SystemAPIKeysTableRefetchQuery$variables = Record<PropertyKey, never>;
+export type SystemAPIKeysTableRefetchQuery$data = {
+  readonly " $fragmentSpreads": FragmentRefs<"SystemAPIKeysTableFragment">;
+};
+export type SystemAPIKeysTableRefetchQuery = {
+  response: SystemAPIKeysTableRefetchQuery$data;
+  variables: SystemAPIKeysTableRefetchQuery$variables;
+};
+
+const node: ConcreteRequest = {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "SystemAPIKeysTableRefetchQuery",
+    "selections": [
+      {
+        "args": null,
+        "kind": "FragmentSpread",
+        "name": "SystemAPIKeysTableFragment"
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "SystemAPIKeysTableRefetchQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "SystemApiKey",
+        "kind": "LinkedField",
+        "name": "systemApiKeys",
+        "plural": true,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "name",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "description",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "createdAt",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "expiresAt",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "454b9397a44c2b06b1f20ccf7f0b077e",
+    "id": null,
+    "metadata": {},
+    "name": "SystemAPIKeysTableRefetchQuery",
+    "operationKind": "query",
+    "text": "query SystemAPIKeysTableRefetchQuery {\n  ...SystemAPIKeysTableFragment\n}\n\nfragment SystemAPIKeysTableFragment on Query {\n  systemApiKeys {\n    name\n    description\n    createdAt\n    expiresAt\n  }\n}\n"
+  }
+};
+
+(node as any).hash = "5b1b306f178fa0e790415c5e375cba5f";
+
+export default node;