diff --git a/web/src/app/home/components/home-sidebar/sidbarConfigList.tsx b/web/src/app/home/components/home-sidebar/sidbarConfigList.tsx
index 1c3fb4bb..b3edb98a 100644
--- a/web/src/app/home/components/home-sidebar/sidbarConfigList.tsx
+++ b/web/src/app/home/components/home-sidebar/sidbarConfigList.tsx
@@ -68,6 +68,25 @@ export const sidebarConfigList = [
       zh_Hans: 'https://docs.langbot.app/zh/deploy/pipelines/readme.html',
     },
   }),
+  new SidebarChildVO({
+    id: 'knowledge',
+    name: t('knowledge.title'),
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M3 18.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H6.5C4.567 22 3 20.433 3 18.5ZM19 20V17H6.5C5.67157 17 5 17.6716 5 18.5C5 19.3284 5.67157 20 6.5 20H19ZM10 4H6C5.44772 4 5 4.44772 5 5V15.3368C5.45463 15.1208 5.9632 15 6.5 15H19V4H17V12L13.5 10L10 12V4Z"></path>
+      </svg>
+    ),
+    route: '/home/knowledge',
+    description: t('knowledge.description'),
+    helpLink: {
+      en_US: 'https://docs.langbot.app/en/deploy/knowledge/readme.html',
+      zh_Hans: 'https://docs.langbot.app/zh/deploy/knowledge/readme.html',
+    },
+  }),
   new SidebarChildVO({
     id: 'plugins',
     name: t('plugins.title'),
@@ -88,23 +107,4 @@ export const sidebarConfigList = [
       zh_Hans: 'https://docs.langbot.app/zh/plugin/plugin-intro.html',
     },
   }),
-  new SidebarChildVO({
-    id: 'knowledge',
-    name: t('knowledge.title'),
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-      >
-        <path d="M3 18.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H6.5C4.567 22 3 20.433 3 18.5ZM19 20V17H6.5C5.67157 17 5 17.6716 5 18.5C5 19.3284 5.67157 20 6.5 20H19ZM10 4H6C5.44772 4 5 4.44772 5 5V15.3368C5.45463 15.1208 5.9632 15 6.5 15H19V4H17V12L13.5 10L10 12V4Z"></path>
-      </svg>
-    ),
-    route: '/home/knowledge',
-    description: t('knowledge.description'),
-    helpLink: {
-      en_US: 'https://docs.langbot.app/en/deploy/knowledge/readme.html',
-      zh_Hans: 'https://docs.langbot.app/zh/deploy/knowledge/readme.html',
-    },
-  }),
 ];
diff --git a/web/src/app/home/knowledge/knowledgeBase.module.css b/web/src/app/home/knowledge/knowledgeBase.module.css
new file mode 100644
index 00000000..e811b521
--- /dev/null
+++ b/web/src/app/home/knowledge/knowledgeBase.module.css
@@ -0,0 +1,15 @@
+.configPageContainer {
+  width: 100%;
+  height: 100%;
+}
+
+.knowledgeListContainer {
+  width: 100%;
+  padding-left: 0.8rem;
+  padding-right: 0.8rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
+  gap: 2rem;
+  justify-items: stretch;
+  align-items: start;
+}
diff --git a/web/src/app/home/knowledge/page.tsx b/web/src/app/home/knowledge/page.tsx
index 9707a8ee..7c9fd048 100644
--- a/web/src/app/home/knowledge/page.tsx
+++ b/web/src/app/home/knowledge/page.tsx
@@ -1,5 +1,22 @@
 'use client';
 
+import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
+import styles from './knowledgeBase.module.css';
+
 export default function KnowledgePage() {
-  return <div>KnowledgePage</div>;
+  return (
+    <div>
+      <div className={styles.knowledgeListContainer}>
+        <CreateCardComponent
+          width={'100%'}
+          height={'10rem'}
+          plusSize={'90px'}
+          onClick={() => {
+            // setIsEditForm(false);
+            // setModalOpen(true);
+          }}
+        />
+      </div>
+    </div>
+  );
 }