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/agents/index.tsx

@@ -1,4 +1,5 @@
 import ListFilterBar from '@/components/list-filter-bar';
+import { Button } from '@/components/ui/button';
 import { useFetchFlowList } from '@/hooks/flow-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { Plus } from 'lucide-react';
@@ -11,9 +12,15 @@ export default function Agent() {
   return (
     <section>
       <div className="px-8 pt-8">
-        <ListFilterBar title="Agents" showDialog={navigateToAgentTemplates}>
-          <Plus className="mr-2 h-4 w-4" />
-          Create app
+        <ListFilterBar title="Agents">
+          <Button
+            variant={'tertiary'}
+            size={'sm'}
+            onClick={navigateToAgentTemplates}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            Create app
+          </Button>
         </ListFilterBar>
       </div>
       <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 max-h-[84vh] overflow-auto px-8">