diff --git a/frontend/src/components/VContentReport/VContentReportForm.vue b/frontend/src/components/VContentReport/VContentReportForm.vue
index afa97145ff0..3c00e8378cb 100644
--- a/frontend/src/components/VContentReport/VContentReportForm.vue
+++ b/frontend/src/components/VContentReport/VContentReportForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRuntimeConfig } from "#imports"
+import { useNuxtApp, useRuntimeConfig } from "#imports"
 
 import { computed, ref } from "vue"
 
@@ -11,13 +11,12 @@ import {
   OTHER,
   SENT,
   FAILED,
-  WIP,
   DMCA_FORM_URL,
   type ReportReason,
+  type ReportStatus,
 } from "~/constants/content-report"
 
 import type { AudioDetail, ImageDetail } from "~/types/media"
-import { useAnalytics } from "~/composables/use-analytics"
 
 import { mediaSlug } from "~/utils/query-utils"
 
@@ -27,89 +26,86 @@ import VDmcaNotice from "~/components/VContentReport/VDmcaNotice.vue"
 import VReportDescForm from "~/components/VContentReport/VReportDescForm.vue"
 import VLink from "~/components/VLink.vue"
 
-const props = withDefaults(
-  defineProps<{
-    media: AudioDetail | ImageDetail
-    providerName: string
-    closeFn: () => void
-    allowCancel?: boolean
-  }>(),
-  {
-    allowCancel: true,
-  }
-)
+const props = defineProps<{
+  media: AudioDetail | ImageDetail
+  status: ReportStatus
+  allowCancel: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  "update-status": [ReportStatus]
+}>()
 
+const selectedReason = ref<ReportReason>(DMCA)
 const description = ref("")
 
-const status = ref<string | null>(WIP)
+const resetForm = () => {
+  selectedReason.value = DMCA
+  description.value = ""
+}
 
-const selectedReason = ref<ReportReason>(DMCA)
+const reportUrl = computed(() => {
+  const apiUrl = useRuntimeConfig().public.apiUrl
+  return `${apiUrl}v1/${mediaSlug(props.media.frontendMediaType)}/${props.media.id}/report/`
+})
+const dmcaFormUrl = computed(
+  () =>
+    `${DMCA_FORM_URL}?entry.917669540=https://openverse.org/${props.media.frontendMediaType}/${props.media.id}`
+)
 
 /* Buttons */
 const handleCancel = () => {
-  selectedReason.value = DMCA
-  description.value = ""
-  props.closeFn()
+  resetForm()
+  emit("close")
 }
 
 const isSubmitDisabled = computed(
   () => selectedReason.value === OTHER && description.value.length < 20
 )
 
-const { sendCustomEvent } = useAnalytics()
+const { $sendCustomEvent } = useNuxtApp()
 
 const handleDmcaSubmit = () => {
-  sendCustomEvent("REPORT_MEDIA", {
-    id: props.media.id,
-    mediaType: props.media.frontendMediaType,
-    provider: props.media.provider,
-    reason: selectedReason.value,
-  })
-  status.value = SENT
+  updateStatus(SENT)
 }
+
 const handleSubmit = async (event: Event) => {
   event.preventDefault()
-  // Submit report
   try {
-    const mediaType = props.media.frontendMediaType
-    const reason = selectedReason.value
-
-    const {
-      public: { apiUrl },
-    } = useRuntimeConfig()
-
-    await ofetch(
-      `${apiUrl}v1/${mediaSlug(mediaType)}/${props.media.id}/report/`,
-      {
-        method: "POST",
-        body: {
-          mediaType,
-          reason,
-          identifier: props.media.id,
-          description: description.value,
-        },
-      }
-    )
-
-    sendCustomEvent("REPORT_MEDIA", {
-      mediaType,
-      reason,
+    await ofetch(reportUrl.value, {
+      method: "POST",
+      body: {
+        mediaType: props.media.frontendMediaType,
+        reason: selectedReason.value,
+        identifier: props.media.id,
+        description: description.value,
+      },
+    })
+    updateStatus(SENT)
+  } catch (error) {
+    updateStatus(FAILED)
+  }
+}
+
+const updateStatus = (newStatus: ReportStatus) => {
+  if (newStatus === SENT) {
+    $sendCustomEvent("REPORT_MEDIA", {
       id: props.media.id,
+      mediaType: props.media.frontendMediaType,
       provider: props.media.provider,
+      reason: selectedReason.value,
     })
-    status.value = SENT
-  } catch (error) {
-    status.value = FAILED
   }
+  emit("update-status", newStatus)
 }
+
+defineExpose({ resetForm })
 </script>
 
 <template>
   <div id="content-report-form">
     <div v-if="status === SENT">
-      <h2 class="heading-6 mb-4">
-        {{ $t("mediaDetails.contentReport.success.title") }}
-      </h2>
       <i18n-t
         scope="global"
         keypath="mediaDetails.contentReport.success.note"
@@ -120,16 +116,13 @@ const handleSubmit = async (event: Event) => {
           <VLink
             :href="media.foreign_landing_url"
             class="text-link hover:underline"
-            >{{ providerName }}</VLink
+            >{{ media.providerName }}</VLink
           >
         </template>
       </i18n-t>
     </div>
 
     <div v-else-if="status === FAILED">
-      <h2 class="heading-6 mb-4">
-        {{ $t("mediaDetails.contentReport.failure.title") }}
-      </h2>
       <p class="text-sm">
         {{ $t("mediaDetails.contentReport.failure.note") }}
       </p>
@@ -137,11 +130,7 @@ const handleSubmit = async (event: Event) => {
 
     <!-- Main form -->
     <div v-else>
-      <div class="heading-6 mb-4">
-        {{ $t("mediaDetails.contentReport.long") }}
-      </div>
-
-      <p class="mb-4 text-sm">
+      <p class="mb-4 text-sm leading-normal">
         {{
           $t("mediaDetails.contentReport.form.disclaimer", {
             openverse: "Openverse",
@@ -149,8 +138,8 @@ const handleSubmit = async (event: Event) => {
         }}
       </p>
 
-      <form class="text-sm" @submit="handleSubmit">
-        <fieldset class="flex flex-col">
+      <form class="flex flex-col gap-y-4 text-sm" @submit="handleSubmit">
+        <fieldset class="flex flex-col gap-y-4">
           <legend class="label-bold mb-4">
             {{ $t("mediaDetails.contentReport.form.question") }}
           </legend>
@@ -159,7 +148,6 @@ const handleSubmit = async (event: Event) => {
             :id="reason"
             :key="reason"
             v-model="selectedReason"
-            class="mb-4"
             name="reason"
             :value="reason"
           >
@@ -167,15 +155,15 @@ const handleSubmit = async (event: Event) => {
           </VRadio>
         </fieldset>
 
-        <div class="mb-4 min-h-[7rem]">
+        <div class="leading-normal">
           <VDmcaNotice
-            v-if="media.foreign_landing_url && selectedReason === DMCA"
-            :provider="providerName"
+            v-if="selectedReason === DMCA"
+            :provider="media.providerName"
             :foreign-landing-url="media.foreign_landing_url"
             @click="handleDmcaSubmit"
           />
           <VReportDescForm
-            v-if="selectedReason !== DMCA"
+            v-else
             key="other"
             v-model:content="description"
             :reason="selectedReason"
@@ -204,8 +192,9 @@ const handleSubmit = async (event: Event) => {
             has-icon-end
             show-external-icon
             :external-icon-size="6"
-            :href="DMCA_FORM_URL"
+            :href="dmcaFormUrl"
             :send-external-link-click-event="false"
+            target="_blank"
             @click="handleDmcaSubmit"
           >
             {{ $t("mediaDetails.contentReport.form.dmca.open") }}
diff --git a/frontend/src/components/VContentReport/VContentReportModal.vue b/frontend/src/components/VContentReport/VContentReportModal.vue
new file mode 100644
index 00000000000..e23846cad8f
--- /dev/null
+++ b/frontend/src/components/VContentReport/VContentReportModal.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from "vue"
+
+import { WIP } from "~/constants/content-report"
+import { useContentReport } from "~/composables/use-content-report"
+import type { AudioDetail, ImageDetail } from "~/types/media"
+
+import VContentReportButton from "~/components/VContentReport/VContentReportButton.vue"
+import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
+import VModal from "~/components/VModal/VModal.vue"
+
+defineProps<{
+  /**
+   * The media item to report. This can either be an audio track or an image.
+   */
+  media: AudioDetail | ImageDetail
+}>()
+
+const modalRef = ref<InstanceType<typeof VModal> | null>(null)
+const contentReportFormRef = ref<InstanceType<
+  typeof VContentReportForm
+> | null>(null)
+
+const { status, updateStatus, title } = useContentReport()
+
+const resetForm = () => {
+  contentReportFormRef.value?.resetForm()
+  updateStatus(WIP)
+}
+
+const close = () => {
+  resetForm()
+  modalRef.value?.close()
+}
+</script>
+
+<template>
+  <VModal
+    ref="modalRef"
+    :label="$t('mediaDetails.contentReport.long')"
+    :hide-on-click-outside="true"
+    variant="centered"
+    @close="resetForm"
+  >
+    <template #trigger="{ a11yProps }">
+      <VContentReportButton v-bind="a11yProps" />
+    </template>
+    <template #title>
+      <h2 class="heading-6" tabindex="-1">{{ title }}</h2>
+    </template>
+    <template #default>
+      <VContentReportForm
+        ref="contentReportFormRef"
+        class="p-7 pt-0 sm:p-9"
+        :media="media"
+        :status="status"
+        :allow-cancel="true"
+        @update-status="updateStatus"
+        @close="close"
+      >
+      </VContentReportForm>
+    </template>
+  </VModal>
+</template>
diff --git a/frontend/src/components/VContentReport/VContentReportPopover.vue b/frontend/src/components/VContentReport/VContentReportPopover.vue
deleted file mode 100644
index 4fe32d18dfa..00000000000
--- a/frontend/src/components/VContentReport/VContentReportPopover.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
-
-import type { AudioDetail, ImageDetail } from "~/types/media"
-
-import VContentReportButton from "~/components/VContentReport/VContentReportButton.vue"
-import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
-import VPopover from "~/components/VPopover/VPopover.vue"
-import VIconButton from "~/components/VIconButton/VIconButton.vue"
-
-export default defineComponent({
-  name: "VContentReportPopover",
-  components: {
-    VIconButton,
-    VContentReportButton,
-    VContentReportForm,
-    VPopover,
-  },
-  props: {
-    /**
-     * the media item to report; This can either be an audio track or an image.
-     */
-    media: {
-      type: Object as PropType<AudioDetail | ImageDetail>,
-      required: true,
-    },
-  },
-})
-</script>
-
-<template>
-  <VPopover
-    ref="popoverEl"
-    :hide-on-click-outside="false"
-    :label="$t('mediaDetails.contentReport.long')"
-    placement="bottom-end"
-  >
-    <template #trigger="{ a11yProps }">
-      <VContentReportButton v-bind="a11yProps" />
-    </template>
-    <template #default="{ close }">
-      <div class="grid w-80 items-stretch justify-stretch">
-        <VIconButton
-          :label="$t('modal.close')"
-          :icon-props="{ name: 'close' }"
-          variant="transparent-gray"
-          size="small"
-          class="z-10 col-start-1 row-start-1 me-1 mt-1 self-start justify-self-end"
-          @click="close"
-        />
-        <VContentReportForm
-          class="col-start-1 row-start-1 p-6"
-          :close-fn="close"
-          :media="media"
-          :provider-name="media.providerName || media.provider"
-        />
-      </div>
-    </template>
-  </VPopover>
-</template>
diff --git a/frontend/src/components/VContentReport/VDmcaNotice.vue b/frontend/src/components/VContentReport/VDmcaNotice.vue
index 6f44105cd96..9e4046630b3 100644
--- a/frontend/src/components/VContentReport/VDmcaNotice.vue
+++ b/frontend/src/components/VContentReport/VDmcaNotice.vue
@@ -39,7 +39,7 @@ export default defineComponent({
 <template>
   <i18n-t
     scope="global"
-    class="dmca-notice"
+    class="dmca-notice leading-normal"
     keypath="mediaDetails.contentReport.form.dmca.note"
     tag="p"
   >
diff --git a/frontend/src/components/VContentReport/VReportDescForm.vue b/frontend/src/components/VContentReport/VReportDescForm.vue
index c8150edbd51..ab6b1df495c 100644
--- a/frontend/src/components/VContentReport/VReportDescForm.vue
+++ b/frontend/src/components/VContentReport/VReportDescForm.vue
@@ -46,7 +46,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <label class="other-form block" for="description">
+  <label class="other-form min-h-[7rem]" for="description">
     <span class="flex flex-row items-center justify-between">
       <span>{{ $t("mediaDetails.contentReport.form.other.note") }}</span>
       <span>{{
diff --git a/frontend/src/components/VContentReport/meta/VContentReportPopover.stories.js b/frontend/src/components/VContentReport/meta/VContentReportModal.stories.js
similarity index 55%
rename from frontend/src/components/VContentReport/meta/VContentReportPopover.stories.js
rename to frontend/src/components/VContentReport/meta/VContentReportModal.stories.js
index c168dbf5613..580ee3cd276 100644
--- a/frontend/src/components/VContentReport/meta/VContentReportPopover.stories.js
+++ b/frontend/src/components/VContentReport/meta/VContentReportModal.stories.js
@@ -1,16 +1,16 @@
-import VContentReportPopover from "~/components/VContentReport/VContentReportPopover.vue"
+import VContentReportModal from "~/components/VContentReport/VContentReportModal.vue"
 
 const Template = (args) => ({
-  template: `<VContentReportPopover v-bind="args" class="float-right"/>`,
-  components: { VContentReportPopover },
+  template: `<VContentReportModal :media="args.media" class="float-right"/>`,
+  components: { VContentReportModal },
   setup() {
     return { args }
   },
 })
 
 export default {
-  title: "Components/VContentReportPopover",
-  component: VContentReportPopover,
+  title: "Components/VContentReportModal",
+  component: VContentReportModal,
 }
 
 export const Default = {
diff --git a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
index d0511cb7e5f..5af757d9003 100644
--- a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
+++ b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useNuxtApp } from "#imports"
+
 import { computed, ref } from "vue"
 
 import { storeToRefs } from "pinia"
@@ -7,14 +9,12 @@ import { useUiStore } from "~/stores/ui"
 import { useSearchStore } from "~/stores/search"
 import { useMediaStore } from "~/stores/media"
 
-import { useAnalytics } from "~/composables/use-analytics"
 import { useExternalSources } from "~/composables/use-external-sources"
 
 import VExternalSourceList from "~/components/VExternalSearch/VExternalSourceList.vue"
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VModal from "~/components/VModal/VModal.vue"
-import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 withDefaults(
   defineProps<{
@@ -32,13 +32,13 @@ const sectionRef = ref<HTMLElement | null>(null)
 const searchStore = useSearchStore()
 const uiStore = useUiStore()
 
-const { sendCustomEvent } = useAnalytics()
+const { $sendCustomEvent } = useNuxtApp()
 
 const mediaStore = useMediaStore()
 const { currentPage } = storeToRefs(mediaStore)
 
 const handleModalOpen = () => {
-  sendCustomEvent("VIEW_EXTERNAL_SOURCES", {
+  $sendCustomEvent("VIEW_EXTERNAL_SOURCES", {
     searchType: searchStore.searchType,
     query: searchStore.searchTerm,
     resultPage: currentPage.value || 1,
@@ -95,23 +95,15 @@ const isMd = computed(() => uiStore.isBreakpoint("md"))
           />
         </VButton>
       </template>
-      <template #top-bar="{ close }">
-        <header
-          class="flex items-center justify-between pe-5 ps-7 pt-5 sm:pe-7 sm:ps-9 sm:pt-7"
-        >
-          <h2 class="heading-6" tabindex="-1">
-            {{ $t("externalSources.title") }}
-          </h2>
-          <VIconButton
-            size="small"
-            :icon-props="{ name: 'close' }"
-            variant="transparent-gray"
-            :label="$t('modal.close')"
-            @click="close"
-          />
-        </header>
+      <template #title>
+        <h2 class="heading-6" tabindex="-1">
+          {{ $t("externalSources.title") }}
+        </h2>
       </template>
-      <VExternalSourceList class="flex flex-col" :search-term="searchTerm" />
+      <VExternalSourceList
+        class="-mt-3 flex flex-col"
+        :search-term="searchTerm"
+      />
     </VModal>
   </section>
 </template>
diff --git a/frontend/src/components/VExternalSearch/VExternalSourceList.vue b/frontend/src/components/VExternalSearch/VExternalSourceList.vue
index b22380e6853..0cea1d916fa 100644
--- a/frontend/src/components/VExternalSearch/VExternalSourceList.vue
+++ b/frontend/src/components/VExternalSearch/VExternalSourceList.vue
@@ -34,7 +34,7 @@ const handleClick = (sourceName: string) => {
     class="p-4 pt-0 sm:max-w-[25rem] sm:p-6 sm:pt-0"
     data-testid="source-list-popover"
   >
-    <p class="label-regular px-3 py-4 text-start !leading-normal">
+    <p class="label-regular px-3 pb-4 text-start !leading-normal">
       {{ $t("externalSources.caption", { openverse: "Openverse" }) }}
     </p>
     <VButton
diff --git a/frontend/src/components/VMediaInfo/VMediaDetails.vue b/frontend/src/components/VMediaInfo/VMediaDetails.vue
index ff1b454e53c..81ba9a2e4b8 100644
--- a/frontend/src/components/VMediaInfo/VMediaDetails.vue
+++ b/frontend/src/components/VMediaInfo/VMediaDetails.vue
@@ -8,7 +8,7 @@ import { IMAGE } from "~/constants/media"
 
 import { getMediaMetadata } from "~/utils/metadata"
 
-import VContentReportPopover from "~/components/VContentReport/VContentReportPopover.vue"
+import VContentReportModal from "~/components/VContentReport/VContentReportModal.vue"
 import VMetadata from "~/components/VMediaInfo/VMetadata.vue"
 import VMediaTags from "~/components/VMediaInfo/VMediaTags.vue"
 
@@ -38,7 +38,7 @@ const metadata = computed<null | Metadata[]>(() => {
       <h2 class="heading-6 md:heading-5">
         {{ $t(`mediaDetails.${media.frontendMediaType}Info`) }}
       </h2>
-      <VContentReportPopover :media="media" />
+      <VContentReportModal :media="media" />
     </header>
     <div class="flex flex-col items-start gap-6 md:flex-row">
       <slot name="thumbnail" />
diff --git a/frontend/src/components/VModal/VModal.vue b/frontend/src/components/VModal/VModal.vue
index f0f478d6b48..7df5d073ba5 100644
--- a/frontend/src/components/VModal/VModal.vue
+++ b/frontend/src/components/VModal/VModal.vue
@@ -170,6 +170,7 @@ defineExpose({
       <template #top-bar="{ close: hide }">
         <slot name="top-bar" :close="hide" />
       </template>
+      <template #title><slot name="title" /></template>
       <slot name="default" />
     </VModalContent>
   </div>
diff --git a/frontend/src/components/VModal/VModalContent.vue b/frontend/src/components/VModal/VModalContent.vue
index 2522f461f01..2a4abb6ccfa 100644
--- a/frontend/src/components/VModal/VModalContent.vue
+++ b/frontend/src/components/VModal/VModalContent.vue
@@ -100,7 +100,7 @@ defineExpose({
       class="backdrop h-dyn-screen min-h-dyn-screen fixed inset-0 z-40 flex justify-center overflow-y-auto"
       :class="[
         { 'flex-col items-center': variant === 'centered' },
-        variant === 'mobile-input' ? 'bg-tx' : 'bg-modal-layer',
+        variant === 'mobile-input' ? 'bg-tx' : 'bg-modal-layer bg-opacity-75',
         contentClasses,
         variant,
       ]"
@@ -121,7 +121,7 @@ defineExpose({
               variant === 'two-thirds',
             'mt-auto w-full rounded-se-lg rounded-ss-lg bg-overlay':
               variant === 'fit-content',
-            'm-6 rounded sm:m-0': variant === 'centered',
+            'm-6 max-w-90 rounded sm:m-0': variant === 'centered',
           },
         ]"
         role="dialog"
@@ -149,6 +149,21 @@ defineExpose({
             />
           </div>
         </slot>
+        <header
+          v-if="variant === 'centered'"
+          class="flex items-center justify-between p-5 ps-7 sm:p-7 sm:ps-9"
+        >
+          <slot name="title" />
+          <slot name="close-button">
+            <VIconButton
+              :label="$t('modal.close')"
+              :icon-props="{ name: 'close' }"
+              variant="transparent-gray"
+              size="small"
+              @click="handleClose"
+            />
+          </slot>
+        </header>
 
         <div
           class="modal-content flex w-full flex-grow flex-col"
diff --git a/frontend/src/composables/use-content-report.ts b/frontend/src/composables/use-content-report.ts
new file mode 100644
index 00000000000..37d8c9b6be7
--- /dev/null
+++ b/frontend/src/composables/use-content-report.ts
@@ -0,0 +1,29 @@
+import { useI18n } from "#imports"
+
+import { computed, ref } from "vue"
+
+import { type ReportStatus, SENT, WIP } from "~/constants/content-report"
+
+export const useContentReport = () => {
+  const status = ref<ReportStatus>(WIP)
+
+  const updateStatus = (newStatus: ReportStatus) => {
+    status.value = newStatus
+  }
+
+  const { t } = useI18n({ useScope: "global" })
+
+  const title = computed(() => {
+    return status.value === WIP
+      ? t("mediaDetails.contentReport.long")
+      : status.value === SENT
+        ? t("mediaDetails.contentReport.success.title")
+        : t("mediaDetails.contentReport.failure.title")
+  })
+
+  return {
+    status,
+    updateStatus,
+    title,
+  }
+}
diff --git a/frontend/src/composables/use-dialog-content.ts b/frontend/src/composables/use-dialog-content.ts
index 355f1592e3b..49a2cc01fbf 100644
--- a/frontend/src/composables/use-dialog-content.ts
+++ b/frontend/src/composables/use-dialog-content.ts
@@ -7,21 +7,13 @@ import { useFocusOnBlur } from "~/composables/use-focus-on-blur"
 
 import { warn } from "~/utils/console"
 
+import type { DialogElements, DialogOptions } from "~/types/modal"
+
 import type { Ref, SetupContext } from "vue"
 
 type Props = {
-  dialogElements: {
-    dialogRef: Ref<HTMLElement | null>
-    initialFocusElementRef: Ref<HTMLElement | null>
-    triggerElementRef: Ref<HTMLElement | null>
-  }
-  dialogOptions?: {
-    autoFocusOnShowRef?: Ref<boolean>
-    autoFocusOnHideRef?: Ref<boolean>
-    hideOnClickOutsideRef?: Ref<boolean>
-    hideOnEscRef?: Ref<boolean>
-    trapFocusRef?: Ref<boolean>
-  }
+  dialogElements: DialogElements
+  dialogOptions?: Partial<DialogOptions>
   visibleRef: Ref<boolean>
   hideRef: Ref<() => void>
   emit: SetupContext["emit"]
diff --git a/frontend/src/pages/image/[id]/report.vue b/frontend/src/pages/image/[id]/report.vue
index 420d40860cd..3d50700791c 100644
--- a/frontend/src/pages/image/[id]/report.vue
+++ b/frontend/src/pages/image/[id]/report.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { definePageMeta, useAsyncData, useI18n, useRoute } from "#imports"
+import { defineNuxtRouteMiddleware, definePageMeta, useI18n } from "#imports"
 
-import { ref } from "vue"
+import { computed } from "vue"
 
 import { IMAGE } from "~/constants/media"
 import { skipToContentTargetId } from "~/constants/window"
 
+import { useContentReport } from "~/composables/use-content-report"
 import { useSingleResultStore } from "~/stores/media/single-result"
+
 import { getAttribution } from "~/utils/attribution-html"
 import { firstParam } from "~/utils/query-utils"
-import type { ImageDetail } from "~/types/media"
 
 import VButton from "~/components/VButton.vue"
 import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
@@ -20,29 +21,25 @@ defineOptions({
 
 definePageMeta({
   layout: "content-layout",
+  middleware: defineNuxtRouteMiddleware(async (to) => {
+    const imageId = firstParam(to.params?.id)
+    const singleResultStore = useSingleResultStore()
+    await singleResultStore.fetch(IMAGE, imageId)
+  }),
 })
 
 const i18n = useI18n({ useScope: "global" })
-const route = useRoute()
 const singleResultStore = useSingleResultStore()
 
-const image = ref<ImageDetail>()
-const attributionMarkup = ref<string>()
-
-await useAsyncData("image-report", async () => {
-  const imageId = firstParam(route?.params.id)
-  if (imageId) {
-    image.value = (await singleResultStore.fetch(IMAGE, imageId)) ?? undefined
-    if (image.value) {
-      attributionMarkup.value = getAttribution(image.value, i18n, {
+const image = computed(() => singleResultStore.image)
+const attributionMarkup = computed(() =>
+  image.value
+    ? getAttribution(image.value, i18n, {
         includeIcons: false,
       })
-    }
-  } else {
-    // TODO: Handle Error
-    console.warn("Not found image")
-  }
-})
+    : ""
+)
+const { status, updateStatus, title } = useContentReport()
 </script>
 
 <template>
@@ -78,12 +75,15 @@ await useAsyncData("image-report", async () => {
       </VButton>
     </figure>
 
-    <VContentReportForm
-      v-if="image"
-      :close-fn="() => {}"
-      :media="image"
-      :allow-cancel="false"
-      :provider-name="image.providerName || image.provider"
-    />
+    <div>
+      <h2 class="heading-6 mb-4">{{ title }}</h2>
+      <VContentReportForm
+        v-if="image"
+        :media="image"
+        :allow-cancel="false"
+        :status="status"
+        @update-status="updateStatus"
+      />
+    </div>
   </main>
 </template>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index e1ca20d06b4..bac0136c937 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -216,6 +216,7 @@ export default {
       16: "4.00rem",
       18: "4.50rem",
       20: "5.00rem",
+      22: "5.50rem",
       24: "6.00rem",
       26: "6.50rem",
       30: "7.50rem",
@@ -225,6 +226,7 @@ export default {
       66: "16.25rem",
       70: "17.50rem",
       80: "20.00rem",
+      90: "25.00rem",
       120: "30.00rem",
     },
     ringWidth: {
diff --git a/frontend/test/playwright/e2e/report-media.spec.ts b/frontend/test/playwright/e2e/report-media.spec.ts
index 5139cdd0acc..fc8d217f840 100644
--- a/frontend/test/playwright/e2e/report-media.spec.ts
+++ b/frontend/test/playwright/e2e/report-media.spec.ts
@@ -58,11 +58,13 @@ const submitDmcaReport = async (page: Page, context: BrowserContext) => {
   })
   await page.click('text="Infringes copyright"')
 
+  const popupPromise = page.waitForEvent("popup")
   await page.click('text="Open form"')
-  await page.waitForURL(/forms/)
+  const form = await popupPromise
+  const formUrl: string = await form.evaluate("location.href")
 
   // Return the beginning of the url, without parameters
-  return page.url().split("/forms/")[0] + "/forms/"
+  return formUrl.split("/forms/")[0] + "/forms/"
 }
 
 // todo: Test a sensitive report with the optional description field
diff --git a/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-md-linux.png b/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-md-linux.png
index 7a50a910bd5..dc2deacb192 100644
Binary files a/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-md-linux.png and b/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-md-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/filters.spec.ts b/frontend/test/playwright/visual-regression/components/filters.spec.ts
index db1d2fd5875..7cded3c1964 100644
--- a/frontend/test/playwright/visual-regression/components/filters.spec.ts
+++ b/frontend/test/playwright/visual-regression/components/filters.spec.ts
@@ -37,10 +37,12 @@ for (const dir of languageDirections) {
       })
 
       test(`filters modal 1 filter selected - ${dir}`, async ({ page }) => {
-        await page.locator('input[type="checkbox"]').first().check()
+        const firstFilter = page.getByRole("checkbox").first()
+        await firstFilter.check()
 
         const snapshotName = `${getFiltersName(breakpoint)}-checked-${dir}`
 
+        await firstFilter.hover()
         await expectSnapshot(
           snapshotName,
           isDesktop ? page.locator(".sidebar") : page,
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/ltr-full-page-report-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/ltr-full-page-report-sm-linux.png
index 6353836d393..38c09ae9d17 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/ltr-full-page-report-sm-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/ltr-full-page-report-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/ltr-full-page-report-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/ltr-full-page-report-xl-linux.png
index 2527a3e2d32..41b7bd8ea9c 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/ltr-full-page-report-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/ltr-full-page-report-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/rtl-full-page-report-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/rtl-full-page-report-sm-linux.png
index d2b15bbb941..de4b43413ed 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/rtl-full-page-report-sm-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/rtl-full-page-report-sm-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/rtl-full-page-report-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/rtl-full-page-report-xl-linux.png
index 825d1a9634f..d9eda35e965 100644
Binary files a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/rtl-full-page-report-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/rtl-full-page-report-xl-linux.png differ