diff --git a/app/components/common/CrashReportModal.vue b/app/components/common/CrashReportModal.vue
deleted file mode 100644
index 881f2417d..000000000
--- a/app/components/common/CrashReportModal.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<template>
-  <v-dialog
-    v-model="dialogModel"
-    max-width="500"
-    :fullscreen="!mdAndUp"
-    @click="clickOnOverlay"
-  >
-    <div
-      class="w-100 d-flex flex-wrap flex-column bg-white pa-6 rounded-xl mobile-style"
-      @click="clickOnModal"
-    >
-      <v-row>
-        <v-col
-          cols="8"
-          class="d-flex align-center"
-        >
-          <span class="text-h4 text-sm-h3">Crash report</span>
-        </v-col>
-        <v-col
-          cols="4"
-          class="d-flex align-center justify-end ga-2"
-        >
-          <v-icon
-            class="ml-4"
-            size="x-large"
-            color="#D0D5DD"
-            @click="closeModal"
-          >
-            md:cancel
-          </v-icon>
-        </v-col>
-        <v-col cols="12">
-          <v-radio-group
-            v-model="reportType"
-            label="Issue type"
-            :rules="reportTypeRules"
-            required
-          >
-            <template #label>
-              <span class="text-h5 font-weight-bold">Issue type</span>
-            </template>
-            <v-radio
-              v-for="(type, index) in reportTypeList"
-              :key="index"
-              :value="type.value"
-              color="primary"
-            >
-              <template #label>
-                <span class="text-h5">{{ type.label }}</span>
-              </template>
-            </v-radio>
-          </v-radio-group>
-        </v-col>
-
-        <v-col cols="12">
-          <v-textarea
-            v-model="textReport"
-            label="Description"
-            variant="outlined"
-            :rules="textReportRules"
-            hint="You must enter at least 25 characters"
-            persistent-hint
-            required
-            counter="500"
-            rows="4"
-            rounded="lg"
-            color="#ffb300"
-            no-resize
-          />
-        </v-col>
-        <div class="w-100 d-flex align-center justify-center ga-3">
-          <v-btn
-            variant="text"
-            class="text-h5"
-            @click="closeModal"
-          >
-            Discard
-          </v-btn>
-          <v-btn
-            color="#ffb600"
-            rounded="xl"
-            height="40"
-            width="180"
-            class="text-h5"
-            flat
-            :disabled="!isValid"
-            :loading="loading"
-            @click="sendReport"
-          >
-            Send
-          </v-btn>
-        </div>
-      </v-row>
-    </div>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-import { useDisplay } from 'vuetify'
-import type { AppError } from '@/types'
-
-interface ICrashReportModal {
-  showDialog?: boolean
-  typeCrashReport: string
-  id: string
-}
-
-const { mdAndUp } = useDisplay()
-const { $toast } = useNuxtApp()
-const router = useRouter()
-
-const props = withDefaults(defineProps<ICrashReportModal>(), {
-  showDialog: false,
-})
-
-const emit = defineEmits(['update:showDialog'])
-
-// Start Section Handle Status Modal
-const dialogModel = computed({
-  get: () => props.showDialog,
-  set: value => emit('update:showDialog', value),
-})
-
-const closeModal = () => {
-  emit('update:showDialog', false)
-}
-// End Section Handle Status Modal
-
-const clickOnOverlay = () => {
-  if (!mdAndUp.value) {
-    emit('update:showDialog', false)
-  }
-}
-
-const clickOnModal = (event: Event) => {
-  event.stopPropagation()
-}
-
-const reportTypeList = [
-  {
-    value: 1,
-    label: 'The file cannot be downloaded',
-  },
-  {
-    value: 2,
-    label: 'The file is wrong',
-  },
-  {
-    value: 3,
-    label: 'The content of the file is inappropriate or incorrect.',
-  },
-]
-const reportTypeRules = [
-  (v: number) =>
-    (v !== null && v !== undefined) || 'Please select an issue type',
-]
-const reportType = ref(null)
-
-const textReport = ref('')
-const textReportRules = [
-  (v: string) => !!v || 'Description is required',
-  (v: string) =>
-    (v && v.length >= 25) || 'Description must be at least 25 characters',
-  (v: string) =>
-    (v && v.length <= 500) || 'Description must be less than 500 characters',
-]
-const isValid = computed(() => {
-  const isReportTypeValid
-    = reportType.value !== null && reportType.value !== undefined
-  const textLength = textReport.value.trim().length
-  const isTextValid = textLength >= 25 && textLength <= 500
-
-  return isReportTypeValid && isTextValid
-})
-const loading = ref(false)
-
-const sendReport = async () => {
-  if (!isValid.value) return
-
-  loading.value = true
-  try {
-    const payload = new URLSearchParams({
-      id: props.id,
-      type: props.typeCrashReport,
-      report_type: reportType.value!,
-      message: textReport.value.trim(),
-    }) as unknown
-    await useApiService.post('/api/v1/reports', payload as SearchParameters)
-
-    $toast.success('Report sent successfully')
-    closeModal()
-    reportType.value = null
-    textReport.value = ''
-  }
-  catch (err: unknown) {
-    const error = err as AppError
-    if (error.response?.status === 403) {
-      router.push({ query: { auth_form: 'login' } })
-    }
-    else if (error.response?.status === 400) {
-      $toast.error(error.response?.data?.message || '')
-      console.error('❌', error.response?.data?.message)
-    }
-    else {
-      console.error('❌ Unknown error', error)
-    }
-  }
-  finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-.size-icon {
-  font-size: 24px;
-  margin-right: 12px;
-}
-@media only screen and (max-width: 960px) {
-  .mobile-style {
-    position: absolute;
-    bottom: 0;
-    border-radius: 24px 24px 0 0 !important;
-  }
-}
-</style>
diff --git a/app/components/common/ShareModal.vue b/app/components/common/ShareModal.vue
deleted file mode 100644
index 7dfb0033f..000000000
--- a/app/components/common/ShareModal.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-  <v-dialog
-    v-model="dialogModel"
-    max-width="500"
-    :fullscreen="!mdAndUp"
-    @click="clickOnOverlay"
-  >
-    <div
-      class="w-100 d-flex flex-wrap flex-column bg-white pa-6 rounded-xl mobile-style"
-      @click="clickOnModal"
-    >
-      <v-row>
-        <v-col
-          cols="8"
-          class="d-flex align-center"
-        >
-          <span class="text-h4 text-sm-h3">Share</span>
-        </v-col>
-        <v-col
-          cols="4"
-          class="d-flex align-center justify-end ga-2"
-        >
-          <v-icon
-            class="ml-4"
-            size="x-large"
-            color="#D0D5DD"
-            @click="closeModal"
-          >
-            md:cancel
-          </v-icon>
-        </v-col>
-        <v-col cols="12">
-          <p class="mb-3">
-            Share this content:
-          </p>
-        </v-col>
-        <v-col
-          cols="12"
-          sm="4"
-        >
-          <v-btn
-            rounded="xl"
-            color="primary text-white"
-            class="w-100 text-h5"
-            flat
-            @click="copyUrl"
-          >
-            <v-icon size="16">
-              md:content_copy_outlined
-            </v-icon>
-            &nbsp;
-            {{ copyBtnText }}
-          </v-btn>
-        </v-col>
-        <v-col
-          cols="12"
-          sm="4"
-        >
-          <v-btn
-            target="_blank"
-            rounded="xl"
-            color="#25d366"
-            class="w-100 text-h5 text-white"
-            flat
-            @click="shareSocial('whatsapp')"
-          >
-            <img
-              class="icon-image"
-              :src="whatsAppIcon"
-              alt="share on whatsup "
-            >
-            &nbsp; WhatsApp
-          </v-btn>
-        </v-col>
-        <v-col
-          cols="12"
-          sm="4"
-        >
-          <v-btn
-            rounded="xl"
-            flat
-            color="#00acee"
-            class="w-100 text-h5 text-white"
-            @click="shareSocial('telegram')"
-          >
-            <v-icon> md:near_me_outlined </v-icon> &nbsp; Telegram
-          </v-btn>
-        </v-col>
-      </v-row>
-    </div>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-import { useDisplay } from 'vuetify'
-import whatsAppIcon from '~/assets/images/whatsapp.svg'
-
-interface IShareModal {
-  showDialog?: boolean
-  title: string
-}
-
-const { mdAndUp } = useDisplay()
-const props = withDefaults(defineProps<IShareModal>(), {
-  showDialog: false,
-})
-
-const emit = defineEmits(['update:showDialog'])
-
-// Start Section Handle Status Modal
-const dialogModel = computed({
-  get: () => props.showDialog,
-  set: value => emit('update:showDialog', value),
-})
-
-const closeModal = () => {
-  emit('update:showDialog', false)
-}
-// End Section Handle Status Modal
-
-const clickOnOverlay = () => {
-  if (!mdAndUp.value) {
-    emit('update:showDialog', false)
-  }
-}
-
-const clickOnModal = (event: Event) => {
-  event.stopPropagation()
-}
-
-const copyBtnText = ref('Copy')
-
-// Methods
-const copyUrl = () => {
-  navigator.clipboard.writeText(window.location.href)
-  copyBtnText.value = 'Copied'
-  setTimeout(() => {
-    copyBtnText.value = 'Copy'
-  }, 2000)
-}
-
-const shareSocial = (platform: string) => {
-  if (platform == 'whatsapp')
-    window.open(`https://api.whatsapp.com/send?text=${window.location.href}`)
-  else if (platform == 'telegram')
-    window.open(
-      `https://telegram.me/share/url?url=${window.location.href}&text=${props.title}`,
-    )
-}
-</script>
-
-<style scoped>
-.size-icon {
-  font-size: 24px;
-  margin-right: 12px;
-}
-.icon-image {
-  width: 16px;
-  height: 16px;
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(137deg)
-    brightness(103%) contrast(101%);
-}
-@media only screen and (max-width: 960px) {
-  .mobile-style {
-    position: absolute;
-    bottom: 0;
-    border-radius: 24px 24px 0 0 !important;
-  }
-}
-</style>
diff --git a/app/components/common/detail/BoxRandomQuestion.vue b/app/components/common/boxRandomQuestion.vue
similarity index 100%
rename from app/components/common/detail/BoxRandomQuestion.vue
rename to app/components/common/boxRandomQuestion.vue
diff --git a/app/components/common/modal/crashReport.vue b/app/components/common/modal/crashReport.vue
new file mode 100644
index 000000000..2b3b07708
--- /dev/null
+++ b/app/components/common/modal/crashReport.vue
@@ -0,0 +1,156 @@
+<template>
+  <v-row>
+    <v-col cols="12">
+      <v-radio-group
+        v-model="reportType"
+        label="Issue type"
+        :rules="reportTypeRules"
+        required
+      >
+        <template #label>
+          <span class="text-h5 font-weight-bold">Issue type</span>
+        </template>
+        <v-radio
+          v-for="(type, index) in reportTypeList"
+          :key="index"
+          :value="type.value"
+          color="primary"
+        >
+          <template #label>
+            <span class="text-h5">{{ type.label }}</span>
+          </template>
+        </v-radio>
+      </v-radio-group>
+    </v-col>
+
+    <v-col cols="12">
+      <v-textarea
+        v-model="textReport"
+        label="Description"
+        variant="outlined"
+        :rules="textReportRules"
+        hint="You must enter at least 25 characters"
+        persistent-hint
+        required
+        counter="500"
+        rows="4"
+        rounded="lg"
+        color="#ffb300"
+        no-resize
+      />
+    </v-col>
+    <div class="w-100 d-flex align-center justify-center ga-3">
+      <v-btn
+        variant="text"
+        class="text-h5"
+        @click="emit('close')"
+      >
+        Discard
+      </v-btn>
+      <v-btn
+        color="#ffb600"
+        rounded="xl"
+        height="40"
+        width="180"
+        class="text-h5"
+        flat
+        :disabled="!isValid"
+        :loading="loading"
+        @click="sendReport"
+      >
+        Send
+      </v-btn>
+    </div>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import type { AppError } from '@/types'
+
+interface ICrashReportModal {
+  typeCrashReport: string
+  id: string
+}
+
+const { $toast } = useNuxtApp()
+const router = useRouter()
+
+const props = defineProps<ICrashReportModal>()
+const emit = defineEmits(['close'])
+
+const reportTypeList = [
+  {
+    value: 1,
+    label: 'The file cannot be downloaded',
+  },
+  {
+    value: 2,
+    label: 'The file is wrong',
+  },
+  {
+    value: 3,
+    label: 'The content of the file is inappropriate or incorrect.',
+  },
+]
+const reportTypeRules = [
+  (v: number) =>
+    (v !== null && v !== undefined) || 'Please select an issue type',
+]
+const reportType = ref(null)
+
+const textReport = ref('')
+const textReportRules = [
+  (v: string) => !!v || 'Description is required',
+  (v: string) =>
+    (v && v.length >= 25) || 'Description must be at least 25 characters',
+  (v: string) =>
+    (v && v.length <= 500) || 'Description must be less than 500 characters',
+]
+const isValid = computed(() => {
+  const isReportTypeValid
+    = reportType.value !== null && reportType.value !== undefined
+  const textLength = textReport.value.trim().length
+  const isTextValid = textLength >= 25 && textLength <= 500
+
+  return isReportTypeValid && isTextValid
+})
+const loading = ref(false)
+
+const sendReport = async () => {
+  if (!isValid.value) return
+
+  loading.value = true
+  try {
+    const payload = new URLSearchParams({
+      id: props.id,
+      type: props.typeCrashReport,
+      report_type: reportType.value!,
+      message: textReport.value.trim(),
+    }) as unknown
+    await useApiService.post('/api/v1/reports', payload as SearchParameters)
+
+    $toast.success('Report sent successfully')
+    reportType.value = null
+    textReport.value = ''
+  }
+  catch (err: unknown) {
+    const error = err as AppError
+    if (error.response?.status === 403) {
+      router.push({ query: { auth_form: 'login' } })
+    }
+    else if (error.response?.status === 400) {
+      $toast.error(error.response?.data?.message || '')
+      console.error('❌', error.response?.data?.message)
+    }
+    else {
+      console.error('❌ Unknown error', error)
+    }
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/app/components/common/modal/share.vue b/app/components/common/modal/share.vue
new file mode 100644
index 000000000..15910c9c7
--- /dev/null
+++ b/app/components/common/modal/share.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="w-100 d-flex flex-column mt-4">
+    <span class="text-h5 font-weight-medium text-grey700">
+      Share this content:
+    </span>
+    <div class="w-100 d-flex flex-wrap flex-sm-nowrap align-center ga-4 ga-sm-1 mt-8">
+      <v-btn
+        rounded="xl"
+        color="primary"
+        class="w-100 w-sm-33 text-h5 text-white"
+        flat
+        @click="copyUrl"
+      >
+        <v-icon size="16">
+          md:content_copy_outlined
+        </v-icon>
+            &nbsp;
+        {{ copyBtnText }}
+      </v-btn>
+
+      <v-btn
+        target="_blank"
+        rounded="xl"
+        color="#25d366"
+        class="w-100 w-sm-33 text-h5 text-white"
+        flat
+        @click="shareSocial('whatsapp')"
+      >
+        <img
+          class="icon-image"
+          :src="whatsAppIcon"
+          alt="share on whatsup "
+        >
+        &nbsp; WhatsApp
+      </v-btn>
+
+      <v-btn
+        rounded="xl"
+        flat
+        color="#00acee"
+        class="w-100 w-sm-33 text-h5 text-white"
+        @click="shareSocial('telegram')"
+      >
+        <v-icon> md:near_me_outlined </v-icon> &nbsp; Telegram
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import whatsAppIcon from '~/assets/images/whatsapp.svg'
+
+interface Share {
+  title: string
+}
+const props = defineProps<Share>()
+
+const copyBtnText = ref('Copy')
+
+// Methods
+const copyUrl = () => {
+  navigator.clipboard.writeText(window.location.href)
+  copyBtnText.value = 'Copied'
+  setTimeout(() => {
+    copyBtnText.value = 'Copy'
+  }, 2000)
+}
+
+const shareSocial = (platform: string) => {
+  if (platform == 'whatsapp')
+    window.open(`https://api.whatsapp.com/send?text=${window.location.href}`)
+  else if (platform == 'telegram')
+    window.open(
+      `https://telegram.me/share/url?url=${window.location.href}&text=${props.title}`,
+    )
+}
+</script>
+
+<style scoped>
+.size-icon {
+  font-size: 24px;
+  margin-right: 12px;
+}
+.icon-image {
+  width: 16px;
+  height: 16px;
+  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(137deg)
+    brightness(103%) contrast(101%);
+}
+</style>
diff --git a/app/components/common/detail/RelatedContentCard.vue b/app/components/common/related-content/card.vue
similarity index 98%
rename from app/components/common/detail/RelatedContentCard.vue
rename to app/components/common/related-content/card.vue
index 64d3a7ee3..8419ac2a6 100644
--- a/app/components/common/detail/RelatedContentCard.vue
+++ b/app/components/common/related-content/card.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="type == `paper`"
     class="mx-1 card-paper position-relative rounded-lg d-flex flex-column justify-space-between"
   >
     <v-img
@@ -25,7 +24,7 @@
           class="text-subtitle-2 text-white font-weight-regular text-no-wrap"
           style="line-height: 1"
         >
-          score
+          {{ type == 'exam' ? `question` :`score` }}
         </p>
       </div>
       <div
diff --git a/app/components/common/detail/RelatedContentCardSkeleton.vue b/app/components/common/related-content/cardSkeleton.vue
similarity index 100%
rename from app/components/common/detail/RelatedContentCardSkeleton.vue
rename to app/components/common/related-content/cardSkeleton.vue
diff --git a/app/components/common/detail/RelatedContent.vue b/app/components/common/related-content/index.vue
similarity index 59%
rename from app/components/common/detail/RelatedContent.vue
rename to app/components/common/related-content/index.vue
index f27f45bb4..81e33ab9a 100644
--- a/app/components/common/detail/RelatedContent.vue
+++ b/app/components/common/related-content/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div
     v-if="loading || pastpaper.length > 0"
-    class="mx-4"
+    class="mx-4 my-6"
   >
-    <div class="d-flex align-center mb-6 ga-2">
+    <div class="d-flex align-center mb-4 ga-2">
       <div
         class="d-flex align-center justify-center rounded-circle pa-2"
         :style="`background-color : ${infoMap[`paper`].color}`"
@@ -19,7 +19,7 @@
         v-for="item in 10"
         :key="item"
       >
-        <lazy-common-detail-related-content-card-skeleton type="paper" />
+        <lazy-common-related-content-card-skeleton type="paper" />
       </v-slide-group-item>
     </v-slide-group>
     <v-slide-group
@@ -55,7 +55,7 @@
         :key="item.id"
       >
         <nuxt-link :to="`/paper/${item.id}/${item.title_url}`">
-          <lazy-common-detail-related-content-card
+          <lazy-common-related-content-card
             :picture="item.thumb_pic || fallbackImage"
             :title="item.title"
             :score="item.referee_score || item.type_title"
@@ -69,9 +69,149 @@
     </v-slide-group>
   </div>
 
+  <div
+    v-if="loading || multimedias.length > 0"
+    class="mx-4 my-6"
+  >
+    <div class="d-flex align-center mb-4 ga-2">
+      <div
+        class="d-flex align-center justify-center rounded-circle pa-2"
+        :style="`background-color : ${infoMap[`multimedia`].color}`"
+      >
+        <span :class="`icon-title ${infoMap[`multimedia`].icon}`" />
+      </div>
+      <h1 class="text-h4 font-weight-semibold primary-gray-700">
+        Related Multimedias
+      </h1>
+    </div>
+    <v-slide-group v-if="loading">
+      <v-slide-group-item
+        v-for="item in 10"
+        :key="item"
+      >
+        <lazy-common-related-content-card-skeleton type="paper" />
+      </v-slide-group-item>
+    </v-slide-group>
+    <v-slide-group
+      v-else
+      show-arrows
+      class="related-content position-relative"
+      :style="{ height: `${CardHeight}` }"
+    >
+      <template #prev>
+        <v-btn
+          icon
+          size="sm"
+        >
+          <v-icon color="#000000">
+            md:chevron_backward
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <template #next>
+        <v-btn
+          icon
+          size="sm"
+        >
+          <v-icon color="#000000">
+            md:chevron_forward
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <v-slide-group-item
+        v-for="item in multimedias"
+        :key="item.id"
+      >
+        <nuxt-link :to="`/multimedia/${item.id}/${item.title_url}`">
+          <lazy-common-related-content-card
+            :picture="item.poster || fallbackImage"
+            :title="item.title"
+            :score="item.type_title"
+            :avatar="item.avatar"
+            :first-name="item.first_name"
+            :last-name="item.last_name"
+            type="paper"
+          />
+        </nuxt-link>
+      </v-slide-group-item>
+    </v-slide-group>
+  </div>
+
+  <div
+    v-if="loading || exams.length > 0"
+    class="mx-4 my-6"
+  >
+    <div class="d-flex align-center mb-4 ga-2">
+      <div
+        class="d-flex align-center justify-center rounded-circle pa-2"
+        :style="`background-color : ${infoMap[`exam`].color}`"
+      >
+        <span :class="`icon-title ${infoMap[`exam`].icon}`" />
+      </div>
+      <h1 class="text-h4 font-weight-semibold primary-gray-700">
+        Related Exams
+      </h1>
+    </div>
+    <v-slide-group v-if="loading">
+      <v-slide-group-item
+        v-for="item in 10"
+        :key="item"
+      >
+        <lazy-common-related-content-card-skeleton type="paper" />
+      </v-slide-group-item>
+    </v-slide-group>
+    <v-slide-group
+      v-else
+      show-arrows
+      class="related-content position-relative"
+      :style="{ height: `${CardHeight}` }"
+    >
+      <template #prev>
+        <v-btn
+          icon
+          size="sm"
+        >
+          <v-icon color="#000000">
+            md:chevron_backward
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <template #next>
+        <v-btn
+          icon
+          size="sm"
+        >
+          <v-icon color="#000000">
+            md:chevron_forward
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <v-slide-group-item
+        v-for="item in exams"
+        :key="item.id"
+      >
+        <nuxt-link :to="`/exam/${item.id}/${item.title_url}`">
+          <lazy-common-related-content-card
+            :picture="item.thumb_pic || fallbackImage"
+            :title="item.title"
+            :score="item.tests_num"
+            :avatar="item.avatar"
+            :first-name="item.first_name"
+            :last-name="item.last_name"
+            type="exam"
+          />
+        </nuxt-link>
+      </v-slide-group-item>
+    </v-slide-group>
+  </div>
+
   <div
     v-if="loading || tutorials.length > 0"
-    class="mx-4 my-8"
+    class="mx-4 my-6"
   >
     <div class="d-flex align-center mb-6 ga-2">
       <div
@@ -125,7 +265,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiResult, RelatedContentDTO, ContentItemDTO } from '@/types'
+import type { ApiResult, RelatedContentDTO, ContentItemDTO, FileRelatedContentDTO, ExamRelatedContentDTO } from '@/types'
 
 type sourceType
   = | 'test'
@@ -151,14 +291,19 @@ const infoMap = {
     color: '#2e90fa',
     keyResponse: 'tests',
   },
+  multimedia: {
+    icon: 'icon-multimedia',
+    color: '#02b719',
+    keyResponse: 'files',
+  },
   exam: {
-    icon: 'icon-paper',
-    color: '#2e90fa',
+    icon: 'icon-exam',
+    color: '#7c4dff',
     keyResponse: 'tests',
   },
   question: {
-    icon: 'icon-paper',
-    color: '#2e90fa',
+    icon: 'icon-q-a',
+    color: '#fdb022',
     keyResponse: 'tests',
   },
   tutorial: {
@@ -169,6 +314,8 @@ const infoMap = {
 }
 const pastpaper = ref<ContentItemDTO[]>([])
 const tutorials = ref<ContentItemDTO[]>([])
+const multimedias = ref<FileRelatedContentDTO[]>([])
+const exams = ref<ExamRelatedContentDTO[]>([])
 
 const loading = ref(true)
 const fallbackImage = '/images/GamaBag.webp'
@@ -190,10 +337,10 @@ const getRelatedContent = async () => {
     )
     const related = response.data
     if (related) {
-      pastpaper.value
-        = related[infoMap['paper'].keyResponse as keyof RelatedContentDTO]
-      tutorials.value
-        = related[infoMap['tutorial'].keyResponse as keyof RelatedContentDTO]
+      pastpaper.value = related.tests
+      tutorials.value = related.tutorials
+      multimedias.value = related.files
+      exams.value = related.exams
     }
   }
   catch (error) {
diff --git a/app/components/details/multimedia-preview-gallery.vue b/app/components/details/multimedia-preview-gallery.vue
deleted file mode 100644
index 143e4333d..000000000
--- a/app/components/details/multimedia-preview-gallery.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-  <v-row>
-    <v-col
-      id="details-gallery-landscape"
-      cols="12"
-      class="product-gallery rounded-lg"
-    >
-      <div class="card-carousel">
-        <v-row justify="center">
-          <!-- Side section -->
-          <v-col
-            cols="2"
-            class="pr-0 pl-0 d-flex flex-column align-center"
-          >
-            <v-btn
-              v-for="(item, index) in items"
-              :key="index"
-              icon
-              large
-              :small="display.xs.value"
-              :to="`${item.link}&state=${help_link_data.state}&section=${help_link_data.section}&base=${help_link_data.base}&course=${help_link_data.course}
-                  &lesson=${help_link_data.lesson}`"
-              class="mb-3 bg-blue-grey-darken-2 flex-shrink-0"
-            >
-              <span
-                v-tooltip="item.text"
-                style="font-size: 26px"
-                :class="`text-white text--lighten-1 icon icon-${item.icon} pt-1 `"
-              />
-            </v-btn>
-          </v-col>
-          <!-- End side section -->
-
-          <v-col cols="10">
-            <div>
-              <v-carousel
-                v-model="carouselVal"
-                height="296"
-                hide-delimiters
-              >
-                <v-carousel-item
-                  v-for="(image, index) in images"
-                  :key="index"
-                  :src="image"
-                  cover
-                />
-              </v-carousel>
-              <div
-                v-if="images.length > 1"
-                class="thumbnails"
-              >
-                <v-slide-group
-                  center-active
-                  class="pa-4"
-                  active-class="success"
-                  show-arrows
-                >
-                  <v-slide-group-item
-                    v-for="(image, index) in images"
-                    :key="index"
-                  >
-                    <v-img
-                      :class="{
-                        'mx-2 thumbnail_itm': true,
-                        'active_slide': carouselVal === index,
-                      }"
-                      :src="image"
-                      height="60"
-                      width="80"
-                      cover
-                      @click="changeSlide(index)"
-                    />
-                  </v-slide-group-item>
-                </v-slide-group>
-              </div>
-            </div>
-          </v-col>
-        </v-row>
-      </div>
-    </v-col>
-  </v-row>
-</template>
-
-<script setup>
-import { ref, reactive, watch } from 'vue'
-import { useDisplay } from 'vuetify'
-
-// Define props
-const props = defineProps({
-  galleryImages: {
-    type: Array,
-    default: () => [],
-  },
-  linkData: {
-    type: Object,
-    default: () => ({
-      state: '',
-      section: '',
-      base: '',
-      course: '',
-      lesson: '',
-    }),
-  },
-  initialSlide: {
-    type: Number,
-    default: 0,
-  },
-})
-
-// Setup Vuetify display composable
-const display = useDisplay()
-
-// Define refs and reactive state
-const carouselVal = ref(props.initialSlide)
-const images = ref(props.galleryImages || [])
-const help_link_data = reactive({ ...props.linkData })
-
-// Watch for prop changes
-watch(
-  () => props.galleryImages,
-  (newImages) => {
-    if (newImages && newImages.length) {
-      images.value = newImages
-    }
-  },
-  { immediate: true },
-)
-
-watch(
-  () => props.linkData,
-  (newData) => {
-    if (newData) {
-      Object.assign(help_link_data, newData)
-    }
-  },
-  { immediate: true, deep: true },
-)
-
-watch(
-  () => props.initialSlide,
-  (newSlide) => {
-    if (newSlide !== undefined) {
-      carouselVal.value = newSlide
-    }
-  },
-)
-
-const _active_img = ref(1)
-
-const items = [
-  {
-    class: 'exam',
-    text: 'Related exam',
-    icon: 'exam',
-    link: '/search?type=quizhub',
-  },
-  {
-    class: 'paper',
-    text: 'Related paper',
-    icon: 'paper',
-    link: '/search?type=paper',
-  },
-  {
-    class: 'content',
-    text: 'Related multimedia',
-    icon: 'multimedia',
-    link: '/search?type=multimedia',
-  },
-  {
-    class: 'faq',
-    text: 'Related Q & A',
-    icon: 'q-a',
-    link: '/search?type=forum',
-  },
-  {
-    class: 'textbook ',
-    text: 'Related tutorial',
-    icon: 'tutorial',
-    link: '/search?type=tutorial',
-  },
-  // { class: "school", text: "School", icon: "school" ,link:"/search?type=school" },
-  // { class: "tutor", text: "Tutor", icon: "teacher" ,link:"/search?type=tutor" },
-]
-
-// Methods
-function changeSlide(index) {
-  carouselVal.value = index
-}
-
-// Still expose refs for backward compatibility
-defineExpose({
-  carouselVal,
-  images,
-  help_link_data,
-  changeSlide,
-})
-</script>
-
-<style lang="scss" scoped>
-.product-gallery {
-}
-
-.thumbnails {
-  display: flex;
-  justify-content: space-evenly;
-  flex-direction: row;
-  cursor: pointer;
-  width: 100%;
-}
-
-.thumbnail_itm {
-  max-width: 80px !important;
-  max-height: 80px !important;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: 1px solid transparent;
-
-  &:hover {
-    transform: translateY(-2px);
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .thumbnails {
-    display: flex;
-    justify-content: space-evenly;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100%;
-  }
-
-  .thumbnail_itm {
-    max-width: 50px !important;
-    max-height: 40px !important;
-  }
-}
-
-.active_slide {
-  border: 2px solid #000;
-  border-radius: 5px;
-}
-
-.side-help-icon {
-  padding: 0.6rem;
-  display: block;
-  max-width: 4rem;
-  border-radius: 10px;
-  margin-bottom: 1rem;
-  text-align: center;
-  background-color: #f5f5f5;
-}
-
-.side-help-icon .icon {
-  font-size: 1.5rem;
-}
-</style>
diff --git a/app/components/multimedia/contentDetail.vue b/app/components/multimedia/contentDetail.vue
new file mode 100644
index 000000000..5239cd3ff
--- /dev/null
+++ b/app/components/multimedia/contentDetail.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="w-100 d-flex align-center justify-space-between">
+    <div class="ga-1 d-flex align-center">
+      <v-img
+        width="48"
+        height="48"
+        :src="contentData?.avatar"
+        class="rounded-circle"
+        alt="user profile"
+      />
+      <p class="text-grey700 text-h5 font-weight-bold">
+        {{ contentData?.first_name }} {{ contentData?.last_name }}
+      </p>
+    </div>
+    <span class="text-h5 d-flex align-center text-info ga-1">
+      <v-icon color="info">md:notifications_outlined</v-icon>
+      follow
+    </span>
+  </div>
+
+  <div
+    :class="`w-100 text-h5 mt-4 position-relative ${
+      seeCompleteDescription ? `open-description` : `close-description`
+    }`"
+  >
+    <div
+      ref="descriptionContent"
+      v-html="contentData?.description"
+    />
+
+    <div
+      v-if="hasOverflow && !seeCompleteDescription"
+      class="blur-div position-absolute left-0 bottom-0 w-100"
+    />
+  </div>
+  <button
+    v-if="hasOverflow"
+    type="button"
+    class="w-100 pa-0 bg-transparent border-0 text-left cursor-pointer text-h5 d-flex align-center ga-1 mt-1"
+    :aria-expanded="seeCompleteDescription"
+    @click="seeCompleteDescription = !seeCompleteDescription"
+  >
+    <span class="text-info">{{ seeCompleteDescription ? `See Less` : `See More` }}</span>
+    <v-icon color="info">
+      {{ seeCompleteDescription ? 'md:keyboard_arrow_up' : 'md:keyboard_arrow_down' }}
+    </v-icon>
+  </button>
+
+  <div
+    v-if="contentData.collectionList && contentData.collectionList.length > 0"
+    class="w-100 bg-grey100 mt-2 rounded-lg container-chapter-book overflow-y-auto pa-4"
+  >
+    <span class="text-h5 font-weight-bold text-grey700">Book chapters</span>
+    <ul
+      class="pl-4 mt-2"
+      style="list-style-type: none"
+    >
+      <li
+        v-for="(item, index) in contentData.collectionList"
+        :key="index"
+      >
+        <span class="text-h5 font-weight-medium text-grey700">{{ item.title }}</span>
+        <ul
+          v-if="item.chapters && item.chapters.length"
+          style="list-style-type: none"
+        >
+          <li
+            v-for="(chapter, chapterIndex) in item.chapters"
+            :key="chapterIndex"
+          >
+            <span class="text-h6 font-weight-regular text-grey700">{{ chapter.title }}</span>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+  <div class="w-100 d-flex align-center justify-space-between mt-4">
+    <span class="text-h5 d-flex align-center text-grey600 ga-1">
+      <v-icon color="grey600">md:files_outlined</v-icon>
+      {{ contentData?.content_type_title }}
+    </span>
+    <span class="text-h5 d-flex align-center text-grey600 ga-1">
+      <v-icon color="grey600">md:update</v-icon>
+      {{ fromNowLocal(contentData?.up_date) }}
+    </span>
+  </div>
+
+  <div class="w-100 d-flex flex-wrap ga-2 mt-3">
+    <v-chip
+      class="bg-grey100"
+      :small="mdAndDown"
+      :to="`/search?type=multimedia&section=${contentData?.section}`"
+      flat
+    >
+      <span class="text-grey500 text-h6 font-weight-bold">
+        {{ contentData?.section_title }}</span>
+    </v-chip>
+    <v-chip
+      class="bg-grey100"
+      flat
+      :small="mdAndDown"
+      :to="`/search?type=multimedia&section=${contentData?.section}&base=${contentData?.base}`"
+    >
+      <span class="text-grey500 text-h6 font-weight-bold">
+        {{ contentData?.base_title }}</span>
+    </v-chip>
+    <v-chip
+      class="bg-grey100"
+      flat
+      :small="mdAndDown"
+      :to="`/search?type=multimedia&section=${contentData?.section}&base=${contentData?.base}&lesson=${contentData?.lesson}`"
+    >
+      <span class="text-grey500 text-h6 font-weight-bold">
+        {{ contentData?.lesson_title }}</span>
+    </v-chip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MultimediaDetailDTO } from '@/types'
+import { useDisplay } from 'vuetify'
+
+const props = defineProps<{
+  contentData: MultimediaDetailDTO
+}>()
+
+const { fromNowLocal } = useDateTime()
+const { mdAndDown } = useDisplay()
+
+const seeCompleteDescription = ref(false)
+const descriptionContent = ref<HTMLElement | null>(null)
+const hasOverflow = ref(false)
+const collapsedDescriptionHeight = 70
+let descriptionResizeObserver: ResizeObserver | null = null
+
+function updateDescriptionOverflow() {
+  hasOverflow.value = (descriptionContent.value?.scrollHeight ?? 0) > collapsedDescriptionHeight
+}
+
+onMounted(async () => {
+  await nextTick()
+  updateDescriptionOverflow()
+
+  if (descriptionContent.value && typeof ResizeObserver !== 'undefined') {
+    descriptionResizeObserver = new ResizeObserver(updateDescriptionOverflow)
+    descriptionResizeObserver.observe(descriptionContent.value)
+  }
+})
+
+watch(
+  () => props.contentData?.description,
+  async () => {
+    seeCompleteDescription.value = false
+    await nextTick()
+    updateDescriptionOverflow()
+  },
+)
+
+onBeforeUnmount(() => {
+  descriptionResizeObserver?.disconnect()
+})
+</script>
+
+<style scoped>
+.open-description {
+  height: unset;
+  min-height: 70px;
+  overflow: unset;
+}
+.close-description {
+  max-height: 70px;
+  overflow: hidden;
+}
+.blur-div {
+  height: 40px;
+  pointer-events: none;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 80%);
+}
+.container-chapter-book{
+  height: 160px;
+}
+</style>
diff --git a/app/components/multimedia/detail/DescriptionSection.vue b/app/components/multimedia/detail/DescriptionSection.vue
deleted file mode 100644
index 1a0f28ebd..000000000
--- a/app/components/multimedia/detail/DescriptionSection.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-  <div class="description-holder my-4">
-    <!-- Description -->
-    <div class="description-tabs">
-      <v-tabs
-        v-model="activeTab"
-        color="teal"
-      >
-        <v-tab value="tab-description">
-          <span class="gama-text-caption">Description</span>
-        </v-tab>
-        <v-tab value="tab-chapters">
-          <span class="gama-text-caption">Book chapters</span>
-        </v-tab>
-      </v-tabs>
-    </div>
-    <div class="description-tabs">
-      <v-window v-model="activeTab">
-        <v-window-item
-          value="tab-description"
-          class="px-3 py-3"
-        >
-          <span
-            v-show="!isEditing"
-            class="gama-text-body2"
-            v-html="formattedDescription"
-          />
-          <v-btn
-            v-if="canEdit"
-            v-show="!isEditing"
-            icon
-            size="x-small"
-            @click="startEditing"
-          >
-            <v-icon>mdi-pencil</v-icon>
-          </v-btn>
-          <div>
-            <v-textarea
-              v-if="isEditing"
-              v-model="description"
-              width="100%"
-              rows="18"
-              placeholder="Description"
-            >
-              <template #append-inner>
-                <v-btn
-                  color="success"
-                  icon
-                  size="x-small"
-                  :loading="saving"
-                  @click="saveDescription"
-                >
-                  <v-icon>mdi-check</v-icon>
-                </v-btn>
-              </template>
-            </v-textarea>
-          </div>
-        </v-window-item>
-        <v-window-item
-          value="tab-chapters"
-          class="px-3 py-3"
-        >
-          <div
-            color="#F5F5F5"
-            flat
-            style="max-height: 25rem; overflow-y: auto"
-          >
-            <ul
-              class="pl-0"
-              style="list-style-type: none"
-            >
-              <li
-                v-for="(item, index) in collectionList"
-                :key="index"
-              >
-                <strong>{{ item.title }}</strong>
-                <ul
-                  v-if="item.chapters && item.chapters.length"
-                  style="list-style-type: none"
-                >
-                  <li
-                    v-for="(chapter, chapterIndex) in item.chapters"
-                    :key="chapterIndex"
-                  >
-                    {{ chapter.title }}
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </div>
-        </v-window-item>
-      </v-window>
-    </div>
-    <!-- End description -->
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-
-const props = defineProps({
-  description: {
-    type: String,
-    default: '',
-  },
-  collectionList: {
-    type: Array,
-    default: () => [],
-  },
-  canEdit: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['update:description', 'save'])
-
-// UI state
-const activeTab = ref('tab-description')
-const isEditing = ref(false)
-const saving = ref(false)
-const description = ref(props.description)
-
-// Formatted description with line breaks
-const formattedDescription = computed(() => {
-  return description.value ? description.value.replace(/\n/g, '<br />') : ''
-})
-
-// Methods
-function startEditing() {
-  isEditing.value = true
-}
-
-async function saveDescription() {
-  saving.value = true
-
-  // Update the parent component
-  emit('update:description', description.value)
-
-  // Tell the parent to save
-  await emit('save')
-
-  // Reset UI state
-  isEditing.value = false
-  saving.value = false
-}
-
-// Watch for prop changes
-watch(
-  () => props.description,
-  (newVal) => {
-    if (newVal !== description.value) {
-      description.value = newVal
-    }
-  },
-)
-</script>
-
-<style scoped>
-.description-holder .v-tab {
-  font-size: 1rem !important;
-}
-
-.description-holder .description-tabs {
-  background: #f5f5f5 !important;
-  padding: 0.8rem !important;
-  border-radius: 0.8rem;
-  margin-bottom: 1rem;
-}
-</style>
diff --git a/app/components/multimedia/detail/DetailSidebar.vue b/app/components/multimedia/detail/DetailSidebar.vue
deleted file mode 100644
index 33892ae39..000000000
--- a/app/components/multimedia/detail/DetailSidebar.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<template>
-  <v-card
-    flat
-    class="content_main_info"
-  >
-    <v-row class="align-center">
-      <v-col cols="3">
-        <v-img
-          :src="avatar"
-          alt=""
-          class="d-inline-block"
-          cover
-          height="48"
-          width="48"
-        />
-      </v-col>
-      <v-col
-        cols="9"
-        class="pl-0"
-      >
-        <p class="creator_title">
-          {{ firstName }} {{ lastName }}
-        </p>
-      </v-col>
-    </v-row>
-    <v-divider class="my-2" />
-    <v-row>
-      <v-col
-        cols="12"
-        class="pb-0"
-      >
-        <v-icon class="mr-1 icon">
-          md:folder
-        </v-icon>
-        File type: {{ contentTypeTitle }}
-      </v-col>
-      <v-col
-        cols="12"
-        class="pb-0"
-      >
-        <v-icon class="mr-1 icon">
-          md:auto_stories
-        </v-icon>
-        Page count: {{ filePages }}
-      </v-col>
-      <v-col
-        cols="12"
-        class="pb-0"
-      >
-        <v-icon class="mr-1 icon">
-          md:visibility
-        </v-icon>
-        Viewed: {{ views }}
-      </v-col>
-      <v-col
-        cols="12"
-        class="pb-0"
-      >
-        <v-icon class="mr-1 icon">
-          md:calendar_month
-        </v-icon>
-        Last update: {{ formatDate(upDate) }}
-      </v-col>
-      <v-col
-        cols="12"
-        class="pb-0"
-      >
-        <div
-          class="pointer"
-          @click="openCrashReport"
-        >
-          <v-icon class="mr-1 icon">
-            md:bug_report
-          </v-icon>
-          Crash report
-        </div>
-      </v-col>
-      <v-col
-        cols="12"
-        class="pb-0"
-      >
-        <share-dialog
-          :title="title"
-          @copy="handleCopyUrl"
-          @share="handleShareSocial"
-        />
-      </v-col>
-    </v-row>
-
-    <div class="text-center mt-4">
-      <v-rating
-        v-model="rating"
-        hover
-        background-color="grey-darken-1"
-        color="yellow-darken-3"
-        size="35"
-        half-increments
-      />
-    </div>
-    <v-divider class="d-none d-md-block" />
-
-    <v-row class="mt-1 d-none d-md-block">
-      <v-col
-        cols="12"
-        class="pb-0"
-      >
-        <div>
-          <v-btn
-            block
-            variant="flat"
-            color="#E60012"
-            class="mb-2 text-h5 text-white font-weight-bold position-relative"
-            size="large"
-            :loading="downloadLoading && !isDownloading"
-            @click="startDownload"
-          >
-            <template v-if="isDownloading">
-              <v-progress-circular
-                :model-value="downloadProgress"
-                size="24"
-                width="3"
-                color="white"
-                class="position-absolute"
-                style="z-index: 2;"
-              />
-            </template>
-            <!-- <v-icon
-              size="x-large"
-              class="btn-icon"
-              :class="{ 'text-transparent': isDownloading }"
-            >
-              mdi-file-pdf-box
-            </v-icon> -->
-            <span :class="{ 'text-transparent': isDownloading }">
-              Download {{ fileExt.toUpperCase() }}{{ showPrice ? " | " + price + " GEM" : "" }}
-            </span>
-          </v-btn>
-        </div>
-      </v-col>
-    </v-row>
-  </v-card>
-  <crash-report ref="crash_report" />
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import dayjs from 'dayjs'
-import ShareDialog from './ShareDialog.vue'
-import CrashReport from '~/components/common/crash-report.vue'
-
-// Props
-const props = defineProps({
-  avatar: {
-    type: String,
-    default: '',
-  },
-  firstName: {
-    type: String,
-    default: '',
-  },
-  lastName: {
-    type: String,
-    default: '',
-  },
-  contentTypeTitle: {
-    type: String,
-    default: '',
-  },
-  filePages: {
-    type: [Number, String],
-    default: 0,
-  },
-  views: {
-    type: [Number, String],
-    default: 0,
-  },
-  upDate: {
-    type: String,
-    default: '',
-  },
-  fileExt: {
-    type: String,
-    default: 'pptx',
-  },
-  price: {
-    type: Number,
-    default: 0,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  downloadLoading: {
-    type: Boolean,
-    default: false,
-  },
-  isDownloading: {
-    type: Boolean,
-    default: false,
-  },
-  downloadProgress: {
-    type: Number,
-    default: 0,
-  },
-})
-
-// const { trackFileDownload } = useGtmEvents()
-
-// Emits
-const emit = defineEmits(['download', 'copy-url', 'share-social'])
-
-// Reactive state
-const rating = ref(4.5)
-const _copyBtnText = ref('Copy')
-const crash_report = ref(null)
-const copy_btn = ref('Copy')
-
-// Computed properties
-const showPrice = computed(() => {
-  return props.price > 0
-})
-
-// Methods
-function formatDate(date) {
-  return dayjs(date).fromNow()
-}
-
-function openCrashReport() {
-  crash_report.value.dialog = true
-  crash_report.value.form.type = 'file'
-}
-
-function handleCopyUrl() {
-  navigator.clipboard.writeText(window.location.href)
-  copy_btn.value = 'Copied'
-}
-
-function handleShareSocial(platform) {
-  if (platform == 'whatsapp')
-    window.open(`https://api.whatsapp.com/send?text=${window.location.href}`)
-  else if (platform == 'telegram')
-    window.open(
-      `https://telegram.me/share/url?url=${window.location.href}&text=${props.title}`,
-    )
-}
-
-function startDownload() {
-  // trackFileDownload({
-  //   file_type: props.fileExt,
-  //   file_name: props.title,
-  //   file_url: window.location.href,
-  //   subject_name: props.contentTypeTitle,
-  // })
-  emit('download', props.fileExt)
-}
-</script>
-
-<style scoped>
-.text-transparent {
-  color: transparent !important;
-}
-
-.position-relative {
-  position: relative;
-}
-
-.position-absolute {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.btn-icon {
-  position: absolute;
-  left: 10px;
-}
-</style>
diff --git a/app/components/multimedia/detail/DownloadSection.vue b/app/components/multimedia/detail/DownloadSection.vue
deleted file mode 100644
index 4fa2596c2..000000000
--- a/app/components/multimedia/detail/DownloadSection.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <div class="download-section">
-    <!-- Desktop view -->
-    <div
-      v-if="!checkIsFree"
-      class="d-none d-md-block mb-4 gama-text-body2 text-center"
-    >
-      <span v-if="!isLoggedIn">
-        <span class="mdi mdi-bell icon" />
-        <span
-          class="login pointer"
-          @click="openAuthDialog('login')"
-        >Login</span>
-        <span
-          class="register pointer"
-          @click="openAuthDialog('register')"
-        >
-          (register)
-        </span>
-        to download and charge your wallet.
-      </span>
-      <span v-else>
-        Your wallet charge is ${{ credit }}
-        <nuxt-link
-          v-if="isLoggedIn"
-          class="blue--text"
-          to="/user/charge-wallet"
-        >(Top Up Wallet)</nuxt-link>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const { isAuthenticated } = useAuth()
-const props = defineProps({
-  fileExt: {
-    type: String,
-    default: 'pptx',
-  },
-  price: {
-    type: Number,
-    default: 0,
-  },
-  fileId: {
-    type: String,
-    required: true,
-  },
-  credit: {
-    type: [Number, String],
-    default: 0,
-  },
-})
-
-const emit = defineEmits(['login', 'register'])
-
-// Computed properties
-const checkIsFree = computed(() => {
-  return !props.price || props.price <= 0
-})
-
-// Methods
-function openAuthDialog(type) {
-  emit(type)
-}
-
-const isLoggedIn = computed(() => {
-  return isAuthenticated.value ?? false
-})
-</script>
-
-<style scoped>
-.download-section {
-  width: 100%;
-}
-
-.order-btn-holder {
-  position: fixed !important;
-  bottom: 0 !important;
-  z-index: 2 !important;
-  border-top: 0.1rem solid #e1e2e3;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.login:hover,
-.register:hover {
-  text-decoration: underline;
-}
-
-p {
-  font-size: 1.3rem !important;
-}
-</style>
diff --git a/app/components/multimedia/detail/MobileOrderSection.vue b/app/components/multimedia/detail/MobileOrderSection.vue
deleted file mode 100644
index bf5d5c13f..000000000
--- a/app/components/multimedia/detail/MobileOrderSection.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <v-card
-    class="order-btn-holder d-block d-md-none"
-    width="100%"
-  >
-    <v-card-text class="pb-0 mb-16">
-      <v-row class="px-10 text-center">
-        <v-col
-          cols="12"
-          class="py-4"
-        >
-          <div v-if="fileExt">
-            <v-btn
-              block
-              color="#E60012"
-              variant="flat"
-              class="mb-2 text-h6 text-white font-weight-bold position-relative"
-              :loading="downloadLoading && !isDownloading"
-              @click="startDownload"
-            >
-              <template v-if="isDownloading">
-                <v-progress-circular
-                  :model-value="downloadProgress"
-                  size="20"
-                  width="2"
-                  color="white"
-                  class="position-absolute"
-                  style="z-index: 2;"
-                />
-              </template>
-              <!-- <v-icon
-                size="x-large"
-                class="btn-icon"
-                :class="{ 'text-transparent': isDownloading }"
-              >
-                mdi-file-pdf-box
-              </v-icon> -->
-              <span :class="{ 'text-transparent': isDownloading }">
-                Download {{ fileExt.toUpperCase() }}{{ showPrice ? " | " + price+ " GEM" : "" }}
-              </span>
-            </v-btn>
-          </div>
-        </v-col>
-
-        <v-col
-          v-if="!isFree"
-          cols="12"
-        >
-          <div class="mb-4">
-            <p v-if="!isLoggedIn">
-              <span class="mdi mdi-bell icon" />
-              <span
-                class="login blue--text pointer"
-                @click="handleLogin"
-              >Login</span>
-              <span
-                class="register blue--text pointer"
-                @click="handleRegister"
-              >
-                (register)
-              </span>
-              <span>to download and charge.</span>
-            </p>
-            <span v-else>
-              Your wallet charge is ${{ credit }}
-              <nuxt-link
-                v-if="isLoggedIn"
-                class="blue--text"
-                to="/user/charge-wallet"
-              >(Top Up Wallet)</nuxt-link>
-            </span>
-          </div>
-        </v-col>
-      </v-row>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  fileExt: {
-    type: String,
-    default: 'pptx',
-  },
-  price: {
-    type: Number,
-    default: 0,
-  },
-  credit: {
-    type: [Number, String],
-    default: 0,
-  },
-  isLoggedIn: {
-    type: Boolean,
-    default: false,
-  },
-  downloadLoading: {
-    type: Boolean,
-    default: false,
-  },
-  isDownloading: {
-    type: Boolean,
-    default: false,
-  },
-  downloadProgress: {
-    type: Number,
-    default: 0,
-  },
-})
-
-const emit = defineEmits(['download', 'login', 'register'])
-
-// Computed properties
-const isFree = computed(() => {
-  return !props.price || props.price <= 0
-})
-
-const showPrice = computed(() => {
-  return props.price > 0
-})
-
-// Methods
-function startDownload() {
-  emit('download', props.fileExt)
-}
-
-function handleLogin() {
-  emit('login')
-}
-
-function handleRegister() {
-  emit('register')
-}
-</script>
-
-<style scoped>
-.order-btn-holder {
-  position: fixed !important;
-  bottom: 0 !important;
-  z-index: 2 !important;
-  border-top: 0.1rem solid #e1e2e3;
-}
-
-.order-btn-holder .v-btn {
-  width: 40% !important;
-}
-
-.order-btn-holder span {
-  font-size: 1.3rem;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.text-transparent {
-  color: transparent !important;
-}
-
-.position-relative {
-  position: relative;
-}
-
-.position-absolute {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.btn-icon {
-  flex-shrink: 0;
-  margin-right: 8px;
-  position: absolute;
-  left: 10px;
-}
-</style>
diff --git a/app/components/multimedia/detail/ShareDialog.vue b/app/components/multimedia/detail/ShareDialog.vue
deleted file mode 100644
index d18d0ced8..000000000
--- a/app/components/multimedia/detail/ShareDialog.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div>
-    <!-- Dialog for share -->
-    <v-dialog
-      transition="dialog-top-transition"
-      class="share_dialog"
-      max-width="600"
-    >
-      <template #activator="{ props: dialogProps }">
-        <span
-          v-bind="dialogProps"
-          class="share-trigger pointer"
-        >
-          <v-icon class="mr-1 icon">md:share</v-icon>
-          Share
-        </span>
-      </template>
-      <template #default="{ isActive }">
-        <v-card>
-          <v-toolbar
-            color="default"
-            title="Share"
-          />
-          <v-card-text>
-            <p class="mb-3">
-              Share this content:
-            </p>
-            <v-row>
-              <v-col cols="12">
-                <v-btn
-                  outlined
-                  block
-                  @click="copyUrl"
-                >
-                  <v-icon class="mr-1 icon">
-                    md:content_copy
-                  </v-icon>
-                  &nbsp;
-                  {{ copyBtnText }}
-                </v-btn>
-              </v-col>
-              <v-col cols="6">
-                <v-btn
-                  target="_blank"
-                  block
-                  color="#25d366"
-                  class="text-white"
-                  @click="shareWhatsApp"
-                >
-                  WhatsApp
-                </v-btn>
-              </v-col>
-              <v-col cols="6">
-                <v-btn
-                  block
-                  color="#00acee"
-                  class="text-white"
-                  @click="shareTelegram"
-                >
-                  Telegram
-                </v-btn>
-              </v-col>
-            </v-row>
-          </v-card-text>
-          <v-card-actions class="justify-end">
-            <v-btn
-              text
-              @click="isActive.value = false"
-            >
-              close
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </template>
-    </v-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['copy', 'share'])
-
-const copyBtnText = ref('Copy')
-
-function copyUrl() {
-  emit('copy')
-  copyBtnText.value = 'Copied'
-}
-
-function shareWhatsApp() {
-  emit('share', 'whatsapp')
-}
-
-function shareTelegram() {
-  emit('share', 'telegram')
-}
-</script>
-
-<style scoped>
-.pointer {
-  cursor: pointer;
-}
-</style>
diff --git a/app/components/multimedia/detail/TagSection.vue b/app/components/multimedia/detail/TagSection.vue
deleted file mode 100644
index 343162ca7..000000000
--- a/app/components/multimedia/detail/TagSection.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <div class="label-holder mt-4">
-    <v-chip
-      v-if="sectionTitle"
-      link
-      class="mr-1 bg-blue-grey-darken-2"
-    >
-      <nuxt-link :to="`/search?type=multimedia&section=${sectionId}`">
-        {{ sectionTitle }}
-      </nuxt-link>
-    </v-chip>
-
-    <v-chip
-      v-if="baseTitle"
-      link
-      class="mr-1 bg-blue-grey-darken-2"
-    >
-      <nuxt-link
-        :to="`/search?type=multimedia&section=${sectionId}&base=${baseId}`"
-      >
-        {{ baseTitle }}
-      </nuxt-link>
-    </v-chip>
-
-    <v-chip
-      v-if="lessonTitle"
-      link
-      class="ma-1 bg-blue-grey-darken-2"
-    >
-      <nuxt-link
-        :to="`/search?type=multimedia&section=${sectionId}&base=${baseId}&lesson=${lessonId}`"
-      >
-        {{ lessonTitle }}
-      </nuxt-link>
-    </v-chip>
-
-    <!-- Custom tags can be added here in the future -->
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  sectionId: {
-    type: String,
-    default: '',
-  },
-  sectionTitle: {
-    type: String,
-    default: '',
-  },
-  baseId: {
-    type: String,
-    default: '',
-  },
-  baseTitle: {
-    type: String,
-    default: '',
-  },
-  lessonId: {
-    type: String,
-    default: '',
-  },
-  lessonTitle: {
-    type: String,
-    default: '',
-  },
-})
-</script>
-
-<style scoped>
-.label-holder {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.v-chip :deep(a) {
-  color: white;
-  text-decoration: none;
-}
-</style>
diff --git a/app/components/multimedia/downloadButton.vue b/app/components/multimedia/downloadButton.vue
new file mode 100644
index 000000000..e1a98121e
--- /dev/null
+++ b/app/components/multimedia/downloadButton.vue
@@ -0,0 +1,256 @@
+<template>
+  <div
+    class="buttons-downlaod-div w-100 d-flex flex-wrap align-start justify-center mt-4"
+  >
+    <div
+      v-if="xs && openModalDownloadMobile"
+      class="overlay-div"
+      @click="openModalDownloadMobile = false"
+    />
+    <div
+      :class="`w-100 d-flex flex-column flex-sm-row flex-wrap align-start justify-start justify-sm-space-between ga-2 py-8 px-4 pa-sm-0 ${
+        xs ? `mobile-style-bottom-sheet` : ``
+      } ${openModalDownloadMobile ? `set-bottom` : ``}`"
+    >
+      <div
+        class="d-flex d-sm-none w-100 align-center justify-center position-relative mb-6"
+      >
+        <div class="line-bottom-sheet" />
+        <v-icon
+          color="grey400"
+          size="30"
+          class="position-absolute right-0 cursor-pointer"
+          @click="openModalDownloadMobile = false"
+        >
+          md:close
+        </v-icon>
+      </div>
+      <v-btn
+        v-if="files.exist"
+        rounded="pill"
+        class="width-btn btn-pdf d-flex align-center justify-center"
+        flat
+        height="42"
+        :loading="isDownloading(files.ext)"
+        @click="handleDownloadClick(files.ext, files.price ?? 0)"
+      >
+        <template #loader>
+          <v-progress-circular
+            :model-value="getDownloadProgress(files.ext)"
+            color="lightError"
+            size="24"
+            width="3"
+          />
+        </template>
+        <v-icon
+          color="lightError"
+          size="20"
+        >
+          {{ files.ext == 'mp4' ? `md:video_file` : files.ext == 'pptx' ? 'md:slideshow' : 'md:picture_as_pdf_outlined' }}
+        </v-icon>
+        <span class="text-pdf text-h5 font-weight-bold mt-1 mx-2">Download {{ files.ext ? files.ext.toUpperCase() : 'PPTX' }}</span>
+
+        <span
+          v-if="files.price && files.price != 0"
+          class="text-pdf text-h5 font-weight-bold mt-1"
+        >{{ files.price }} <span class="text-h6 font-weight-normal">GEM</span></span>
+      </v-btn>
+    </div>
+
+    <div
+      class="cursor-pointer d-flex justify-space-between align-center d-sm-none w-100 rounded-pill button-mobile-download bg-primary px-4"
+      @click="openModalDownloadMobile = !openModalDownloadMobile"
+    >
+      <span class="text-h5 font-weight-bold">
+        <v-icon
+          color="black"
+          size="20"
+        >md:download</v-icon>
+        Download
+      </span>
+      <v-icon color="black">
+        md:keyboard_arrow_down
+      </v-icon>
+    </div>
+
+    <!-- Coin Payment Modal -->
+    <lazy-modals-coin-payment-modal
+      v-if="showCoinPaymentModal"
+      v-model:show-dialog="showCoinPaymentModal"
+      :is-processing="isLoading || isProcessingPayment"
+      :user-balance="balance"
+      :amount-to-pay="5"
+      @close="handleCoinPaymentClose"
+    />
+
+    <!-- Coin Consumption Animation -->
+    <lazy-common-coin-consumption-animation
+      v-model:is-visible="showCoinAnimation"
+      @animation-complete="handleAnimationComplete"
+    />
+
+    <lazy-test-counting-wallet-animation
+      :is-start-animation="isStartWalletAnimation"
+      :direction="-1"
+      :delta-price="priceFile"
+      @complete-animation="completeWalletAnimation"
+    />
+  </div>
+
+  <lazy-common-modal-base
+    v-model:show-dialog="downloadIssue"
+    :max-width="600"
+    title="Download"
+  >
+    <lazy-common-modal-download-file
+      :link="downloadIssueLink"
+      @close="downloadIssue = false"
+    />
+  </lazy-common-modal-base>
+</template>
+
+<script setup lang="ts">
+import type {
+  MultimediaFileInfoDTO,
+  TypeFileExtentionMultimedia,
+} from '@/types'
+import { useDisplay } from 'vuetify'
+
+const downloadIssue = ref(false)
+const downloadIssueLink = ref('')
+interface IDownloadButtons {
+  files: MultimediaFileInfoDTO
+  id: string
+  title: string
+  titleUrl: string
+}
+
+const props = defineProps<IDownloadButtons>()
+
+const { xs } = useDisplay()
+
+const { balance, isLoading } = useCoinBalance()
+const showCoinPaymentModal = ref(false)
+const showCoinAnimation = ref(false)
+const isProcessingPayment = ref(false)
+const isStartWalletAnimation = ref(false)
+const priceFile = ref(0)
+const pendingDownload = ref<{
+  type: TypeFileExtentionMultimedia
+  extraId?: string
+} | null>(null)
+const openModalDownloadMobile = ref(false)
+
+const {
+  clearDownload,
+  getDownloadProgress,
+  isDownloading,
+  startDownload,
+} = useDownloadWithProgress({
+  contentType: 'Multimedia',
+  id: props.id,
+  trackPayload: () => ({
+    file_type: 'multimedia',
+    file_name: props.title,
+    file_url: props.titleUrl,
+  }),
+  onDownloaded: (data) => {
+    downloadIssueLink.value = data.url || ''
+    if (data.spent) {
+      showCoinAnimation.value = true
+    }
+    else {
+      downloadIssue.value = true
+    }
+  },
+  onInsufficientBalance: () => {
+    showCoinPaymentModal.value = true
+  },
+  onUpgradeSuggestions: () => {
+    showCoinPaymentModal.value = true
+  },
+})
+
+const handleDownloadClick = async (type: TypeFileExtentionMultimedia, price: number, extraId?: string) => {
+  priceFile.value = price
+  pendingDownload.value = {
+    type,
+    extraId,
+  }
+
+  startDownload({ type, extraId })
+}
+
+const handleCoinPaymentClose = () => {
+  showCoinPaymentModal.value = false
+  if (pendingDownload.value) {
+    clearDownload(pendingDownload.value.type, pendingDownload.value.extraId)
+  }
+  pendingDownload.value = null
+}
+
+const handleAnimationComplete = async () => {
+  // Close everything immediately when animation completes
+  showCoinAnimation.value = false
+  isStartWalletAnimation.value = true
+}
+
+const completeWalletAnimation = () => {
+  downloadIssue.value = true
+  isStartWalletAnimation.value = false
+}
+</script>
+
+<style scoped>
+.width-btn {
+  width: 48%;
+}
+
+.btn-pdf {
+  background-color : rgb(var(--v-theme-lightError), 0.25);
+  border: 1px solid rgb(var(--v-theme-lightError));
+}
+.text-pdf {
+    color: rgb(var(--v-theme-lightError));
+}
+.button-mobile-download {
+  height: 46px;
+}
+.button-mobile-download:hover {
+  opacity: 0.9;
+}
+.line-bottom-sheet {
+  width: 80px;
+  height: 6px;
+  border-radius: 20px;
+  background-color: rgb(var(--v-theme-grey300));
+}
+
+@media only screen and (max-width: 600px) {
+  .overlay-div {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.32);
+    z-index: 1005;
+  }
+  .mobile-style-bottom-sheet {
+    position: fixed;
+    left: 0;
+    bottom: -300px;
+    min-height: 200px;
+    background-color: white;
+    border-radius: 24px 24px 0 0;
+    z-index: 1006;
+    transition: all 0.5s;
+  }
+  .set-bottom {
+    bottom: 0;
+  }
+  .width-btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/app/components/multimedia/modal/edit.vue b/app/components/multimedia/modal/edit.vue
new file mode 100644
index 000000000..91b54771d
--- /dev/null
+++ b/app/components/multimedia/modal/edit.vue
@@ -0,0 +1,124 @@
+<template>
+  <v-form
+    v-model="isFormValid"
+    class="w-100 d-flex flex-column pa-4"
+  >
+    <div class="w-100 d-flex flex-column align-start">
+      <div class="w-100 d-flex flex-column align-start justify-start ga-1">
+        <div class="text-h6 text-grey700 font-weight-bold ml-2">
+          Title
+        </div>
+        <v-text-field
+          v-model="title"
+          rounded="lg"
+          height="48"
+          placeholder="Enter..."
+          variant="outlined"
+          autocomplete="off"
+          persistent-clear
+          base-color="grey200"
+          color="primary"
+          active-color="primary"
+          bg-color="white"
+          class="w-100"
+          :rules="[required]"
+        />
+      </div>
+    </div>
+    <div class="w-100 d-flex flex-column align-start justify-start ga-1">
+      <div class="text-h6 text-grey700 font-weight-bold ml-2">
+        Description
+      </div>
+      <v-textarea
+        v-model="description"
+        rounded="lg"
+        height="48"
+        placeholder="Enter..."
+        variant="outlined"
+        autocomplete="off"
+        persistent-clear
+        base-color="grey200"
+        color="primary"
+        active-color="primary"
+        bg-color="white"
+        class="w-100"
+        no-resize
+        rows="7"
+        :rules="[required, minLength(70)]"
+      />
+    </div>
+    <div class="w-100 d-flex justify-center align-center ga-2 mt-16">
+      <v-btn
+        color="grey200"
+        variant="outlined"
+        rounded="pill"
+        height="38"
+        width="80"
+        class="text-h5 font-weight-medium"
+        flat
+        :disabled="loadingEditItem"
+        @click="closeModal"
+      >
+        <span class="text-grey800">
+          Discard
+        </span>
+      </v-btn>
+      <v-btn
+        color="primary"
+        rounded="pill"
+        height="38"
+        width="220"
+        class="text-h5 text-grey800 font-weight-medium"
+        flat
+        :loading="loadingEditItem"
+        :disabled="!isFormValid"
+        @click="save"
+      >
+        Submit
+      </v-btn>
+    </div>
+  </v-form>
+</template>
+
+<script setup lang="ts">
+interface IModalEditMultimedia {
+  id: string
+  title: string
+  description: string
+}
+
+const props = defineProps<IModalEditMultimedia>()
+const emit = defineEmits(['close', 'success'])
+
+const { editItem, loadingEditItem } = useMultimedia()
+const {
+  required, minLength,
+} = useValidationRules()
+
+const title = ref(props.title)
+const description = ref(props.description)
+
+const isFormValid = ref(false)
+
+const closeModal = () => {
+  emit('close')
+}
+
+const save = async () => {
+  const response = await editItem(props.id, {
+    title: title.value,
+    description: description.value,
+  })
+
+  if (response.status === 1 && response.data?.id !== 0) {
+    emit('success', {
+      title: title.value,
+      description: description.value,
+    })
+    emit('close')
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/app/components/multimedia/previewCard.vue b/app/components/multimedia/previewCard.vue
new file mode 100644
index 000000000..d2cb1ec98
--- /dev/null
+++ b/app/components/multimedia/previewCard.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="w-100 container-slider-button bg-grey100 rounded-lg d-flex">
+    <div
+      class="button-div d-flex flex-column align-center justify-center ga-8 px-4"
+    >
+      <div
+        v-if="views"
+        class="d-flex flex-column align-center justify-center ga-1 primary-gray-700 cursor-pointer text-no-wrap"
+      >
+        <v-icon color="primary-gray-700">
+          md:visibility
+        </v-icon>
+        {{ views }}
+      </div>
+      <div
+        v-if="score"
+        class="d-flex flex-column align-center justify-center ga-1 primary-gray-700 cursor-pointer text-no-wrap"
+      >
+        <v-icon color="primary-gray-700">
+          md:star
+        </v-icon>
+        {{ score }}
+      </div>
+      <div
+        v-if="pageCount"
+        class="d-flex flex-column align-center justify-center ga-1 primary-gray-700 cursor-pointer text-no-wrap"
+      >
+        <v-icon color="primary-gray-700">
+          md:book_ribbon
+        </v-icon>
+        {{ pageCount }}
+      </div>
+      <div
+        v-if="hasShare"
+        class="d-flex flex-column align-center justify-center ga-1 primary-gray-700 cursor-pointer text-no-wrap"
+        @click="shareContent"
+      >
+        <v-icon color="primary-gray-700">
+          md:share
+        </v-icon>
+        Share
+      </div>
+    </div>
+
+    <div
+      class="w-100 d-flex justify-center align-center position-relative"
+    >
+      <template v-if="previewData && previewData.preview && previewData.preview.length > 0">
+        <video
+          v-if="previewData.type == 'video'"
+          class="main-image-paper"
+          height="200"
+          controls
+          :src="previewData.preview[0]"
+          :alt="title"
+        />
+        <v-carousel
+          v-if="previewData.type == 'slide'"
+          height="400"
+          hide-delimiters
+          show-arrows
+        >
+          <template #prev="{ props }">
+            <v-btn
+              color="grey700"
+              variant="outlined"
+              size="24"
+              flat
+              icon
+              @click="props.onClick"
+            >
+              <v-icon>md:chevron_left</v-icon>
+            </v-btn>
+          </template>
+          <template #next="{ props }">
+            <v-btn
+              color="grey700"
+              variant="outlined"
+              size="24"
+              flat
+              icon
+              @click="props.onClick"
+            >
+              <v-icon>md:chevron_right</v-icon>
+            </v-btn>
+          </template>
+          <v-carousel-item
+            v-for="(slide, i) in previewData.preview"
+            :key="i"
+          >
+            <div class="w-100 h-100 d-flex align-center">
+              <img
+                :src="slide"
+                class="main-image-paper"
+                height="200"
+                :alt="title"
+                :preload="i == 0"
+                :fetchpriority="i == 0 ? `high`:`low`"
+                :loading="i == 0 ? `eager` : `lazy`"
+              >
+            </div>
+          </v-carousel-item>
+        </v-carousel>
+
+        <img
+          v-if="previewData.type == 'pdf'"
+          width="170"
+          :src="previewData.preview[0]"
+          :alt="title"
+          class="w-100 h-100 cover-image"
+          preload
+          fetchpriority="high"
+          loading="eager"
+        >
+      </template>
+
+      <span
+        v-else
+        class="text-h5 text-center font-weight-bold text-grey700"
+      >
+        No visual preview available
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MultimediaPreviewDataDTO } from '@/types'
+
+interface IPreviewCard {
+  id: string
+  title: string
+  views?: number | string
+  score?: string | number
+  pageCount?: string | number
+  hasShare?: boolean
+  previewData: MultimediaPreviewDataDTO
+}
+
+withDefaults(defineProps<IPreviewCard>(), {
+  hasShare: true,
+})
+const emit = defineEmits(['share'])
+
+const shareContent = () => {
+  emit('share')
+}
+</script>
+
+<style scoped>
+.container-slider-button {
+  border: 1px solid rgb(var(--v-theme-grey300));
+  max-width: 360px;
+  height: 100%;
+  min-height: 400px;
+  max-height: 400px;
+}
+.button-div {
+  min-width: 60px;
+  border: 1px solid rgb(var(--v-theme-grey300));
+}
+
+.main-image-paper {
+  max-width : 100%
+}
+.cover-image {
+  object-fit: cover;
+}
+</style>
diff --git a/app/components/common/detail/ContentDetailsSection.vue b/app/components/paper/contentDetailsSection.vue
similarity index 100%
rename from app/components/common/detail/ContentDetailsSection.vue
rename to app/components/paper/contentDetailsSection.vue
diff --git a/app/components/common/detail/DownloadAndPurchaseButtons.vue b/app/components/paper/downloadAndPurchaseButtons.vue
similarity index 68%
rename from app/components/common/detail/DownloadAndPurchaseButtons.vue
rename to app/components/paper/downloadAndPurchaseButtons.vue
index 430e37035..37cd33486 100644
--- a/app/components/common/detail/DownloadAndPurchaseButtons.vue
+++ b/app/components/paper/downloadAndPurchaseButtons.vue
@@ -265,14 +265,11 @@ type TypeFile = 'word' | 'pdf' | 'answer' | 'extra'
 
 const props = defineProps<IDownloadAndPurchaseButtons>()
 
-const { $toast } = useNuxtApp()
-const { trackFileDownload } = useGtmEvents()
 const auth = useAuth()
 const router = useRouter()
 const { xs } = useDisplay()
 
 const { balance, isLoading } = useCoinBalance()
-const { downloadFile } = useDownload()
 const showCoinPaymentModal = ref(false)
 const showCoinAnimation = ref(false)
 const isProcessingPayment = ref(false)
@@ -284,159 +281,50 @@ const pendingDownload = ref<{
 } | null>(null)
 const openModalDownloadMobile = ref(false)
 
-const handleDownloadClick = async (type: TypeFile, price: number, extraId?: string) => {
-  const downloadKey = extraId ? `${type}-${extraId}` : type
-  priceFile.value = price
-
-  // Set loading state and progress tracking
-  downloadingItems.value.add(downloadKey)
-  downloadProgress.value[downloadKey] = 0
-  if (auth.isAuthenticated.value) {
-    startDownload(type, extraId)
-  }
-  else {
-    downloadingItems.value.delete(downloadKey)
-    Reflect.deleteProperty(downloadProgress.value, downloadKey)
-    router.push({})
-    setTimeout(() => {
-      router.push({ query: { auth_form: 'login', auth_noredirect: 'true' } })
-    }, 100)
-  }
-}
-
-// Track download progress for each button
-const downloadProgress = ref<Record<string, number>>({})
-const downloadingItems = ref<Set<string>>(new Set())
-
-const getDownloadProgress = (type: TypeFile, extraId?: string) => {
-  const key = extraId ? `${type}-${extraId}` : type
-  return downloadProgress.value[key] || 0
-}
-
-const isDownloading = (type: TypeFile, extraId?: string) => {
-  const key = extraId ? `${type}-${extraId}` : type
-  return downloadingItems.value.has(key)
-}
-
-const startDownload = async (type: TypeFile, extraId?: string) => {
-  trackFileDownload({
+const {
+  clearDownload,
+  getDownloadProgress,
+  isDownloading,
+  startDownload,
+} = useDownloadWithProgress({
+  contentType: 'PastPaper',
+  id: props.id,
+  trackPayload: () => ({
     file_type: 'past_paper',
     file_name: props.title,
     file_url: props.titleUrl,
-  })
-
-  const downloadKey = extraId ? `${type}-${extraId}` : type
-  let progressInterval: ReturnType<typeof setInterval> | null = null
-
-  try {
-    // Simulate progressive loading for API call
-    progressInterval = setInterval(() => {
-      const currentProgress = downloadProgress.value[downloadKey] ?? 0
-      if (currentProgress < 50) {
-        downloadProgress.value[downloadKey] = currentProgress + Math.random() * 15
-      }
-    }, 100)
-
-    const response = await downloadFile({
-      contentType: 'PastPaper',
-      fileType: type,
-      id: Number(props.id),
-      extraId: extraId ? Number(extraId) : undefined,
-    })
-
-    // Update progress to 60% after API response
-    downloadProgress.value[downloadKey] = 60
-    clearInterval(progressInterval)
-    progressInterval = null
-
-    // Create a custom fetch with progress tracking
-    if (response.succeeded && response.data) {
-      if (response.data.url) {
-        const xhr = new XMLHttpRequest()
-        xhr.open('GET', response.data.url, true)
-        xhr.responseType = 'blob'
-
-        xhr.onprogress = (event) => {
-          if (event.lengthComputable) {
-            const percentComplete = 60 + (event.loaded / event.total) * 40
-            downloadProgress.value[downloadKey] = Math.min(percentComplete, 100)
-          }
-        }
-
-        xhr.onload = () => {
-          if (xhr.status === 200) {
-            downloadProgress.value[downloadKey] = 100
-
-            const blob = xhr.response
-            const url = window.URL.createObjectURL(blob)
-
-            const a = document.createElement('a')
-            a.href = url
-            a.download = response.data?.name || 'file.pdf'
-            document.body.appendChild(a)
-            a.click()
-
-            a.remove()
-            window.URL.revokeObjectURL(url)
-            downloadIssueLink.value = response.data?.url || ''
-            if (response.data?.spent) {
-              showCoinAnimation.value = true
-            }
-            else {
-              downloadIssue.value = true
-            }
-
-            setTimeout(() => {
-              downloadingItems.value.delete(downloadKey)
-              Reflect.deleteProperty(downloadProgress.value, downloadKey)
-            }, 1000)
-          }
-        }
-
-        xhr.onerror = () => {
-          downloadingItems.value.delete(downloadKey)
-          Reflect.deleteProperty(downloadProgress.value, downloadKey)
-          $toast.error('Download failed. Please try again.')
-        }
-
-        xhr.send()
-      }
-      if (response.data.upgradeSuggestions && response.data.upgradeSuggestions.length > 0) {
-        showCoinPaymentModal.value = true
-      }
+  }),
+  onDownloaded: (data) => {
+    downloadIssueLink.value = data.url || ''
+    if (data.spent) {
+      showCoinAnimation.value = true
     }
     else {
-      if (response.errors && response.errors.length > 0) {
-        const messgage = response.errors[0].message
-        if (messgage == 'InsufficientBalance') {
-          showCoinPaymentModal.value = true
-        }
-      }
-      downloadingItems.value.delete(downloadKey)
-      Reflect.deleteProperty(downloadProgress.value, downloadKey)
-    }
-  }
-  catch (error: unknown) {
-    console.error('Download failed:', error)
-    downloadingItems.value.delete(downloadKey)
-    Reflect.deleteProperty(downloadProgress.value, downloadKey)
-    $toast.error('Download failed. Please try again.')
-  }
-  finally {
-    if (progressInterval) {
-      clearInterval(progressInterval)
+      downloadIssue.value = true
     }
+  },
+  onInsufficientBalance: () => {
+    showCoinPaymentModal.value = true
+  },
+  onUpgradeSuggestions: () => {
+    showCoinPaymentModal.value = true
+  },
+})
+
+const handleDownloadClick = async (type: TypeFile, price: number, extraId?: string) => {
+  priceFile.value = price
+  pendingDownload.value = {
+    type,
+    extraId,
   }
+
+  startDownload({ type, extraId })
 }
 
 const handleCoinPaymentClose = () => {
   showCoinPaymentModal.value = false
   if (pendingDownload.value) {
-    const downloadKey = pendingDownload.value.extraId
-      ? `${pendingDownload.value.type}-${pendingDownload.value.extraId}`
-      : pendingDownload.value.type
-    downloadingItems.value.delete(downloadKey)
-    Reflect.deleteProperty(downloadProgress.value, downloadKey)
+    clearDownload(pendingDownload.value.type, pendingDownload.value.extraId)
   }
   pendingDownload.value = null
 }
diff --git a/app/components/common/detail/PreviewActionCard.vue b/app/components/paper/previewActionCard.vue
similarity index 100%
rename from app/components/common/detail/PreviewActionCard.vue
rename to app/components/paper/previewActionCard.vue
diff --git a/app/components/profile/registerContent.vue b/app/components/profile/registerContent.vue
index fb59c7c34..4ad7783c4 100644
--- a/app/components/profile/registerContent.vue
+++ b/app/components/profile/registerContent.vue
@@ -22,7 +22,7 @@
           v-for="item in 10"
           :key="item"
         >
-          <lazy-common-detail-related-content-card-skeleton type="paper" />
+          <lazy-common-related-content-card-skeleton type="paper" />
         </v-slide-group-item>
       </v-slide-group>
       <!-- <v-slide-group
diff --git a/app/composables/api/multimedia/useMultimedia.api.ts b/app/composables/api/multimedia/useMultimedia.api.ts
index 9dfe29885..9aef6659a 100644
--- a/app/composables/api/multimedia/useMultimedia.api.ts
+++ b/app/composables/api/multimedia/useMultimedia.api.ts
@@ -3,6 +3,7 @@ import type {
   AppError,
   MultimediaBriefDTO,
   MultimediaCreateDTO,
+  MultimediaEditDTO,
   MultimediaDetailDTO,
   MultimediaCreateResponseDTO,
   ResponseListDTO,
@@ -64,23 +65,45 @@ export const useMultimedia = () => {
     }
   }
 
-  const encodePayload = (item: MultimediaCreateDTO) => {
+  const encodePayload = (item: MultimediaCreateDTO | MultimediaEditDTO) => {
     const payload = new URLSearchParams()
 
-    payload.append('section', String(item.board || ''))
-    payload.append('base', String(item.grade || ''))
-    payload.append('lesson', String(item.subject || ''))
-    payload.append('title', item.title || '')
-    payload.append('description', item.description || '')
-    payload.append('content_type', String(item.content_type || ''))
-    payload.append('from_page', String(item.from_page || ''))
-    payload.append('to_page', String(item.to_page || ''))
-    payload.append('free_available', item.free_available ? '1' : '0')
-    payload.append('file', item.file || '')
+    if (item.board) {
+      payload.append('section', String(item.board || ''))
+    }
+    if (item.grade) {
+      payload.append('base', String(item.grade || ''))
+    }
+    if (item.subject) {
+      payload.append('lesson', String(item.subject || ''))
+    }
+    if (item.title) {
+      payload.append('title', String(item.title || ''))
+    }
+    if (item.description) {
+      payload.append('description', String(item.description || ''))
+    }
+    if (item.content_type) {
+      payload.append('content_type', String(item.content_type || ''))
+    }
+    if (item.from_page) {
+      payload.append('from_page', String(item.from_page || ''))
+    }
+    if (item.to_page) {
+      payload.append('to_page', String(item.to_page || ''))
+    }
+    if (item.free_available) {
+      payload.append('free_available', item.free_available ? '1' : '0')
+    }
+    if (item.file) {
+      payload.append('file', String(item.file || ''))
+    }
 
-    item.topics.forEach((topic) => {
-      payload.append('topics[]', String(topic))
-    })
+    if (item.topics && item.topics.length > 0) {
+      item.topics.forEach((topic) => {
+        payload.append('topics[]', String(topic))
+      })
+    }
 
     return payload
   }
@@ -160,7 +183,7 @@ export const useMultimedia = () => {
     }
   }
 
-  const editItem = async (id: string | number, item: MultimediaCreateDTO) => {
+  const editItem = async (id: string | number, item: MultimediaEditDTO) => {
     loadingEditItem.value = true
 
     try {
diff --git a/app/composables/useDownloadWithProgress.ts b/app/composables/useDownloadWithProgress.ts
new file mode 100644
index 000000000..7109b0adc
--- /dev/null
+++ b/app/composables/useDownloadWithProgress.ts
@@ -0,0 +1,208 @@
+import type {
+  BodyRequestDownloadDTO,
+  ContentTypeDownload,
+  DownloadResponseDTO,
+} from '@/types'
+
+type DownloadType = string
+
+interface DownloadTrackingPayload {
+  file_type: 'multimedia' | 'past_paper' | 'quiz' | 'exam'
+  file_name: string
+  file_url: string
+}
+
+interface UseDownloadWithProgressOptions {
+  contentType: ContentTypeDownload
+  id: string | number
+  trackPayload: () => DownloadTrackingPayload
+  onDownloaded?: (data: DownloadResponseDTO) => void
+  onInsufficientBalance?: () => void
+  onUpgradeSuggestions?: (data: DownloadResponseDTO) => void
+}
+
+interface StartDownloadParams {
+  type: DownloadType
+  extraId?: string
+}
+
+const getDownloadKey = (type: DownloadType, extraId?: string) =>
+  extraId ? `${type}-${extraId}` : type
+
+const getDownloadErrorMessage = (status: number) => {
+  switch (status) {
+    case 400:
+      return 'Invalid request.'
+    case 401:
+      return 'You are not authorized.'
+    case 403:
+      return 'Access denied.'
+    case 404:
+      return 'File not found.'
+    case 429:
+      return 'Too many requests. Please try again later.'
+    case 500:
+      return 'Server error. Please try again later.'
+    case 502:
+    case 503:
+    case 504:
+      return 'Server is temporarily unavailable.'
+    default:
+      return `Download failed. Error code: ${status}`
+  }
+}
+
+export const useDownloadWithProgress = (options: UseDownloadWithProgressOptions) => {
+  const { $toast } = useNuxtApp()
+  const auth = useAuth()
+  const router = useRouter()
+  const { trackFileDownload } = useGtmEvents()
+  const { downloadFile } = useDownload()
+
+  const downloadProgress = ref<Record<string, number>>({})
+  const downloadingItems = ref<Set<string>>(new Set())
+
+  const clearDownload = (type: DownloadType, extraId?: string) => {
+    const key = getDownloadKey(type, extraId)
+    downloadingItems.value.delete(key)
+    Reflect.deleteProperty(downloadProgress.value, key)
+  }
+
+  const getDownloadProgress = (type: DownloadType, extraId?: string) =>
+    downloadProgress.value[getDownloadKey(type, extraId)] || 0
+
+  const isDownloading = (type: DownloadType, extraId?: string) =>
+    downloadingItems.value.has(getDownloadKey(type, extraId))
+
+  const redirectToLogin = () => {
+    router.push({})
+    setTimeout(() => {
+      router.push({ query: { auth_form: 'login', auth_noredirect: 'true' } })
+    }, 100)
+  }
+
+  const saveBlobWithProgress = (
+    fileUrl: string,
+    fileName: string,
+    onProgress: (progress: number) => void,
+  ) =>
+    new Promise<void>((resolve, reject: (error: { status?: number }) => void) => {
+      const xhr = new XMLHttpRequest()
+      xhr.open('GET', fileUrl, true)
+      xhr.responseType = 'blob'
+
+      xhr.onprogress = (event) => {
+        if (event.lengthComputable) {
+          const percentComplete = 60 + (event.loaded / event.total) * 40
+          onProgress(Math.min(percentComplete, 100))
+        }
+      }
+
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          const blob = xhr.response
+          const url = window.URL.createObjectURL(blob)
+          const a = document.createElement('a')
+          a.href = url
+          a.download = fileName || 'file.pdf'
+          document.body.appendChild(a)
+          a.click()
+          a.remove()
+          window.URL.revokeObjectURL(url)
+          resolve()
+          return
+        }
+
+        reject({ status: xhr.status })
+      }
+
+      xhr.onerror = () => reject({})
+      xhr.send()
+    })
+
+  const startDownload = async ({ type, extraId }: StartDownloadParams) => {
+    const downloadKey = getDownloadKey(type, extraId)
+    downloadingItems.value.add(downloadKey)
+    downloadProgress.value[downloadKey] = 0
+
+    if (!auth.isAuthenticated.value) {
+      clearDownload(type, extraId)
+      redirectToLogin()
+      return
+    }
+
+    trackFileDownload(options.trackPayload())
+
+    let progressInterval: ReturnType<typeof setInterval> | null = null
+
+    try {
+      progressInterval = setInterval(() => {
+        const currentProgress = downloadProgress.value[downloadKey] ?? 0
+        if (currentProgress < 50) {
+          downloadProgress.value[downloadKey] = currentProgress + Math.random() * 15
+        }
+      }, 100)
+
+      const request: BodyRequestDownloadDTO = {
+        contentType: options.contentType,
+        fileType: type,
+        id: Number(options.id),
+        extraId: extraId ? Number(extraId) : undefined,
+      }
+      const response = await downloadFile(request)
+
+      downloadProgress.value[downloadKey] = 60
+      clearInterval(progressInterval)
+      progressInterval = null
+
+      if (response.succeeded && response.data) {
+        const hasDownloadUrl = Boolean(response.data.url)
+        if (hasDownloadUrl) {
+          await saveBlobWithProgress(response.data.url, response.data.name, (progress) => {
+            downloadProgress.value[downloadKey] = progress
+          })
+
+          downloadProgress.value[downloadKey] = 100
+          options.onDownloaded?.(response.data)
+
+          setTimeout(() => {
+            clearDownload(type, extraId)
+          }, 1000)
+        }
+
+        if (response.data.upgradeSuggestions && response.data.upgradeSuggestions.length > 0) {
+          options.onUpgradeSuggestions?.(response.data)
+        }
+
+        if (!hasDownloadUrl) {
+          clearDownload(type, extraId)
+        }
+
+        return
+      }
+
+      const message = response.errors?.[0]?.message
+      if (message === 'InsufficientBalance') {
+        options.onInsufficientBalance?.()
+      }
+      clearDownload(type, extraId)
+    }
+    catch (error: unknown) {
+      clearDownload(type, extraId)
+      const status = (error as { status?: number }).status
+      $toast.error(status ? getDownloadErrorMessage(status) : 'Download failed. Please try again.')
+    }
+    finally {
+      if (progressInterval) {
+        clearInterval(progressInterval)
+      }
+    }
+  }
+
+  return {
+    clearDownload,
+    getDownloadProgress,
+    isDownloading,
+    startDownload,
+  }
+}
diff --git a/app/pages/multimedia/[id]/[[slug]].vue b/app/pages/multimedia/[id]/[[slug]].vue
index 7eb6f7c27..b51472825 100644
--- a/app/pages/multimedia/[id]/[[slug]].vue
+++ b/app/pages/multimedia/[id]/[[slug]].vue
@@ -1,412 +1,208 @@
 <template>
-  <div class="test-details-content">
-    <common-category />
-
-    <section>
-      <v-container class="py-0">
-        <v-row class="mt-0 py-0">
-          <v-col cols="12">
-            <!-- Skeleton loader for breadcrumb -->
-            <v-skeleton-loader
-              v-if="pending"
-              class="mx-auto"
-              height="60"
-            />
-            <!-- Actual breadcrumb when loaded -->
-            <widgets-breadcrumb
-              v-else
-              :breads="breads"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-    </section>
-
-    <section>
-      <v-container class="py-0">
-        <div
-          v-if="pending"
-          class="detail mt-md-8"
-        >
-          <v-row>
-            <v-col
-              cols="12"
-              md="4"
-            >
-              <v-skeleton-loader
-                class="mx-auto"
-                height="300"
-              />
-            </v-col>
-
-            <v-col
-              cols="12"
-              md="5"
-            >
-              <v-skeleton-loader
-                class="mx-auto"
-                height="300"
-              />
-            </v-col>
-
-            <v-col md="3">
-              <v-skeleton-loader
-                class="mx-auto"
-                type="list-item-avatar"
-              />
-
-              <v-skeleton-loader
-                class="mx-auto mt-2"
-                type="list-item-three-line"
-                repeat="4"
-              />
-
-              <v-skeleton-loader
-                class="mx-auto mt-4"
-                type="button"
-              />
-            </v-col>
-          </v-row>
-        </div>
-
-        <div
-          v-else
-          class="detail mt-md-8"
-        >
-          <v-row>
-            <v-col
-              cols="12"
-              md="4"
-            >
-              <details-multimedia-preview-gallery
-                ref="preview_gallery"
-                :gallery-images="previewImages"
-                :link-data="previewLinkData"
-                :initial-slide="0"
-              />
-            </v-col>
-            <v-col
-              cols="12"
-              md="5"
-            >
-              <div class="d-flex mb-4">
-                <div class="w-100">
-                  <div class="d-flex align-center justify-space-between header">
-                    <h1
-                      v-show="!editMode.title"
-                      class="gama-text-h5 font-weight-bold"
-                    >
-                      {{ contentData?.title }}
-                      <v-btn
-                        v-if="user?.id == contentData?.user_"
-                        icon
-                        size="x-small"
-                        @click="editMode.title = true"
-                      >
-                        <v-icon> mdi-pencil </v-icon>
-                      </v-btn>
-                    </h1>
-                  </div>
+  <v-container
+    v-if="contentData"
+    class="d-flex flex-column mt-16"
+  >
+    <lazy-widgets-breadcrumb
+      background-color="white"
+      :breads="breads"
+    />
+    <div
+      class="w-100 d-flex align-center ga-1"
+    >
+      <v-icon color="primary">
+        md:chevron_backward
+      </v-icon>
+      <h1 class="text-h4 font-weight-bold">
+        {{ contentData.title }}
+      </h1>
+      <v-icon color="primary">
+        md:chevron_forward
+      </v-icon>
+
+      <v-btn
+        v-if="contentData.owner"
+        color="info"
+        class="rounded-circle"
+        size="24"
+        flat
+        variant="tonal"
+        @click="openEditModal = true"
+      >
+        <v-icon size="16">
+          md:edit
+        </v-icon>
+      </v-btn>
+    </div>
+    <div class="w-100 d-flex align-start justify-center justify-md-space-between mt-6 flex-wrap mb-4">
+      <div class="w-100 w-md-33 d-flex justify-center">
+        <lazy-multimedia-preview-card
+          :id="contentData.id"
+          :title="contentData.title"
+          :views="contentData.views"
+          :score="contentData.ref_score"
+          :page-count="contentData.file_pages"
+          :preview-data="contentData.previewData"
+          @share="openShare = true"
+        />
+      </div>
 
-                  <div class="w-100">
-                    <v-textarea
-                      v-if="editMode.title"
-                      v-model="contentData.title"
-                      width="100%"
-                      rows="3"
-                      placeholder="Title"
-                    >
-                      <template #append-inner>
-                        <v-btn
-                          color="success"
-                          icon
-                          :loading="editMode.title_loading"
-                          size="x-small"
-                          @click="updateDetails()"
-                        >
-                          <v-icon> mdi-check </v-icon>
-                        </v-btn>
-                      </template>
-                    </v-textarea>
-                  </div>
+      <div class="w-100 w-md-66 d-flex align-start flex-wrap mt-4 mt-md-0">
+        <lazy-multimedia-content-detail :content-data="contentData" />
 
-                  <multimedia-detail-description-section
-                    :description="contentData?.description"
-                    :collection-list="contentData?.collectionList"
-                    :can-edit="user?.id == contentData?.user_"
-                    @update:description="contentData.description = $event"
-                    @save="updateDetails"
-                  />
+        <lazy-multimedia-download-button
+          :id="contentData.id"
+          :files="contentData.files"
+          :title="contentData.title"
+          :title-url="contentData.title_url"
+        />
+      </div>
+    </div>
 
-                  <multimedia-detail-tag-section
-                    :section-id="contentData?.section"
-                    :section-title="contentData?.section_title"
-                    :base-id="contentData?.base"
-                    :base-title="contentData?.base_title"
-                    :lesson-id="contentData?.lesson"
-                    :lesson-title="contentData?.lesson_title"
-                  />
-                </div>
-              </div>
-              <div class="text-center download-sec">
-                <multimedia-detail-download-section
-                  :file-ext="contentData?.files?.ext || 'pptx'"
-                  :price="contentData?.files?.price || 0"
-                  :file-id="route.params.id"
-                  :credit="user?.credit || 0"
-                  @login="openAuthDialog('login')"
-                  @register="openAuthDialog('register')"
-                />
-              </div>
-            </v-col>
-            <v-col md="3">
-              <multimedia-detail-sidebar
-                :avatar="contentData?.avatar"
-                :first-name="contentData?.first_name"
-                :last-name="contentData?.last_name"
-                :content-type-title="contentData?.content_type_title"
-                :file-pages="contentData?.file_pages"
-                :views="contentData?.views"
-                :up-date="contentData?.up_date"
-                :file-ext="contentData?.files?.ext || 'pptx'"
-                :price="contentData?.files?.price || 0"
-                :title="contentData?.title"
-                :download-loading="download_loading"
-                :is-downloading="isDownloading"
-                :download-progress="downloadProgress"
-                @download="startDownload"
-              />
-            </v-col>
-          </v-row>
-        </div>
-      </v-container>
-    </section>
+    <lazy-common-box-random-question
+      :lesson="contentData.lesson"
+    />
 
-    <multimedia-detail-mobile-order-section
-      v-if="!pending"
-      :file-ext="contentData?.files?.ext || 'pptx'"
-      :price="contentData?.files?.price || 0"
-      :credit="user?.credit || 0"
-      :is-logged-in="isLoggedIn"
-      :download-loading="download_loading"
-      :is-downloading="isDownloading"
-      :download-progress="downloadProgress"
-      @download="startDownload"
-      @login="openAuthDialog('login')"
-      @register="openAuthDialog('register')"
+    <lazy-common-related-content
+      :id="contentData.id"
+      source="file"
+      :request="[`test`, `file`, `exam`, `question`, `tutorial`]"
     />
 
-    <v-container>
-      <v-row v-if="pending">
-        <v-col
-          cols="12"
-          md="6"
-        >
-          <v-skeleton-loader
-            class="mx-auto mb-4"
-            type="card"
-            height="200"
-          />
-        </v-col>
-        <v-col
-          cols="12"
-          md="6"
-        >
-          <v-skeleton-loader
-            class="mx-auto mb-4"
-            type="card"
-            height="200"
-          />
-        </v-col>
-      </v-row>
+    <span
+      class="d-flex align-center ga-1 text-h5 cursor-pointer text-lightError mt-4"
+      @click="openCrashReport = true"
+    >
+      <v-icon
+        color="lightError"
+        class="mb-1"
+      >md:warning_outlined</v-icon>
+      Crash report
+    </span>
 
-      <v-row v-else>
-        <v-col
-          cols="12"
-          md="6"
-        />
-        <v-col
-          cols="12"
-          md="6"
-        />
-      </v-row>
-      <common-related-portrait-content
-        page-type="multimedia"
-        page-name="Multimedia"
-        source="file"
-        request="file"
+    <lazy-common-modal-base
+      v-model:show-dialog="openCrashReport"
+      title="Crash Report"
+    >
+      <lazy-common-modal-crash-report
+        :id="contentData.id"
+        type-crash-report="test"
+        @close="openCrashReport = false"
       />
-    </v-container>
-    <section class="feed" />
+    </lazy-common-modal-base>
 
-    <v-row
-      justify="center"
-      class="mt-10"
+    <lazy-common-modal-base
+      v-model:show-dialog="openShare"
+      title="Share"
     >
-      <v-col
-        cols="12"
-        md="8"
-        class="text-center"
-      >
-        <common-ad-banner
-          v-model="isAdsLoad"
-          adslot="7199289937"
-        />
-      </v-col>
-    </v-row>
-
-    <lazy-modals-coin-payment-modal
-      v-if="showCoinPaymentModal"
-      v-model:show-dialog="showCoinPaymentModal"
-      :is-processing="isLoading"
-      :user-balance="balance"
-      :amount-to-pay="5"
-      @close="showCoinPaymentModal = false"
-    />
-
-    <!-- Coin Consumption Animation -->
-    <lazy-common-coin-consumption-animation
-      v-model:is-visible="showCoinAnimation"
-      @animation-complete="handleAnimationComplete"
-    />
+      <lazy-common-modal-share :title="contentData.title" />
+    </lazy-common-modal-base>
 
     <lazy-common-modal-base
-      v-model:show-dialog="downloadIssue"
-      :max-width="600"
-      title="Download"
+      v-if="openEditModal"
+      v-model:show-dialog="openEditModal"
+      title="Edit"
     >
-      <lazy-common-modal-download-file
-        :link="downloadIssueLink"
-        @close="downloadIssue = false"
+      <lazy-multimedia-modal-edit
+        :id="contentData.id"
+        :title="contentData.title"
+        :description="contentData.description"
+        @close="openEditModal = false"
+        @success="editSuccessfully"
       />
     </lazy-common-modal-base>
-  </div>
+  </v-container>
 </template>
 
-<script setup>
-const auth = useAuth()
-const { user } = useUser()
+<script setup lang="ts">
+import type { AppError } from '@/types'
 
-definePageMeta({
-  auth: false,
-})
+interface BreadCrumb {
+  text: string
+  disabled: boolean
+  href: string
+}
 
-const preview_gallery = ref(null)
 const route = useRoute()
 const router = useRouter()
-const { $toast } = useNuxtApp()
-const editMode = reactive({
-  title: false,
-  title_loading: false,
-})
-const requestURL = ref(useRequestURL().host)
-const breads = ref([])
-
-const download_loading = ref(false)
-
-// Track download progress
-const downloadProgress = ref(0)
-const isDownloading = ref(false)
-
-const isAdsLoad = ref(false)
-
-const previewImages = computed(() => {
-  return contentData.value?.previewData?.preview || []
-})
+const { getItemById } = useMultimedia()
 
-const previewLinkData = computed(() => {
-  return {
-    state: contentData.value?.state || '',
-    section: contentData.value?.section || '',
-    base: contentData.value?.base || '',
-    course: contentData.value?.course || '',
-    lesson: contentData.value?.lesson || '',
-  }
-})
-
-const isLoggedIn = computed(() => {
-  return auth.isAuthenticated.value ?? false
-})
+const requestURL = ref(useRequestURL().host)
+const breads = ref<BreadCrumb[]>([])
+const openShare = ref(false)
+const openCrashReport = ref(false)
+const openEditModal = ref(false)
 
 const { data: contentData } = await useAsyncData(
-  () => `multimedia-${route.params.id}`,
+  `multimedia-${route.params.id}`,
   async () => {
     try {
-      const content = await useApiService.get(`/api/v1/files/${route.params.id}`)
-      if (content.status === 1) {
-        return content.data
+      const response = await getItemById(route.params.id as string)
+
+      if (response.status == 1 && response.data) {
+        return response.data
       }
       else {
         showError({
           statusCode: 404,
           statusMessage: 'Page Not Founded!',
         })
-        return {}
+        return null
       }
     }
-    catch (e) {
+    catch (e: unknown) {
       showError({
         statusCode: 404,
         statusMessage: 'Page Not Founded!',
       })
-      if (e?.status === 404) {
-        // router.push("/search?type=question");
+      const error = e as AppError
+      if (error?.status === 404) {
+        router.push('/search?type=paper')
       }
-      throw e
+      throw error
     }
   },
-  {
-    watch: [() => route.params.id],
-  },
 )
 
-// const {
-//   pending,
-//   error,
-//   data: asyncContentData,
-// } = useAsyncData(
-//   `multimedia-details-${route.params.id}`,
-//   async () => {
-//     try {
-//       const data = await fetchContentData();
-
-//       if (data) {
-//         contentData.value = data;
-
-//         initBreadCrumb();
-//       }
+const initBreadCrumb = () => {
+  if (!contentData.value) return
+  breads.value = []
+  breads.value.push({
+    text: 'Multimedia',
+    disabled: false,
+    href: '/search?type=multimedia',
+  })
+  if (contentData.value.section_title) {
+    breads.value.push(
+      {
+        text: contentData.value.section_title,
+        disabled: false,
+        href: `/search?type=multimedia&section=${contentData.value.section}`,
+      })
+  }
+  if (contentData.value.base_title) {
+    breads.value.push(
+      {
+        text: contentData.value.base_title,
+        disabled: false,
+        href: `/search?type=multimedia&section=${contentData.value.section}&base=${contentData.value.base}`,
+      })
+  }
+  if (contentData.value.lesson_title) {
+    breads.value.push(
 
-//       return data;
-//     } catch (err) {
-//       showError({
-//         statusCode: err.response?.status || 500,
-//         message:
-//           err.response?.data?.message ||
-//           "Something went wrong loading the content",
-//       });
-//       return null;
-//     }
-//   },
-//   {
-//     server: true,
-//     lazy: false,
-//     immediate: true,
-//     watch: [() => route.params.id],
-//   }
-// );
-const { data, pending, _error } = await useAsyncData(
-  `multimedia-details-${route.params.id}`,
-  async () => {
-    const data = await fetchContentData()
-    return data
-  },
-)
-watchEffect(async () => {
-  if (data.value) {
-    contentData.value = data.value
-    await initBreadCrumb()
+      {
+        text: contentData.value.lesson_title,
+        disabled: false,
+        href: `/search?type=multimedia&section=${contentData.value.section}&base=${contentData.value.base}&lesson=${contentData.value.lesson}`,
+      },
+    )
   }
-})
+}
+
+if (contentData.value) {
+  initBreadCrumb()
+}
 
 const ogImage
   = contentData.value?.previewData
@@ -471,287 +267,24 @@ useHead(() => ({
   link: [
     {
       rel: 'canonical',
-      href: `https://${requestURL.value}/multimedia/${contentData.value.id}/${contentData.value.title_url}`,
+      href: `https://${requestURL.value}/multimedia/${contentData.value?.id}/${contentData.value?.title_url}`,
     },
   ],
 }))
 
-// onMounted(async () => {
-//   if (pending.value) {
-//     await _waitForAsyncData();
-//   }
-
-//   if (!contentData.value || Object.keys(contentData.value).length === 0) {
-//     if (asyncContentData.value) {
-//       contentData.value = asyncContentData.value;
-//       initBreadCrumb();
-//     }
-//   }
-// });
-
-function _waitForAsyncData() {
-  return new Promise((resolve) => {
-    if (!pending.value) {
-      resolve()
-      return
-    }
-
-    const checkInterval = setInterval(() => {
-      if (!pending.value) {
-        clearInterval(checkInterval)
-        resolve()
-      }
-    }, 100)
-
-    // Add a safety timeout after 5 seconds
-    setTimeout(() => {
-      clearInterval(checkInterval)
-      resolve()
-    }, 5000)
-  })
-}
-
-watch(
-  contentData,
-  (newData) => {
-    if (newData) {
-      initBreadCrumb()
-    }
-  },
-  { deep: true },
-)
-
-async function initBreadCrumb() {
-  if (!contentData.value || !contentData.value.section_title) {
-    return
-  }
-
-  breads.value.push({
-    text: 'Multimedia',
-    disabled: false,
-    href: '/search?type=multimedia',
-  })
-
-  if (contentData.value.section_title) {
-    breads.value.push({
-      text: contentData.value.section_title,
-      disabled: false,
-      href: `/search?type=multimedia&section=${contentData.value.section}`,
-    })
-  }
-
-  if (contentData.value.base_title) {
-    breads.value.push({
-      text: contentData.value.base_title,
-      disabled: false,
-      href: `/search?type=paper&section=${contentData.value.section}&base=${contentData.value.base}`,
-    })
-  }
-
-  if (contentData.value.lesson_title) {
-    breads.value.push({
-      text: contentData.value.lesson_title,
-      disabled: false,
-      href: `/search?type=paper&section=${contentData.value.section}&base=${contentData.value.base}&lesson=${contentData.value.lesson}`,
-    })
-  }
-}
-
-function openAuthDialog(val) {
-  router.push({ query: { auth_form: val } })
-}
-
-const { downloadFile } = useDownload()
-const { balance, isLoading } = useCoinBalance()
-const showCoinPaymentModal = ref(false)
-const showCoinAnimation = ref(false)
-const downloadIssue = ref(false)
-const downloadIssueLink = ref('')
-
-async function startDownload(_type) {
-  download_loading.value = true
-  isDownloading.value = true
-  downloadProgress.value = 0
-
-  try {
-    // Simulate progressive loading for API call
-    const progressInterval = setInterval(() => {
-      if (downloadProgress.value < 50) {
-        downloadProgress.value += Math.random() * 15
-      }
-    }, 100)
-
-    const response = await downloadFile({
-      contentType: 'Multimedia',
-      fileType: _type,
-      id: Number(route.params.id),
-    })
-
-    // Update progress to 60% after API response
-    downloadProgress.value = 60
-    clearInterval(progressInterval)
-
-    if (response.succeeded && response.data) {
-      if (response.data.url) {
-        const xhr = new XMLHttpRequest()
-        xhr.open('GET', response.data.url, true)
-        xhr.responseType = 'blob'
-
-        xhr.onprogress = (event) => {
-          if (event.lengthComputable) {
-            const percentComplete = 60 + (event.loaded / event.total) * 40
-            downloadProgress.value = Math.min(percentComplete, 100)
-          }
-        }
-
-        xhr.onload = () => {
-          if (xhr.status === 200) {
-            downloadProgress.value = 100
-
-            const blob = xhr.response
-            const url = window.URL.createObjectURL(blob)
-
-            const a = document.createElement('a')
-            a.href = url
-            a.download = response.data?.name || 'file.pdf'
-            document.body.appendChild(a)
-            a.click()
-
-            a.remove()
-            window.URL.revokeObjectURL(url)
-            downloadIssueLink.value = response.data?.url || ''
-            if (response.data?.spent) {
-              showCoinAnimation.value = true
-            }
-            else {
-              downloadIssue.value = true
-            }
-
-            setTimeout(() => {
-              isDownloading.value = false
-              downloadProgress.value = 0
-            }, 1000)
-          }
-        }
-
-        xhr.onerror = () => {
-          isDownloading.value = false
-          downloadProgress.value = 0
-          $toast.error('Download failed. Please try again.')
-        }
-
-        xhr.send()
-      }
-      if (response.data.upgradeSuggestions && response.data.upgradeSuggestions.length > 0) {
-        showCoinPaymentModal.value = true
-      }
-    }
-    else {
-      if (response.errors && response.errors.length > 0) {
-        const messgage = response.errors[0].message
-        if (messgage == 'InsufficientBalance') {
-          showCoinPaymentModal.value = true
-        }
-      }
-      isDownloading.value = false
-      downloadProgress.value = 0
-    }
-  }
-  catch (err) {
-    // Clean up on error
-    isDownloading.value = false
-    downloadProgress.value = 0
-
-    if (err.response?.status == 400) {
-      if (
-        err.response.data.status == 0
-        && err.response.data.error == 'creditNotEnough'
-      ) {
-        $toast.info('No enough credit')
-      }
+const editSuccessfully = (data: {
+  title: string
+  description: string
+}) => {
+  if (contentData.value) {
+    contentData.value = {
+      ...contentData.value,
+      title: data.title,
+      description: data.description,
     }
   }
-  finally {
-    download_loading.value = false
-  }
-}
-
-const handleAnimationComplete = async () => {
-  // Close everything immediately when animation completes
-  showCoinAnimation.value = false
-  downloadIssue.value = true
-}
-
-function urlencodeFormData(fd) {
-  let s = ''
-  for (const pair of fd.entries()) {
-    if (typeof pair[1] == 'string') {
-      s += (s ? '&' : '') + encode(pair[0]) + '=' + encode(pair[1])
-    }
-  }
-  return s
-}
-
-function encode(s) {
-  return encodeURIComponent(s).replace(/%20/g, '+')
-}
-
-async function updateDetails() {
-  // Arrange to form data
-  const isEditingTitle = editMode.title
-  if (isEditingTitle) {
-    editMode.title_loading = true
-  }
-
-  const formData = new FormData()
-  formData.append('title', contentData.value?.title)
-  formData.append('description', contentData.value?.description)
-
-  try {
-    const { data } = await useApiService.put(
-      `/api/v1/files/${route.params.id}`,
-      urlencodeFormData(formData),
-      {
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-      },
-    )
-
-    if (data.value?.id == 0 && data.value?.repeated) {
-      $toast.info('The multimedia is duplicated')
-    }
-    else {
-      $toast.success('Updated successfully')
-    }
-  }
-  catch (err) {
-    if (err.response?.status == 403) {
-      $toast.error('You do not have permission to update this content')
-    }
-    else if (err.response?.status == 400) {
-      $toast.error(err.response.data.message)
-    }
-  }
-  finally {
-    editMode.title = false
-    editMode.title_loading = false
-  }
 }
 </script>
 
-<style>
-.content_main_info {
-  padding: 27px;
-  background: #f5f5f5 !important;
-  border-radius: 6px;
-}
-
-.content_main_info .creator_title {
-  font-size: 18px;
-}
-
-p {
-  font-size: 1.3rem !important;
-}
+<style scoped>
 </style>
diff --git a/app/pages/paper/[id]/[[slug]].vue b/app/pages/paper/[id]/[[slug]].vue
index 230e80eef..6c4afd397 100644
--- a/app/pages/paper/[id]/[[slug]].vue
+++ b/app/pages/paper/[id]/[[slug]].vue
@@ -29,7 +29,7 @@
         md="4"
         class="d-flex justify-center justify-md-start"
       >
-        <lazy-common-detail-preview-action-card
+        <lazy-paper-preview-action-card
           :id="contentData.id"
           :thumb-pic="contentData.thumb_pic"
           :title="contentData.title"
@@ -45,9 +45,9 @@
         md="8"
         class="d-flex h-100 align-start flex-wrap"
       >
-        <lazy-common-detail-content-details-section :content-data="contentData" />
+        <lazy-paper-content-details-section :content-data="contentData" />
 
-        <lazy-common-detail-download-and-purchase-buttons
+        <lazy-paper-download-and-purchase-buttons
           :id="contentData.id"
           :files="contentData.files"
           :year="contentData.edu_year"
@@ -63,10 +63,10 @@
         <lazy-common-detail-subject-directory-nav :content-data="contentData" />
       </v-col>
 
-      <lazy-common-detail-box-random-question :lesson="contentData.lesson" />
+      <lazy-common-box-random-question :lesson="contentData.lesson" />
 
       <v-col cols="12">
-        <lazy-common-detail-related-content
+        <lazy-common-related-content
           :id="contentData.id"
           source="test"
           :request="[`test`, `file`, `exam`, `question`, `tutorial`]"
@@ -101,17 +101,24 @@
         </v-col>
       </ClientOnly>
     </v-row>
-    <lazy-common-crash-report-modal
-      v-if="openCrashReport"
-      :id="contentData.id"
+
+    <lazy-common-modal-base
       v-model:show-dialog="openCrashReport"
-      type-crash-report="test"
-    />
-    <lazy-common-share-modal
-      v-if="openShare"
+      title="Crash Report"
+    >
+      <lazy-common-modal-crash-report
+        :id="contentData.id"
+        type-crash-report="test"
+        @close="openCrashReport = false"
+      />
+    </lazy-common-modal-base>
+
+    <lazy-common-modal-base
       v-model:show-dialog="openShare"
-      :title="contentData.title"
-    />
+      title="Share"
+    >
+      <lazy-common-modal-share :title="contentData.title" />
+    </lazy-common-modal-base>
   </v-container>
 </template>
 
diff --git a/app/pages/tutorial/[id]/[[slug]].vue b/app/pages/tutorial/[id]/[[slug]].vue
index aea0bb3dd..1341dd195 100644
--- a/app/pages/tutorial/[id]/[[slug]].vue
+++ b/app/pages/tutorial/[id]/[[slug]].vue
@@ -130,10 +130,10 @@
           md:format_list_bulleted
         </v-icon>
       </v-btn>
-      <CommonDetailBoxRandomQuestion :lesson="contentData.lesson" />
+      <lazy-common-box-random-question :lesson="contentData.lesson" />
 
       <v-col cols="12">
-        <CommonDetailRelatedContent
+        <lazy-common-related-content
           :id="contentData.id"
           source="tutorial"
           :request="[`test`, `file`, `exam`, `question`, `tutorial`]"
@@ -175,15 +175,23 @@
         </v-col>
       </ClientOnly>
     </v-row>
-    <CommonCrashReportModal
-      :id="contentData.id"
+    <lazy-common-modal-base
       v-model:show-dialog="openCrashReport"
-      type-crash-report="tutorial"
-    />
-    <CommonShareModal
+      title="Crash Report"
+    >
+      <lazy-common-modal-crash-report
+        :id="contentData.id"
+        type-crash-report="tutorial"
+        @close="openCrashReport = false"
+      />
+    </lazy-common-modal-base>
+
+    <lazy-common-modal-base
       v-model:show-dialog="openShare"
-      :title="contentData.title"
-    />
+      title="Share"
+    >
+      <lazy-common-modal-share :title="contentData.title" />
+    </lazy-common-modal-base>
   </v-container>
 </template>
 
diff --git a/app/types/multimedia/index.ts b/app/types/multimedia/index.ts
index 120dcc040..674ea420e 100644
--- a/app/types/multimedia/index.ts
+++ b/app/types/multimedia/index.ts
@@ -11,6 +11,19 @@ export interface MultimediaCreateDTO {
   free_available: boolean
   file: string
 }
+export interface MultimediaEditDTO {
+  board?: string | number
+  grade?: string | number
+  subject?: string | number
+  topics?: (string | number)[]
+  title?: string
+  description?: string
+  content_type?: string | number
+  from_page?: string | number
+  to_page?: string | number
+  free_available?: boolean
+  file?: string
+}
 
 export interface MultimediaCreateResponseDTO {
   id: number
@@ -31,10 +44,11 @@ export interface MultimediaBriefDTO {
   subdate_jalali: string
 }
 
+export type TypeFileExtentionMultimedia = 'pptx' | 'pdf' | 'docx' | 'mp4'
 export interface MultimediaFileInfoDTO {
   exist: boolean
   size: string | number
-  ext: string
+  ext: TypeFileExtentionMultimedia
   pages?: number
   price?: number
   price_unit?: string
@@ -58,6 +72,12 @@ export interface MultimediaCollectionDTO {
   chapters?: MultimediaCollectionChapterDTO[]
 }
 
+export interface MultimediaPreviewDataDTO {
+  type: string
+  preview: string[]
+  poster: boolean
+}
+
 export interface MultimediaDetailDTO {
   id: string
   user_: string
@@ -109,7 +129,9 @@ export interface MultimediaDetailDTO {
   hasMembership: boolean
   files: MultimediaFileInfoDTO
   collectionList: MultimediaCollectionDTO[]
+  previewData: MultimediaPreviewDataDTO
 }
+
 export interface GetDataParamsMultimedia {
   page: number
   pageSize: number
diff --git a/app/types/pastpaper/index.ts b/app/types/pastpaper/index.ts
index 793458c6d..ddf6695ec 100644
--- a/app/types/pastpaper/index.ts
+++ b/app/types/pastpaper/index.ts
@@ -61,10 +61,42 @@ export interface ContentItemDTO {
   test_type: string
   type_title?: string
 }
+export interface FileRelatedContentDTO {
+  id: string
+  title: string
+  type: string
+  file_duration: string
+  file_pages: string
+  views: string
+  subdate: string
+  first_name: string
+  last_name: string
+  avatar: string
+  poster: string
+  title_url: string
+  url: string
+  legacy_url: string
+  type_title: string
+  type_title_fa: string
+  subdate_jalali: string
+}
+export interface ExamRelatedContentDTO {
+  id: string
+  title: string
+  code: string
+  tests_num: string
+  thumb_pic: string
+  first_name: string
+  last_name: string
+  avatar: string
+  title_url: string
+  url: string
+  legacy_url: string
+}
 
 export interface RelatedContentDTO {
-  exams: ContentItemDTO[]
-  files: ContentItemDTO[]
+  exams: ExamRelatedContentDTO[]
+  files: FileRelatedContentDTO[]
   questions: ContentItemDTO[]
   tests: ContentItemDTO[]
   tutorials: ContentItemDTO[]