diff --git a/apps/docs/components/JwtGenerator.js b/apps/docs/components/JwtGenerator.js
index d0dc7a7bf08..f435a6db780 100644
--- a/apps/docs/components/JwtGenerator.js
+++ b/apps/docs/components/JwtGenerator.js
@@ -8,19 +8,19 @@ const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
 const fiveYears = new Date(now.getFullYear() + 5, now.getMonth(), now.getDate())
 const anonToken = `
 {
-    "role": "anon",
-    "iss": "supabase",
-    "iat": ${Math.floor(today / 1000)},
-    "exp": ${Math.floor(fiveYears / 1000)}
+  "role": "anon",
+  "iss": "supabase",
+  "iat": ${Math.floor(today / 1000)},
+  "exp": ${Math.floor(fiveYears / 1000)}
 }
 `.trim()
 
 const serviceToken = `
 {
-    "role": "service_role",
-    "iss": "supabase",
-    "iat": ${Math.floor(today / 1000)},
-    "exp": ${Math.floor(fiveYears / 1000)}
+  "role": "service_role",
+  "iss": "supabase",
+  "iat": ${Math.floor(today / 1000)},
+  "exp": ${Math.floor(fiveYears / 1000)}
 }
 `.trim()
 
@@ -50,12 +50,13 @@ export default function JwtGenerator({}) {
           type="text"
           placeholder="JWT Secret (at least 32 characters)"
           value={jwtSecret}
+          style={{ fontFamily: 'monospace' }}
           onChange={(e) => setJwtSecret(e.target.value)}
         />
       </div>
       <div className="grid mb-8">
         <label for="service">Preconfigured Payload:</label>
-        <Select id="service" onChange={handleKeySelection}>
+        <Select id="service" style={{ fontFamily: 'monospace' }} onChange={handleKeySelection}>
           <Select.Option value="anon">ANON_KEY</Select.Option>
           <Select.Option value="service">SERVICE_KEY</Select.Option>
         </Select>
@@ -66,9 +67,10 @@ export default function JwtGenerator({}) {
         <Input.TextArea
           id="token"
           type="text"
-          rows="5"
+          rows="6"
           placeholder="A valid JWT Token"
           value={token}
+          style={{ fontFamily: 'monospace' }}
           onChange={(e) => setToken(e.target.value)}
         />
       </div>
@@ -80,7 +82,7 @@ export default function JwtGenerator({}) {
       {signedToken && (
         <div className="mt-8">
           <h4>Generated Token:</h4>
-          <CodeBlock language="bash" className="relative">
+          <CodeBlock language="bash" className="relative" style={{ fontFamily: 'monospace' }}>
             {signedToken}
           </CodeBlock>
         </div>