diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx
index 6e4af59efb..99a264dcd9 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx
@@ -249,7 +249,13 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
       {key.data ? (
         <div className="w-full max-sm:p-4">
           <div>
-            <p className="mb-4 text-xl font-bold">Your API Key</p>
+            <div className="flex flex-col sm:flex-row justify-between sm:items-center mb-4">
+              <p className="mb-4 sm:mb-0 text-xl font-bold">Your API Key</p>
+              <Code className="h-8 w-full sm:w-auto flex gap-1.5 justify-between">
+                <pre className="truncate">{key.data.keyId}</pre>
+                <CopyButton value={key.data.keyId} />
+              </Code>
+            </div>
             <Alert>
               <AlertCircle className="w-4 h-4" />
               <AlertTitle>This key is only shown once and can not be recovered </AlertTitle>
@@ -257,8 +263,7 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
                 Please pass it on to your user or store it somewhere safe.
               </AlertDescription>
             </Alert>
-
-            <Code className="flex items-center justify-between w-full gap-4 my-8 ph-no-capture max-sm:text-xs sm:overflow-hidden">
+            <Code className="flex items-center justify-between w-full gap-4 mt-2 my-8 ph-no-capture max-sm:text-xs sm:overflow-hidden">
               <pre>{showKey ? key.data.key : maskedKey}</pre>
               <div className="flex items-start justify-between gap-4 max-sm:absolute max-sm:right-11">
                 <VisibleButton isVisible={showKey} setIsVisible={setShowKey} />