diff --git a/src/components/Form/FormFields/TextReadonly.vue b/src/components/Form/FormFields/TextReadonly.vue
index c56b7ea2d..4f29cf4d7 100644
--- a/src/components/Form/FormFields/TextReadonly.vue
+++ b/src/components/Form/FormFields/TextReadonly.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="input-text">
-    {{ value.toString() }}
+  <div :class="bolder ? 'bolder' : ''" class="input-text">
+    {{ value.toString() || text }}
   </div>
 </template>
 
@@ -9,7 +9,15 @@ export default {
   props: {
     value: {
       type: [String, Boolean],
-      default: () => false
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    bolder: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -20,12 +28,14 @@ export default {
 
 <style lang='scss' scoped>
 .input-text {
-  border: solid 1px #dcdfe6;
   line-height: 32px;
-  padding-left: 5px;
+  padding-left: 8px;
   height: 32px;
   margin-top: 4px;
   font-size: 13px;
 }
+.bolder {
+  border: solid 1px #dcdfe6;
+}
 
 </style>
diff --git a/src/views/users/Role/RoleCreateUpdate.vue b/src/views/users/Role/RoleCreateUpdate.vue
index 206b78801..7aa54b463 100644
--- a/src/views/users/Role/RoleCreateUpdate.vue
+++ b/src/views/users/Role/RoleCreateUpdate.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import { Text } from '@/components/Form/FormFields'
+import { TextReadonly } from '@/components/Form/FormFields'
 
 export default {
   components: {
@@ -33,9 +33,10 @@ export default {
             readonly: true
           },
           permissions: {
-            component: Text,
+            component: TextReadonly,
             el: {
-              text: this.$t('users.HelpText.addRolePermissions')
+              text: this.$t('users.HelpText.addRolePermissions'),
+              bolder: false
             }
           }
         }