···77<h1>API Key Management</h1>
8899<div class="card">
1010- <h2>Create New API Key</h2>
1010+ <h2 class="teal-header">Create New API Key</h2>
1111 <p>API keys allow programmatic access to your Piper account data.</p>
1212 <form method="POST" action="/api-keys">
1313 <div style="margin-bottom: 15px;">
···20202121{{if .NewKeyID}} <!-- Changed from .NewKey to .NewKeyID for clarity -->
2222<div class="new-key-alert">
2323- <h3>Your new API key (ID: {{.NewKeyID}}) has been created</h3>
2323+ <h3 class="teal-header">Your new API key (ID: {{.NewKeyID}}) has been created</h3>
2424 <!-- The message below is misleading if only the ID is shown.
2525 Consider changing this text or modifying the flow to show the actual key once for HTML. -->
2626 <p><strong>Important:</strong> If this is an ID, ensure you have copied the actual key if it was displayed previously. For keys generated via the API, the key is returned in the API response.</p>
···2828{{end}}
29293030<div class="card">
3131- <h2>Your API Keys</h2>
3131+ <h2 class="teal-header">Your API Keys</h2>
3232 {{if .Keys}}
3333 <table>
3434 <thead>
···6060</div>
61616262<div class="card">
6363- <h2>API Usage</h2>
6363+ <h2 class="teal-header">API Usage</h2>
6464 <p>To use your API key, include it in the Authorization header of your HTTP requests:</p>
6565 <pre>Authorization: Bearer YOUR_API_KEY</pre>
6666 <p>Or include it as a query parameter (less secure for the key itself):</p>