diff --git a/src/components/Workouts/Items.vue b/src/components/Workouts/Items.vue
index bbb7a1b..77924fa 100644
--- a/src/components/Workouts/Items.vue
+++ b/src/components/Workouts/Items.vue
@@ -52,6 +52,7 @@
     </main-back>
     <div class="text-center">
       <FiltersModal @filter="load" v-if="isModal('modal_filters')" />
+      <DetailModal v-if="isModal('modal_workout_detail')" />
     </div>
   </div>
 </template>
@@ -59,12 +60,14 @@
 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/Detail.vue b/src/components/Workouts/Modals/Detail.vue
new file mode 100644
index 0000000..a622e1f
--- /dev/null
+++ b/src/components/Workouts/Modals/Detail.vue
@@ -0,0 +1,53 @@
+<template>
+  <basic-modal width="1200" 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="workout details"
+          subTitle="The details you need"
+          :is-modal="true"
+        />
+      </div>
+      <div class="mt-4 mb-10">
+        <v-row>
+          <v-col cols="4">
+            <img
+              class="workout__img w-100"
+              :src="
+                workout.thumbnail
+                  ? workout.thumbnail
+                  : 'https://via.placeholder.com/1280x720'
+              "
+              alt="workout image"
+            />
+          </v-col>
+          <v-col cols="8"></v-col>
+        </v-row>
+      </div>
+    </template>
+    <template #footer> </template>
+  </basic-modal>
+</template>
+<script>
+export default {
+  name: "modal_workout_detail",
+  data: () => ({
+    workout: {},
+  }),
+  methods: {
+    openModal({ data }) {
+      this.workout = { ...data };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.workout__img {
+  border-radius: 20px;
+}
+</style>