diff --git a/changelog/v0.0.36/app-details-api-keys-section.yaml b/changelog/v0.0.36/app-details-api-keys-section.yaml
new file mode 100644
index 00000000..214a08fd
--- /dev/null
+++ b/changelog/v0.0.36/app-details-api-keys-section.yaml
@@ -0,0 +1,5 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/6881
+    description: >-
+      Adds an API keys section to the App Details page.
diff --git a/projects/ui/src/Apis/api-types.ts b/projects/ui/src/Apis/api-types.ts
index f342a2f6..b3cc6376 100644
--- a/projects/ui/src/Apis/api-types.ts
+++ b/projects/ui/src/Apis/api-types.ts
@@ -108,6 +108,16 @@ export type App = {
   teamId: string;
 };
 
+export type ApiKey = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string;
+  apiKey: string;
+  name: string;
+  metadata: Record<string, string>;
+};
+
 export type Team = {
   createdAt: string;
   description: string;
diff --git a/projects/ui/src/Apis/gg_hooks.ts b/projects/ui/src/Apis/gg_hooks.ts
index 9a83abf7..5b6b3143 100644
--- a/projects/ui/src/Apis/gg_hooks.ts
+++ b/projects/ui/src/Apis/gg_hooks.ts
@@ -4,6 +4,7 @@ import useSWRMutation from "swr/mutation";
 import { AuthContext } from "../Context/AuthContext";
 import { omitErrorMessageResponse } from "../Utility/utility";
 import {
+  ApiKey,
   ApiProductDetails,
   ApiProductSummary,
   ApiVersion,
@@ -19,15 +20,15 @@ import {
 import { fetchJSON, useMultiSwrWithAuth, useSwrWithAuth } from "./utility";
 
 //
-// Queries
+// region Queries
 //
 
-// User
+// region User
 export function useGetCurrentUser() {
   return useSwrWithAuth<User>("/me");
 }
 
-// Apps
+// region Apps + API Keys
 export function useListAppsForTeam(team: Team) {
   return useSwrWithAuth<App[]>(`/teams/${team.id}/apps`);
 }
@@ -55,8 +56,11 @@ export function useListFlatAppsForTeamsOmitErrors(teams: Team[]) {
 export function useGetAppDetails(id?: string) {
   return useSwrWithAuth<App>(`/apps/${id}`);
 }
+export function useListApiKeysForApp(appId: string) {
+  return useSwrWithAuth<ApiKey[]>(`/apps/${appId}/api-keys`);
+}
 
-// Teams
+// region Teams
 const TEAMS_SWR_KEY = "teams";
 export function useListTeams() {
   return useSwrWithAuth<Team[]>(`/teams`);
@@ -68,7 +72,7 @@ export function useGetTeamDetails(id?: string) {
   return useSwrWithAuth<Team>(`/teams/${id}`);
 }
 
-// Api Products
+// region API Products
 export function useListApiProducts() {
   return useSwrWithAuth<ApiProductSummary[]>("/api-products");
 }
@@ -79,7 +83,7 @@ export function useGetApiProductVersions(id?: string) {
   return useSwrWithAuth<ApiVersion[]>(`/api-products/${id}/versions`);
 }
 
-// Subscriptions
+// region Subscriptions
 // this is an admin endpoint
 export function useListSubscriptionsForStatus(status: SubscriptionStatus) {
   const swrResponse = useSwrWithAuth<Subscription[] | SubscriptionsListError>(
@@ -115,7 +119,7 @@ export function useListSubscriptionsForApps(apps: App[]) {
 }
 
 //
-// Mutations
+// region Mutations
 //
 
 const getLatestAuthHeaders = (latestAccessToken: string | undefined) => {
@@ -129,7 +133,7 @@ const getLatestAuthHeaders = (latestAccessToken: string | undefined) => {
 type MutationWithArgs<T> = { arg: T };
 
 // ------------------------ //
-// Create Team
+// region Create Team
 
 type CreateTeamParams = MutationWithArgs<{ name: string; description: string }>;
 
@@ -149,7 +153,7 @@ export function useCreateTeamMutation() {
 }
 
 // ------------------------ //
-// Create Team Member
+// region Create Team Member
 
 type AddTeamMemberParams = MutationWithArgs<{ email: string; teamId: string }>;
 
@@ -169,7 +173,7 @@ export function useAddTeamMemberMutation() {
 }
 
 // ------------------------ //
-// Remove Team Member
+// region Remove Team Member
 
 type AdminRemoveTeamMemberParams = MutationWithArgs<{
   teamId: string;
@@ -194,7 +198,7 @@ export function useRemoveTeamMemberMutation() {
 }
 
 // ------------------------ //
-// Create App
+// region Create App
 
 type CreateAppParams = MutationWithArgs<{ name: string; description: string }>;
 
@@ -220,7 +224,7 @@ export function useCreateAppMutation(teamId: string | undefined) {
 }
 
 // ------------------------ //
-// Update App
+// region Update App
 
 type UpdateAppParams = MutationWithArgs<{
   appId: string;
@@ -247,7 +251,7 @@ export function useUpdateAppMutation() {
 }
 
 // ------------------------ //
-// Update Team
+// region Update Team
 
 type UpdateTeamParams = MutationWithArgs<{
   teamId: string;
@@ -272,7 +276,7 @@ export function useUpdateTeamMutation() {
 }
 
 // ------------------------ //
-// Create App and Subscription
+// region Create App and Subscription
 
 type CreateAppAndSubscriptionParams = MutationWithArgs<{
   appName: string;
@@ -315,7 +319,7 @@ export function useCreateAppAndSubscriptionMutation() {
 }
 
 // ------------------------ //
-// Create Subscription
+// region Create Subscription
 
 type CreateSubscriptionParams = MutationWithArgs<{
   apiProductId: string;
@@ -344,7 +348,7 @@ export function useCreateSubscriptionMutation(appId: string) {
 }
 
 // -------------------------------- //
-// (Admin) Approve/Reject Subscription
+// region (Admin) Approve/Reject Subscription
 
 type UpdateSubscriptionParams = MutationWithArgs<{
   subscription: Subscription;
@@ -387,7 +391,7 @@ export function useAdminRejectSubscriptionMutation() {
 }
 
 // -------------------------------- //
-// Delete Subscription
+// region Delete Subscription
 
 export function useDeleteSubscriptionMutation() {
   const { latestAccessToken } = useContext(AuthContext);
@@ -406,7 +410,7 @@ export function useDeleteSubscriptionMutation() {
 }
 
 // -------------------------------- //
-// Delete Team
+// region Delete Team
 
 type DeleteTeamParams = MutationWithArgs<{ teamId: string }>;
 
@@ -424,7 +428,7 @@ export function useDeleteTeamMutation() {
 }
 
 // -------------------------------- //
-// Delete App
+// region Delete App
 
 type DeleteAppParams = MutationWithArgs<{ appId: string }>;
 
@@ -440,3 +444,39 @@ export function useDeleteAppMutation() {
   };
   return useSWRMutation(`delete-team`, deleteApp);
 }
+
+// -------------------------------- //
+// region Create API Key
+
+type CreateApiKeyParams = MutationWithArgs<{ apiKeyName: string }>;
+
+export function useCreateApiKeyMutation(appId: string) {
+  const { latestAccessToken } = useContext(AuthContext);
+  const createApiKey = async (_: string, { arg }: CreateApiKeyParams) => {
+    return await fetchJSON(`/apps/${appId}/api-keys`, {
+      method: "POST",
+      headers: getLatestAuthHeaders(latestAccessToken),
+      body: JSON.stringify(arg),
+    });
+  };
+  return useSWRMutation<ApiKey, any, string, CreateApiKeyParams["arg"]>(
+    `/apps/${appId}/api-keys`,
+    createApiKey
+  );
+}
+
+// -------------------------------- //
+// region Delete API Key
+
+type DeleteApiKeyParams = MutationWithArgs<{ apiKeyId: string }>;
+
+export function useDeleteApiKeyMutation(appId: string) {
+  const { latestAccessToken } = useContext(AuthContext);
+  const deleteApiKey = async (_: string, { arg }: DeleteApiKeyParams) => {
+    await fetchJSON(`/api-keys/${arg.apiKeyId}`, {
+      method: "DELETE",
+      headers: getLatestAuthHeaders(latestAccessToken),
+    });
+  };
+  return useSWRMutation(`/apps/${appId}/api-keys`, deleteApiKey);
+}
diff --git a/projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageBody.tsx b/projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageBody.tsx
index b3285d25..0ea6fdd2 100644
--- a/projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageBody.tsx
+++ b/projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageBody.tsx
@@ -7,7 +7,7 @@ import {
   ApiVersionSchema,
 } from "../../../Apis/api-types";
 import { ContentWidthDiv } from "../../../Styles/ContentWidthHelpers";
-import { SimpleEmptyContent } from "../../Common/EmptyData";
+import { EmptyData } from "../../Common/EmptyData";
 import DocsTabContent from "./DocsTab/DocsTabContent";
 import SchemaTabContent from "./SchemaTab/SchemaTabContent";
 
@@ -71,7 +71,6 @@ export function ApiProductDetailsPageBody({
         */}
         <Tabs.Panel value={apiProductDetailsTabValues.SPEC} pt={"xl"}>
           <SchemaTabContent
-            apiProduct={apiProduct}
             apiProductVersions={apiProductVersions}
             apiVersionSpec={apiVersionSpec}
             selectedApiVersion={selectedApiVersion}
@@ -81,17 +80,16 @@ export function ApiProductDetailsPageBody({
           {includesDocumentation ? (
             <DocsTabContent selectedApiVersion={selectedApiVersion} />
           ) : (
-            <SimpleEmptyContent title="No documentation found.">
+            <EmptyData title="No documentation found.">
               <small>
                 You may add documentation for this API in the{" "}
-                <Code sx={{ whiteSpace: "nowrap" }}>
+                <Code>
                   spec.versions[your-version].openapiMetadata.description
                 </Code>{" "}
-                field of this{" "}
-                <Code sx={{ whiteSpace: "nowrap" }}>ApiProduct</Code> resource.
-                Markdown is supported.
+                field of this <Code>ApiProduct</Code> resource. Markdown is
+                supported.
               </small>
-            </SimpleEmptyContent>
+            </EmptyData>
           )}
         </Tabs.Panel>
       </Tabs>
diff --git a/projects/ui/src/Components/ApiDetails/gloo-gateway-components/SchemaTab/SchemaTabContent.tsx b/projects/ui/src/Components/ApiDetails/gloo-gateway-components/SchemaTab/SchemaTabContent.tsx
index 15bc5ae3..198596a6 100644
--- a/projects/ui/src/Components/ApiDetails/gloo-gateway-components/SchemaTab/SchemaTabContent.tsx
+++ b/projects/ui/src/Components/ApiDetails/gloo-gateway-components/SchemaTab/SchemaTabContent.tsx
@@ -1,20 +1,14 @@
-import { Box } from "@mantine/core";
-import {
-  ApiProductSummary,
-  ApiVersion,
-  ApiVersionSchema,
-} from "../../../../Apis/api-types";
+import { Box, Code } from "@mantine/core";
+import { ApiVersion, ApiVersionSchema } from "../../../../Apis/api-types";
 import { EmptyData } from "../../../Common/EmptyData";
 import { ErrorBoundary } from "../../../Common/ErrorBoundary";
 import { ApiSchemaDisplay } from "./ApiSchemaDisplay";
 
 const SchemaTabContent = ({
-  apiProduct,
   selectedApiVersion,
   apiProductVersions,
   apiVersionSpec,
 }: {
-  apiProduct: ApiProductSummary;
   selectedApiVersion: ApiVersion;
   apiProductVersions: ApiVersion[];
   apiVersionSpec: ApiVersionSchema | undefined;
@@ -22,9 +16,10 @@ const SchemaTabContent = ({
   if (!apiProductVersions.length) {
     return (
       <Box m="60px">
-        <EmptyData
-          topicMessageOverride={`The API Product, "${apiProduct.name}", has no API Version data.`}
-        />
+        <EmptyData title={`No API versions found.`}>
+          Add a version to the <Code>spec.versions</Code> field of this{" "}
+          <Code>ApiProduct</Code> for data to appear.
+        </EmptyData>
       </Box>
     );
   }
@@ -36,9 +31,13 @@ const SchemaTabContent = ({
     // There is a selected API version, but no schema.
     return (
       <Box m="60px">
-        <EmptyData
-          topicMessageOverride={`No schema was returned for the API Version: "${selectedApiVersion.name}".`}
-        />
+        <EmptyData title={`No schema found.`}>
+          The schema was not returned for this <Code>ApiProduct</Code> version.
+          <br />
+          Verify that your OpenApi spec was generated correctly in the
+          corresponding <Code>ApiDoc</Code> resource for this{" "}
+          <Code>Service</Code>.
+        </EmptyData>
       </Box>
     );
   }
diff --git a/projects/ui/src/Components/Apis/EmptyApisPage.tsx b/projects/ui/src/Components/Apis/EmptyApisPage.tsx
index 51dfd438..cd1dd706 100644
--- a/projects/ui/src/Components/Apis/EmptyApisPage.tsx
+++ b/projects/ui/src/Components/Apis/EmptyApisPage.tsx
@@ -5,7 +5,7 @@ import { AuthContext } from "../../Context/AuthContext";
 import { apisImageURL } from "../../user_variables.tmplr";
 import { BannerHeading } from "../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../Common/Banner/BannerHeadingTitle";
-import { SimpleEmptyContent } from "../Common/EmptyData";
+import { EmptyData } from "../Common/EmptyData";
 import { PageContainer } from "../Common/PageContainer";
 import { StyledApisListMain } from "./gloo-mesh-gateway-components/ApisPage.style";
 
@@ -31,19 +31,15 @@ export const EmptyApisPageContent = () => {
   const { isLoggedIn } = useContext(AuthContext);
 
   if (!!isLoggedIn)
-    return (
-      <SimpleEmptyContent>
-        No API Products have been created.
-      </SimpleEmptyContent>
-    );
+    return <EmptyData>No API Products have been created.</EmptyData>;
   return (
-    <SimpleEmptyContent title="No API Products were found.">
+    <EmptyData title="No API Products were found.">
       <small>
         To view API Products in private Portals, please log in.
         <br />
         To view API Products in public Portals, the Portal resource must have{" "}
         <Code>spec.visibility.public = true</Code>.
       </small>
-    </SimpleEmptyContent>
+    </EmptyData>
   );
 };
diff --git a/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisList.tsx b/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisList.tsx
index 7e8d8f4d..51b8459f 100644
--- a/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisList.tsx
+++ b/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisList.tsx
@@ -78,8 +78,13 @@ export function ApisList({
   if (apiProductsList === undefined) {
     return <Loading message="Getting list of apis..." />;
   }
+  if (!apiProductsList.length) {
+    return <EmptyData title="No API Products were found." />;
+  }
   if (!filteredApiProductsList.length) {
-    return <EmptyData topic="API" />;
+    return (
+      <EmptyData title="No API Products were found matching these filters." />
+    );
   }
   if (preferGridView) {
     return (
diff --git a/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApisList.tsx b/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApisList.tsx
index 46d5f7c0..bd193c01 100644
--- a/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApisList.tsx
+++ b/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApisList.tsx
@@ -72,7 +72,7 @@ export function ApisList({
   }
 
   if (!displayedApisList.length) {
-    return <EmptyData topic="API" />;
+    return <EmptyData title="No APIs were found matching these filters." />;
   }
   return (
     <>
diff --git a/projects/ui/src/Components/Apps/Details/ApiKeysSection/AddApiKeysSubSection.tsx b/projects/ui/src/Components/Apps/Details/ApiKeysSection/AddApiKeysSubSection.tsx
new file mode 100644
index 00000000..fffb9533
--- /dev/null
+++ b/projects/ui/src/Components/Apps/Details/ApiKeysSection/AddApiKeysSubSection.tsx
@@ -0,0 +1,91 @@
+import { Box, Input } from "@mantine/core";
+import { FormEvent, useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
+import { di } from "react-magnetic-di";
+import { App } from "../../../../Apis/api-types";
+import { useCreateApiKeyMutation } from "../../../../Apis/gg_hooks";
+import { DetailsPageStyles } from "../../../../Styles/shared/DetailsPageStyles";
+import { Accordion } from "../../../Common/Accordion";
+import { Button } from "../../../Common/Button";
+import ViewCreatedApiKeyModal from "../Modals/ViewCreatedApiKeyModal";
+
+const AddApiKeysSubSection = ({
+  open,
+  onClose,
+  app,
+}: {
+  open: boolean;
+  onClose: () => void;
+  app: App;
+}) => {
+  di(useCreateApiKeyMutation);
+
+  //
+  // Form Fields
+  //
+  const [formAppName, setFormAppName] = useState("");
+
+  //
+  // Form
+  //
+  const formRef = useRef<HTMLFormElement>(null);
+  const isFormDisabled = !open || !formAppName;
+  useEffect(() => {
+    // The form resets here when `open` changes.
+    setFormAppName("");
+  }, [open]);
+
+  //
+  // Form Submit
+  //
+  const [createdApiKey, setCreatedApiKey] = useState<string>("");
+  const { trigger: createApiKey } = useCreateApiKeyMutation(app.id);
+  const onSubmit = async (e?: FormEvent) => {
+    e?.preventDefault();
+    const isValid = formRef.current?.reportValidity();
+    if (!isValid || isFormDisabled) {
+      return;
+    }
+    const res = await toast.promise(createApiKey({ apiKeyName: formAppName }), {
+      error: "There was an error creating the API Key.",
+      loading: "Creating the API Key...",
+      success: "Created the API Key!",
+    });
+    onClose();
+    setCreatedApiKey(res.apiKey);
+  };
+
+  //
+  // Render
+  //
+  return (
+    <>
+      <Accordion open={open}>
+        <Box pb={"5px"}>
+          <DetailsPageStyles.AddItemForm ref={formRef} onSubmit={onSubmit}>
+            <Input
+              id="api-key-name-input"
+              aria-label="api-key name"
+              required
+              placeholder="API Key Name"
+              disabled={!open}
+              autoComplete="off"
+              value={formAppName}
+              onChange={(e) => setFormAppName(e.target.value)}
+            />
+            <Button disabled={isFormDisabled} type={"submit"}>
+              ADD API Key
+            </Button>
+          </DetailsPageStyles.AddItemForm>
+        </Box>
+      </Accordion>
+      <ViewCreatedApiKeyModal
+        apiKey={createdApiKey}
+        open={!!createdApiKey}
+        onCloseModal={() => setCreatedApiKey("")}
+      />
+    </>
+  );
+};
+
+export default AddApiKeysSubSection;
diff --git a/projects/ui/src/Components/Apps/Details/ApiKeysSection/AppApiKeysSection.tsx b/projects/ui/src/Components/Apps/Details/ApiKeysSection/AppApiKeysSection.tsx
new file mode 100644
index 00000000..5a000b9d
--- /dev/null
+++ b/projects/ui/src/Components/Apps/Details/ApiKeysSection/AppApiKeysSection.tsx
@@ -0,0 +1,135 @@
+import { Box, Flex } from "@mantine/core";
+import { useContext, useMemo, useState } from "react";
+import { di } from "react-magnetic-di";
+import { APIKey, App } from "../../../../Apis/api-types";
+import {
+  useListApiKeysForApp,
+  useListAppsForTeam,
+} from "../../../../Apis/gg_hooks";
+import { AuthContext } from "../../../../Context/AuthContext";
+import { DetailsPageStyles } from "../../../../Styles/shared/DetailsPageStyles";
+import { GridCardStyles } from "../../../../Styles/shared/GridCard.style";
+import { UtilityStyles } from "../../../../Styles/shared/Utility.style";
+import { formatDateToMMDDYYYY } from "../../../../Utility/utility";
+import { Button } from "../../../Common/Button";
+import CustomPagination, {
+  pageOptions,
+  useCustomPagination,
+} from "../../../Common/CustomPagination";
+import { EmptyData } from "../../../Common/EmptyData";
+import { Loading } from "../../../Common/Loading";
+import Table from "../../../Common/Table";
+import ToggleAddButton from "../../../Common/ToggleAddButton";
+import ConfirmDeleteApiKeyModal from "../Modals/ConfirmDeleteApiKeyModal";
+import AddApiKeysSubSection from "./AddApiKeysSubSection";
+
+const AppApiKeysSection = ({ app }: { app: App }) => {
+  di(useListAppsForTeam);
+  const { isAdmin } = useContext(AuthContext);
+  const { isLoading, data: apiKeys } = useListApiKeysForApp(app.id);
+  const [showAddApiKeySubSection, setShowAddApiKeySubSection] = useState(false);
+
+  const customPaginationData = useCustomPagination(
+    apiKeys ?? [],
+    pageOptions.table
+  );
+  const { paginatedData } = customPaginationData;
+
+  const [confirmDeleteApiKey, setConfirmDeleteApiKey] = useState<APIKey>();
+
+  const rows = useMemo(() => {
+    return paginatedData?.map((apiKey) => {
+      return (
+        (
+          <tr key={apiKey.id}>
+            <td>{apiKey.name}</td>
+            <td>{formatDateToMMDDYYYY(new Date(apiKey.createdAt))}</td>
+            {/* <td>{JSON.stringify(apiKey.metadata)}</td> */}
+            <td>
+              <UtilityStyles.CenteredCellContent>
+                <Button
+                  size="xs"
+                  variant="light"
+                  color="danger"
+                  onClick={() => setConfirmDeleteApiKey(apiKey)}
+                >
+                  Delete
+                </Button>
+              </UtilityStyles.CenteredCellContent>
+            </td>
+          </tr>
+        ) ?? []
+      );
+    });
+  }, [paginatedData]);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+  return (
+    <DetailsPageStyles.Section>
+      <Flex justify={"space-between"}>
+        <DetailsPageStyles.Title>API Keys</DetailsPageStyles.Title>
+        {!isAdmin && (
+          <ToggleAddButton
+            topicUpperCase="API KEY"
+            isAdding={showAddApiKeySubSection}
+            toggleAdding={() =>
+              setShowAddApiKeySubSection(!showAddApiKeySubSection)
+            }
+          />
+        )}
+      </Flex>
+      <AddApiKeysSubSection
+        app={app}
+        open={showAddApiKeySubSection}
+        onClose={() => setShowAddApiKeySubSection(false)}
+      />
+      {!apiKeys?.length ? (
+        <Box mb={"-30px"} mt={"10px"}>
+          <EmptyData title="No API Keys were found." />
+        </Box>
+      ) : (
+        <Box pt={"5px"}>
+          <GridCardStyles.GridCard whiteBg wide>
+            <Box p={"20px"}>
+              <Table>
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Created</th>
+                    <th>
+                      <UtilityStyles.CenteredCellContent>
+                        Delete
+                      </UtilityStyles.CenteredCellContent>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>{rows}</tbody>
+                <tfoot>
+                  <tr>
+                    <td colSpan={7}>
+                      <Box p=".6rem">
+                        <CustomPagination
+                          customPaginationData={customPaginationData}
+                        />
+                      </Box>
+                    </td>
+                  </tr>
+                </tfoot>
+              </Table>
+            </Box>
+          </GridCardStyles.GridCard>
+        </Box>
+      )}
+      <ConfirmDeleteApiKeyModal
+        open={!!confirmDeleteApiKey}
+        apiKeyId={confirmDeleteApiKey?.id ?? ""}
+        appId={app.id}
+        onClose={() => setConfirmDeleteApiKey(undefined)}
+      />
+    </DetailsPageStyles.Section>
+  );
+};
+
+export default AppApiKeysSection;
diff --git a/projects/ui/src/Components/Apps/Details/ApiSubscriptionsSection/AppApiSubscriptionsSection.tsx b/projects/ui/src/Components/Apps/Details/ApiSubscriptionsSection/AppApiSubscriptionsSection.tsx
index 0dc43e45..ee2caa1e 100644
--- a/projects/ui/src/Components/Apps/Details/ApiSubscriptionsSection/AppApiSubscriptionsSection.tsx
+++ b/projects/ui/src/Components/Apps/Details/ApiSubscriptionsSection/AppApiSubscriptionsSection.tsx
@@ -43,8 +43,8 @@ const AppApiSubscriptionsSection = ({
         />
       </Flex>
       {subscriptions.length === 0 && (
-        <Box pt="30px">
-          <EmptyData topic={"API Subscription"} />
+        <Box pt="10px">
+          <EmptyData title="No API Subscriptions were found." />
         </Box>
       )}
       <Box pt={"5px"}>
diff --git a/projects/ui/src/Components/Apps/Details/AppDetailsPageContent.tsx b/projects/ui/src/Components/Apps/Details/AppDetailsPageContent.tsx
index 11575485..a4b2a4a2 100644
--- a/projects/ui/src/Components/Apps/Details/AppDetailsPageContent.tsx
+++ b/projects/ui/src/Components/Apps/Details/AppDetailsPageContent.tsx
@@ -1,19 +1,34 @@
-import { Box, Flex, Loader } from "@mantine/core";
+import { Box, Flex, Loader, Tooltip } from "@mantine/core";
+import { useMemo } from "react";
 import { di } from "react-magnetic-di";
+import { NavLink } from "react-router-dom";
 import { App } from "../../../Apis/api-types";
-import { useListSubscriptionsForApp } from "../../../Apis/gg_hooks";
+import {
+  useListSubscriptionsForApp,
+  useListTeams,
+} from "../../../Apis/gg_hooks";
+import { Icon } from "../../../Assets/Icons";
+import { UtilityStyles } from "../../../Styles/shared/Utility.style";
+import { getTeamDetailsLink } from "../../../Utility/link-builders";
 import { BannerHeading } from "../../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../../Common/Banner/BannerHeadingTitle";
 import { PageContainer } from "../../Common/PageContainer";
+import AppApiKeysSection from "./ApiKeysSection/AppApiKeysSection";
 import AppApiSubscriptionsSection from "./ApiSubscriptionsSection/AppApiSubscriptionsSection";
 import AppAuthenticationSection from "./AuthenticationSection/AppAuthenticationSection";
 import EditAppButtonWithModal from "./EditAppButtonWithModal";
 
 export const AppDetailsPageContent = ({ app }: { app: App }) => {
-  di(useListSubscriptionsForApp);
+  di(useListSubscriptionsForApp, useListTeams);
   const { isLoading: isLoadingSubscriptions, data: subscriptions } =
     useListSubscriptionsForApp(app.id);
 
+  const { data: teams } = useListTeams();
+  const team = useMemo(
+    () => teams?.find((t) => t.id === app.teamId),
+    [teams, app]
+  );
+
   // Mock data for testing
   // app.idpClientId = "4df81266-f855-466d-8ded-699056780850";
   // app.idpClientName = "test-idp";
@@ -27,6 +42,7 @@ export const AppDetailsPageContent = ({ app }: { app: App }) => {
         title={
           <BannerHeadingTitle
             text={app.name}
+            logo={<Icon.AppIcon />}
             stylingTweaks={{
               fontSize: "32px",
               lineHeight: "36px",
@@ -34,7 +50,31 @@ export const AppDetailsPageContent = ({ app }: { app: App }) => {
             additionalInfo={<EditAppButtonWithModal app={app} />}
           />
         }
-        description={app.description}
+        description={
+          <>
+            {!!team && !!team.name && (
+              <Flex
+                align={"center"}
+                justify={"flex-start"}
+                gap={"8px"}
+                sx={{ marginTop: "-5px" }}
+              >
+                <Tooltip label="Team" position="right">
+                  <UtilityStyles.NavLinkContainer
+                    withArrow={false}
+                    flexCenter={true}
+                  >
+                    <NavLink to={getTeamDetailsLink(team)}>
+                      <Icon.TeamsIcon width={20} />
+                      {team?.name}
+                    </NavLink>
+                  </UtilityStyles.NavLinkContainer>
+                </Tooltip>
+              </Flex>
+            )}
+            <Box mt="10px">{app.description}</Box>
+          </>
+        }
         breadcrumbItems={[
           { label: "Home", link: "/" },
           { label: "Apps", link: "/apps" },
@@ -44,6 +84,9 @@ export const AppDetailsPageContent = ({ app }: { app: App }) => {
       <Box px={"30px"}>
         <Flex gap={"30px"} direction={"column"}>
           {appHasOAuthClient && <AppAuthenticationSection app={app} />}
+
+          <AppApiKeysSection app={app} />
+
           {isLoadingSubscriptions || subscriptions === undefined ? (
             <Loader />
           ) : (
diff --git a/projects/ui/src/Components/Apps/Details/Modals/ConfirmDeleteApiKeyModal.tsx b/projects/ui/src/Components/Apps/Details/Modals/ConfirmDeleteApiKeyModal.tsx
new file mode 100644
index 00000000..4d01a8e8
--- /dev/null
+++ b/projects/ui/src/Components/Apps/Details/Modals/ConfirmDeleteApiKeyModal.tsx
@@ -0,0 +1,61 @@
+import { Box, CloseButton, Flex } from "@mantine/core";
+import { FormEvent } from "react";
+import toast from "react-hot-toast";
+import { di } from "react-magnetic-di";
+import { useDeleteApiKeyMutation } from "../../../../Apis/gg_hooks";
+import { FormModalStyles } from "../../../../Styles/shared/FormModalStyles";
+import { Button } from "../../../Common/Button";
+
+const ConfirmDeleteApiKeyModal = ({
+  apiKeyId,
+  appId,
+  open,
+  onClose,
+}: {
+  apiKeyId: string;
+  appId: string;
+  open: boolean;
+  onClose: () => void;
+}) => {
+  di(useDeleteApiKeyMutation);
+  const { trigger: deleteApiKey } = useDeleteApiKeyMutation(appId);
+  const onConfirm = async (e?: FormEvent) => {
+    e?.preventDefault();
+    await toast.promise(deleteApiKey({ apiKeyId }), {
+      error: (e) => "There was an error deleting the API Key. " + e,
+      loading: "Deleting the API Key...",
+      success: "Deleted the API Key!",
+    });
+    onClose();
+  };
+
+  //
+  // Render
+  //
+  return (
+    <FormModalStyles.CustomModal onClose={onClose} opened={open} size={"600px"}>
+      <FormModalStyles.HeaderContainer>
+        <div>
+          <FormModalStyles.Title>Delete API Key</FormModalStyles.Title>
+          <FormModalStyles.Subtitle>
+            Are you sure that you want to delete this API Key?
+          </FormModalStyles.Subtitle>
+        </div>
+        <CloseButton title="Close modal" size={"30px"} onClick={onClose} />
+      </FormModalStyles.HeaderContainer>
+      <FormModalStyles.HorizLine />
+      <Box p="20px 30px 40px 30px">
+        <Flex justify={"flex-end"} gap="20px">
+          <Button variant="outline" onClick={onClose} type="button">
+            Cancel
+          </Button>
+          <Button color="danger" onClick={onConfirm} type="submit">
+            Delete API Key
+          </Button>
+        </Flex>
+      </Box>
+    </FormModalStyles.CustomModal>
+  );
+};
+
+export default ConfirmDeleteApiKeyModal;
diff --git a/projects/ui/src/Components/Apps/Details/Modals/ViewCreatedApiKeyModal.tsx b/projects/ui/src/Components/Apps/Details/Modals/ViewCreatedApiKeyModal.tsx
new file mode 100644
index 00000000..7cedc78a
--- /dev/null
+++ b/projects/ui/src/Components/Apps/Details/Modals/ViewCreatedApiKeyModal.tsx
@@ -0,0 +1,100 @@
+import { Alert, Box, CloseButton, Flex } from "@mantine/core";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { Icon } from "../../../../Assets/Icons";
+import { FormModalStyles } from "../../../../Styles/shared/FormModalStyles";
+import { copyToClipboard } from "../../../../Utility/utility";
+import { Button } from "../../../Common/Button";
+
+const ViewCreatedApiKeyModal = ({
+  apiKey,
+  open,
+  onCloseModal,
+}: {
+  apiKey: string;
+  open: boolean;
+  onCloseModal: () => void;
+}) => {
+  const [hasCopiedKey, setHasCopiedKey] = useState(false);
+
+  useEffect(() => {
+    // Reset state on close.
+    if (!open) {
+      setHasCopiedKey(false);
+    }
+  }, [open]);
+
+  const handleOnClose = () => {
+    if (!hasCopiedKey) {
+      return;
+    }
+    onCloseModal();
+  };
+
+  //
+  // Render
+  //
+  return (
+    <FormModalStyles.CustomModal
+      onClose={handleOnClose}
+      opened={open}
+      size={"600px"}
+    >
+      <FormModalStyles.HeaderContainer>
+        <Box ml="5px" mt="15px">
+          <FormModalStyles.Title>Created API Key</FormModalStyles.Title>
+        </Box>
+        {hasCopiedKey && (
+          <CloseButton
+            title="Close modal"
+            size={"30px"}
+            onClick={handleOnClose}
+          />
+        )}
+      </FormModalStyles.HeaderContainer>
+      <FormModalStyles.HorizLine />
+      <Box m="20px">
+        <Alert
+          my="30px"
+          variant="light"
+          icon={<Icon.InfoExclamation />}
+          title="Warning!"
+          color="orange"
+        >
+          This API Key value will not be available later. Please click the API
+          Key value to copy and secure this value now.
+        </Alert>
+        <Flex mt="20px" mb="40px" justify={"center"}>
+          <Button
+            color={hasCopiedKey ? "success" : "secondary"}
+            variant="outline"
+            aria-label="Copy this API key"
+            onClick={() => {
+              copyToClipboard(apiKey).then(() => {
+                toast.success("Copied API key to clipboard");
+                setHasCopiedKey(true);
+              });
+            }}
+          >
+            <Flex justify={"center"} align={"center"} gap={"10px"}>
+              {apiKey}
+              {hasCopiedKey ? <Icon.SlashedCopy /> : <Icon.Copy />}
+            </Flex>
+          </Button>
+        </Flex>
+        <Flex justify={"flex-end"} gap="20px">
+          <Button
+            disabled={!hasCopiedKey}
+            variant="outline"
+            onClick={handleOnClose}
+            type="button"
+          >
+            {hasCopiedKey ? "Close" : "Copy the API Key above"}
+          </Button>
+        </Flex>
+      </Box>
+    </FormModalStyles.CustomModal>
+  );
+};
+
+export default ViewCreatedApiKeyModal;
diff --git a/projects/ui/src/Components/Apps/PageContent/AppsList.tsx b/projects/ui/src/Components/Apps/PageContent/AppsList.tsx
index 7e8ee4fe..18135daa 100644
--- a/projects/ui/src/Components/Apps/PageContent/AppsList.tsx
+++ b/projects/ui/src/Components/Apps/PageContent/AppsList.tsx
@@ -85,8 +85,11 @@ export function AppsList({
   if (isLoading) {
     return <Loading message="Getting list of apps..." />;
   }
+  if (!appsList?.length) {
+    return <EmptyData title="No Apps were found." />;
+  }
   if (!filteredAppsList.length) {
-    return <EmptyData topic="app" />;
+    return <EmptyData title="No Apps were found matching these filters." />;
   }
   return (
     <AppsPageStyles.AppGridList>
diff --git a/projects/ui/src/Components/Common/EmptyData.tsx b/projects/ui/src/Components/Common/EmptyData.tsx
index ca9135e1..bde84dbe 100644
--- a/projects/ui/src/Components/Common/EmptyData.tsx
+++ b/projects/ui/src/Components/Common/EmptyData.tsx
@@ -1,6 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Box, Flex, Text } from "@mantine/core";
+import { Box } from "@mantine/core";
+import { borderRadiusConstants } from "../../Styles/constants";
 
 const StyledEmptyContentOuter = styled.div(
   ({ theme }) => css`
@@ -8,15 +9,16 @@ const StyledEmptyContentOuter = styled.div(
     justify-content: center;
     text-align: center;
     line-height: 2rem;
-    background-color: ${theme.marchGrey};
+    background-color: white;
+    box-shadow: 1px 1px 5px ${theme.splashBlue};
+    border: 1px solid ${theme.splashBlue};
+    border-radius: ${borderRadiusConstants.small};
+    margin-bottom: 30px;
     padding: 30px;
   `
 );
 
-/**
- *  This is typically used for Empty sections with more custom content.
- */
-export const SimpleEmptyContent = (props: {
+export const EmptyData = (props: {
   children?: React.ReactNode;
   title?: React.ReactNode;
 }) => {
@@ -26,46 +28,19 @@ export const SimpleEmptyContent = (props: {
         {props.title && (
           <Box
             sx={{
-              fontWeight: "bold",
-              marginBottom: "10px",
+              fontWeight: 400,
+              fontSize: "1.2rem",
             }}
           >
             {props.title}
           </Box>
         )}
-        {props.children}
+        {!!props.children && (
+          <Box sx={{ fontSize: "1rem", marginTop: "10px" }}>
+            {props.children}
+          </Box>
+        )}
       </Box>
     </StyledEmptyContentOuter>
   );
 };
-
-/**
- *  This is typically used for Empty data for topics.
- */
-export function EmptyData(
-  props:
-    | {
-        topic: string;
-        message?: string;
-      }
-    | {
-        topicMessageOverride: React.ReactNode;
-      }
-) {
-  return (
-    <Flex justify={"center"}>
-      <Text color="gray.6" italic>
-        {"topicMessageOverride" in props ? (
-          <>{props.topicMessageOverride}</>
-        ) : (
-          <>No {props.topic} results were found</>
-        )}
-      </Text>
-      {"message" in props && !!props.message && (
-        <Text color="gray.6" italic>
-          {props.message}
-        </Text>
-      )}
-    </Flex>
-  );
-}
diff --git a/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionsList.tsx b/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionsList.tsx
index 14328fb1..b401c7eb 100644
--- a/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionsList.tsx
+++ b/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionsList.tsx
@@ -35,7 +35,7 @@ const SubscriptionsList = ({
     return null;
   }
   if (subscriptions.length === 0) {
-    return <EmptyData topic="API subscriptions" />;
+    return <EmptyData title="No Subscriptions were found." />;
   }
   return (
     <Box pb={"60px"}>
diff --git a/projects/ui/src/Components/Teams/Details/AppsSection/TeamAppsSection.tsx b/projects/ui/src/Components/Teams/Details/AppsSection/TeamAppsSection.tsx
index 39515fd9..e7407a2a 100644
--- a/projects/ui/src/Components/Teams/Details/AppsSection/TeamAppsSection.tsx
+++ b/projects/ui/src/Components/Teams/Details/AppsSection/TeamAppsSection.tsx
@@ -86,7 +86,7 @@ const TeamAppsSection = ({ team }: { team: Team }) => {
       )}
       {!apps?.length ? (
         <Box mb={"-30px"} mt={"30px"}>
-          <EmptyData topic="App" />
+          <EmptyData title="No Apps were found." />
         </Box>
       ) : (
         <Box pt={"5px"}>
diff --git a/projects/ui/src/Components/Teams/Details/TeamDetailsPageContent.tsx b/projects/ui/src/Components/Teams/Details/TeamDetailsPageContent.tsx
index e1494227..8c600b02 100644
--- a/projects/ui/src/Components/Teams/Details/TeamDetailsPageContent.tsx
+++ b/projects/ui/src/Components/Teams/Details/TeamDetailsPageContent.tsx
@@ -1,6 +1,7 @@
 import { Box, Flex } from "@mantine/core";
 import { useContext } from "react";
 import { Team } from "../../../Apis/api-types";
+import { Icon } from "../../../Assets/Icons";
 import { AuthContext } from "../../../Context/AuthContext";
 import { BannerHeading } from "../../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../../Common/Banner/BannerHeadingTitle";
@@ -17,6 +18,7 @@ const TeamDetailsPageContent = ({ team }: { team: Team }) => {
         title={
           <BannerHeadingTitle
             text={team.name}
+            logo={<Icon.TeamsIcon />}
             stylingTweaks={{
               fontSize: "32px",
               lineHeight: "36px",
diff --git a/projects/ui/src/Components/Teams/Details/UsersSection/TeamUsersSection.tsx b/projects/ui/src/Components/Teams/Details/UsersSection/TeamUsersSection.tsx
index 12bf55a9..fa1559a6 100644
--- a/projects/ui/src/Components/Teams/Details/UsersSection/TeamUsersSection.tsx
+++ b/projects/ui/src/Components/Teams/Details/UsersSection/TeamUsersSection.tsx
@@ -100,7 +100,8 @@ const TeamUsersSection = ({ team }: { team: Team }) => {
       />
       {!members?.length ? (
         <Box mb={"-30px"}>
-          <EmptyData topic="Members" />
+          {/* We never should get here, since the user must be a member. */}
+          <EmptyData title="No were found in this Team." />
         </Box>
       ) : (
         <Box pt={"5px"}>
diff --git a/projects/ui/src/Components/Teams/TeamsList/TeamsList.tsx b/projects/ui/src/Components/Teams/TeamsList/TeamsList.tsx
index 119914c6..0b711ce4 100644
--- a/projects/ui/src/Components/Teams/TeamsList/TeamsList.tsx
+++ b/projects/ui/src/Components/Teams/TeamsList/TeamsList.tsx
@@ -15,8 +15,8 @@ export function TeamsList() {
   if (teamsList === undefined || isLoading) {
     return <Loading message="Getting list of teams..." />;
   }
-  if (!teamsList.length) {
-    return <EmptyData topic="team" />;
+  if (!teamsList?.length) {
+    return <EmptyData title="No Teams were found." />;
   }
   return (
     <Box mb="30px">
diff --git a/projects/ui/src/Components/UsagePlans/UsagePlanList/APIUsagePlansList.tsx b/projects/ui/src/Components/UsagePlans/UsagePlanList/APIUsagePlansList.tsx
index 0cd03c09..0808d446 100644
--- a/projects/ui/src/Components/UsagePlans/UsagePlanList/APIUsagePlansList.tsx
+++ b/projects/ui/src/Components/UsagePlans/UsagePlanList/APIUsagePlansList.tsx
@@ -46,7 +46,7 @@ export function APIUsagePlansList() {
           </ErrorBoundary>
         ))
       ) : (
-        <EmptyData topic="API" />
+        <EmptyData title="No API Products were found." />
       )}
     </>
   );
diff --git a/projects/ui/src/Styles/colors.ts b/projects/ui/src/Styles/colors.ts
index 06513481..d8c35710 100644
--- a/projects/ui/src/Styles/colors.ts
+++ b/projects/ui/src/Styles/colors.ts
@@ -43,6 +43,8 @@ const baseColors = {
 const colorMap = {
   ...baseColors,
 
+  januaryGreyDark1: Color(baseColors.januaryGrey).darken(0.01).hex(),
+
   marchGreyDark3: Color(baseColors.marchGrey).darken(0.03).hex(),
   marchGreyDark5: Color(baseColors.marchGrey).darken(0.05).hex(),
   marchGreyDark10: Color(baseColors.marchGrey).darken(0.1).hex(),
diff --git a/projects/ui/src/Styles/global-styles/mantine-overrides.style.ts b/projects/ui/src/Styles/global-styles/mantine-overrides.style.ts
index e020250e..bacc83a9 100644
--- a/projects/ui/src/Styles/global-styles/mantine-overrides.style.ts
+++ b/projects/ui/src/Styles/global-styles/mantine-overrides.style.ts
@@ -63,4 +63,9 @@ export const mantineGlobalStyles = css`
       }
     }
   }
+
+  code.mantine-Code-root {
+    background-color: ${colors.januaryGreyDark1};
+    white-space: nowrap;
+  }
 `;