diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index 30698f1e5..83893e5bf 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -5,69 +5,10 @@
   width: 100%;
   aspect-ratio: 1.2877;
 }
-
-.hero {
-  text-align: center;
-}
-
-.hero .action,
-.hero p,
-.hero img,
-.hero h1 {
-  margin: 1.8rem auto;
-}
-
-.hero img {
+.reacnetgenerator-logo {
   max-width: 100%;
   max-height: 280px;
   display: block;
   margin: 3rem auto 1.5rem;
   background: none !important;
 }
-
-.hero p {
-  max-width: 35rem;
-  font-size: 1.6rem;
-  line-height: 1.3;
-  color: #6a8bad;
-}
-
-.hero .action-button {
-  display: inline-block;
-  font-size: 1.2rem;
-  color: #fff;
-  background-color: #3eaf7c;
-  padding: 0.8rem 1.6rem;
-  border-radius: 4px;
-  transition: background-color 0.1s ease;
-  box-sizing: border-box;
-  border-bottom: 1px solid #389d70;
-}
-
-.features {
-  border-top: 1px solid #eaecef;
-  padding: 1.2rem 0;
-  margin-top: 2.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: stretch;
-  justify-content: space-between;
-}
-
-.features section {
-  flex-grow: 1;
-  flex-basis: 30%;
-  max-width: 30%;
-}
-
-@media (max-width: 719px) {
-  .features {
-    flex-direction: column;
-  }
-
-  .features section {
-    max-width: 100%;
-    padding: 0 2.5rem;
-  }
-}
diff --git a/docs/conf.py b/docs/conf.py
index 40444712a..890d348ba 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -43,6 +43,7 @@
     "sphinx_favicon",
     "deepmodeling_sphinx",
     "sphinxcontrib.bibtex",
+    "sphinx_design",
 ]
 
 # Add any paths that contain templates here, relative to this directory.
@@ -111,6 +112,7 @@
 myst_enable_extensions = [
     "dollarmath",
     "colon_fence",
+    "attrs_inline",
 ]
 mathjax_path = (
     "https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"
diff --git a/docs/overall.md b/docs/overall.md
index c4d61516e..4813b9c27 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -1,46 +1,40 @@
-<header class="hero">
-
-![Logo](_static/reacnetgen.svg)
+![Logo](_static/reacnetgen.svg){.reacnetgenerator-logo}
 
 # ReacNetGenerator
 
 An automatic reaction network generator for reactive molecular dynamics simulation
 
-<a href="/guide/install.html" class="nav-link action-button">Get Started</a>
-
-</header>
+```{button-ref} ./guide/install
+:color: primary
+:shadow:
 
-<div class="features">
-
-## Trajectory
+Get Started
+```
 
+::::{grid} 1 2 3 3
+:::{grid-item-card} Trajectory
 Processing of MD trajectory containing atomic coordinates or bond orders
-
-## Filtering
-
+:::
+:::{grid-item-card} Filtering
 Hidden Markov Model (HMM) based noise filtering
-
-## Isomers
-
-Isomers identifying accoarding to SMILES
-
-## Network
-
+:::
+:::{grid-item-card} Isomers
+Isomers identifying according to SMILES
+:::
+:::{grid-item-card} Network
 Generation of reaction network for visualization using force-directed algorithm
-
-## HTML5
-
+:::
+:::{grid-item-card} HTML5
 Showing an interactive web page
-
-## Fast
-
+:::
+:::{grid-item-card} Fast
 Parallel computing and performance optimization
-
-</div>
+:::
+::::
 
 <div class="bilitube" data-youtube="TI21SI9YPfo" data-bvid="BV175411N7uG">Loading...</div>
 
-# Citation and contact
+## Citation and contact
 
 ```{bibliography}
 ---
@@ -51,7 +45,7 @@ Zeng_PhysChemChemPhys_2020_v22_p683
 
 jinzhe.zeng@rutgers.edu (Jinzhe Zeng), tzhu@lps.ecnu.edu.cn (Tong Zhu)
 
-# Guide and Tutorials
+## Guide and Tutorials
 
 You can install ReacNetGenerator with `conda`:
 
@@ -60,14 +54,14 @@ conda install reacnetgenerator -c conda-forge
 reacnetgenerator -h
 ```
 
-See [the guide](guide/index) to learn how to install and use ReacNetGenerattor. We also provide [a series of tutorials](tutorial/index) to help you learn ReacNetGenerator.
+See [the guide](guide/index) to learn how to install and use ReacNetGenerator. We also provide [a series of tutorials](tutorial/index) to help you learn ReacNetGenerator.
 
-# Awards
+## Awards
 
 - The First Prize in 2019 (the 11th Session) Shanghai Computer Application Competition for College Students
 - The First Prize in 2019 (the 12th Session) Chinese Computer Design Competition for College Students
 
-# Acknowledge
+## Acknowledge
 
 - National Natural Science Foundation of China (Grants No. 91641116)
 - National Innovation and Entrepreneurship Training Program for Undergraduate (201910269080)
diff --git a/pyproject.toml b/pyproject.toml
index 920bcb0af..cdebc8d1d 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -96,6 +96,7 @@ docs = [
     "sphinxcontrib-bibtex>=2.6.0",
     # See https://github.com/mcmtroffaes/sphinxcontrib-bibtex/issues/345
     "setuptools",
+    "sphinx-design",
 ]
 
 [tool.scikit-build]