diff --git a/web/src/pages/next-chat/chat-card.tsx b/web/src/pages/next-chat/chat-card.tsx
new file mode 100644
index 00000000000..aea15f4b6bf
--- /dev/null
+++ b/web/src/pages/next-chat/chat-card.tsx
@@ -0,0 +1,50 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { IDialog } from '@/interfaces/database/chat';
+import { formatPureDate } from '@/utils/date';
+import { ChevronRight, Trash2 } from 'lucide-react';
+
+interface IProps {
+  data: IDialog;
+}
+
+export function ChatCard({ data }: IProps) {
+  return (
+    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard">
+      <CardContent className="p-4">
+        <div className="flex justify-between mb-4">
+          {data.icon ? (
+            <div
+              className="w-[70px] h-[70px] rounded-xl bg-cover"
+              style={{ backgroundImage: `url(${data.icon})` }}
+            />
+          ) : (
+            <Avatar className="w-[70px] h-[70px]">
+              <AvatarImage src="https://github.com/shadcn.png" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+          )}
+        </div>
+        <h3 className="text-xl font-bold mb-2">{data.name}</h3>
+        <p>An app that does things An app that does things</p>
+        <section className="flex justify-between pt-3">
+          <div>
+            Search app
+            <p className="text-sm opacity-80">
+              {formatPureDate(data.update_time)}
+            </p>
+          </div>
+          <div className="space-x-2">
+            <Button variant="icon" size="icon">
+              <ChevronRight className="h-6 w-6" />
+            </Button>
+            <Button variant="icon" size="icon">
+              <Trash2 />
+            </Button>
+          </div>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/pages/next-chat/index.tsx b/web/src/pages/next-chat/index.tsx
index 1342c631e89..eb3f9146388 100644
--- a/web/src/pages/next-chat/index.tsx
+++ b/web/src/pages/next-chat/index.tsx
@@ -1,3 +1,22 @@
-export default function Chat() {
-  return <div>chat</div>;
+import ListFilterBar from '@/components/list-filter-bar';
+import { useFetchNextDialogList } from '@/hooks/chat-hooks';
+import { Plus } from 'lucide-react';
+import { ChatCard } from './chat-card';
+
+export default function ChatList() {
+  const { data: chatList } = useFetchNextDialogList();
+
+  return (
+    <section className="p-8">
+      <ListFilterBar title="Chat apps">
+        <Plus className="mr-2 h-4 w-4" />
+        Create app
+      </ListFilterBar>
+      <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8">
+        {chatList.map((x) => {
+          return <ChatCard key={x.id} data={x}></ChatCard>;
+        })}
+      </div>
+    </section>
+  );
 }
diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts
index 5222cce97bf..8515cc29cd8 100644
--- a/web/src/utils/date.ts
+++ b/web/src/utils/date.ts
@@ -25,3 +25,10 @@ export function lastDay() {
 export function lastWeek() {
   return formatDate(dayjs().subtract(1, 'weeks'));
 }
+
+export function formatPureDate(date: any) {
+  if (!date) {
+    return '';
+  }
+  return dayjs(date).format('DD/MM/YYYY');
+}