diff --git a/lib/components/controls.tsx b/lib/components/controls.tsx
index f28e217de..366a3b867 100644
--- a/lib/components/controls.tsx
+++ b/lib/components/controls.tsx
@@ -6,6 +6,7 @@ import Router, { useRouter } from 'next/router'
 import MoonIcon from '@geist-ui/icons/moon'
 import SunIcon from '@geist-ui/icons/sun'
 import UserIcon from '@geist-ui/icons/user'
+import GitHubIcon from '@geist-ui/icons/github'
 import {
   CHINESE_LANGUAGE_IDENT,
   CUSTOM_THEME_TYPE,
@@ -43,17 +44,18 @@ const Controls: React.FC<unknown> = React.memo(() => {
   return (
     <div className="controls">
       <div className="tools">
-        <Button auto type="abort" scale={0.5} onClick={switchLanguages}>
-          {isChinese ? 'English' : '中文文档'}
+        <Button auto type="abort" scale={0.7} px={0.7} onClick={switchLanguages}>
+          {isChinese ? 'En' : '中'}
         </Button>
         <Button
           auto
           type="abort"
-          scale={0.5}
+          scale={0.7}
+          px={0.7}
+          icon={<GitHubIcon />}
           onClick={redirectGithub}
-          title={isChinese ? '代码仓库' : 'GitHub Repository'}>
-          {isChinese ? '代码仓库' : 'GitHub'}
-        </Button>
+          title={isChinese ? '代码仓库' : 'GitHub Repository'}
+        />
         <Spacer w={0.75} />
         <Select
           scale={0.5}
diff --git a/lib/components/customization/colors.tsx b/lib/components/customization/colors.tsx
index 655848302..75c739ba7 100644
--- a/lib/components/customization/colors.tsx
+++ b/lib/components/customization/colors.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card, useTheme } from 'components'
+import { Card, Grid, useTheme } from 'components'
 import { CardTypes } from 'components/utils/prop-types'
 
 const types = [
@@ -20,13 +20,17 @@ const Colors: React.FC<React.PropsWithChildren<unknown>> = () => {
 
   return (
     <div className="colors">
-      {types.map((type, index) => {
-        return (
-          <div key={`${type}-${index}`} className="color-card">
-            <Card type={type as CardTypes}>{type}</Card>
-          </div>
-        )
-      })}
+      <Grid.Container gap={1} pl={0} mr="10px">
+        {types.map((type, index) => {
+          return (
+            <Grid xs={12} key={`${type}-${index}`}>
+              <Card w="100%" type={type as CardTypes}>
+                {type}
+              </Card>
+            </Grid>
+          )
+        })}
+      </Grid.Container>
       <style jsx>{`
         .colors {
           display: flex;
diff --git a/lib/components/customization/demo.tsx b/lib/components/customization/demo.tsx
index 195b361af..b89af4a88 100644
--- a/lib/components/customization/demo.tsx
+++ b/lib/components/customization/demo.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Colors from './colors'
-import { useTheme, Button, Text, Code, Spacer, Link, Select } from 'components'
+import { useTheme, Button, Text, Code, Spacer, Link, Select, Grid } from 'components'
 import { useConfigs } from 'lib/config-context'
 
 const Demo: React.FC<React.PropsWithChildren<unknown>> = () => {
@@ -12,74 +12,74 @@ const Demo: React.FC<React.PropsWithChildren<unknown>> = () => {
       <div className="content">
         {isChinese ? (
           <>
-            <Text h3>预览</Text>
+            <Text h2 mb={0} font="13px" type="secondary">
+              预览
+            </Text>
             <Text>
               这里是你变更主题后的即时预览。此外，当你每次更新主题变量时，整个文档站点也会随之变化。
             </Text>
-            <Text>你可以拷贝自动生成的代码，或是与任何人分享你自定义的主题样式。</Text>
           </>
         ) : (
           <>
-            <Text h3>Preview</Text>
+            <Text h2 mb={0} font="13px">
+              PREVIEWS
+            </Text>
             <Text>
               Here&#39;s a preview of your changes to the Theme. When you set the changes,
               the entire document site will change with the theme.
             </Text>
-            <Text>
-              You can copy automatically generated codes or share your custom theme with
-              anyone.
-            </Text>
           </>
         )}
 
         <Spacer h={1.7} />
-        <Text h4>{isChinese ? '色彩' : 'Colors'}</Text>
+        <Text h3 font="13px" type="secondary">
+          {isChinese ? '色彩' : 'COLORS'}
+        </Text>
         <Colors />
 
         <Spacer h={1.7} />
-        <Text h4>{isChinese ? '排版' : 'Typography'}</Text>
-        <Text>
-          <Code>inline codes</Code>
+        <Text h3 font="13px" type="secondary">
+          {isChinese ? '排版' : 'Typography'}
         </Text>
         <Text>
-          <a>Hyperlink Text</a>{' '}
-        </Text>
-        <Text>
-          <Link href="#" color>
-            Link Component
-          </Link>
-        </Text>
-        <Text>
-          Our mission is to make cloud computing accessible to everyone. We build products
-          for developers and designers. And those who aspire to become one.
+          <Link rel="nofollow" href="https://en.wikipedia.org/wiki/HTTP/2" color>
+            HTTP/2
+          </Link>{' '}
+          allows the server to <Code>push</Code> content, that is, to respond with data
+          for more queries than the client requested. This allows the server to supply
+          data it knows a web browser will need to render a web page, without waiting for
+          the browser to examine the first response, and without the overhead of an
+          additional request cycle.
         </Text>
         <Text h6>Heading</Text>
         <Text h5>Heading</Text>
         <Text h4>Heading</Text>
         <Text h3>Heading</Text>
-        <Text h2>Heading</Text>
-        <Text h1>Heading</Text>
 
         <Spacer h={1.7} />
-        <Text h4>{isChinese ? '基础组件' : 'Basic Components'}</Text>
-        <Select placeholder="Choose one" initialValue="1">
+        <Text h3 font="13px" type="secondary">
+          {isChinese ? '基础组件' : 'Basic Components'}
+        </Text>
+        <Select width="90%" placeholder="Choose one" initialValue="1">
           <Select.Option value="1">Option 1</Select.Option>
           <Select.Option value="2">Option 2</Select.Option>
         </Select>
         <Spacer h={1} />
-        <Button disabled auto scale={0.5}>
-          Action
-        </Button>
-        <Spacer inline h={0.5} />
-        <Button auto scale={0.5}>
-          Action
-        </Button>
-        <Spacer inline h={0.5} />
-        <Button auto type="secondary" scale={0.5}>
-          Action
-        </Button>
-        <Spacer h={0.5} />
-        <Button>Action</Button>
+        <Grid.Container width="100%">
+          <Grid xs={8}>
+            <Button disabled auto>
+              Action
+            </Button>
+          </Grid>
+          <Grid xs={8}>
+            <Button auto>Action</Button>
+          </Grid>
+          <Grid xs={8}>
+            <Button auto type="secondary">
+              Action
+            </Button>
+          </Grid>
+        </Grid.Container>
       </div>
       <style jsx>{`
         .demo {
diff --git a/lib/components/customization/editor.tsx b/lib/components/customization/editor.tsx
index 089235e76..eb09cbd45 100644
--- a/lib/components/customization/editor.tsx
+++ b/lib/components/customization/editor.tsx
@@ -2,12 +2,9 @@ import React from 'react'
 import { Text, Button, useTheme, Themes } from 'components'
 import EditorColorItem from './editor-color-item'
 import EditorInputItem from './editor-input-item'
+import RotateCcwIcon from '@geist-ui/icons/rotateCcw'
 import { useConfigs } from 'lib/config-context'
-import {
-  GeistUIThemesExpressiveness,
-  GeistUIThemesLayout,
-  GeistUIThemesPalette,
-} from 'components/themes'
+import { GeistUIThemesExpressiveness, GeistUIThemesPalette } from 'components/themes'
 
 const basicColors: Array<keyof GeistUIThemesPalette> = [
   'accents_1',
@@ -51,27 +48,27 @@ const expressiveness: Array<keyof GeistUIThemesExpressiveness> = [
   'shadowMedium',
   'shadowLarge',
 ]
-const pageLayout: Array<keyof GeistUIThemesLayout> = [
-  'pageWidth',
-  'pageWidthWithMargin',
-  'pageMargin',
-  'radius',
-]
-const gapLayout: Array<keyof GeistUIThemesLayout> = [
-  'gap',
-  'gapNegative',
-  'gapHalf',
-  'gapHalfNegative',
-  'gapQuarter',
-  'gapQuarterNegative',
-]
+// const pageLayout: Array<keyof GeistUIThemesLayout> = [
+//   'pageWidth',
+//   'pageWidthWithMargin',
+//   'pageMargin',
+//   'radius',
+// ]
+// const gapLayout: Array<keyof GeistUIThemesLayout> = [
+//   'gap',
+//   'gapNegative',
+//   'gapHalf',
+//   'gapHalfNegative',
+//   'gapQuarter',
+//   'gapQuarterNegative',
+// ]
 
 const Editor = () => {
   const theme = useTheme()
   const DefaultTheme = Themes.getPresetStaticTheme()
   const { updateCustomTheme, isChinese } = useConfigs()
 
-  const resetLayout = () => updateCustomTheme({ layout: DefaultTheme.layout })
+  // const resetLayout = () => updateCustomTheme({ layout: DefaultTheme.layout })
   const restColors = () => updateCustomTheme({ palette: DefaultTheme.palette })
   const resetExpressiveness = () => {
     updateCustomTheme({ expressiveness: DefaultTheme.expressiveness })
@@ -79,11 +76,17 @@ const Editor = () => {
 
   return (
     <div className="editor">
-      <Text h3>
+      <Text h3 mt="40px" font="22px">
         {isChinese ? '色彩' : 'Colors'}
-        <Button type="abort" auto scale={0.4} onClick={restColors}>
-          {isChinese ? '重置' : 'Reset'}
-        </Button>
+        <Button
+          type="abort"
+          icon={<RotateCcwIcon />}
+          auto
+          px={0.65}
+          scale={0.4}
+          ml="10px"
+          onClick={restColors}
+        />
       </Text>
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -104,11 +107,17 @@ const Editor = () => {
         ))}
       </div>
 
-      <Text h3>
+      <Text h3 mt="40px">
         {isChinese ? '表现力' : 'Expressiveness'}
-        <Button type="abort" auto scale={0.4} onClick={resetExpressiveness}>
-          {isChinese ? '重置' : 'Reset'}
-        </Button>
+        <Button
+          type="abort"
+          icon={<RotateCcwIcon />}
+          auto
+          px={0.65}
+          scale={0.4}
+          ml="10px"
+          onClick={resetExpressiveness}
+        />
       </Text>
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -120,33 +129,6 @@ const Editor = () => {
           />
         ))}
       </div>
-
-      <Text h3>
-        {isChinese ? '布局' : 'Layout'}
-        <Button type="abort" auto scale={0.4} onClick={resetLayout}>
-          {isChinese ? '重置' : 'Reset'}
-        </Button>
-      </Text>
-      {isChinese ? (
-        <p>大多数的布局间距都依赖这些变量，不合理的更改可能会导致布局失衡。</p>
-      ) : (
-        <p>
-          Most layout spacing depends on these variables, unreasonable changes may cause
-          layout imbalance.
-        </p>
-      )}
-      <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
-      <div className="content">
-        {pageLayout.map((item, index) => (
-          <EditorInputItem key={`${item}-${index}`} groupName="layout" keyName={item} />
-        ))}
-      </div>
-      <p className="subtitle">{isChinese ? '间距' : 'gaps'}</p>
-      <div className="content">
-        {gapLayout.map((item, index) => (
-          <EditorInputItem key={`${item}-${index}`} groupName="layout" keyName={item} />
-        ))}
-      </div>
       <style jsx>{`
         .content {
           display: flex;
@@ -158,10 +140,6 @@ const Editor = () => {
           padding-left: ${theme.layout.gapQuarter};
         }
 
-        .editor :global(h3) {
-          margin: 2rem 0 1rem 0;
-        }
-
         .subtitle {
           color: ${theme.palette.accents_4};
           text-transform: uppercase;
diff --git a/lib/components/displays/home-cell.tsx b/lib/components/displays/home-cell.tsx
new file mode 100644
index 000000000..0b37334e7
--- /dev/null
+++ b/lib/components/displays/home-cell.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { Card, Link, useTheme } from 'components'
+import NextLink from 'next/link'
+
+export type HomeCellProps = {
+  url: string
+  title: string
+  desc: string
+  icon: React.ReactNode
+}
+
+const HomeCell: React.FC<HomeCellProps> = ({ url, title, desc, icon }) => {
+  const theme = useTheme()
+  return (
+    <NextLink href={url} passHref>
+      <Link>
+        <Card padding="5px" shadow width="100%">
+          <h4 className="feature__title">
+            <div className="feature__icon">{icon}</div>
+            {title}
+          </h4>
+          <p className="feature__description">{desc}</p>
+        </Card>
+        <style jsx>{`
+          .feature__title {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+          }
+          .feature__icon {
+            height: 2.5rem;
+            width: 2.5rem;
+            padding: 0.625rem;
+            margin-right: ${theme.layout.gapHalf};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(#3291ff, #0761d1);
+            color: #fff;
+            border-radius: 2rem;
+          }
+          .feature__icon :global(svg) {
+            width: 100%;
+            height: 100%;
+          }
+          .feature__description {
+            color: ${theme.palette.accents_6};
+          }
+        `}</style>
+      </Link>
+    </NextLink>
+  )
+}
+
+export default HomeCell
diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json
index a5720b6e8..e4d5760d6 100644
--- a/lib/data/metadata-en-us.json
+++ b/lib/data/metadata-en-us.json
@@ -1 +1 @@
-[{"name":"guide","children":[{"name":"Getting Started","children":[{"name":"Introduction","url":"/en-us/guide/introduction","index":5,"group":"Getting Started"},{"name":"Installation","url":"/en-us/guide/installation","index":10,"group":"Getting Started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"Getting Started"}]},{"name":"Customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":20,"group":"Customization"},{"name":"Themes","url":"/en-us/guide/themes","index":25,"group":"Customization"},{"name":"Scaleable","url":"/en-us/guide/scaleable","index":30,"group":"Customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"Text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"Button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"Layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"Layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"Layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"Layout"}]},{"name":"Surfaces","children":[{"name":"Card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"Collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"Fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"AutoComplete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"Checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"Radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"Select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"Textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"Avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"Keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Drawer","url":"/en-us/components/drawer","index":100,"group":"Feedback"},{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"Modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"Note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Rating","url":"/en-us/components/rating","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"Toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"Breadcrumbs","url":"/en-us/components/breadcrumbs","index":100,"group":"Navigation"},{"name":"Link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"Pagination","url":"/en-us/components/pagination","index":100,"group":"Navigation"},{"name":"Tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"Button Dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"useBodyScroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"useClickAway","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"useClipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"useCurrentState","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"useKeyboard","url":"/en-us/components/use-keyboard","index":100,"group":"Utils"},{"name":"useMediaQuery","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
+[{"name":"guide","children":[{"name":"Getting Started","children":[{"name":"Introduction","url":"/en-us/guide/introduction","index":5,"group":"Getting Started"},{"name":"Installation","url":"/en-us/guide/installation","index":10,"group":"Getting Started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"Getting Started"}]},{"name":"Customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":20,"group":"Customization"},{"name":"Themes","url":"/en-us/guide/themes","index":25,"group":"Customization"},{"name":"Scaleable","url":"/en-us/guide/scaleable","index":30,"group":"Customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"Text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"Button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"Layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"Layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"Layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"Layout"}]},{"name":"Surfaces","children":[{"name":"Card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"Collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"Fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"AutoComplete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"Checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"Radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"Select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"Textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"Avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"Keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Drawer","url":"/en-us/components/drawer","index":100,"group":"Feedback"},{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"Modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"Note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Rating","url":"/en-us/components/rating","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"Toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"Breadcrumbs","url":"/en-us/components/breadcrumbs","index":100,"group":"Navigation"},{"name":"Link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"Pagination","url":"/en-us/components/pagination","index":100,"group":"Navigation"},{"name":"Tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"Button Dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"useBodyScroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"useClickAway","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"useClipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"useCurrentState","url":"/en-us/components/use-current-state","index":100,"group":"Utils"},{"name":"useKeyboard","url":"/en-us/components/use-keyboard","index":100,"group":"Utils"},{"name":"useMediaQuery","url":"/en-us/components/use-media-query","index":100,"group":"Utils"}]}]}]
diff --git a/lib/data/metadata-zh-cn.json b/lib/data/metadata-zh-cn.json
index d2697db5d..d8c5ebf4a 100644
--- a/lib/data/metadata-zh-cn.json
+++ b/lib/data/metadata-zh-cn.json
@@ -1 +1 @@
-[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 Geist UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":5,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":10,"group":"定制化"},{"name":"可伸缩性","url":"/zh-cn/guide/scaleable","index":20,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"图标 Icons","url":"/zh-cn/components/icons","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"栅格 Grid","url":"/zh-cn/components/grid","index":100,"group":"布局"},{"name":"页面 Page","url":"/zh-cn/components/page","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"按钮组 Button Group","url":"/zh-cn/components/button-group","index":100,"group":"数据录入"},{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Autocomplete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"},{"name":"用户 User","url":"/zh-cn/components/user","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"抽屉 Drawer","url":"/zh-cn/components/drawer","index":100,"group":"反馈"},{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"评分 Rating","url":"/zh-cn/components/rating","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"面包屑 Breadcrumbs","url":"/zh-cn/components/breadcrumbs","index":100,"group":"导航"},{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"分页 Pagination","url":"/zh-cn/components/pagination","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","index":100,"group":"工具包"},{"name":"键盘事件 useKeyboard","url":"/zh-cn/components/use-keyboard","index":100,"group":"工具包"},{"name":"媒体查询 useMediaQuery","url":"/zh-cn/components/use-media-query","index":100,"group":"工具包"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}]
+[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 Geist UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":5,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":10,"group":"定制化"},{"name":"可伸缩性","url":"/zh-cn/guide/scaleable","index":20,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"图标 Icons","url":"/zh-cn/components/icons","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"栅格 Grid","url":"/zh-cn/components/grid","index":100,"group":"布局"},{"name":"页面 Page","url":"/zh-cn/components/page","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"按钮组 Button Group","url":"/zh-cn/components/button-group","index":100,"group":"数据录入"},{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Autocomplete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"},{"name":"用户 User","url":"/zh-cn/components/user","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"抽屉 Drawer","url":"/zh-cn/components/drawer","index":100,"group":"反馈"},{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"评分 Rating","url":"/zh-cn/components/rating","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"面包屑 Breadcrumbs","url":"/zh-cn/components/breadcrumbs","index":100,"group":"导航"},{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"分页 Pagination","url":"/zh-cn/components/pagination","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","index":100,"group":"工具包"},{"name":"键盘事件 useKeyboard","url":"/zh-cn/components/use-keyboard","index":100,"group":"工具包"},{"name":"媒体查询 useMediaQuery","url":"/zh-cn/components/use-media-query","index":100,"group":"工具包"}]}],"localeName":"所有组件"}]
diff --git a/next.config.js b/next.config.js
index e6b314a87..008a27d4b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -46,6 +46,16 @@ const nextConfig = {
         destination: 'https://github.com/geist-org/geist-ui/discussions/677',
         permanent: true,
       },
+      {
+        source: '/en-us/customization',
+        destination: '/en-us',
+        permanent: true,
+      },
+      {
+        source: '/zh-cn/customization',
+        destination: '/zh-cn',
+        permanent: true,
+      },
     ]
   },
 }
diff --git a/pages/en-us/customization/index.tsx b/pages/en-us/customization/index.tsx
deleted file mode 100644
index 0decc2ec4..000000000
--- a/pages/en-us/customization/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { Text, Spacer } from 'components'
-import CustomizationLayout from 'lib/components/customization/layout'
-import CustomizationEditor from 'lib/components/customization/editor'
-import PageHeader from 'lib/components/header'
-
-const meta = {
-  title: 'Customization',
-}
-
-const Customization = () => {
-  return (
-    <CustomizationLayout>
-      <PageHeader meta={meta} />
-      <Spacer h={1.2} />
-      <Text h2>Customization</Text>
-      <Text>
-        Custom themes is a very simple thing in Geist UI, click change, copy or share.
-      </Text>
-      <CustomizationEditor />
-      <Spacer h={2} />
-    </CustomizationLayout>
-  )
-}
-
-export default Customization
diff --git a/pages/en-us/index.tsx b/pages/en-us/index.tsx
index e393e2273..78e27646f 100644
--- a/pages/en-us/index.tsx
+++ b/pages/en-us/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { NextPage } from 'next'
-import NextLink from 'next/link'
-import { useTheme, Button, Card, Grid } from 'components'
+import { useTheme, Grid } from 'components'
 import PackageIcon from '@geist-ui/icons/package'
 import FeatherIcon from '@geist-ui/icons/feather'
 import GitHubIcon from '@geist-ui/icons/github'
+import HomeCell from 'lib/components/displays/home-cell'
 
 const Application: NextPage<{}> = () => {
   const theme = useTheme()
@@ -13,73 +13,36 @@ const Application: NextPage<{}> = () => {
     <>
       <div className="layout">
         <div className="hero">
-          <h1 className="hero__title">Geist</h1>
-          <h3 className="hero__description">
+          <h1 className="title">Geist</h1>
+          <h3 className="desc">
             An open source design system for building modern websites and applications.
           </h3>
-          <div className="hero__actions">
-            <NextLink href="/en-us/guide/installation" passHref>
-              <Button auto type="success" shadow scale={1.25} margin={0.25}>
-                Documentation
-              </Button>
-            </NextLink>
-            <NextLink href="https://github.com/geist-org/geist-ui" passHref>
-              <Button auto type="abort" scale={1.25} margin={0.25}>
-                GitHub
-              </Button>
-            </NextLink>
-          </div>
         </div>
 
         <Grid.Container gap={2} justify="center">
           <Grid xs={24} md={8}>
-            <NextLink href="/en-us/components">
-              <a>
-                <Card shadow className="feature__card" width="100%">
-                  <h4 className="feature__title">
-                    <div className="feature__icon">
-                      <PackageIcon />
-                    </div>
-                    Components
-                  </h4>
-                  <p className="feature__description">
-                    Ever-increasing list of concise and aesthetic components.
-                  </p>
-                </Card>
-              </a>
-            </NextLink>
+            <HomeCell
+              icon={<PackageIcon />}
+              url="/en-us/components"
+              title="Components"
+              desc="Ever-increasing list of concise and aesthetic components."
+            />
           </Grid>
           <Grid xs={24} md={8}>
-            <NextLink href="/en-us/customization">
-              <a>
-                <Card shadow className="feature__card" width="100%">
-                  <h4 className="feature__title">
-                    <div className="feature__icon">
-                      <FeatherIcon />
-                    </div>
-                    Customizable
-                  </h4>
-                  <p className="feature__description">
-                    Configure sizes, colors, appearances, shapes, and more.
-                  </p>
-                </Card>
-              </a>
-            </NextLink>
+            <HomeCell
+              icon={<FeatherIcon />}
+              url="/en-us/guide/themes"
+              title="Customizable"
+              desc="Configure sizes, colors, appearances, shapes, and more."
+            />
           </Grid>
           <Grid xs={24} md={8}>
-            <a href="https://github.com/geist-org/geist-ui" target="_blank">
-              <Card shadow className="feature__card" width="100%">
-                <h4 className="feature__title">
-                  <div className="feature__icon">
-                    <GitHubIcon />
-                  </div>
-                  Open Sourced
-                </h4>
-                <p className="feature__description">
-                  Geist is open sourced and available free under MIT licence.
-                </p>
-              </Card>
-            </a>
+            <HomeCell
+              icon={<GitHubIcon />}
+              url="https://github.com/geist-org/geist-ui"
+              title="Open Sourced"
+              desc="Geist is open sourced and available free under MIT licence."
+            />
           </Grid>
         </Grid.Container>
       </div>
@@ -94,52 +57,29 @@ const Application: NextPage<{}> = () => {
           box-sizing: border-box;
         }
         .hero {
+          height: calc(
+            100vh - var(--geist-page-nav-height) - var(--geist-page-tab-height) - 300px
+          );
+          min-height: 30vh;
           max-width: 500px;
           margin: 0 auto;
           text-align: center;
-          padding: calc(${theme.layout.gap} * 5) 0;
+          align-items: center;
+          justify-content: center;
+          display: flex;
+          flex-direction: column;
         }
-        .hero__title {
+        .title {
           font-size: 3.75rem;
           font-weight: 700;
           margin: 0;
         }
-        .hero__description {
+        .desc {
           color: ${theme.palette.accents_5};
           font-size: 1.5rem;
           font-weight: 500;
           margin: 0 0 ${theme.layout.gap};
         }
-        .hero__actions :global(.btn) {
-          font-weight: 500;
-        }
-        :global(.feature__card) :global(.content) {
-          padding: ${theme.layout.gap};
-        }
-        .feature__title {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-        .feature__icon {
-          height: 2.5rem;
-          width: 2.5rem;
-          padding: 0.625rem;
-          margin-right: ${theme.layout.gapHalf};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: linear-gradient(#3291ff, #0761d1);
-          color: #fff;
-          border-radius: 2rem;
-        }
-        .feature__icon :global(svg) {
-          width: 100%;
-          height: 100%;
-        }
-        .feature__description {
-          color: ${theme.palette.accents_6};
-        }
       `}</style>
     </>
   )
diff --git a/pages/zh-cn/customization/index.tsx b/pages/zh-cn/customization/index.tsx
deleted file mode 100644
index 94da70d4c..000000000
--- a/pages/zh-cn/customization/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import { Text, Spacer } from 'components'
-import CustomizationLayout from 'lib/components/customization/layout'
-import CustomizationEditor from 'lib/components/customization/editor'
-import PageHeader from 'lib/components/header'
-const meta = {
-  title: '定制化',
-}
-
-const Customization = () => {
-  return (
-    <CustomizationLayout>
-      <PageHeader meta={meta} />
-      <Spacer h={1.2} />
-      <Text h2>定制化</Text>
-      <Text>在 Geist UI 中自定义主题非常简单，点击更改，然后拷贝或是分享。</Text>
-      <CustomizationEditor />
-      <Spacer h={2} />
-    </CustomizationLayout>
-  )
-}
-
-export default Customization
diff --git a/pages/zh-cn/index.tsx b/pages/zh-cn/index.tsx
index 1d0f9421c..caff216a0 100644
--- a/pages/zh-cn/index.tsx
+++ b/pages/zh-cn/index.tsx
@@ -1,85 +1,45 @@
 import React from 'react'
 import { NextPage } from 'next'
-import NextLink from 'next/link'
-import { useTheme, Button, Card, Grid } from 'components'
+import { useTheme, Grid } from 'components'
 import PackageIcon from '@geist-ui/icons/package'
 import FeatherIcon from '@geist-ui/icons/feather'
 import GitHubIcon from '@geist-ui/icons/github'
+import HomeCell from 'lib/components/displays/home-cell'
 
-const Application: NextPage<{}> = () => {
+const Home: NextPage<unknown> = () => {
   const theme = useTheme()
 
   return (
     <>
       <div className="layout">
         <div className="hero">
-          <h1 className="hero__title">Geist</h1>
-          <h3 className="hero__description">
-            An open source design system for building modern websites and applications.
-          </h3>
-          <div className="hero__actions">
-            <NextLink href="/zh-cn/guide/installation" passHref>
-              <Button auto type="success" shadow scale={1.25} margin={0.25}>
-                Documentation
-              </Button>
-            </NextLink>
-            <NextLink href="https://github.com/geist-org/geist-ui" passHref>
-              <Button auto type="abort" scale={1.25} margin={0.25}>
-                GitHub
-              </Button>
-            </NextLink>
-          </div>
+          <h1 className="title">Geist</h1>
+          <h3 className="desc">一个用于构建现代 Web 应用的开源设计系统</h3>
         </div>
-
         <Grid.Container gap={2} justify="center">
           <Grid xs={24} md={8}>
-            <NextLink href="/zh-cn/components">
-              <a>
-                <Card shadow className="feature__card" width="100%">
-                  <h4 className="feature__title">
-                    <div className="feature__icon">
-                      <PackageIcon />
-                    </div>
-                    Components
-                  </h4>
-                  <p className="feature__description">
-                    Ever-increasing list of concise and aesthetic components.
-                  </p>
-                </Card>
-              </a>
-            </NextLink>
+            <HomeCell
+              icon={<PackageIcon />}
+              url="/zh-cn/components"
+              title="Components"
+              desc="Ever-increasing list of concise and aesthetic components."
+            />
           </Grid>
           <Grid xs={24} md={8}>
-            <NextLink href="/zh-cn/customization">
-              <a>
-                <Card shadow className="feature__card" width="100%">
-                  <h4 className="feature__title">
-                    <div className="feature__icon">
-                      <FeatherIcon />
-                    </div>
-                    Customizable
-                  </h4>
-                  <p className="feature__description">
-                    Configure sizes, colors, appearances, shapes, and more.
-                  </p>
-                </Card>
-              </a>
-            </NextLink>
+            <HomeCell
+              icon={<FeatherIcon />}
+              url="/zh-cn/guide/themes"
+              title="Customizable"
+              desc="Configure sizes, colors, appearances, shapes, and more."
+            />
           </Grid>
           <Grid xs={24} md={8}>
-            <a href="https://github.com/geist-org/geist-ui" target="_blank">
-              <Card shadow className="feature__card" width="100%">
-                <h4 className="feature__title">
-                  <div className="feature__icon">
-                    <GitHubIcon />
-                  </div>
-                  Open Sourced
-                </h4>
-                <p className="feature__description">
-                  Geist is open sourced and available free under MIT licence.
-                </p>
-              </Card>
-            </a>
+            <HomeCell
+              icon={<GitHubIcon />}
+              url="https://github.com/geist-org/geist-ui"
+              title="Open Sourced"
+              desc="Geist is open sourced and available free under MIT licence."
+            />
           </Grid>
         </Grid.Container>
       </div>
@@ -94,55 +54,32 @@ const Application: NextPage<{}> = () => {
           box-sizing: border-box;
         }
         .hero {
-          max-width: 500px;
+          height: calc(
+            100vh - var(--geist-page-nav-height) - var(--geist-page-tab-height) - 300px
+          );
+          min-height: 30vh;
+          max-width: 100%;
           margin: 0 auto;
           text-align: center;
-          padding: calc(${theme.layout.gap} * 5) 0;
+          align-items: center;
+          justify-content: center;
+          display: flex;
+          flex-direction: column;
         }
-        .hero__title {
+        .title {
           font-size: 3.75rem;
           font-weight: 700;
           margin: 0;
         }
-        .hero__description {
+        .desc {
           color: ${theme.palette.accents_5};
           font-size: 1.5rem;
           font-weight: 500;
           margin: 0 0 ${theme.layout.gap};
         }
-        .hero__actions :global(.btn) {
-          font-weight: 500;
-        }
-        :global(.feature__card) :global(.content) {
-          padding: ${theme.layout.gap};
-        }
-        .feature__title {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-        .feature__icon {
-          height: 2.5rem;
-          width: 2.5rem;
-          padding: 0.625rem;
-          margin-right: ${theme.layout.gapHalf};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: linear-gradient(#3291ff, #0761d1);
-          color: #fff;
-          border-radius: 2rem;
-        }
-        .feature__icon :global(svg) {
-          width: 100%;
-          height: 100%;
-        }
-        .feature__description {
-          color: ${theme.palette.accents_6};
-        }
       `}</style>
     </>
   )
 }
 
-export default Application
+export default Home