diff --git a/public/js/vue/app.js b/public/js/vue/app.js
index af400d10..78706bdd 100644
--- a/public/js/vue/app.js
+++ b/public/js/vue/app.js
@@ -43,7 +43,7 @@
 /******/
 /******/ 	// script path function
 /******/ 	function jsonpScriptSrc(chunkId) {
-/******/ 		return __webpack_require__.p + "js/vue/chunks/" + ({}[chunkId]||chunkId) + "." + {"0":"b47d9eaedcbd0f34d95c","1":"1a2ec2568db9e0d01036","2":"4f5525aabb9601dde4be","3":"02c941910d5eee1fceff","4":"df99230719144eec9812","5":"29e184ef07c70ad44e82","6":"7ef2b908a27541ffc622","7":"edceadff25e354c98746","8":"8e259fe897cde698bfc3","9":"3c54def7e20443baab40","10":"1222a2375fd940705a78","11":"a447fe0b0f0e846ad8b1","12":"ab3efed496c91cd795a5","13":"dfe16420782798d2be26","14":"0f6eeb76c4839e34f069","15":"7a92838561b937d14280","16":"a81c0a25caa8d6957a37","17":"39ae6a640f4f7aee70ef","18":"b836f822bb8c2a3c29b5","19":"c27e4577cf5fbce49df4","20":"5ebb0d270ca28e346931","21":"4eab9f986d73cdfc57b2","22":"45e250b6a4deec80f3f9","23":"3f433a95e5d782a82f26","24":"d46a5a5f496271a8198c","25":"5e531b62fd7cb4562c0d","26":"66b7b540ac5ecdba88fe"}[chunkId] + ".js"
+/******/ 		return __webpack_require__.p + "js/vue/chunks/" + ({}[chunkId]||chunkId) + "." + {"0":"b47d9eaedcbd0f34d95c","1":"798b1af9b5d53364ed0b","2":"77ca9a3d008fc998c329","3":"e949e069e95998f52f6d","4":"2fbd54ff41f9b75fe722","5":"6abb78d599f11fadfb66","6":"5db63e67ebd423e3d074","7":"efd65bbb9771c2e99968","8":"2a964e099b33f3e8b18b","9":"9b7de7c970a913f65c84","10":"2acc671e9aae729aebe6","11":"c02668d9d043054bbf81","12":"c12d427037afe0e80f66","13":"a203fb76d44b4e3460be","14":"8a1dc3286c0ea07c4894","15":"b73c4ae1c30c07304116","16":"cb3cbf1501f57ab4d991","17":"1702c4d95b0a6761140a","18":"7f463f4cac4677cca705","19":"71a4bcdce36213c9b698","20":"4598f71f2708166c9fed","21":"2310d51c0bb6202aeb87","22":"e3dac1b71ce7ba924824","23":"678bc10dcb76fa56332b","24":"daa6c17838e33320eddc","25":"fd4c2d6c03178fa3bd4c","26":"a4f2383e326e15fe5e9a"}[chunkId] + ".js"
 /******/ 	}
 /******/
 /******/ 	// The require function
@@ -9057,7 +9057,7 @@ exports.push([module.i, ".mng-modal {\n  background-color: rgba(0, 0, 0, 0.5);\n
 
 exports = module.exports = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
 // Module
-exports.push([module.i, ".Chat[data-v-22c291f8] {\n  padding: 10px 15px;\n  color: white;\n  border-radius: 10px;\n  width: fit-content;\n  display: block;\n}\n.Chat.Cyan[data-v-22c291f8] {\n  background: cornflowerblue;\n  box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);\n}\n.Chat.White[data-v-22c291f8] {\n  background: #fff;\n  color: black;\n  box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);\n}", ""]);
+exports.push([module.i, ".Chat[data-v-22c291f8] {\n  padding: 10px 15px;\n  margin: 1% 0;\n  color: white;\n  border-radius: 10px;\n  width: fit-content;\n  display: block;\n  box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);\n}\n.Chat.Cyan[data-v-22c291f8] {\n  background: cornflowerblue;\n  text-align: right;\n  float: right;\n  clear: right;\n}\n.Chat.White[data-v-22c291f8] {\n  background: #fff;\n  color: black;\n  float: left;\n  clear: left;\n}", ""]);
 
 
 
@@ -9253,7 +9253,7 @@ exports.push([module.i, "\n#core-toolbar a {\n  text-decoration: none;\n}\n.Poin
 
 exports = module.exports = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
 // Module
-exports.push([module.i, "\n#core-view {\n  padding-bottom: 100px;\n}\n", ""]);
+exports.push([module.i, "\n#core-view {\r\n  padding-bottom: 100px;\n}\r\n", ""]);
 
 
 
@@ -9268,7 +9268,7 @@ exports.push([module.i, "\n#core-view {\n  padding-bottom: 100px;\n}\n", ""]);
 
 exports = module.exports = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
 // Module
-exports.push([module.i, "\n.v-offset {\n  margin: 0 auto;\n  max-width: calc(100% - 32px);\n  position: relative;\n}\n.v-offset--full-width {\n  max-width: 100%;\n}\n", ""]);
+exports.push([module.i, "\n.v-offset {\r\n  margin: 0 auto;\r\n  max-width: calc(100% - 32px);\r\n  position: relative;\n}\n.v-offset--full-width {\r\n  max-width: 100%;\n}\r\n", ""]);
 
 
 
@@ -9283,7 +9283,7 @@ exports.push([module.i, "\n.v-offset {\n  margin: 0 auto;\n  max-width: calc(100
 
 exports = module.exports = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
 // Module
-exports.push([module.i, "\n.v-alert--notification {\n  border-radius: 4px !important;\n  border-top: none !important;\n}\n", ""]);
+exports.push([module.i, "\n.v-alert--notification {\r\n  border-radius: 4px !important;\r\n  border-top: none !important;\n}\r\n", ""]);
 
 
 
@@ -66974,7 +66974,7 @@ module.exports = webpackAsyncContext;
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(/*! D:\Atom\Git\CSSD\resources\js\vue\main.js */"./resources/js/vue/main.js");
+module.exports = __webpack_require__(/*! E:\Shokouhi\Projects\Git\Laravel_CSSD\resources\js\vue\main.js */"./resources/js/vue/main.js");
 
 
 /***/ })
diff --git a/resources/js/vue/components/modal/ticket/ShowMessages.vue b/resources/js/vue/components/modal/ticket/ShowMessages.vue
index c02d8a07..f5db43fb 100644
--- a/resources/js/vue/components/modal/ticket/ShowMessages.vue
+++ b/resources/js/vue/components/modal/ticket/ShowMessages.vue
@@ -8,7 +8,7 @@
                             class="mx-2 my-3"
                             v-for="item in items"
                             :key="item.id"
-                            
+
                         >
                         <div class="Chat White" v-if="item.sender_user_id == user_id">
                             <span>{{ item.text }}</span>
@@ -59,18 +59,23 @@ export default {
 <style lang="scss" scoped>
 .Chat {
     padding: 10px 15px;
+    margin: 1% 0;
     color: white;
     border-radius: 10px;
     width: fit-content;
     display: block;
+    box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);
 }
 .Chat.Cyan {
     background: cornflowerblue;
-    box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);
+    text-align: right;
+    float: right;
+    clear: right;
 }
 .Chat.White {
     background: #fff;
     color: black;
-    box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);
+    float: left;
+    clear: left;
 }
 </style>
diff --git a/resources/js/vue/views/Dashboard.vue b/resources/js/vue/views/Dashboard.vue
index a2e82b7e..bfda0b6c 100644
--- a/resources/js/vue/views/Dashboard.vue
+++ b/resources/js/vue/views/Dashboard.vue
@@ -1,21 +1,22 @@
 <template>
   <v-container fluid>
+    
     <material-card class=""
       color="black"
-      title="Material Dashboard Heading"
+      title="Admin"
       text=""
     >
       <v-layout row wrap >
-        <template v-for="(Card, Key ) in Cards">
-        <v-flex v-if="!Card.role || $hasRole(Card.role)" :class="[Card.column , 'pa-2']" :key="Key">
-          <router-link :to="Card.route">
+        <template v-for="(AdminCard, Key ) in AdminCards">
+        <v-flex v-if="!AdminCard.role || $hasRole(AdminCard.role)" :class="[AdminCard.column , 'pa-2']" :key="Key">
+          <router-link :to="AdminCard.route">
             <material-cards
-              :title="Card.title"
-              :icon="Card.icon"
-              :color="Card.color"
-              :text="Card.text"
-              :aligntext="Card.aligntext"
-              :alignimg="Card.alignimg"
+              :title="AdminCard.title"
+              :icon="AdminCard.icon"
+              :color="AdminCard.color"
+              :text="AdminCard.text"
+              :aligntext="AdminCard.aligntext"
+              :alignimg="AdminCard.alignimg"
              />
           </router-link>
         </v-flex>
@@ -23,6 +24,56 @@
 
       </v-layout>
     </material-card>
+
+
+    <material-card class=""
+      color="black"
+      title="Supervisor"
+      text=""
+    >
+      <v-layout row wrap >
+        <template v-for="(SupervisorCard, Key ) in SupervisorCards">
+        <v-flex v-if="!SupervisorCard.role || $hasRole(SupervisorCard.role)" :class="[SupervisorCard.column , 'pa-2']" :key="Key">
+          <router-link :to="SupervisorCard.route">
+            <material-cards
+              :title="SupervisorCard.title"
+              :icon="SupervisorCard.icon"
+              :color="SupervisorCard.color"
+              :text="SupervisorCard.text"
+              :aligntext="SupervisorCard.aligntext"
+              :alignimg="SupervisorCard.alignimg"
+             />
+          </router-link>
+        </v-flex>
+        </template>
+
+      </v-layout>
+    </material-card>
+
+    <material-card class=""
+      color="black"
+      title="User"
+      text=""
+    >
+      <v-layout row wrap >
+        <template v-for="(UsersCard, Key ) in UsersCards">
+        <v-flex v-if="!UsersCard.role || $hasRole(UsersCard.role)" :class="[UsersCard.column , 'pa-2']" :key="Key">
+          <router-link :to="UsersCard.route">
+            <material-cards
+              :title="UsersCard.title"
+              :icon="UsersCard.icon"
+              :color="UsersCard.color"
+              :text="UsersCard.text"
+              :aligntext="UsersCard.aligntext"
+              :alignimg="UsersCard.alignimg"
+             />
+          </router-link>
+        </v-flex>
+        </template>
+
+      </v-layout>
+    </material-card>
+
   </v-container>
 </template>
 
@@ -30,15 +81,20 @@
 export default {
  data() {
      return {
-         Cards :[
-             {title:'My Info', text:'You can easily edit your registration information',icon:'/img/Static/Dashboard/darkmug.png',color:'WM-OrangeGradient-BG',route:{name: 'MyInfo'},aligntext:'text-md-left',alignimg:'text-md-right', column:'xs12 md6 sm6'},
-             {title:'All Test Result', text:'You can see all user tests and own tests',icon:'/img/Static/Dashboard/pad.png',color:'WM-GreenGradient-BG',route:{name: 'AllResultTest'},aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md6 sm6'},
+         AdminCards :[
              {title:'Manage Users', text:'You can edit the medical center information',icon:'/img/Static/Dashboard/ipad.png',color:'WM-YellowPinkGradient-BG',route:{name: 'ManageUsers'},aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12', role: 'Admin|Supervisor'},
              {title:'Manage Medical Center', text:'Managing users very fast by ...',icon:'/img/Static/Dashboard/Macbook.png',color:'WM-MuskGradient-BG',route:{name: 'ManageMedicalCenter'},aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md7 sm7', role: 'Admin'},
-             {title:'List Test Type', text:'You can simply add your own test type',icon:'/img/Static/Dashboard/Book-and-Pen.png',color:'WM-GreyGradient-BG',route:{name: 'ListTestType'},aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md5 sm5', role: 'Admin'},
+             {title:'List Test Type', text:'You can simply add your own test type',icon:'/img/Static/Dashboard/Book-and-Pen.png',color:'WM-GreyGradient-BG',route:{name: 'ListTestType'},aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md5 sm5', role: 'Admin'}
+         ],
+         SupervisorCards :[
+             {title:'Manage Users', text:'You can edit the medical center information',icon:'/img/Static/Dashboard/ipad.png',color:'WM-YellowPinkGradient-BG',route:{name: 'ManageUsers'},aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12', role: 'Admin|Supervisor'},
              {title:'Test to Verify', text:'You can simply add your own test type in this section of website',icon:'/img/Static/Dashboard/notepad-colorful.png',color:'WM-PinkGradient-BG',route:{name: 'NotVerifyTestResult'},aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12', role: 'Admin|Supervisor'},
+         ],
+         UsersCards :[
+             {title:'My Info', text:'You can easily edit your registration information',icon:'/img/Static/Dashboard/darkmug.png',color:'WM-OrangeGradient-BG',route:{name: 'MyInfo'},aligntext:'text-md-left',alignimg:'text-md-right', column:'xs12 md6 sm6'},
+             {title:'All Test Result', text:'You can see all user tests and own tests',icon:'/img/Static/Dashboard/pad.png',color:'WM-GreenGradient-BG',route:{name: 'AllResultTest'},aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md6 sm6'},
              {title:'Add a Test Result', text:'You can edit the medical center information',icon:'/img/Static/Dashboard/ipad.png',color:'WM-YellowPinkGradient-BG',route:{name: 'SubmitTestResult'},aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12'},
-         ]
+         ],
      }
  }
 }
diff --git a/resources/js/vue/views/Tickets/List.vue b/resources/js/vue/views/Tickets/List.vue
index 8c5906f2..876898a4 100644
--- a/resources/js/vue/views/Tickets/List.vue
+++ b/resources/js/vue/views/Tickets/List.vue
@@ -28,8 +28,23 @@
             </template>
             <template slot="items" slot-scope="{ item }">
               <td class="headline font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
-              <td class="title font-weight-light">{{ item.messages_count }}</td>
-              <td class="title font-weight-light">{{ item.unread_messages_count }}</td>
+              <td class="title font-weight-light">
+                <span class="Chip">
+                  <span class="Count Content">
+                    3 count
+                  </span>
+                  <!-- {{ item.messages_count }} -->
+                </span>
+              </td>
+              <td class="title font-weight-light">
+                <span class="Chip">
+                  <span class="Unread Content">
+                    3 unread
+                    <!-- {{ item.unread_messages_count }} -->
+                  </span>
+                </span>
+                <!-- {{ item.unread_messages_count }} -->
+              </td>
               <td class="text-xs-right">
                 <v-btn color="pink"  @click="showmessages(item.id)" class="WM-ActionButton">
                   <v-icon class="white--text mr-2 caption">fas fa-chevron-right</v-icon>
@@ -124,4 +139,37 @@ export default {
 .WM-ActionButton {
   padding: 8px 22px;
 }
+.Chip {
+  align-items: center;
+  border-radius: 28px;
+  display: inline-flex;
+  font-size: 13px;
+  margin: 4px;
+  outline: none;
+  position: relative;
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  vertical-align: middle;
+  height:24px;
+  color:#000;
+}
+.Chip .Content {
+  align-items: center;
+  border-radius: 24px;
+  cursor: default;
+  display: inline-flex;
+  height: 32px;
+  justify-content: space-between;
+  padding: 0 12px;
+  vertical-align: middle;
+  white-space: nowrap;
+  z-index: 1;
+}
+.Chip .Content.Count {
+  background-color: #b2dfdb;
+
+}
+.Chip .Content.Unread {
+  background-color: #ffcdd2;
+
+}
 </style>