diff --git a/config-ui/src/App.js b/config-ui/src/App.js
index 91c2b91..9e0d779 100644
--- a/config-ui/src/App.js
+++ b/config-ui/src/App.js
@@ -31,13 +31,12 @@
   ConnectionHomePage,
   WebHookConnectionPage,
   CreateBlueprintPage,
+  BlueprintHomePage,
   BlueprintDetailPage
 } from '@/pages'
-import Integration from '@/pages/configure/integration/index'
 import ManageIntegration from '@/pages/configure/integration/manage'
 import AddConnection from '@/pages/configure/connections/AddConnection'
 import ConfigureConnection from '@/pages/configure/connections/ConfigureConnection'
-import Blueprints from '@/pages/blueprints/index'
 
 function App() {
   return (
@@ -80,7 +79,11 @@
           path='/connections/configure/:providerId/:connectionId'
           component={() => <ConfigureConnection />}
         />
-        <Route exact path='/blueprints' component={() => <Blueprints />} />
+        <Route
+          exact
+          path='/blueprints'
+          component={() => <BlueprintHomePage />}
+        />
         <Route
           exact
           path='/blueprints/create'
diff --git a/config-ui/src/pages/blueprint/home/api.ts b/config-ui/src/pages/blueprint/home/api.ts
new file mode 100644
index 0000000..869eca9
--- /dev/null
+++ b/config-ui/src/pages/blueprint/home/api.ts
@@ -0,0 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import request from '@/components/utils/request'
+
+export const getBlueprints = () => request('/blueprints')
diff --git a/config-ui/src/pages/blueprint/home/index.tsx b/config-ui/src/pages/blueprint/home/index.tsx
new file mode 100644
index 0000000..a6ec6da
--- /dev/null
+++ b/config-ui/src/pages/blueprint/home/index.tsx
@@ -0,0 +1,125 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import React, { useMemo } from 'react'
+import { useHistory } from 'react-router-dom'
+import { ButtonGroup, Button, Intent } from '@blueprintjs/core'
+
+import { PageLoading, PageHeader, Table, ColumnType } from '@/components'
+import { getCron, getCronOptions } from '@/config'
+import { formatTime } from '@/utils'
+
+import type { BlueprintType } from '../types'
+import { ModeEnum } from '../types'
+
+import { useHome } from './use-home'
+import * as S from './styled'
+
+export const BlueprintHomePage = () => {
+  const history = useHistory()
+
+  const { loading, dataSource, type, onChangeType } = useHome()
+
+  const options = useMemo(() => getCronOptions(), [])
+
+  const columns = useMemo(
+    () =>
+      [
+        {
+          title: 'Blueprint Name',
+          dataIndex: 'name',
+          key: 'name'
+        },
+        {
+          title: 'Data Connections',
+          key: 'connections',
+          render: (_, row) => {
+            if (row.mode === ModeEnum.advanced) {
+              return 'Advanced Mode'
+            }
+            return row.settings.connections.map((cs) => cs.plugin).join(',')
+          }
+        },
+        {
+          title: 'Frequency',
+          key: 'frequency',
+          render: (_, row) => {
+            const cron = getCron(row.isManual, row.cronConfig)
+            return cron.label
+          }
+        },
+        {
+          title: 'Next Run Time',
+          key: 'nextRunTime',
+          render: (_, row) => {
+            const cron = getCron(row.isManual, row.cronConfig)
+            return formatTime(cron.nextTime)
+          }
+        },
+        {
+          title: '',
+          dataIndex: 'id',
+          key: 'action',
+          align: 'center',
+          render: (val) => (
+            <Button
+              minimal
+              intent={Intent.PRIMARY}
+              icon='cog'
+              onClick={() => history.push(`/blueprints/${val}`)}
+            />
+          )
+        }
+      ] as ColumnType<BlueprintType>,
+    []
+  )
+
+  if (loading) {
+    return <PageLoading />
+  }
+
+  return (
+    <PageHeader breadcrumbs={[{ name: 'Blueprints', path: '/blueprints' }]}>
+      <S.Wrapper>
+        <div className='action'>
+          <ButtonGroup>
+            <Button
+              intent={type === 'all' ? Intent.PRIMARY : Intent.NONE}
+              text='All'
+              onClick={() => onChangeType('all')}
+            />
+            {options.map(({ label, value }) => (
+              <Button
+                key={value}
+                intent={type === value ? Intent.PRIMARY : Intent.NONE}
+                text={label}
+                onClick={() => onChangeType(value)}
+              />
+            ))}
+          </ButtonGroup>
+          <Button
+            intent={Intent.PRIMARY}
+            text='Create Blueprint'
+            onClick={() => history.push('/blueprints/create')}
+          />
+        </div>
+        <Table columns={columns} dataSource={dataSource} />
+      </S.Wrapper>
+    </PageHeader>
+  )
+}
diff --git a/config-ui/src/pages/blueprint/home/styled.ts b/config-ui/src/pages/blueprint/home/styled.ts
new file mode 100644
index 0000000..fc47e76
--- /dev/null
+++ b/config-ui/src/pages/blueprint/home/styled.ts
@@ -0,0 +1,28 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  .action {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+`
diff --git a/config-ui/src/pages/blueprint/home/use-home.ts b/config-ui/src/pages/blueprint/home/use-home.ts
new file mode 100644
index 0000000..dd6c23a
--- /dev/null
+++ b/config-ui/src/pages/blueprint/home/use-home.ts
@@ -0,0 +1,76 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useState, useEffect, useMemo } from 'react'
+
+import { cronPresets } from '@/config'
+
+import type { BlueprintType } from '../types'
+
+import * as API from './api'
+
+export const useHome = () => {
+  const [loading, setLoading] = useState(false)
+  const [blueprints, setBlueprints] = useState<BlueprintType[]>([])
+  const [dataSource, setDataSource] = useState<BlueprintType[]>([])
+  const [type, setType] = useState('all')
+
+  const presets = cronPresets.map((preset) => preset.config)
+
+  const getBlueprints = async () => {
+    setLoading(true)
+    try {
+      const res = await API.getBlueprints()
+      setBlueprints(res.blueprints)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    getBlueprints()
+  }, [])
+
+  useEffect(() => {
+    setDataSource(
+      blueprints.filter((bp) => {
+        switch (type) {
+          case 'all':
+            return true
+          case 'manual':
+            return bp.isManual
+          case 'custom':
+            return !presets.includes(bp.cronConfig)
+          default:
+            return bp.cronConfig === type
+        }
+      })
+    )
+  }, [blueprints, type])
+
+  return useMemo(
+    () => ({
+      loading,
+      blueprints,
+      dataSource,
+      type,
+      onChangeType: setType
+    }),
+    [loading, blueprints, dataSource, type]
+  )
+}
diff --git a/config-ui/src/pages/blueprint/index.ts b/config-ui/src/pages/blueprint/index.ts
index 824bde2..52e04f1 100644
--- a/config-ui/src/pages/blueprint/index.ts
+++ b/config-ui/src/pages/blueprint/index.ts
@@ -17,5 +17,6 @@
  */
 
 export * from './types'
+export * from './home'
 export * from './create'
 export * from './detail'