diff --git a/frontend/src/app/knowledge/(desktop)/features/KnowledgeCard.tsx b/frontend/src/app/knowledge/(desktop)/features/KnowledgeCard.tsx
new file mode 100644
index 00000000..15e9589d
--- /dev/null
+++ b/frontend/src/app/knowledge/(desktop)/features/KnowledgeCard.tsx
@@ -0,0 +1,39 @@
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
+import { Card, Skeleton } from 'antd';
+import React, { useState } from 'react';
+
+const { Meta } = Card;
+
+interface KnowLedgeCardProps {
+  intro: string;
+  name: string;
+}
+const App: React.FC = (props: KnowLedgeCardProps) => {
+  const [loading, setLoading] = useState(false);
+  const { name, intro } = props;
+  const onChange = (checked: boolean) => {
+    setLoading(!checked);
+  };
+
+  return (
+    <Card
+      actions={[
+        <SettingOutlined key="setting" />,
+        <EditOutlined key="edit" />,
+        <EllipsisOutlined key="ellipsis" />,
+      ]}
+      bordered={false}
+      style={{ marginTop: 16, width: 300 }}
+    >
+      <Skeleton active avatar loading={loading}>
+        <Meta
+          // avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />}
+          description={intro}
+          title={name}
+        />
+      </Skeleton>
+    </Card>
+  );
+};
+
+export default App;
diff --git a/frontend/src/app/knowledge/(desktop)/features/KnowledgeConfig.tsx b/frontend/src/app/knowledge/(desktop)/features/KnowledgeConfig.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/knowledge/(desktop)/features/KnowledgeList.tsx b/frontend/src/app/knowledge/(desktop)/features/KnowledgeList.tsx
new file mode 100644
index 00000000..08a9b8b1
--- /dev/null
+++ b/frontend/src/app/knowledge/(desktop)/features/KnowledgeList.tsx
@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+
+import KnowledgeCard from './KnowledgeCard';
+
+const list = [
+  { intro: 'aaaaa', name: '321' },
+  { intro: 'aaaaa', name: '321' },
+  { intro: 'aaaaa', name: '321' },
+  { intro: 'aaaaa', name: '321' },
+  { intro: 'aaaaa', name: '321' },
+  { intro: 'aaaaa', name: '321' },
+  { intro: 'aaaaa', name: '321' },
+  { intro: 'aaaaa', name: '321' },
+];
+
+const RenderList = memo(() =>
+  list.map((item, index) => {
+    return <KnowledgeCard key={index} {...item} />;
+  }),
+);
+
+const KnowledgeCardList = memo(() => {
+  return <RenderList />;
+});
+
+export default KnowledgeCardList;
diff --git a/frontend/src/app/knowledge/(desktop)/index.tsx b/frontend/src/app/knowledge/(desktop)/index.tsx
index f3dc3fb8..5caf1ba3 100644
--- a/frontend/src/app/knowledge/(desktop)/index.tsx
+++ b/frontend/src/app/knowledge/(desktop)/index.tsx
@@ -1,27 +1,20 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import { FC, memo } from 'react';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ResponsiveIndex from '@/components/ResponsiveIndex';
 
-import PageTitle from '../features/PageTitle';
-import ChatHeader from './features/ChatHeader';
-import Conversation from './features/Conversation';
-import SideBar from './features/SideBar';
+import KnowledgeCardList from './features/KnowledgeList';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+// const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
 const DesktopPage = memo(() => (
-  <ResponsiveIndex Mobile={Mobile}>
+  <ResponsiveIndex Mobile={() => <div>321</div>}>
     <Layout>
-      <PageTitle />
-      <ChatHeader />
-      <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
-        <Conversation />
-        <SideBar />
+      <Flexbox gap={20} horizontal justify="flex-start" wrap="wrap">
+        <KnowledgeCardList />
       </Flexbox>
     </Layout>
   </ResponsiveIndex>
diff --git a/frontend/src/app/knowledge/(desktop)/layout.desktop.tsx b/frontend/src/app/knowledge/(desktop)/layout.desktop.tsx
index 94e2a462..509fec90 100644
--- a/frontend/src/app/knowledge/(desktop)/layout.desktop.tsx
+++ b/frontend/src/app/knowledge/(desktop)/layout.desktop.tsx
@@ -6,15 +6,14 @@ import { Flexbox } from 'react-layout-kit';
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-
 export default memo(({ children }: PropsWithChildren) => {
   return (
-    <AppLayoutDesktop sidebarKey={SidebarTabKey.Chat}>
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Knowledge}>
       <Flexbox
         flex={1}
         height={'100%'}
         id={'lobe-conversion-container'}
-        style={{ position: 'relative' }}
+        style={{ paddingLeft: 20, paddingRight: 20, position: 'relative' }}
       >
         {children}
       </Flexbox>
diff --git a/frontend/src/app/knowledge/page.tsx b/frontend/src/app/knowledge/page.tsx
index 2fbc496a..fc90ec13 100644
--- a/frontend/src/app/knowledge/page.tsx
+++ b/frontend/src/app/knowledge/page.tsx
@@ -1,9 +1,16 @@
+import DesktopPage from './(desktop)';
+
+// import MobilePage from './(mobile)';
+// import SessionHydration from './components/SessionHydration';
+// import Migration from './features/Migration';
+
 const Page = () => {
   // const mobile = isMobileDevice();
 
   // const Page = mobile ? MobilePage : DesktopPage;
+  const Page = DesktopPage;
 
-  return <div>321</div>;
+  return <Page />;
 };
 
 export default Page;