diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx
index 9913c6703..7919055c2 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { InputField, SwitchField } from "@/components/form-fields";
 import { StyledLink } from "@/components/link";
-import { FormSettingCard, SettingCard, SettingSwitch } from "@/components/settings";
+import { FormSettingCard, SettingCard, SettingSwitch, SettingText } from "@/components/settings";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionDialog, Alert, Button, Typography } from "@stackframe/stack-ui";
 import * as yup from "yup";
 import { PageLayout } from "../page-layout";
@@ -23,6 +23,49 @@ export default function PageClient() {
 
   return (
     <PageLayout title="Project Settings" description="Manage your project">
+      <SettingCard
+        title="Project Information"
+      >
+        <SettingText label="Project ID">
+          {project.id}
+        </SettingText>
+
+        <SettingText label="JWKS URL">
+          {`${process.env.NEXT_PUBLIC_STACK_API_URL}/api/v1/projects/${project.id}/.well-known/jwks.json`}
+        </SettingText>
+      </SettingCard>
+      <FormSettingCard
+        title="Project Details"
+        defaultValues={{
+          displayName: project.displayName,
+          description: project.description || undefined,
+        }}
+        formSchema={projectInformationSchema}
+        onSubmit={async (values) => {
+          await project.update(values);
+        }}
+        render={(form) => (
+          <>
+            <InputField
+              label="Display Name"
+              control={form.control}
+              name="displayName"
+              required
+            />
+            <InputField
+              label="Description"
+              control={form.control}
+              name="description"
+            />
+
+            <Typography variant="secondary" type="footnote">
+              The display name and description may be publicly visible to the
+              users of your app.
+            </Typography>
+          </>
+        )}
+      />
+
       <SettingCard
         title="Production mode"
         description="Production mode disallows certain configuration options that are useful for development but deemed unsafe for production usage. To prevent accidental misconfigurations, it is strongly recommended to enable production mode on your production environments."
@@ -82,38 +125,6 @@ export default function PageClient() {
         )}
       />}
 
-      <FormSettingCard
-        title="Project Information"
-        defaultValues={{
-          displayName: project.displayName,
-          description: project.description || undefined,
-        }}
-        formSchema={projectInformationSchema}
-        onSubmit={async (values) => {
-          await project.update(values);
-        }}
-        render={(form) => (
-          <>
-            <InputField
-              label="Display Name"
-              control={form.control}
-              name="displayName"
-              required
-            />
-            <InputField
-              label="Description"
-              control={form.control}
-              name="description"
-            />
-
-            <Typography variant="secondary" type="footnote">
-              The display name and description may be publicly visible to the
-              users of your app.
-            </Typography>
-          </>
-        )}
-      />
-
       <SettingCard
         title="Danger Zone"
         description="Be careful with the options in this section. They can have irreversible effects."
diff --git a/apps/dashboard/src/components/settings.tsx b/apps/dashboard/src/components/settings.tsx
index 60a2565f9..55c88942a 100644
--- a/apps/dashboard/src/components/settings.tsx
+++ b/apps/dashboard/src/components/settings.tsx
@@ -1,6 +1,6 @@
 import { yupResolver } from "@hookform/resolvers/yup";
-import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DelayedInput, Form, Label, Switch, Typography, useToast } from "@stackframe/stack-ui";
 import { Settings } from "lucide-react";
 import React, { useEffect, useId, useState } from "react";
@@ -114,7 +114,7 @@ export function SettingInput(props: {
 }
 
 export function SettingText(props: {
-  label: string,
+  label: React.ReactNode,
   children: React.ReactNode,
 }) {
   return (