diff --git a/config-ui/src/routes/api-keys/api-keys.tsx b/config-ui/src/routes/api-keys/api-keys.tsx
index 9f418c4be3c..1ddfaed1fd6 100644
--- a/config-ui/src/routes/api-keys/api-keys.tsx
+++ b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -18,7 +18,7 @@
 
 import { useState, useMemo } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
-import { Table, Modal, Input, Select, Button, Tag } from 'antd';
+import { Flex, Table, Modal, Input, Select, Button, Tag } from 'antd';
 import dayjs from 'dayjs';
 
 import API from '@/api';
@@ -94,13 +94,13 @@ export const ApiKeys = () => {
   return (
     <PageHeader
       breadcrumbs={[{ name: 'API Keys', path: PATHS.APIKEYS() }]}
-      extra={
+      description="You can generate and manage your API keys to access the DevLake API."
+    >
+      <Flex justify="flex-end">
         <Button type="primary" icon={<PlusOutlined />} onClick={() => setModal('create')}>
           New API Key
         </Button>
-      }
-    >
-      <p>You can generate and manage your API keys to access the DevLake API.</p>
+      </Flex>
       <Table
         rowKey="id"
         size="middle"
diff --git a/config-ui/src/routes/blueprint/home/index.tsx b/config-ui/src/routes/blueprint/home/index.tsx
index 4a4853c4bc3..b7645b1636d 100644
--- a/config-ui/src/routes/blueprint/home/index.tsx
+++ b/config-ui/src/routes/blueprint/home/index.tsx
@@ -94,11 +94,6 @@ export const BlueprintHomePage = () => {
         { name: 'Advanced', path: PATHS.BLUEPRINTS() },
         { name: 'Blueprints', path: PATHS.BLUEPRINTS() },
       ]}
-      extra={
-        <Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
-          New Blueprint
-        </Button>
-      }
       description="This is a complete list of all Blueprints you have created, whether they belong to Projects or not."
     >
       <Flex vertical gap="middle">
@@ -111,6 +106,9 @@ export const BlueprintHomePage = () => {
               </Radio>
             ))}
           </Radio.Group>
+          <Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
+            New Blueprint
+          </Button>
         </Flex>
         <Table
           rowKey="id"
diff --git a/config-ui/src/routes/project/home/index.tsx b/config-ui/src/routes/project/home/index.tsx
index 2b86f94af0f..432ccfc0575 100644
--- a/config-ui/src/routes/project/home/index.tsx
+++ b/config-ui/src/routes/project/home/index.tsx
@@ -19,7 +19,7 @@
 import { useState, useMemo } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { PlusOutlined, SettingOutlined } from '@ant-design/icons';
-import { Table, Button, Modal, Input, Checkbox, message } from 'antd';
+import { Flex, Table, Button, Modal, Input, Checkbox, message } from 'antd';
 import dayjs from 'dayjs';
 
 import API from '@/api';
@@ -118,14 +118,12 @@ export const ProjectHomePage = () => {
   };
 
   return (
-    <PageHeader
-      breadcrumbs={[{ name: 'Projects', path: PATHS.PROJECTS() }]}
-      extra={
+    <PageHeader breadcrumbs={[{ name: 'Projects', path: PATHS.PROJECTS() }]}>
+      <Flex style={{ marginBottom: 16 }} justify="flex-end">
         <Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
           New Project
         </Button>
-      }
-    >
+      </Flex>
       <Table
         rowKey="name"
         size="middle"