diff --git a/src/assets/anonymous.png b/src/assets/anonymous.png
new file mode 100644
index 0000000..eef8ac0
Binary files /dev/null and b/src/assets/anonymous.png differ
diff --git a/src/components/Users/Item.vue b/src/components/Users/Item.vue
index b947f13..0a4115d 100644
--- a/src/components/Users/Item.vue
+++ b/src/components/Users/Item.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user__card">
     <v-row>
-      <v-col cols="3">
+      <v-col cols="3" @click="openUserDetailModal">
         <div class="d-flex align-center h-100" style="overflow: hidden">
           <div style="line-height: 14px">
             <div class="user__name wa__f__m__eb">
@@ -43,7 +43,7 @@
           <RectangleButton
             height="35"
             width="48"
-            class="ml-1 custom-btn"   
+            class="ml-1 custom-btn"
             icon="WMi-gold-medal"
             @click="chageRole"
             v-if="role === 'admin'"
@@ -73,7 +73,7 @@
   </div>
 </template>
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import { UserStorage } from "@/utils/storage";
 import toast from "@/utils/toast";
 export default {
@@ -85,8 +85,11 @@ export default {
   data: () => ({
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
   }),
+  computed: {
+    ...mapGetters("users", ["getUser", "getRoles"]),
+  },
   methods: {
-    ...mapActions("users", ["deleteUser"]),
+    ...mapActions("users", ["deleteUser", "loadUser"]),
     removeUser(id) {
       toast.question("Are sure delete User?", "Delete User", () => {
         this.deleteUser(id);
@@ -95,10 +98,16 @@ export default {
     chageRole() {
       this.$emit("userId", this.user.id);
       // let role = this.user.userRoles.map((role) => role.id);
+      // console.log(this.user.role_id ? this.user.role_id : null);
       this.$_openModal("changeRole", {
         role: this.user.role_id ? this.user.role_id : null,
+        roles: this.getRoles,
       });
     },
+    async openUserDetailModal() {
+      await this.loadUser(this.user.id);
+      this.$_openModal("user_detail", { data: this.getUser });
+    },
   },
 };
 </script>
diff --git a/src/components/Users/Items.vue b/src/components/Users/Items.vue
index 6e05765..b9e79cc 100644
--- a/src/components/Users/Items.vue
+++ b/src/components/Users/Items.vue
@@ -24,7 +24,7 @@
               height="54"
               :text-mode="true"
               :text="getFilterCount ? getFilterCount : '0'"
-              @click="$_openModal('filters')"
+              @click="$_openModal('filters', { roles: getRoles })"
             />
           </div>
         </div>
@@ -54,15 +54,11 @@
       </div> -->
     </main-back>
     <div class="text-center">
-      <ChangeRoleModal
-        :allRoles="getRoles"
-        :userId="id"
-        v-if="isModal('modal_changeRole')"
-      /><FiltersModal
+      <ChangeRoleModal :userId="id" v-if="isModal('modal_changeRole')" /><FiltersModal
         @filter="load"
-        :allRoles="getRoles"
         v-if="isModal('modal_filters')"
       />
+      <UserDetailModal v-if="isModal('modal_user_detail')" />
     </div>
   </div>
 </template>
@@ -70,6 +66,7 @@
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ChangeRoleModal from "./Modals/ChangeRoleModal.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
+import UserDetailModal from "./Modals/Detail.vue";
 import UserItem from "./Item.vue";
 import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
 import { UserStorage } from "@/utils/storage";
@@ -80,6 +77,7 @@ export default {
     UserItem,
     ChangeRoleModal,
     FiltersModal,
+    UserDetailModal,
   },
   data: () => ({
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
diff --git a/src/components/Users/Modals/ChangeRoleModal.vue b/src/components/Users/Modals/ChangeRoleModal.vue
index 9d7d9b3..9ad9870 100644
--- a/src/components/Users/Modals/ChangeRoleModal.vue
+++ b/src/components/Users/Modals/ChangeRoleModal.vue
@@ -11,7 +11,7 @@
       </div>
       <v-item-group class="mt-10 mb-16" mandatory v-model="role_id" @change="change">
         <v-row>
-          <v-col cols="12" v-for="(role, i) in allRoles" :key="i" class="py-1">
+          <v-col cols="12" v-for="(role, i) in roles" :key="i" class="py-1">
             <v-item v-slot="{ active, toggle }" :value="role.id">
               <main-back :social="true">
                 <v-card
@@ -60,15 +60,13 @@ export default {
   name: "modal_changeRole",
   components: { SectionTitle },
   props: {
-    allRoles: {
-      type: Array,
-    },
     userId: {},
   },
   data: () => ({
     role_id: null,
     currectRoleId: null,
     changeRoleRequestLoading: false,
+    roles: null,
   }),
   computed: {
     form() {
@@ -77,7 +75,8 @@ export default {
   },
   methods: {
     ...mapActions("users", ["updateRole"]),
-    openModal({ role }) {
+    openModal({ role, roles }) {
+      this.roles = { ...roles };
       this.currectRoleId = role ? role : 0;
       this.role_id = role ? role : 0;
     },
diff --git a/src/components/Users/Modals/Detail.vue b/src/components/Users/Modals/Detail.vue
index 6b495ae..57642e1 100644
--- a/src/components/Users/Modals/Detail.vue
+++ b/src/components/Users/Modals/Detail.vue
@@ -18,7 +18,7 @@
           <v-col cols="4">
             <img
               class="user__img w-100"
-              :src="user.profile ? user.profile : 'https://via.placeholder.com/1'"
+              :src="user.profile ? user.profile : require('@Assets/anonymous.png')"
               alt="user image"
             />
           </v-col>
diff --git a/src/components/Users/Modals/FiltersModal.vue b/src/components/Users/Modals/FiltersModal.vue
index 130f14f..38f0f98 100644
--- a/src/components/Users/Modals/FiltersModal.vue
+++ b/src/components/Users/Modals/FiltersModal.vue
@@ -4,6 +4,7 @@
     transition="slide-x-transition"
     tag="vee-form"
     @submit="filterUser"
+    @open="openModal"
   >
     <template #header>
       <div class="close__modal">
@@ -110,16 +111,17 @@ export default {
   data: () => ({
     filter: cloneDeep(defaultFilter),
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
+    allRoles: null,
   }),
-  props: {
-    allRoles: {},
-  },
   computed: {
     ...mapGetters("users", ["getFilters"]),
   },
   methods: {
     ...mapMutations("users", ["SET_FILTER_USER", "SET_IS_FILTERED_USER"]),
     // ...mapActions("users", ["laodRoles"]),
+    openModal({ roles }) {
+      this.allRoles = roles;
+    },
     filterUser() {
       this.SET_IS_FILTERED_USER(true);
       this.SET_FILTER_USER(this.filter);