diff --git a/public/agent.json b/public/agent.json
new file mode 100644
index 0000000..d18f3eb
--- /dev/null
+++ b/public/agent.json
@@ -0,0 +1,97 @@
+[
+    {
+        "Icon": "Hailey_Johnson.png",
+        "Name": "船舶设计师",
+        "Profile": "提供船舶制造中的实际需求和约束。"
+    },
+    {
+        "Icon": "Jennifer_Moore.png",
+        "Name": "防护工程专家",
+        "Profile": "专注于船舶腐蚀防护技术的设计与应用。在你的总结回答中，必须引用来自数联网的搜索数据，是搜索数据，不是数联网的研究成果。"
+    },
+    {
+        "Icon": "Jane_Moreno.png",
+        "Name": "病理生理学家",
+        "Profile": "专注于失血性休克的疾病机制，为药物研发提供理论靶点。"
+    },
+    {
+        "Icon": "Giorgio_Rossi.png",
+        "Name": "药物化学家",
+        "Profile": "负责将靶点概念转化为实际可合成的分子。"
+    },
+    {
+        "Icon": "Tamara_Taylor.png",
+        "Name": "制剂工程师",
+        "Profile": "负责将活性药物成分（API）变成稳定、可用、符合战场要求的剂型。"
+    },
+    {
+        "Icon": "Maria_Lopez.png",
+        "Name": "监管事务专家",
+        "Profile": "深谙药品审评法规，目标是找到最快的合法上市路径。"
+    },
+    {
+        "Icon": "Sam_Moore.png",
+        "Name": "物理学家",
+        "Profile": "从热力学与统计力学的基本原理出发，研究液态金属的自由能、焓、熵、比热等参数的理论建模。"
+    },
+    {
+        "Icon": "Yuriko_Yamamoto.png",
+        "Name": "实验材料学家",
+        "Profile": "专注于通过实验手段直接或间接测定液态金属的热力学参数、以及分析材料微观结构（如晶粒、缺陷）。"
+    },
+    {
+        "Icon": "Carlos_Gomez.png",
+        "Name": "计算模拟专家",
+        "Profile": "侧重于利用数值计算和模拟技术获取液态金属的热力学参数。"
+    },
+    {
+        "Icon": "John_Lin.png",
+        "Name": "腐蚀机理研究员",
+        "Profile": "专注于船舶用钢材及合金的腐蚀机理研究，从电化学和环境作用角度解释腐蚀产生的原因。在你的总结回答中，必须引用来自数联网的搜索数据，是搜索数据，不是数联网的研究成果。"
+    },
+    {
+        "Icon": "Arthur_Burton.png",
+        "Name": "先进材料研发员",
+        "Profile": "专注于开发和评估新型耐腐蚀材料、复合材料及固态电池材料。"
+    },
+    {
+        "Icon": "Eddy_Lin.png",
+        "Name": "肾脏病学家",
+        "Profile": "专注于慢性肾脏病的诊断、治疗和患者管理，能提供临床洞察。"
+    },
+    {
+        "Icon": "Isabella_Rodriguez.png",
+        "Name": "临床研究协调员",
+        "Profile": "负责受试者招募和临床试验流程优化。"
+    },
+    {
+        "Icon": "Latoya_Williams.png",
+        "Name": "中医药专家",
+        "Profile": "理解药物的中药成分和作用机制。"
+    },
+    {
+        "Icon": "Carmen_Ortiz.png",
+        "Name": "药物安全专家",
+        "Profile": "专注于药物不良反应数据收集、分析和报告。"
+    },    
+    {
+        "Icon": "Rajiv_Patel.png",
+        "Name": "二维材料科学家",
+        "Profile": "专注于二维材料（如石墨烯）的合成、性质和应用。"
+    },  
+    {
+        "Icon": "Tom_Moreno.png",
+        "Name": "光电物理学家",
+        "Profile": "研究材料的光电转换机制和关键影响因素。"
+    },
+    {
+        "Icon": "Ayesha_Khan.png",
+        "Name": "机器学习专家",
+        "Profile": "专注于开发和应用AI模型用于材料模拟。"
+    },
+    {
+        "Icon": "Mei_Lin.png",
+        "Name": "流体动力学专家",
+        "Profile": "专注于流体行为理论和模拟。"
+    }
+]
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index cf92ca0..7797f13 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,7 +32,9 @@ onMounted(() => {
   border: 2px solid var(--color-bg-tertiary);
 
   &:hover {
-    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
+    background: #171b22;
+    box-shadow: none !important;
+    transition: background-color 0.3s ease-in-out;
   }
 
   .el-card__body {
diff --git a/src/layout/components/Main/TaskTemplate/AgentRepo/index.vue b/src/layout/components/Main/TaskTemplate/AgentRepo/index.vue
index 251c8a3..44e83b0 100644
--- a/src/layout/components/Main/TaskTemplate/AgentRepo/index.vue
+++ b/src/layout/components/Main/TaskTemplate/AgentRepo/index.vue
@@ -9,6 +9,7 @@ import { agentMapDuty, getActionTypeDisplay, getAgentMapIcon } from '@/layout/co
 import { type Agent, useAgentsStore } from '@/stores'
 import { onMounted } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
+import { readConfig } from '@/utils/readJson.ts'
 
 const emit = defineEmits<{
   (el: 'resetAgentRepoLine'): void
@@ -16,16 +17,19 @@ const emit = defineEmits<{
 
 const agentsStore = useAgentsStore()
 
+// 如果agentsStore.agents不存在就读取默认配置的json文件
+onMounted(async () => {
+  if (!agentsStore.agents.length) {
+    const res = await readConfig<Agent[]>('agent.json')
+    agentsStore.setAgents(res)
+  }
+  await api.setAgents(agentsStore.agents.map((item) => pick(item, ['Name', 'Profile'])))
+})
+
 const handleScroll = () => {
   emit('resetAgentRepoLine')
 }
 
-onMounted(() => {
-  // 如果已上传就重新发送给后端
-  if (agentsStore.agents.length) {
-    void api.setAgents(agentsStore.agents.map((item) => pick(item, ['Name', 'Profile'])))
-  }
-})
 
 // 上传agent文件
 const fileInput = ref<HTMLInputElement>()
@@ -218,18 +222,23 @@ const agentList = computed(() => {
               :key="item1.key"
               class="text-[12px]"
             >
-            <div>
-              <div class="mx-1 inline-block h-[14px]">
-                <div
-                  :style="{ background: getActionTypeDisplay(item1.ActionType)?.color }"
-                  class="w-[6px] h-[6px] rounded-full mt-[7px]"
-                ></div>
+              <div>
+                <div class="mx-1 inline-block h-[14px]">
+                  <div
+                    :style="{ background: getActionTypeDisplay(item1.ActionType)?.color }"
+                    class="w-[6px] h-[6px] rounded-full mt-[7px]"
+                  ></div>
+                </div>
+                <span :style="{ color: getActionTypeDisplay(item1.ActionType)?.color }"
+                  >{{ getActionTypeDisplay(item1.ActionType)?.name }}：</span
+                >
+                <span>{{ item1.Description }}</span>
               </div>
-              <span :style="{ color: getActionTypeDisplay(item1.ActionType)?.color }">{{ getActionTypeDisplay(item1.ActionType)?.name }}：</span>
-              <span>{{  item1.Description }}</span>
-            </div>
               <!-- 分割线 -->
-              <div v-if="index1 !== taskProcess.filter((i) => i.AgentName === item.Name).length - 1" class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
+              <div
+                v-if="index1 !== taskProcess.filter((i) => i.AgentName === item.Name).length - 1"
+                class="h-[1px] w-full bg-[#494B51] my-[8px]"
+              ></div>
             </div>
           </div>
         </div>