diff --git a/docs/showcase.md b/docs/showcase.md
new file mode 100644
index 0000000000..f9f0132eef
--- /dev/null
+++ b/docs/showcase.md
@@ -0,0 +1,9 @@
+---
+title: Showcase
+---
+
+Show your project here by commiting a PR that add your project to [**showcase.json**](https://https://github.com/alovajs/alovajs.github.io/blob/main/showcase.json)
+
+import Showcase from '@site/src/components/Showcase';
+
+<Showcase />
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index a0e694c3b7..697602b2cd 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -162,6 +162,11 @@ const config: Config = {
             }
           ]
         },
+        {
+          to: 'showcase',
+          position: 'left',
+          label: 'Showcase'
+        },
         {
           type: 'search',
           className: 'doc-search',
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current/showcase.md b/i18n/zh-CN/docusaurus-plugin-content-docs/current/showcase.md
new file mode 100644
index 0000000000..0939b45fce
--- /dev/null
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/current/showcase.md
@@ -0,0 +1,9 @@
+---
+title: 案例展示
+---
+
+通过提交一个 PR，在[**showcase.json**](https://https://github.com/alovajs/alovajs.github.io/blob/main/showcase.json)中添加你的项目，从而在此处展示你的项目。
+
+import Showcase from '@site/src/components/Showcase';
+
+<Showcase />
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md b/i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md
index 9dc2b79cff..5ed2c25773 100644
--- a/i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md
@@ -422,10 +422,17 @@ flowchart LR
 - [从 v2 迁移到 v3](/tutorial/project/migration/v2-to-v3)
 - [从 axios 低成本迁移到 alova 的指南](/tutorial/project/migration/from-axios)
 
-## 脚手架推荐
+## 项目推荐
 
 <NavCard list={[
 {
+Image: <img src="/img/project/naive-ui-admin.png"/>,
+title: 'Naive Admin',
+desc: '开箱即用的中后台框架/简化您的中后台开发',
+link: 'https://www.naiveadmin.com/',
+target: '__blank'
+},
+{
 Image: <img src="https://codercup.github.io/unibest-docs/logo.svg"/>,
 title: 'Uniapp 脚手架 - unibest',
 desc: '集成了最新前端技术栈的跨端解决方案',
diff --git a/i18n/zh-CN/docusaurus-theme-classic/navbar.json b/i18n/zh-CN/docusaurus-theme-classic/navbar.json
index 805ba1a896..a590f3a06c 100644
--- a/i18n/zh-CN/docusaurus-theme-classic/navbar.json
+++ b/i18n/zh-CN/docusaurus-theme-classic/navbar.json
@@ -15,6 +15,10 @@
     "message": "社区贡献",
     "description": "Navbar item with label Contributing"
   },
+  "item.label.Showcase": {
+    "message": "案例展示",
+    "description": "Navbar item with label Showcase"
+  },
   "item.label.About": {
     "message": "关于",
     "description": "Navbar item with label About"
diff --git a/showcase.json b/showcase.json
new file mode 100644
index 0000000000..430a2ce905
--- /dev/null
+++ b/showcase.json
@@ -0,0 +1,44 @@
+[
+  {
+    "title": "Naive Admin",
+    "logo": "/img/project/naive-ui-admin.png",
+    "desc": "开箱即用的中后台框架/简化您的中后台开发",
+    "link": "https://www.naiveadmin.com/"
+  },
+  {
+    "title": "Nova-admin",
+    "logo": "/img/project/nova-admin.png",
+    "desc": "A simple and flexible admin template based on Vue3, Vite, TypeScript, NaiveUI",
+    "link": "https://github.com/chansee97/nova-admin"
+  },
+  {
+    "title": "EMS-ESP",
+    "logo": "/img/project/ems-esp.png",
+    "desc": "ESP32 firmware to read and control EMS and Heatronic compatible equipment such as boilers, thermostats, solar modules, and heat pumps",
+    "link": "https://github.com/emsesp/EMS-ESP32"
+  },
+  {
+    "title": "MallChat",
+    "logo": "/img/project/mall-chat.png",
+    "desc": "mallchat的前端项目，是一个既能购物又能聊天的电商系统。",
+    "link": "https://github.com/Evansy/MallChatWeb"
+  },
+  {
+    "title": "KoKo",
+    "logo": "/img/project/koko.png",
+    "desc": "a connector of JumpServer for secure connections using character protocols, supporting SSH, Telnet, Kubernetes, SFTP and database protocols",
+    "link": "https://github.com/jumpserver/koko"
+  },
+  {
+    "title": "5Minutes",
+    "logo": "/img/project/5minutes.png",
+    "desc": "5minutes is a mentor-mentee learning platform where mentors share content that is consumable in no more than 5minutes.",
+    "link": "https://app.5minutes.ng/"
+  },
+  {
+    "title": "vue-shopping-cart",
+    "logo": "/img/project/vue-shopping-cart.png",
+    "desc": "Simple shopping cart with Vue.js and Deno.js",
+    "link": "https://github.com/dangvanthanh/vue-shopping-cart"
+  }
+]
diff --git a/src/common/constants.tsx b/src/common/constants.tsx
index ccc5529f26..c4cfb43395 100644
--- a/src/common/constants.tsx
+++ b/src/common/constants.tsx
@@ -167,9 +167,14 @@ const alovaInstance = createAlova({
 ];
 
 export const Project: UserDescProps[] = [
+  {
+    avatar: '/img/project/naive-ui-admin.png',
+    name: 'Naive Admin',
+    to: 'https://www.naiveadmin.com/'
+  },
   {
     avatar: '/img/project/nova-admin.png',
-    name: 'Nova-admin',
+    name: 'Nova admin',
     to: 'https://github.com/chansee97/nova-admin'
   },
   {
@@ -189,7 +194,7 @@ export const DeveloperComments: UserDescProps[] = [
     avatar: '/img/avatar/scott-hu.png',
     name: 'Scott Hu',
     description: translate({
-      message: 'The creator of alova',
+      message: 'Creator of alova',
       id: 'homepage.projects.Scott Hu.desc'
     }),
     children: (
@@ -225,7 +230,7 @@ export const DeveloperComments: UserDescProps[] = [
   {
     avatar: '/img/avatar/ah-jung.png',
     name: 'Ah jung',
-    description: 'Developer',
+    description: 'Author of Naive Admin',
     children: (
       <p>
         <Translate id="homepage.projects.Ah jung.comment">
diff --git a/src/components/NavCard/index.tsx b/src/components/NavCard/index.tsx
index 0aaae021fc..4ba34e6dd2 100644
--- a/src/components/NavCard/index.tsx
+++ b/src/components/NavCard/index.tsx
@@ -15,25 +15,27 @@ interface IProps {
 }
 const NavCard = ({ list }: IProps) => {
   return (
-    <div className={styles.cardWrapper}>
-      {list.map(({ Image, target, title, desc, link }) => (
-        <Link
-          to={link}
-          key={title}
-          target={target}
-          className={clsx(styles.cardItem)}>
-          <div className={styles.cardTitle}>
-            <div className="flex-row align-center">
-              {Image ? <div className={styles.image}>{Image}</div> : null}
-              <strong>{title}</strong>
+    <div className="use-tailwind">
+      <div className="grid grid-rows-1 gap-3 xl:gap-4 xl:grid-cols-3">
+        {list.map(({ Image, target, title, desc, link }) => (
+          <Link
+            to={link}
+            key={title}
+            target={target}
+            className={clsx(styles.cardItem, desc ? '' : 'justify-center')}>
+            <div className={styles.cardTitle}>
+              <div className="flex-row align-center">
+                {Image ? <div className={styles.image}>{Image}</div> : null}
+                <strong>{title}</strong>
+              </div>
+              <IconFont
+                name="youjiantou"
+                width={18}></IconFont>
             </div>
-            <IconFont
-              name="youjiantou"
-              width={18}></IconFont>
-          </div>
-          {desc ? <span className={styles.cardDesc}>{desc}</span> : null}
-        </Link>
-      ))}
+            {desc ? <span className={styles.cardDesc}>{desc}</span> : null}
+          </Link>
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/src/components/NavCard/style.module.css b/src/components/NavCard/style.module.css
index f36e65c2ea..4cfe830362 100644
--- a/src/components/NavCard/style.module.css
+++ b/src/components/NavCard/style.module.css
@@ -1,6 +1,3 @@
-.cardWrapper {
-  display: flex;
-}
 .cardItem {
   display: flex;
   flex-direction: column;
@@ -18,9 +15,6 @@
   background: transparent;
   box-shadow: 2px 2px 8px var(--ifm-color-emphasis-300);
 }
-.cardItem:not(:last-child) {
-  margin-right: 1rem;
-}
 .cardTitle {
   display: flex;
   align-items: center;
@@ -38,19 +32,10 @@
 .image {
   width: 1.8rem;
   margin-right: 0.6rem;
+  display: flex;
 }
 .image svg {
   width: 100%;
   height: auto;
   display: block;
 }
-
-@media screen and (max-width: 996px) {
-  .cardWrapper {
-    flex-direction: column;
-  }
-  .cardItem:not(:last-child) {
-    margin-bottom: 1rem;
-    margin-right: 0;
-  }
-}
diff --git a/src/components/Showcase.tsx b/src/components/Showcase.tsx
new file mode 100644
index 0000000000..ec27585052
--- /dev/null
+++ b/src/components/Showcase.tsx
@@ -0,0 +1,13 @@
+import showcase from '@site/showcase.json';
+import NavCard from '@site/src/components/NavCard';
+
+export default function Showcase(): JSX.Element {
+  return (
+    <NavCard
+      list={showcase.map(item => ({
+        Image: <img src={item.logo} />,
+        target: '__blank',
+        ...item
+      }))}></NavCard>
+  );
+}
diff --git a/src/pages/_indexComponent/UserDescription/index.tsx b/src/pages/_indexComponent/UserDescription/index.tsx
index e6530b3166..0b74dcad16 100644
--- a/src/pages/_indexComponent/UserDescription/index.tsx
+++ b/src/pages/_indexComponent/UserDescription/index.tsx
@@ -17,7 +17,6 @@ function renderAvatar(avatar: UserDescProps['avatar'], size = 40, radius = 0) {
   return typeof avatar === 'string' ? (
     <img
       style={{
-        width: `${size}px`,
         height: `${size}px`,
         borderRadius: `${radius}px`
       }}
diff --git a/static/img/project/5minutes.png b/static/img/project/5minutes.png
new file mode 100644
index 0000000000..797f8b272f
Binary files /dev/null and b/static/img/project/5minutes.png differ
diff --git a/static/img/project/koko.png b/static/img/project/koko.png
new file mode 100644
index 0000000000..6ca19d05b8
Binary files /dev/null and b/static/img/project/koko.png differ
diff --git a/static/img/project/naive-ui-admin.png b/static/img/project/naive-ui-admin.png
new file mode 100644
index 0000000000..8ea9c8d62c
Binary files /dev/null and b/static/img/project/naive-ui-admin.png differ
diff --git a/static/img/project/vue-shopping-cart.png b/static/img/project/vue-shopping-cart.png
new file mode 100644
index 0000000000..a910d00387
Binary files /dev/null and b/static/img/project/vue-shopping-cart.png differ