diff --git a/src/renderer/src/pages/agents/components/AgentCard.tsx b/src/renderer/src/pages/agents/components/AgentCard.tsx
index a1d92d0a25..9e2f08eb1c 100644
--- a/src/renderer/src/pages/agents/components/AgentCard.tsx
+++ b/src/renderer/src/pages/agents/components/AgentCard.tsx
@@ -43,14 +43,17 @@ const AgentCard: FC<Props> = ({ agent, onClick, activegroup, getLocalizedGroupNa
   )
 
   const exportAgent = useCallback(async () => {
-    const result = {
-      name: agent.name,
-      emoji: agent.emoji,
-      group: agent.group,
-      prompt: agent.prompt,
-      description: agent.description,
-      type: 'agent'
-    }
+    const result = [
+      {
+        name: agent.name,
+        emoji: agent.emoji,
+        group: agent.group,
+        prompt: agent.prompt,
+        description: agent.description,
+        regularPhrases: agent.regularPhrases,
+        type: 'agent'
+      }
+    ]
 
     const resultStr = JSON.stringify(result, null, 2)
 
@@ -216,7 +219,6 @@ const HeaderInfoEmoji = styled.div`
   border-radius: var(--list-item-border-radius);
   font-size: 26px;
   line-height: 1;
-  opacity: 0.8;
   flex-shrink: 0;
   opacity: 1;
   transition: opacity 0.2s ease;
@@ -245,12 +247,12 @@ const AgentCardContainer = styled.div`
 
   --shadow-color: rgba(0, 0, 0, 0.05);
   box-shadow:
-    0 5px 7px -3px var(--shadow-color),
-    0 2px 3px -4px var(--shadow-color);
+    0 5px 7px -3px var(--color-border-soft),
+    0 2px 3px -4px var(--color-border-soft);
   &:hover {
     box-shadow:
-      0 10px 15px -3px var(--shadow-color),
-      0 4px 6px -4px var(--shadow-color);
+      0 10px 15px -3px var(--color-border-soft),
+      0 4px 6px -4px var(--color-border-soft);
     transform: translateY(-2px);
 
     ${AgentCardHeaderInfoAction} ${HeaderInfoEmoji} {