diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index c0248907..b02a136f 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -108,15 +108,15 @@ const ApiKeyManager = () => {
 
   return (
     <Container sx={{ alignSelf: 'flex-start' }}>
-      <Typography variant="h6" gutterBottom component="div" style={{ marginBottom: '20px' }}>
-        {t('apikey.title')}
-      </Typography>
-      <Typography variant="body2" sx={{ marginTop: '20px' }}>
+      <Typography variant="body2" sx={{ marginTop: '10px' }}>
         View and test your API endpoints
         <a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px' }}>
           here
         </a>
       </Typography>
+      <Typography variant="h6" gutterBottom component="div" style={{ marginBottom: '20px' }}>
+        {t('apikey.title')}
+      </Typography>
       {apiKey ? (
         <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
           <Table>