diff --git a/src/components/Bookmarks/Items.vue b/src/components/Bookmarks/Items.vue
index 9e1458b..8b481df 100644
--- a/src/components/Bookmarks/Items.vue
+++ b/src/components/Bookmarks/Items.vue
@@ -74,13 +74,11 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import BookmarksWorkouts from "./Workouts/Workouts.vue";
 import BookmarksPrograms from "./Programs/Programs";
 import { mapActions, mapGetters, mapMutations } from "vuex";
 export default {
   components: {
-    SectionTitle,
     BookmarksWorkouts,
     BookmarksPrograms,
   },
diff --git a/src/components/Products/Add.vue b/src/components/Products/Add.vue
index 85e2259..1905b1e 100644
--- a/src/components/Products/Add.vue
+++ b/src/components/Products/Add.vue
@@ -218,7 +218,6 @@
 </template>
 <script>
 import { mapActions, mapGetters } from "vuex";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import FileRepository from "../../abstraction/repository/fileRepository";
 import ImageCropper from "../Global/Input/ImageCropper.vue";
 import Dropzone from "../Global/Input/Dropzone.vue";
@@ -229,7 +228,6 @@ const RANDOM_TOKEN = makeid(50);
 //
 export default {
   components: {
-    SectionTitle,
     ImageCropper,
     Dropzone,
   },
diff --git a/src/components/Products/Items.vue b/src/components/Products/Items.vue
index 788301f..ac573f5 100644
--- a/src/components/Products/Items.vue
+++ b/src/components/Products/Items.vue
@@ -48,12 +48,10 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ProductItem from "./Item.vue";
 import { mapActions, mapGetters, mapMutations } from "vuex";
 export default {
   components: {
-    SectionTitle,
     ProductItem,
   },
   data: () => ({}),
diff --git a/src/components/Profile/Profile.vue b/src/components/Profile/Profile.vue
index 6ec8b1e..be76034 100644
--- a/src/components/Profile/Profile.vue
+++ b/src/components/Profile/Profile.vue
@@ -170,14 +170,12 @@
 </template>
 <script>
 import { mapActions, mapGetters } from "vuex";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ImageCropper from "../Global/Input/ImageCropper.vue";
 import FileRepository from "../../abstraction/repository/fileRepository";
 import { makeid } from "@/utils/math";
 const RANDOM_TOKEN = makeid(50);
 export default {
   components: {
-    SectionTitle,
     ImageCropper,
   },
   data: () => ({
diff --git a/src/components/Profile/TraineeProfile.vue b/src/components/Profile/TraineeProfile.vue
index 7caf653..8d38929 100644
--- a/src/components/Profile/TraineeProfile.vue
+++ b/src/components/Profile/TraineeProfile.vue
@@ -154,10 +154,8 @@
 </template>
 <script>
 import { mapActions, mapGetters } from "vuex";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 export default {
   components: {
-    SectionTitle,
   },
   data: () => ({
     form: {},
diff --git a/src/components/ProgramSeries/Items.vue b/src/components/ProgramSeries/Items.vue
index 36e208c..550b0a2 100644
--- a/src/components/ProgramSeries/Items.vue
+++ b/src/components/ProgramSeries/Items.vue
@@ -49,14 +49,12 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import SeriesItem from "./Item.vue";
 import { mapGetters, mapActions } from "vuex";
 import AddSeriesModal from "./Modals/AddSeriesModal.vue";
 
 export default {
   components: {
-    SectionTitle,
     SeriesItem,
     AddSeriesModal,
   },
diff --git a/src/components/ProgramSeries/Modals/AddSeriesModal.vue b/src/components/ProgramSeries/Modals/AddSeriesModal.vue
index 11fa42b..1035f1f 100644
--- a/src/components/ProgramSeries/Modals/AddSeriesModal.vue
+++ b/src/components/ProgramSeries/Modals/AddSeriesModal.vue
@@ -85,10 +85,8 @@
 </template>
 <script>
 import { mapActions } from "vuex";
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 export default {
   name: "modal_add_series",
-  components: { SectionTitle },
   props: {
     programId: {},
   },
diff --git a/src/components/Programs/Add.vue b/src/components/Programs/Add.vue
index 6d24316..c87d3dc 100644
--- a/src/components/Programs/Add.vue
+++ b/src/components/Programs/Add.vue
@@ -142,7 +142,6 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ImageCropper from "../Global/Input/ImageCropper.vue";
 import FileRepository from "../../abstraction/repository/fileRepository";
 import { mapGetters, mapActions } from "vuex";
@@ -152,7 +151,6 @@ const RANDOM_TOKEN = makeid(50);
 
 export default {
   components: {
-    SectionTitle,
     ImageCropper,
   },
   data: () => ({
diff --git a/src/components/Programs/Items.vue b/src/components/Programs/Items.vue
index 8ea7208..a53c9d8 100644
--- a/src/components/Programs/Items.vue
+++ b/src/components/Programs/Items.vue
@@ -62,13 +62,11 @@
 </template>
 <script>
 import FiltersModal from "./Modals/FiltersModal.vue";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ProgramItem from "./Item.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
 import { UserStorage } from "@/utils/storage";
 export default {
   components: {
-    SectionTitle,
     ProgramItem,
     FiltersModal,
   },
diff --git a/src/components/Programs/Modals/FiltersModal.vue b/src/components/Programs/Modals/FiltersModal.vue
index 5e810b9..e926ad6 100644
--- a/src/components/Programs/Modals/FiltersModal.vue
+++ b/src/components/Programs/Modals/FiltersModal.vue
@@ -94,7 +94,6 @@
   </basic-modal>
 </template>
 <script>
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 import { cloneDeep } from "lodash";
 import { mapMutations, mapGetters } from "vuex";
 let defaultFilter = {
@@ -118,7 +117,6 @@ let defaultFilter = {
 };
 export default {
   name: "modal_filters",
-  components: { SectionTitle },
   data: () => ({
     filter: cloneDeep(defaultFilter),
     programStatus: [
diff --git a/src/components/TraineePrograms/Items.vue b/src/components/TraineePrograms/Items.vue
index 5e93aac..b6880e1 100644
--- a/src/components/TraineePrograms/Items.vue
+++ b/src/components/TraineePrograms/Items.vue
@@ -38,11 +38,9 @@
 </template>
 <script>
 import { mapActions, mapGetters, mapMutations } from "vuex";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import TraineeProgramItem from "./Item.vue";
 export default {
   components: {
-    SectionTitle,
     TraineeProgramItem,
   },
   computed: {
diff --git a/src/components/Users/Items.vue b/src/components/Users/Items.vue
index b813547..d472eb7 100644
--- a/src/components/Users/Items.vue
+++ b/src/components/Users/Items.vue
@@ -67,7 +67,6 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ChangeRoleModal from "./Modals/ChangeRoleModal.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
 import UserItem from "./Item.vue";
@@ -76,7 +75,6 @@ import { UserStorage } from "@/utils/storage";
 
 export default {
   components: {
-    SectionTitle,
     UserItem,
     ChangeRoleModal,
     FiltersModal,
diff --git a/src/components/Users/Modals/ChangeRoleModal.vue b/src/components/Users/Modals/ChangeRoleModal.vue
index 277ac81..dd65a0e 100644
--- a/src/components/Users/Modals/ChangeRoleModal.vue
+++ b/src/components/Users/Modals/ChangeRoleModal.vue
@@ -54,11 +54,9 @@
 </template>
 <script>
 import { mapActions } from "vuex";
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 import toast from "@/utils/toast";
 export default {
   name: "modal_changeRole",
-  components: { SectionTitle },
   props: {
     allRoles: {
       type: Array,
diff --git a/src/components/Users/Modals/FiltersModal.vue b/src/components/Users/Modals/FiltersModal.vue
index a3c20ed..4cdc896 100644
--- a/src/components/Users/Modals/FiltersModal.vue
+++ b/src/components/Users/Modals/FiltersModal.vue
@@ -85,7 +85,6 @@
   </basic-modal>
 </template>
 <script>
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 import { mapMutations, mapGetters } from "vuex";
 import { cloneDeep } from "lodash";
 import { UserStorage } from "@/utils/storage";
@@ -106,7 +105,6 @@ let defaultFilter = {
 };
 export default {
   name: "modal_filters",
-  components: { SectionTitle },
   data: () => ({
     filter: cloneDeep(defaultFilter),
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
diff --git a/src/components/Workouts/Add.vue b/src/components/Workouts/Add.vue
index 9587fff..4ff1591 100644
--- a/src/components/Workouts/Add.vue
+++ b/src/components/Workouts/Add.vue
@@ -178,7 +178,6 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ImageCropper from "../Global/Input/ImageCropper.vue";
 import FileRepository from "../../abstraction/repository/fileRepository";
 import { mapActions, mapGetters } from "vuex";
@@ -188,7 +187,6 @@ const RANDOM_TOKEN = makeid(50);
 
 export default {
   components: {
-    SectionTitle,
     ImageCropper,
   },
   data: () => ({
diff --git a/src/components/Workouts/Item.vue b/src/components/Workouts/Item.vue
index ed28007..7cef3fe 100644
--- a/src/components/Workouts/Item.vue
+++ b/src/components/Workouts/Item.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border-bottom">
+  <div class="border-bottom" @click="$_openModal('workout_detail', { data: workout })">
     <v-row>
       <v-col cols="4" class="pr-0">
         <!-- <div
@@ -11,7 +11,7 @@
           :src="
             workout.thumbnail ? workout.thumbnail : 'https://via.placeholder.com/1280x720'
           "
-          alt="product image"
+          alt="workout image"
         />
       </v-col>
       <v-col cols="8">
@@ -67,7 +67,7 @@
 </template>
 <script>
 import { mapActions } from "vuex";
-import toast from '@/utils/toast'
+import toast from "@/utils/toast";
 export default {
   props: {
     workout: {
diff --git a/src/components/Workouts/Items.vue b/src/components/Workouts/Items.vue
index bbb7a1b..df26e99 100644
--- a/src/components/Workouts/Items.vue
+++ b/src/components/Workouts/Items.vue
@@ -52,19 +52,20 @@
     </main-back>
     <div class="text-center">
       <FiltersModal @filter="load" v-if="isModal('modal_filters')" />
+      <DetailModal v-if="isModal('modal_workout_detail')" />
     </div>
   </div>
 </template>
 <script>
 import WorkoutItem from "./Item";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
+import DetailModal from "./Modals/Detail.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
 export default {
   components: {
     WorkoutItem,
-    SectionTitle,
     FiltersModal,
+    DetailModal,
   },
   computed: {
     ...mapGetters("workouts", [
diff --git a/src/components/Workouts/Modals/FiltersModal.vue b/src/components/Workouts/Modals/FiltersModal.vue
index 42ed8be..33d7b59 100644
--- a/src/components/Workouts/Modals/FiltersModal.vue
+++ b/src/components/Workouts/Modals/FiltersModal.vue
@@ -73,7 +73,6 @@
   </basic-modal>
 </template>
 <script>
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 
 import { cloneDeep } from "lodash";
 import { mapMutations, mapGetters } from "vuex";
@@ -91,7 +90,6 @@ const defaultFilter = {
 
 export default {
   name: "modal_filters",
-  components: { SectionTitle },
   data: () => ({
     filter: cloneDeep(defaultFilter),
   }),
diff --git a/src/components/WorkoutsSeries/Items.vue b/src/components/WorkoutsSeries/Items.vue
index cd7913c..9f8ff14 100644
--- a/src/components/WorkoutsSeries/Items.vue
+++ b/src/components/WorkoutsSeries/Items.vue
@@ -49,14 +49,12 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import WorkoutsSeriesItem from "./Item.vue";
 import AddWorkoutModal from "./Modals/AddWorkoutModal.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
 
 export default {
   components: {
-    SectionTitle,
     WorkoutsSeriesItem,
     AddWorkoutModal,
   },
diff --git a/src/components/WorkoutsSeries/Modals/AddWorkoutModal.vue b/src/components/WorkoutsSeries/Modals/AddWorkoutModal.vue
index ed788c4..b839676 100644
--- a/src/components/WorkoutsSeries/Modals/AddWorkoutModal.vue
+++ b/src/components/WorkoutsSeries/Modals/AddWorkoutModal.vue
@@ -44,14 +44,7 @@
                   class="mt-3"
                 /> -->
                 <div class="pb-3 align mt-2">
-                  <div
-                    class="
-                      series__workout__title
-                      wa__f__m__eb
-                      text-uppercase
-                      mb-2
-                    "
-                  >
+                  <div class="series__workout__title wa__f__m__eb text-uppercase mb-2">
                     {{ item.name }}
                   </div>
                   <div class="series__workout__description">
@@ -65,9 +58,7 @@
         <template v-if="Object.keys(selectedWorkout).length !== 0">
           <v-divider class="mt-6"></v-divider>
           <v-row class="mt-1">
-            <v-col cols="12"
-              ><AddWorkoutsItem :addWorkout="selectedWorkout"
-            /></v-col>
+            <v-col cols="12"><AddWorkoutsItem :addWorkout="selectedWorkout" /></v-col>
           </v-row>
         </template>
         <div class="mt-6">
@@ -134,7 +125,6 @@
   </basic-modal>
 </template>
 <script>
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 import AddWorkoutsItem from "../Item.vue";
 import { mapActions, mapGetters, mapMutations } from "vuex";
 import { cloneDeep } from "lodash";
@@ -150,7 +140,7 @@ const defaultFilter = {
 };
 export default {
   name: "modal_add_workout",
-  components: { SectionTitle, AddWorkoutsItem },
+  components: { AddWorkoutsItem },
   data: () => ({
     filter: cloneDeep(defaultFilter),
     search: null,
@@ -183,10 +173,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions("workoutToSeries", [
-      "loadWorkoutsToSeries",
-      "addWorkoutToSeries",
-    ]),
+    ...mapActions("workoutToSeries", ["loadWorkoutsToSeries", "addWorkoutToSeries"]),
     ...mapMutations("workoutToSeries", ["SET_FILTER_WORKOUTS_TO_SERIES"]),
     closeModal() {
       this.SET_FILTER_WORKOUTS_TO_SERIES({});
@@ -239,4 +226,4 @@ export default {
 .align {
   line-height: 4px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/utils/GlobalComponents.js b/src/utils/GlobalComponents.js
index 6dd4afc..5d27f46 100644
--- a/src/utils/GlobalComponents.js
+++ b/src/utils/GlobalComponents.js
@@ -17,6 +17,7 @@ import SideBar from '../components/Global/Section/SideBar';
 import Loading from "../components/Global/Misc/Loading";
 import NoItems from "../components/Global/Misc/NoItems";
 import DataIterator from "../components/Global/Input/DataIterator.vue";
+import SectionTitle from "@/components/Global/Section/SectionTitle.vue";
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
@@ -33,6 +34,7 @@ Vue.component('TimeInput', TimeInput);
 Vue.component('basic-modal', BasicModal);
 Vue.component('pagination', Pagination);
 Vue.component('Chip', Chip);
+Vue.component('SectionTitle', SectionTitle);
 Vue.component('SideBar', SideBar);
 Vue.component('data-iterator', DataIterator);
 Vue.component('loading', Loading);