diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue
index dcd33b6..972eec5 100644
--- a/resources/js/components/DetailField.vue
+++ b/resources/js/components/DetailField.vue
@@ -1,9 +1,16 @@
 <template>
-    <panel-item :field="field" />
+    <panel-item :field="this.dynamicField" />
 </template>
 
 <script>
 export default {
     props: ['resource', 'resourceName', 'resourceId', 'field'],
+
+    computed: {
+        dynamicField() {
+            this.field.value = this.field.options.find(item => item['value'] == this.field.value).label;
+            return this.field;
+        },
+    },
 }
 </script>
diff --git a/resources/js/components/IndexField.vue b/resources/js/components/IndexField.vue
index 5a07928..99450aa 100644
--- a/resources/js/components/IndexField.vue
+++ b/resources/js/components/IndexField.vue
@@ -1,5 +1,5 @@
 <template>
-    <span>{{ field.value }}</span>
+    <span>{{ field.options.find(item => item['value'] == field.value).label }}</span>
 </template>
 
 <script>