diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
index e405b3dd..95e54415 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
@@ -4,21 +4,16 @@
     <div class="application-associated-ability-main">
       <div
         class="associated-ability-card"
-        v-for="(item, index) in dataFrom"
-        :key="item.type"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+        :key="dataListitem.id"
+        @click="switchFunction(dataListitem.id)"
       >
         <div class="associated-ability-card-title">
-          {{ item.type }}
+          {{ dataListitem.name }}
         </div>
         <div class="associated-ability-card-content">
-          <div
-            class="associated-ability-card-content-font"
-            v-for="(dataListitem, dataListindex) in item.dataList"
-            :key="dataListitem.id"
-            @click="switchFunction(dataListitem.id)"
-          >
-            <span>{{ dataListindex + 1 }}、</span>
-            {{ dataListitem.name }}
+          <div class="associated-ability-card-content-font">
+            {{ dataListitem.description }}
           </div>
         </div>
       </div>
@@ -85,11 +80,11 @@
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
-      width: 13.14rem;
+      width: 13.3rem;
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
       .associated-ability-card {
-        width: 4.28rem;
+        width: 3.2rem;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -112,9 +107,6 @@
             margin-right: 0.15rem;
             margin-top: 0.15rem;
           }
-          .associated-ability-card-content-font:hover {
-            color: #0058e1;
-          }
         }
       }
       .associated-ability-card:hover {
diff --git a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
index e405b3dd..95e54415 100644
--- a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
@@ -4,21 +4,16 @@
     <div class="application-associated-ability-main">
       <div
         class="associated-ability-card"
-        v-for="(item, index) in dataFrom"
-        :key="item.type"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+        :key="dataListitem.id"
+        @click="switchFunction(dataListitem.id)"
       >
         <div class="associated-ability-card-title">
-          {{ item.type }}
+          {{ dataListitem.name }}
         </div>
         <div class="associated-ability-card-content">
-          <div
-            class="associated-ability-card-content-font"
-            v-for="(dataListitem, dataListindex) in item.dataList"
-            :key="dataListitem.id"
-            @click="switchFunction(dataListitem.id)"
-          >
-            <span>{{ dataListindex + 1 }}、</span>
-            {{ dataListitem.name }}
+          <div class="associated-ability-card-content-font">
+            {{ dataListitem.description }}
           </div>
         </div>
       </div>
@@ -85,11 +80,11 @@
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
-      width: 13.14rem;
+      width: 13.3rem;
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
       .associated-ability-card {
-        width: 4.28rem;
+        width: 3.2rem;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -112,9 +107,6 @@
             margin-right: 0.15rem;
             margin-top: 0.15rem;
           }
-          .associated-ability-card-content-font:hover {
-            color: #0058e1;
-          }
         }
       }
       .associated-ability-card:hover {
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
index e405b3dd..95e54415 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
@@ -4,21 +4,16 @@
     <div class="application-associated-ability-main">
       <div
         class="associated-ability-card"
-        v-for="(item, index) in dataFrom"
-        :key="item.type"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+        :key="dataListitem.id"
+        @click="switchFunction(dataListitem.id)"
       >
         <div class="associated-ability-card-title">
-          {{ item.type }}
+          {{ dataListitem.name }}
         </div>
         <div class="associated-ability-card-content">
-          <div
-            class="associated-ability-card-content-font"
-            v-for="(dataListitem, dataListindex) in item.dataList"
-            :key="dataListitem.id"
-            @click="switchFunction(dataListitem.id)"
-          >
-            <span>{{ dataListindex + 1 }}、</span>
-            {{ dataListitem.name }}
+          <div class="associated-ability-card-content-font">
+            {{ dataListitem.description }}
           </div>
         </div>
       </div>
@@ -85,11 +80,11 @@
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
-      width: 13.14rem;
+      width: 13.3rem;
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
       .associated-ability-card {
-        width: 4.28rem;
+        width: 3.2rem;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -112,9 +107,6 @@
             margin-right: 0.15rem;
             margin-top: 0.15rem;
           }
-          .associated-ability-card-content-font:hover {
-            color: #0058e1;
-          }
         }
       }
       .associated-ability-card:hover {
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
index e405b3dd..95e54415 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
@@ -4,21 +4,16 @@
     <div class="application-associated-ability-main">
       <div
         class="associated-ability-card"
-        v-for="(item, index) in dataFrom"
-        :key="item.type"
+        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+        :key="dataListitem.id"
+        @click="switchFunction(dataListitem.id)"
       >
         <div class="associated-ability-card-title">
-          {{ item.type }}
+          {{ dataListitem.name }}
         </div>
         <div class="associated-ability-card-content">
-          <div
-            class="associated-ability-card-content-font"
-            v-for="(dataListitem, dataListindex) in item.dataList"
-            :key="dataListitem.id"
-            @click="switchFunction(dataListitem.id)"
-          >
-            <span>{{ dataListindex + 1 }}、</span>
-            {{ dataListitem.name }}
+          <div class="associated-ability-card-content-font">
+            {{ dataListitem.description }}
           </div>
         </div>
       </div>
@@ -85,11 +80,11 @@
     align-items: center;
     .application-associated-ability-main {
       margin-top: 0.4rem;
-      width: 13.14rem;
+      width: 13.3rem;
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
       .associated-ability-card {
-        width: 4.28rem;
+        width: 3.2rem;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -112,9 +107,6 @@
             margin-right: 0.15rem;
             margin-top: 0.15rem;
           }
-          .associated-ability-card-content-font:hover {
-            color: #0058e1;
-          }
         }
       }
       .associated-ability-card:hover {