diff --git a/web/new-components/common/blurredCard/index.tsx b/web/new-components/common/blurredCard/index.tsx
index 2a74e5c57..a4863748c 100644
--- a/web/new-components/common/blurredCard/index.tsx
+++ b/web/new-components/common/blurredCard/index.tsx
@@ -50,9 +50,9 @@ const BlurredCard: React.FC<{
               {name.length > 6 ? (
                 <Tooltip title={name}>
                   <span
-                    className="truncate font-semibold text-base"
+                    className="line-clamp-1 text-ellipsis font-semibold text-base"
                     style={{
-                      maxWidth: '60%',
+                      // maxWidth: '60%',
                     }}
                   >
                     {name}
@@ -60,9 +60,9 @@ const BlurredCard: React.FC<{
                 </Tooltip>
               ) : (
                 <span
-                  className="truncate font-semibold text-base"
+                  className="line-clamp-1 text-ellipsis font-semibold text-base"
                   style={{
-                    maxWidth: '60%',
+                    // maxWidth: '60%',
                   }}
                 >
                   {name}
diff --git a/web/pages/construct/dbgpts/index.tsx b/web/pages/construct/dbgpts/index.tsx
index 39cfd2c82..418c79fcd 100644
--- a/web/pages/construct/dbgpts/index.tsx
+++ b/web/pages/construct/dbgpts/index.tsx
@@ -127,12 +127,20 @@ function Agent() {
     },
   ];
 
-  const logoUrl = { 
-    workflow: '/pictures/flow.png',
-    agents: '/pictures/agent.png',
-    resources: '/pictures/database.png',
-    apps: '/pictures/app.png',
-    operators: '/pictures/knowledge.png',
+  const logoFn = (type: string) => {
+    switch(type) {
+      case 'workflow':
+        return '/pictures/flow.png';
+      case 'resources':
+        return '/pictures/database.png';
+      case 'apps':
+        return '/pictures/app.png';
+      case 'operators':
+        return '/pictures/knowledge.png';
+      case 'agents':
+      default:
+        return '/pictures/agent.png';
+    };
   }
 
   return (
@@ -196,7 +204,7 @@ function Agent() {
           <div className='flex flex-wrap'>
             {agents.map((agent, index) => (
               <BlurredCard
-                logo={logoUrl[agent.type]}
+                logo={logoFn(agent.type)}
                 onClick={() => {
                   if (agent.storage_url) window.open(agent.storage_url, '_blank');
                 }}