diff --git a/src/components/modal/ticket/NewMessage.vue b/src/components/modal/ticket/NewMessage.vue
index f3495c6..6f005c8 100644
--- a/src/components/modal/ticket/NewMessage.vue
+++ b/src/components/modal/ticket/NewMessage.vue
@@ -1,68 +1,85 @@
 <template>
-    <div>
-        <v-container>
-            <material-card class color="black" title="New Message" text>
-                <v-layout wrap class="px-4 mb-3">
-                    <v-flex xs12 sm12 md12>
-                        <v-autocomplete
-                            :items="items"
-                            :loading="loading"
-                            :search-input.sync="search"
-                            v-model="user_id"
-                            item-text="name"
-                            item-value="id"
-                            label="Search"
-                            persistent-hint
-                            prepend-icon="fas fa-search"
-                            color="black"
-                        >
-                          <template v-slot:no-data>
-                            <v-list-tile>
-                              <v-list-tile-content>
-                                <v-list-tile-title class="black--text">
-                                  {{ loading ? 'Searching...' : 'please search the contact name' }}
-                                </v-list-tile-title>
-                              </v-list-tile-content>
-                            </v-list-tile>
-                          </template>
-                        </v-autocomplete>
-                    </v-flex>
-                </v-layout>
-                <ticket-send-message :user-id="user_id" />
-            </material-card>
-        </v-container>
-    </div>
+  <div>
+    <v-container>
+      <material-card class color="black" text title="New Message">
+        <v-layout class="px-4 mb-3" wrap>
+          <v-flex md12 sm12 xs12>
+            <v-autocomplete
+                v-model="user_id"
+                :items="items"
+                :loading="loading"
+                :search-input.sync="search"
+                color="black"
+                item-text="name"
+                item-value="id"
+                label="Search"
+                persistent-hint
+                prepend-icon="fas fa-search"
+            >
+              <template v-slot:no-data>
+                <v-list-tile>
+                  <v-list-tile-content>
+                    <v-list-tile-title class="black--text">
+                      {{ loading ? 'Searching...' : 'please search the contact name' }}
+                    </v-list-tile-title>
+                  </v-list-tile-content>
+                </v-list-tile>
+              </template>
+              <template v-slot:chip="{ item }">
+                {{ item.name }}
+                <span class="px-1" v-if="item.roles && item.roles.length"> -
+                    <span v-for="(role, key) in item.roles" :key="key">
+                    {{ role.name === 'Admin' ? 'Suport' : role.name }}
+                  </span>
+                </span>
+              </template>
+
+              <template v-slot:item="{ item }">
+                {{ item.name }}
+                <span class="px-1" v-if="item.roles && item.roles.length"> -
+                    <span v-for="(role, key) in item.roles" :key="key">
+                    {{ role.name === 'Admin' ? 'Suport' : role.name }}
+                  </span>
+                </span>
+              </template>
+            </v-autocomplete>
+          </v-flex>
+        </v-layout>
+        <ticket-send-message :user-id="user_id"/>
+      </material-card>
+    </v-container>
+  </div>
 </template>
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
 
 export default {
-    data() {
-        return {
-            loading: false,
-            items: [],
-            search: "",
-            user_id: 0
-        };
-    },
-    watch: {
-        search(val) {
-            val && val.length > 2 && this.querySelections(val);
+  data() {
+    return {
+      loading: false,
+      items: [],
+      search: "",
+      user_id: 0
+    };
+  },
+  watch: {
+    search(val) {
+      val && val.length > 2 && this.querySelections(val);
+    }
+  },
+  methods: {
+    async querySelections(val) {
+      if (!this.loading) {
+        this.loading = true;
+        const result = await ApiService.get(urls.userSearch(val));
+        if (result && result.data.data) {
+          this.items = result.data.data;
+          this.loading = false;
         }
-    },
-    methods: {
-        async querySelections(val) {
-            if (!this.loading) {
-                this.loading = true;
-                const result = await ApiService.get(urls.userSearch(val));
-                if (result && result.data.data) {
-                    this.items = result.data.data;
-                    this.loading = false;
-                }
-            }
-        }
-    },
+      }
+    }
+  },
 };
 </script>
 <style lang="scss" scoped>