diff --git a/packages/webapp/src/pages/ProjectSettings.tsx b/packages/webapp/src/pages/ProjectSettings.tsx
index 69745d63504..3f6992d0f30 100644
--- a/packages/webapp/src/pages/ProjectSettings.tsx
+++ b/packages/webapp/src/pages/ProjectSettings.tsx
@@ -7,6 +7,7 @@ import { useGetProjectInfoAPI, useEditCallbackUrlAPI } from '../utils/api';
 import { isCloud, defaultCallback } from '../utils/utils';
 import DashboardLayout from '../layout/DashboardLayout';
 import { LeftNavBarItems } from '../components/LeftNavBar';
+import SecretInput from '../components/ui/SecretInput';
 
 export default function ProjectSettings() {
     const [loaded, setLoaded] = useState(false);
@@ -82,9 +83,7 @@ export default function ProjectSettings() {
                                         </label>
                                         <p className="ml-2 text-text-dark-gray text-sm">(do not share!)</p>
                                     </div>
-                                    <Prism language="bash" colorScheme="dark">
-                                        {secretKey}
-                                    </Prism>
+                                    <SecretInput copy={true} defaultValue={secretKey} />
                                 </div>
                             </div>
                             <div>