diff --git a/src/abstraction/repository/userRepository.js b/src/abstraction/repository/userRepository.js
index 283eed1..3d60935 100644
--- a/src/abstraction/repository/userRepository.js
+++ b/src/abstraction/repository/userRepository.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 import url from "@/router/url";
-import { getArray, setQuery } from "../resources/userResource";
+import { getArray, setQuery, getJson } from "../resources/userResource";
 import { getArray as getArrayTrainee } from "../resources/traineeResource";
 
 export default class UserRepository {
@@ -18,6 +18,12 @@ export default class UserRepository {
             return getArrayTrainee(response.data)
         }
     }
+    async show(userId) {
+        let response = await axios.get(url("showUser", { user: userId }));
+        if (response.status === 200) {
+            return getJson(response.data.data);
+        }
+    }
     async delete(userId) {
         await axios.delete(url("destroyUser", { user: userId }));
     }
diff --git a/src/abstraction/resources/trainerProgramResource.js b/src/abstraction/resources/trainerProgramResource.js
index 15541fe..de3bf0c 100644
--- a/src/abstraction/resources/trainerProgramResource.js
+++ b/src/abstraction/resources/trainerProgramResource.js
@@ -1,5 +1,6 @@
 export const getJsonTrainer = (data) => ({
     id: data.id,
+    name: data.name,
     first_name: data.first_name,
     last_name: data.last_name,
     birthday: data.birthday,
@@ -12,6 +13,4 @@ export const getJsonTrainer = (data) => ({
     address: data.address,
     email: data.email,
     cell_number: data.cell_number,
-    is_admin: data.is_admin,
-    is_trainer: data.is_trainer,
 });
\ No newline at end of file
diff --git a/src/components/Global/Button/RectangleButton.vue b/src/components/Global/Button/RectangleButton.vue
index f9b916b..06f61ff 100644
--- a/src/components/Global/Button/RectangleButton.vue
+++ b/src/components/Global/Button/RectangleButton.vue
@@ -4,7 +4,7 @@
     depressed
     :height="height"
     :width="width"
-    :class="`color-${color} ${bgColor}`"
+    :class="`color-${color} bg-${bgColor}`"
     :type="type"
     :x-small="xs"
     :small="sm"
@@ -85,7 +85,7 @@ export default {
   .v-btn.color-#{ "" + $color} {
     color: $value !important;
   }
-  .v-btn.#{"" + $color} {
+  .v-btn.bg-#{"" + $color} {
     background-color: $value !important;
   }
 }
diff --git a/src/components/Global/Section/Info.vue b/src/components/Global/Section/Info.vue
index 577073b..5b2f09c 100644
--- a/src/components/Global/Section/Info.vue
+++ b/src/components/Global/Section/Info.vue
@@ -2,15 +2,20 @@
   <div class="info__box pl-2">
     <div class="info__title text-uppercase">{{ title }}</div>
     <div class="info__sub__title">
-      <!-- if -->
+      <!-- If the sub title is text -->
       <template v-if="subTitle">
-        <component :is="tag" :class="['white--text', { 'ml-n1': tag === 'pre' }]">
-          {{ subTitle }}
+        <component
+          :is="tag"
+          :class="['white--text sub__text', { 'ml-n1': tag === 'pre' }]"
+        >
+          <slot name="sub-title" :text="subTitle">{{ subTitle }}</slot>
         </component>
       </template>
+      <!-- If the sub title is link -->
       <template v-if="link">
         <a :href="link" v-text="link" class="white--text link"></a>
       </template>
+      <!-- If the subtitle is an array and needs a loop-->
       <div>
         <slot
           name="items"
diff --git a/src/components/Programs/Item.vue b/src/components/Programs/Item.vue
index bf96082..af2d32a 100644
--- a/src/components/Programs/Item.vue
+++ b/src/components/Programs/Item.vue
@@ -53,7 +53,7 @@
         </div>
       </div>
     </div>
-    <div class="title__box">
+    <div class="title__box" @click="openDetailModal">
       <div class="d-flex align-center mt-1">
         <div class="program__title">
           {{ program.title }}
@@ -92,7 +92,7 @@
   </div>
 </template>
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import toast from "@/utils/toast";
 import { UserStorage } from "@/utils/storage";
 
@@ -105,13 +105,20 @@ export default {
       type: Object,
     },
   },
+  computed: {
+    ...mapGetters("programs", ["getProgram"]),
+  },
   methods: {
-    ...mapActions("programs", ["verifyProgram", "deleteProgram"]),
+    ...mapActions("programs", ["verifyProgram", "deleteProgram", "loadProgram"]),
     removeProgram(id) {
       toast.question("Are sure delete program?", "Delete program", () => {
         this.deleteProgram(id);
       });
     },
+    async openDetailModal() {
+      await this.loadProgram(this.program.id);
+      this.$_openModal("program_detail", { data: this.getProgram });
+    },
   },
 };
 </script>
diff --git a/src/components/Programs/Items.vue b/src/components/Programs/Items.vue
index 5a8c0c5..4ebcce1 100644
--- a/src/components/Programs/Items.vue
+++ b/src/components/Programs/Items.vue
@@ -57,13 +57,17 @@
     </main-back>
     <div class="text-center">
       <FiltersModal @filter="load" v-if="isModal('modal_filters')" />
+      <ProgramDetailModal @filter="load" v-if="isModal('modal_program_detail')" />
+      <UserDetailModal v-if="isModal('modal_user_detail')" />
     </div>
   </div>
 </template>
 <script>
-import FiltersModal from "./Modals/FiltersModal.vue";
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ProgramItem from "./Item.vue";
+import FiltersModal from "./Modals/FiltersModal.vue";
+import ProgramDetailModal from "./Modals/Detail.vue";
+import UserDetailModal from "@/components/Users/Modals/Detail.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
 import { UserStorage } from "@/utils/storage";
 export default {
@@ -71,6 +75,8 @@ export default {
     SectionTitle,
     ProgramItem,
     FiltersModal,
+    ProgramDetailModal,
+    UserDetailModal,
   },
   data: () => ({
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
diff --git a/src/components/Programs/Modals/Detail.vue b/src/components/Programs/Modals/Detail.vue
new file mode 100644
index 0000000..5d14dc8
--- /dev/null
+++ b/src/components/Programs/Modals/Detail.vue
@@ -0,0 +1,112 @@
+<template>
+  <basic-modal width="900" transition="slide-x-transition" @open="openModal">
+    <template #header>
+      <div class="close__modal">
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
+      </div>
+    </template>
+    <template #default>
+      <div>
+        <SectionTitle
+          title="program details"
+          subTitle="The details you need"
+          :is-modal="true"
+        />
+      </div>
+      <div class="mt-4 mb-10">
+        <v-row>
+          <v-col cols="4">
+            <img
+              class="program__img w-100"
+              :src="
+                program.thumbnail
+                  ? program.thumbnail
+                  : 'https://via.placeholder.com/1280x720'
+              "
+              alt="program image"
+            />
+          </v-col>
+          <v-col cols="8">
+            <v-row>
+              <v-col cols="12">
+                <Info title="NAME" :sub-title="program.title" />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <Info title="trainer" :sub-title="program.trainer.name">
+                  <template #sub-title="{ text }">
+                    <div class="d-flex align-center">
+                      <div class="sub__text--slot">{{ text }}</div>
+                      <div>
+                        <RectangleButton
+                          size="large"
+                          height="16"
+                          class="btn-more ml-3 px-4 py-2 rounded"
+                          text="know more"
+                          color="white"
+                          @click="openUserDetailModal"
+                        />
+                      </div>
+                    </div>
+                  </template>
+                </Info>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <Info title="description" :sub-title="program.description" />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <Info title="tags" :items="program.tags" />
+          </v-col>
+        </v-row>
+      </div>
+    </template>
+    <template #footer>
+      <v-spacer></v-spacer>
+      <RectangleButton
+        height="29"
+        class="btn__modal--confirm custom-btn wa__f__m__eb"
+        text="close"
+        @click="$_closeModal()"
+      />
+    </template>
+  </basic-modal>
+</template>
+<script>
+import { mapGetters, mapActions } from "vuex";
+export default {
+  name: "modal_program_detail",
+  data: () => ({
+    program: {},
+  }),
+  computed: {
+    ...mapGetters("users", ["getUser"]),
+  },
+  methods: {
+    ...mapActions("users", ["loadUser"]),
+    openModal({ data }) {
+      this.program = { ...data };
+    },
+    async openUserDetailModal() {
+      await this.loadUser(this.program.trainer.id);
+      this.$_openModal("user_detail", { data: this.getUser });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.program__img {
+  border-radius: 5px;
+}
+.btn-more {
+  font-family: "Montserrat-extralight";
+  font-size: 10px;
+  border: 1px solid var(--color-white);
+}
+</style>
diff --git a/src/components/Users/Modals/Detail.vue b/src/components/Users/Modals/Detail.vue
new file mode 100644
index 0000000..6b495ae
--- /dev/null
+++ b/src/components/Users/Modals/Detail.vue
@@ -0,0 +1,95 @@
+<template>
+  <basic-modal width="900" transition="slide-x-transition" @open="openModal">
+    <template #header>
+      <div class="close__modal">
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
+      </div>
+    </template>
+    <template #default>
+      <div>
+        <SectionTitle
+          title="user details"
+          subTitle="The details you need"
+          :is-modal="true"
+        />
+      </div>
+      <div class="mt-4 mb-10">
+        <v-row>
+          <v-col cols="4">
+            <img
+              class="user__img w-100"
+              :src="user.profile ? user.profile : 'https://via.placeholder.com/1'"
+              alt="user image"
+            />
+          </v-col>
+          <v-col cols="8">
+            <v-row>
+              <v-col cols="6">
+                <Info title="NAME" :sub-title="user.first_name" />
+              </v-col>
+              <v-col cols="6">
+                <Info title="LAST NAME" :sub-title="user.last_name" />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <Info title="EMAIL ADDRESS" :sub-title="user.email" />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="4">
+                <Info title="role" :sub-title="user.role" />
+              </v-col>
+              <v-col cols="4">
+                <Info title="joined date" :sub-title="user.joined" />
+              </v-col>
+              <v-col cols="4">
+                <Info title="BIRTHDAY" :sub-title="user.birthday" />
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="3">
+            <Info title="country" :sub-title="user.country" />
+          </v-col>
+          <v-col cols="9">
+            <Info title="address" :sub-title="user.address" />
+          </v-col>
+        </v-row>
+      </div>
+    </template>
+    <template #footer>
+      <v-spacer></v-spacer>
+      <RectangleButton
+        height="29"
+        class="btn__modal--confirm custom-btn wa__f__m__eb"
+        text="close"
+        @click="$_closeModal()"
+      />
+    </template>
+  </basic-modal>
+</template>
+<script>
+export default {
+  name: "modal_user_detail",
+  data: () => ({
+    user: {},
+  }),
+  methods: {
+    openModal({ data }) {
+      this.user = { ...data };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.user__img {
+  border-radius: 5px;
+}
+.btn-more {
+  font-family: "Montserrat-extralight";
+  font-size: 10px;
+  border: 1px solid var(--color-white);
+}
+</style>
diff --git a/src/components/Workouts/Item.vue b/src/components/Workouts/Item.vue
index 820126a..8c20bb0 100644
--- a/src/components/Workouts/Item.vue
+++ b/src/components/Workouts/Item.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border-bottom" @click="$_openModal('workout_detail', { data: workout })">
+  <div class="border-bottom" @click="openDetailModal">
     <v-row>
       <v-col cols="4" class="pr-0">
         <!-- <div
@@ -83,7 +83,7 @@
   </div>
 </template>
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import toast from "@/utils/toast";
 export default {
   props: {
@@ -91,13 +91,20 @@ export default {
       type: Object,
     },
   },
+  computed: {
+    ...mapGetters("workouts", ["getWorkout"]),
+  },
   methods: {
-    ...mapActions("workouts", ["deleteWorkout"]),
+    ...mapActions("workouts", ["deleteWorkout", "loadWorkout"]),
     removeWorkout(id) {
       toast.question("Are sure delete workout?", "Delete workout", () => {
         this.deleteWorkout(id);
       });
     },
+    async openDetailModal() {
+      await this.loadWorkout(this.workout.id);
+      this.$_openModal("workout_detail", { data: this.getWorkout });
+    },
   },
 };
 </script>
diff --git a/src/components/Workouts/Modals/Detail.vue b/src/components/Workouts/Modals/Detail.vue
index 94bd975..22179a7 100644
--- a/src/components/Workouts/Modals/Detail.vue
+++ b/src/components/Workouts/Modals/Detail.vue
@@ -29,10 +29,13 @@
           <v-col cols="8">
             <v-row>
               <v-col cols="6">
-                <Info title="category" :sub-title="workout.workout_category.name" />
+                <Info
+                  title="category"
+                  :sub-title="workout.workout_category.sport_category.name"
+                />
               </v-col>
               <v-col cols="6">
-                <Info title="subcategory" sub-title="['fs', 'fdfdas', 'fsdf']" />
+                <Info title="sub category" :sub-title="workout.workout_category.name" />
               </v-col>
             </v-row>
             <v-row>
@@ -83,7 +86,7 @@
       <RectangleButton
         height="29"
         class="btn__modal--confirm custom-btn wa__f__m__eb"
-        text="change"
+        text="close"
         @click="$_closeModal()"
       />
     </template>
diff --git a/src/router/url.js b/src/router/url.js
index 9ef1034..b9c2f9d 100644
--- a/src/router/url.js
+++ b/src/router/url.js
@@ -52,6 +52,7 @@ const urls = {
   indexProductCategories: "admin/product-categories",
   // users
   indexUsers: "admin/users",
+  showUser: "admin/users/:user",
   destroyUser: "admin/users/:user",
   indexTrainerTrainee: "trainer/trainees",
   indexRoles: "admin/roles",
diff --git a/src/store/modules/users/actions.js b/src/store/modules/users/actions.js
index 742b2f8..4258d94 100644
--- a/src/store/modules/users/actions.js
+++ b/src/store/modules/users/actions.js
@@ -33,6 +33,11 @@ export default {
         }
 
     },
+    async loadUser({ commit }, userId) {
+        let repository = new UserRepository();
+        let resource = await repository.show(userId)
+        commit("SET_USER", resource);
+    },
     async laodRoles({ commit }) {
         let repository = new RoleRepository();
         const resource = await repository.index();
diff --git a/src/store/modules/users/getters.js b/src/store/modules/users/getters.js
index be633c3..18bd10a 100644
--- a/src/store/modules/users/getters.js
+++ b/src/store/modules/users/getters.js
@@ -1,5 +1,6 @@
 export default {
     getUsers: state => state.users,
+    getUser: state => state.user,
     getRoles: state => state.roles,
     getPaginationUser: state => state.pagination,
     getFilters: state => state.filters,
diff --git a/src/store/modules/users/mutations.js b/src/store/modules/users/mutations.js
index de5f861..5edfc37 100644
--- a/src/store/modules/users/mutations.js
+++ b/src/store/modules/users/mutations.js
@@ -4,6 +4,9 @@ export default {
     SET_USERS(state, payload) {
         Vue.set(state, "users", payload);
     },
+    SET_USER(state, payload) {
+        Vue.set(state, "user", payload);
+    },
     SET_PAGINATION(state, pagination) {
         pagination = { ...state.pagination, ...pagination };
         Vue.set(state, "pagination", pagination);
diff --git a/src/store/modules/users/state.js b/src/store/modules/users/state.js
index 36dc335..d302b06 100644
--- a/src/store/modules/users/state.js
+++ b/src/store/modules/users/state.js
@@ -1,5 +1,6 @@
 export default {
     users: [],
+    user: {},
     roles: [],
     pagination: {
         itemsPerPage: 12
diff --git a/src/styles/font/montserrat/Montserrat-ExtraLight.ttf b/src/styles/font/montserrat/Montserrat-ExtraLight.ttf
new file mode 100644
index 0000000..ca0bbb6
Binary files /dev/null and b/src/styles/font/montserrat/Montserrat-ExtraLight.ttf differ
diff --git a/src/styles/setup/_fonts.scss b/src/styles/setup/_fonts.scss
index bab8c3a..4a07c00 100644
--- a/src/styles/setup/_fonts.scss
+++ b/src/styles/setup/_fonts.scss
@@ -3,23 +3,33 @@
     src: url("./font/montserrat/Montserrat-Regular.ttf") format("truetype");
     /* Safari, Android, iOS */
 }
+
 @font-face {
     font-family: "Montserrat-light";
     src: url("./font/montserrat/Montserrat-Light.ttf") format("truetype");
     /* Safari, Android, iOS */
 }
+
+@font-face {
+    font-family: "Montserrat-extralight";
+    src: url("./font/montserrat/Montserrat-ExtraLight.ttf") format("truetype");
+    /* Safari, Android, iOS */
+}
+
 @font-face {
     font-family: "Montserrat-extrabold";
     src: url("./font/montserrat/Montserrat-ExtraBold.ttf") format("truetype");
     /* Safari, Android, iOS */
 }
+
 @font-face {
     font-family: "Montserrat-medium";
     src: url("./font/montserrat/Montserrat-Medium.ttf") format("truetype");
     /* Safari, Android, iOS */
 }
+
 @font-face {
     font-family: "Team-america";
     src: url("./font/teamAmerica/TeamAmerica-oLVd.otf") format("truetype");
     /* Safari, Android, iOS */
-}
+}
\ No newline at end of file