diff --git a/frontend/src/app/[locale]/(authenticated)/agents/[id]/page.tsx b/frontend/src/app/[locale]/(authenticated)/agents/[id]/page.tsx
index 31db268..ee57e87 100644
--- a/frontend/src/app/[locale]/(authenticated)/agents/[id]/page.tsx
+++ b/frontend/src/app/[locale]/(authenticated)/agents/[id]/page.tsx
@@ -73,6 +73,13 @@ export default function AgentTypeDetailPage() {
             mcp_servers: data.mcp_servers,
             tool_permissions: data.tool_permissions,
             is_active: data.is_active,
+            // Category and display fields
+            category: data.category,
+            icon: data.icon,
+            color: data.color,
+            sort_order: data.sort_order,
+            typical_tasks: data.typical_tasks,
+            collaboration_hints: data.collaboration_hints,
           });
           toast.success('Agent type created', {
             description: `${result.name} has been created successfully`,
@@ -94,6 +101,13 @@ export default function AgentTypeDetailPage() {
               mcp_servers: data.mcp_servers,
               tool_permissions: data.tool_permissions,
               is_active: data.is_active,
+              // Category and display fields
+              category: data.category,
+              icon: data.icon,
+              color: data.color,
+              sort_order: data.sort_order,
+              typical_tasks: data.typical_tasks,
+              collaboration_hints: data.collaboration_hints,
             },
           });
           toast.success('Agent type updated', {
diff --git a/frontend/src/app/[locale]/(authenticated)/agents/page.tsx b/frontend/src/app/[locale]/(authenticated)/agents/page.tsx
index e0a147a..b9e12fe 100644
--- a/frontend/src/app/[locale]/(authenticated)/agents/page.tsx
+++ b/frontend/src/app/[locale]/(authenticated)/agents/page.tsx
@@ -49,10 +49,10 @@ export default function AgentTypesPage() {
     limit: 50,
   });
 
-  // Get filtered agent types
+  // Get filtered and sorted agent types (sort by sort_order ascending - smaller first)
   const filteredAgentTypes = useMemo(() => {
     if (!data?.data) return [];
-    return data.data;
+    return [...data.data].sort((a, b) => a.sort_order - b.sort_order);
   }, [data?.data]);
 
   // Handle navigation to agent type detail