diff --git a/src/views/job/TaskDetail.vue b/src/views/job/TaskDetail.vue
index 84b99a2..733777e 100644
--- a/src/views/job/TaskDetail.vue
+++ b/src/views/job/TaskDetail.vue
@@ -17,18 +17,18 @@
             Image URL:
             {{ attribute.data.imageURL }}
           </h2>
-          <h2>
-            Task Attributes:
-            {{
-              attribute.data.taskAttributes ??
-              "Task Attributes not support for displaying in frontend"
-            }}
-          </h2>
           Status:
           <StatusChip
             :status="attribute.data.status"
             :decorator-composable="useTaskStatusDecorator"
           ></StatusChip>
+
+          <v-textarea
+            label="Task Attributes"
+            v-model:model-value="attribute.taskAttribute"
+            disabled
+          >
+          </v-textarea>
         </v-card-subtitle>
       </v-card-item>
     </v-card>
diff --git a/src/views/job/composable/useGetTaskDetail.ts b/src/views/job/composable/useGetTaskDetail.ts
index c9708d7..93a5388 100644
--- a/src/views/job/composable/useGetTaskDetail.ts
+++ b/src/views/job/composable/useGetTaskDetail.ts
@@ -5,12 +5,15 @@ import { reactive } from "vue";
 export function useGetTaskDetail(taskID: string) {
   const attribute = reactive({
     data: {} as TaskDetailResponse,
+    taskAttribute: "" as string,
   });
 
   async function getTaskDetail() {
     const response =
       await RepositoryFactory.instance.taskRepository.getTaskDetail(taskID);
 
+    attribute.taskAttribute = JSON.stringify(response.taskAttributes);
+
     attribute.data = response;
   }