diff --git a/config-ui/src/components/page-header/styled.ts b/config-ui/src/components/page-header/styled.ts
index 3dd132e690a..297e2dedfa5 100644
--- a/config-ui/src/components/page-header/styled.ts
+++ b/config-ui/src/components/page-header/styled.ts
@@ -28,7 +28,7 @@ export const Title = styled.div`
 
 export const Description = styled.p`
   margin-top: 12px;
-  margin-bottom: 36px;
+  margin-bottom: 16px;
 `;
 
 export const Content = styled.div``;
diff --git a/config-ui/src/routes/api-keys/api-keys.tsx b/config-ui/src/routes/api-keys/api-keys.tsx
index 1ddfaed1fd6..78bba07d3d3 100644
--- a/config-ui/src/routes/api-keys/api-keys.tsx
+++ b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -96,7 +96,7 @@ export const ApiKeys = () => {
       breadcrumbs={[{ name: 'API Keys', path: PATHS.APIKEYS() }]}
       description="You can generate and manage your API keys to access the DevLake API."
     >
-      <Flex justify="flex-end">
+      <Flex style={{ marginBottom: 16 }} justify="flex-end">
         <Button type="primary" icon={<PlusOutlined />} onClick={() => setModal('create')}>
           New API Key
         </Button>