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