Feat: Create a folder #3221 (#7228)

### What problem does this PR solve?

Feat: Create a folder #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/index.tsx

@@ -1,4 +1,5 @@
 import ListFilterBar from '@/components/list-filter-bar';
+import { Button } from '@/components/ui/button';
 import { useFetchChatAppList } from '@/hooks/chat-hooks';
 import { Plus } from 'lucide-react';
 import { ChatCard } from './chat-card';
@@ -9,8 +10,10 @@ export default function ChatList() {
   return (
     <section className="p-8">
       <ListFilterBar title="Chat apps">
-        <Plus className="mr-2 h-4 w-4" />
-        Create app
+        <Button variant={'tertiary'} size={'sm'}>
+          <Plus className="mr-2 h-4 w-4" />
+          Create app
+        </Button>
       </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) => {