diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index 065f6a62864..a85226ede0f 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -1,5 +1,4 @@
 {
-  "auto": "Automatic",
   "3DFormat": "3D format",
   "NoMediaSourcesAvailable": "No media sources available",
   "actor": "Actor",
@@ -25,6 +24,7 @@
   "aspectRatio": "Aspect ratio",
   "audio": "Audio",
   "audioCodecNotSupported": "The audio codec is not supported",
+  "auto": "Automatic",
   "badRequest": "Bad request. Try again",
   "books": "Books",
   "browserNotSupported": "Your browser is not supported for playing this file.",
@@ -34,17 +34,24 @@
   "byArtist": "By {artist}",
   "cancel": "Cancel",
   "castAndCrew": "Cast & crew",
+  "clipboardFail": "Failed to copy to clipboard",
+  "clipboardSuccess": "Copied to clipboard",
+  "close": "Close",
   "collectionEmpty": "This collection is empty",
   "collections": "Collections",
   "communityRating": "Community rating",
   "confirm": "Confirm",
   "connect": "Connect",
+  "contentType": "Content type",
   "continueListening": "Continue listening",
   "continueWatching": "Continue watching",
   "criticRating": "Critic rating",
   "customRating": "Custom rating",
   "darkModeToggle": "Toggle dark mode",
   "dateAdded": "Date added",
+  "delete": "Delete",
+  "deleteItem": "Delete media",
+  "deleteItemDescription": "Deleting this item will delete it from both the file system and your media library. Are you sure you wish to continue?",
   "details": "Details",
   "dialog": {
     "upNext": {
@@ -58,6 +65,11 @@
   "disabled": "Disabled",
   "discNumber": "Disc {discNumber}",
   "dislikes": "Dislikes",
+  "download": {
+    "copyStreamUrl": "Copy Stream URL",
+    "download": "Download",
+    "downloadAll": "Download all"
+  },
   "edit": "Edit",
   "editMetadata": "Edit metadata",
   "editPerson": "Edit person",
@@ -79,6 +91,8 @@
   },
   "failedRetrievingDisplayPreferences": "Unable to get display preferences. Using last known settings.",
   "failedSettingDisplayPreferences": "Unable to update display preferences.",
+  "failedToDeleteItem": "Failed to delete item",
+  "failedToGetDownloadUrl": "Failed to get URL for selected Item",
   "failedToRefreshItems": "Failed to refresh items",
   "favorite": "Favorite",
   "features": "Features",
@@ -98,6 +112,12 @@
       "recentlyAdded": "Recently added"
     }
   },
+  "identify": {
+    "applyError": "Failed to apply selected search result",
+    "instructResult": "You can click on one of these cards to apply the result",
+    "searchError": "Failed to search to remote providers",
+    "title": "Identify"
+  },
   "imageType": {
     "art": "Art",
     "backdrop": "Backdrop",
@@ -196,24 +216,79 @@
       "name": "Audio channels:"
     },
     "audioCodec": {
-      "name": "Audio codec:"
-    },
-    "bitrate": {
-      "name": "Bitrate:"
-    },
-    "container": {
-      "name": "Container:"
+      "channels": "Channels:",
+      "layout": "Layout:",
+      "name": "Audio codec:",
+      "sampleRate": "Sample rate:",
+      "titles": "Audio | Audio {0}"
+    },
+    "embeddedImageCodec": {
+      "name": "Image codec:",
+      "titles": "Image | Image {0}"
+    },
+    "generic": {
+      "bitrate": "Bitrate:",
+      "codec": "Codec:",
+      "codecTag": "Codec tag:",
+      "container": "Container:",
+      "default": "Default:",
+      "external": "External:",
+      "forced": "Forced:",
+      "language": "Language:",
+      "path": "Path:",
+      "profile": "Profile:",
+      "size": "Size:",
+      "title": "Title:"
     },
     "name": "Media",
     "subtitleCodec": {
-      "name": "Subtitle codec:"
+      "name": "Subtitle codec:",
+      "titles": "Subtitle | Subtitle {0}"
     },
+    "title": "Media Info",
     "videoCodec": {
-      "name": "Video codec:"
+      "DoVi": {
+        "blPresent": "DV bl preset flag:",
+        "blSignalCompatibilityId": "DV bl signal compatibility ID:",
+        "elPresent": "DV el preset flag:",
+        "level": "DV level:",
+        "majorVersion": "DV version major:",
+        "minorVersion": "DV version minor:",
+        "profile": "DV profile:",
+        "rpuPresent": "DV rpu preset flag:",
+        "title": "DV title:"
+      },
+      "aspectRatio": "Aspect ratio:",
+      "bitdepth": "Bit depth:",
+      "colorPrimaries": "Color primaries:",
+      "colorRange": "Color range:",
+      "colorSpace": "Color space:",
+      "colorTransfer": "Color transfer:",
+      "frameRate": "Framerate:",
+      "isAnamorphic": "Anamorphic:",
+      "isAvc": "AVC:",
+      "isInterlaced": "Interlaced:",
+      "level": "Level:",
+      "name": "Video codec:",
+      "pixelFormat": "Pixel format:",
+      "refFrames": "Ref frames:",
+      "resolution": "Resolution:",
+      "titles": "Video | Video {0}",
+      "videoRange": "Video range:",
+      "videoRangeType": "Video range type:"
     }
   },
   "menu": "Menu",
   "metadata": {
+    "refresh": {
+      "all": "Replace all metadata",
+      "methodHint": "Metadata is refreshed based on settings and internet services that are enabled in the Dashboard.",
+      "missing": "Search for missing metadata",
+      "replaceImage": "Replace existing images",
+      "scan": "Scan for new and updated files",
+      "success": "Metadata refresh enqueued",
+      "title": "Refresh metadata"
+    },
     "source": "Source",
     "sourceAll": "All",
     "title": "Title",
@@ -247,6 +322,7 @@
   "playback": {
     "addToQueue": "Add to queue",
     "clearQueue": "Clear queue and stop playback",
+    "instantMix": "Instant mix",
     "playAll": "Play all",
     "playNext": "Play next",
     "playbackSource": {
@@ -303,6 +379,7 @@
   "quality": "Quality",
   "queue": "Queue",
   "rating": "Rating",
+  "refresh": "Refresh",
   "refreshLibrary": "Refresh library",
   "releaseDate": "Release date",
   "remoteDevices": "Remote devices",
@@ -313,6 +390,8 @@
   "saved": "Saved",
   "search": {
     "name": "Search",
+    "noResults": "No results found",
+    "results": "Results",
     "topResults": "Top results"
   },
   "seasonEpisode": "Season {seasonNumber}, Episode {episodeNumber}",
@@ -335,9 +414,9 @@
       "refreshKeysFailure": "Error refreshing API keys",
       "revoke": "Revoke",
       "revokeAll": "Revoke all API keys",
-      "revokeConfirm": "Confirm API key revocation",
       "revokeAllFailure": "Error revoking all API keys",
       "revokeAllSuccess": "Successfully revoked all API keys",
+      "revokeConfirm": "Confirm API key revocation",
       "revokeFailure": "Error revoking API key",
       "revokeSuccess": "Successfully revoked API key"
     },
@@ -346,9 +425,9 @@
       "appVersion": "App version",
       "delete": "Delete",
       "deleteAll": "Delete all",
-      "deleteConfirm": "Confirm device deletion",
       "deleteAllDevicesError": "Error deleting all devices",
       "deleteAllDevicesSuccess": "All devices deleted successfully",
+      "deleteConfirm": "Confirm device deletion",
       "deleteDeviceError": "Error deleting device",
       "deleteDeviceSuccess": "Device deleted successfully",
       "deviceName": "Device name",
@@ -442,6 +521,8 @@
   "signIn": "Sign in",
   "snackbar": {
     "addedToQueue": "Added to queue",
+    "instantMixFailed": "Failed to add Instant mix to queue",
+    "instantMixQueued": "Instant mix added to queue",
     "playNext": "The selected item will be played after the current one",
     "routeValidationError": "The specified routeId in route params is not correct"
   },
@@ -463,9 +544,9 @@
   "themeVideo": "Theme Video",
   "tooltips": {
     "changeLanguage": "Language",
+    "switchToAuto": "Follow system theme",
     "switchToDarkMode": "Switch to dark mode",
-    "switchToLightMode": "Switch to light mode",
-    "switchToAuto": "Follow system theme"
+    "switchToLightMode": "Switch to light mode"
   },
   "trailer": "Trailer",
   "transcodingInfo": {
diff --git a/frontend/package.json b/frontend/package.json
index 3eb31f85071..ea6f0465294 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -98,4 +98,4 @@
     "npm": ">=8.19.2",
     "yarn": "Yarn is not supported. Please use NPM."
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/Item/ConfirmDialog.vue b/frontend/src/components/Item/ConfirmDialog.vue
new file mode 100644
index 00000000000..8d650bd36df
--- /dev/null
+++ b/frontend/src/components/Item/ConfirmDialog.vue
@@ -0,0 +1,86 @@
+<template>
+  <v-dialog
+    class="confirm-dialog"
+    content-class="confirm-dialog"
+    :model-value="dialog"
+    :fullscreen="$vuetify.display.mobile"
+    @update:model-value="close">
+    <v-card height="100%" class="d-flex width-90">
+      <v-card-title class="text-center font-weight-light mt-4">
+        {{ title }}
+      </v-card-title>
+      <v-card-subtitle v-if="subtitle" class="pb-3 text-center">
+        {{ subtitle }}
+      </v-card-subtitle>
+
+      <v-divider />
+
+      <v-card-text class="text-center font-weight-normal px-4">
+        {{ text }}
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="d-flex flex-row align-center justify-center mb-4">
+        <v-btn variant="flat" width="8em" color="secondary" @click="close">
+          {{ t('cancel') }}
+        </v-btn>
+
+        <v-btn
+          variant="flat"
+          width="8em"
+          :color="confirmColor ?? 'error'"
+          @click="closeAndConfirm">
+          {{ confirmText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+defineProps<{
+  dialog: boolean;
+  title: string;
+  text: string;
+  confirmText: string;
+  subtitle?: string;
+  confirmColor?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:dialog', isOpen: boolean): void;
+  (e: 'onConfirm'): void;
+}>();
+
+const { t } = useI18n();
+
+/**
+ * Close the dialog
+ */
+function close(): void {
+  emit('update:dialog', false);
+}
+
+/**
+ * Close the dialog and send confirmation event
+ */
+function closeAndConfirm(): void {
+  close();
+  emit('onConfirm');
+}
+</script>
+
+<style lang="scss" scoped>
+.confirm-dialog {
+  max-width: 100vw;
+}
+
+@media screen and (min-width: 600px) {
+  .confirm-dialog {
+    max-width: 70vw;
+  }
+}
+</style>
diff --git a/frontend/src/components/Item/Identify/IdentifyDialog.vue b/frontend/src/components/Item/Identify/IdentifyDialog.vue
new file mode 100644
index 00000000000..f343f1926ca
--- /dev/null
+++ b/frontend/src/components/Item/Identify/IdentifyDialog.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-dialog
+    content-class="identify-dialog"
+    :model-value="dialog"
+    :fullscreen="$vuetify.display.mobile"
+    @update:model-value="close">
+    <identify-tab
+      :item-id="itemId"
+      :media-source-index="mediaSourceIndex"
+      @close="close" />
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+defineProps<{ dialog: boolean; itemId: string; mediaSourceIndex?: number }>();
+
+const emit = defineEmits<{
+  (e: 'update:dialog', isOpen: boolean): void;
+}>();
+
+/**
+ * Close the dialog
+ */
+function close(): void {
+  emit('update:dialog', false);
+}
+</script>
+
+<style lang="scss" scoped>
+.identify-dialog {
+  height: 60vh;
+}
+</style>
diff --git a/frontend/src/components/Item/Identify/IdentifyResult.vue b/frontend/src/components/Item/Identify/IdentifyResult.vue
new file mode 100644
index 00000000000..80d31da0697
--- /dev/null
+++ b/frontend/src/components/Item/Identify/IdentifyResult.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-card
+    class="identify-result-block"
+    variant="outlined"
+    @click="$emit('select', item)">
+    <poster-block :url="item.ImageUrl ?? undefined" :item-type="itemType" />
+    <div class="text-center text-subtitle-1 font-weight-bold mt-2 mx-2">
+      {{ item.Name }}
+    </div>
+    <div
+      class="text-center text-body-2 mt-1 mx-2"
+      :class="{
+        'mb-2': typeof item.ProductionYear !== 'number'
+      }">
+      {{ item.SearchProviderName }}
+    </div>
+    <div v-if="item.ProductionYear" class="text-center text-body-2 mb-2 mx-2">
+      {{ item.ProductionYear }}
+    </div>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { RemoteSearchResult } from '@jellyfin/sdk/lib/generated-client';
+
+defineProps<{
+  item: RemoteSearchResult;
+  itemType?: string;
+}>();
+
+defineEmits<{
+  (e: 'select', item: RemoteSearchResult): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.identify-result-block {
+  display: inline-block;
+  vertical-align: top;
+  justify-items: center;
+
+  $xSpace: 1rem;
+  margin-right: $xSpace;
+  margin-left: $xSpace;
+  margin-bottom: 1rem;
+
+  cursor: pointer;
+
+  /* 2/3 ratio */
+  max-width: 220px;
+}
+</style>
diff --git a/frontend/src/components/Item/Identify/IdentifyTab.vue b/frontend/src/components/Item/Identify/IdentifyTab.vue
new file mode 100644
index 00000000000..47cd45ee6ba
--- /dev/null
+++ b/frontend/src/components/Item/Identify/IdentifyTab.vue
@@ -0,0 +1,334 @@
+<template>
+  <v-card
+    v-if="externalInfos && searchData && item"
+    height="100%"
+    class="d-flex flex-column identify-tab">
+    <v-card-title>{{ $t('identify.title') }}</v-card-title>
+    <v-card-subtitle class="pb-3">
+      {{ itemPath }}
+    </v-card-subtitle>
+
+    <v-divider />
+
+    <v-card-text
+      class="pa-0 flex-grow-1"
+      :class="{
+        'd-flex': !$vuetify.display.mobile,
+        'flex-row': !$vuetify.display.mobile
+      }">
+      <v-tabs
+        v-model="tabName"
+        :direction="$vuetify.display.mobile ? 'horizontal' : 'vertical'">
+        <v-tab value="searchMenu">{{ $t('search.name') }}</v-tab>
+        <v-tab :disabled="isSearching || firstTime" value="resultsMenu">
+          {{ $t('search.results') }}
+        </v-tab>
+      </v-tabs>
+      <v-window v-model="tabName" class="pa-2 flex-fill">
+        <v-window-item value="searchMenu">
+          <v-col>
+            <v-text-field
+              v-for="(data, idx) in searchData"
+              :key="data.key"
+              v-model="searchData[idx].value"
+              variant="outlined"
+              class="mb-2"
+              :disabled="isSearching"
+              :type="data.type"
+              :label="data.title" />
+          </v-col>
+        </v-window-item>
+        <v-window-item value="resultsMenu">
+          <h3>Results</h3>
+          <div class="mt-2 text-subtitle-1">
+            {{ $t('identify.instructResult') }}
+          </div>
+          <v-checkbox
+            v-if="searchResults"
+            v-model="replaceImage"
+            class="d-flex mt-2"
+            color="primary">
+            <template #append>
+              {{ $t('metadata.refresh.replaceImage') }}
+            </template>
+          </v-checkbox>
+          <v-divider />
+          <div
+            class="d-flex flex-row flex-wrap mt-4"
+            :class="{
+              'justify-center': $vuetify.display.mobile
+            }">
+            <identify-result
+              v-for="(result, idx) in searchResults"
+              :key="idx"
+              :item="result"
+              :item-type="item.Type"
+              @select="applySelectedSearch" />
+          </div>
+          <h3
+            v-if="Array.isArray(searchResults) && searchResults.length === 0"
+            class="text-center my-4">
+            {{ $t('search.noResults') }}
+          </h3>
+        </v-window-item>
+      </v-window>
+    </v-card-text>
+
+    <v-divider />
+    <v-card-actions
+      class="d-flex align-center pa-3"
+      :class="{
+        'justify-end': !$vuetify.display.mobile,
+        'justify-center': $vuetify.display.mobile
+      }">
+      <v-btn
+        variant="flat"
+        width="8em"
+        color="secondary"
+        class="mr-1"
+        :disabled="isSearching || isSaving"
+        @click="emit('close')">
+        {{ t('cancel') }}
+      </v-btn>
+      <v-btn
+        v-if="tabName === 'searchMenu'"
+        variant="flat"
+        width="8em"
+        color="primary"
+        :loading="isSearching || isSaving"
+        @click="searchInformation">
+        {{ t('search.name') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import {
+  BaseItemDto,
+  ExternalIdInfo,
+  RemoteSearchResult
+} from '@jellyfin/sdk/lib/generated-client';
+import { getItemLookupApi } from '@jellyfin/sdk/lib/utils/api/item-lookup-api';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
+import { useRemote, useSnackbar } from '@/composables';
+import {
+  IdentifySearchItem,
+  getItemIdFromSourceIndex,
+  getItemRemoteSearch
+} from '@/utils/items';
+
+const props = defineProps<{
+  itemId: string;
+  mediaSourceIndex?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const { t } = useI18n();
+const remote = useRemote();
+const tabName = ref<string>('searchMenu');
+// Block user from going to Results tab when no search has been done
+const firstTime = ref(true);
+const isSearching = ref(false);
+const isSaving = ref(false);
+
+type PrefilledSearch = {
+  key: string;
+  value: string;
+};
+
+const item = ref<BaseItemDto>();
+const externalInfos = ref<ExternalIdInfo[]>();
+const searchData = ref<IdentifySearchItem[]>();
+const searchResults = ref<RemoteSearchResult[]>();
+const replaceImage = ref(false);
+
+const itemPath = computed(() => {
+  if (!item.value) {
+    return '';
+  }
+
+  if (props.mediaSourceIndex !== undefined) {
+    return item.value.MediaSources?.[props.mediaSourceIndex]?.Path ?? '';
+  }
+
+  return item.value.Path ?? '';
+});
+
+/**
+ * Do a search for information on the item.
+ */
+async function searchInformation(): Promise<void> {
+  if (item.value !== undefined && searchData.value !== undefined) {
+    isSearching.value = true;
+    firstTime.value = false;
+
+    try {
+      const results = await getItemRemoteSearch(item.value, searchData.value);
+
+      if (Array.isArray(results)) {
+        searchResults.value = results;
+        tabName.value = 'resultsMenu';
+      } else {
+        useSnackbar(t('identify.searchError'), 'error');
+      }
+    } catch (error) {
+      console.error(error);
+
+      useSnackbar(t('identify.searchError'), 'error');
+    } finally {
+      isSearching.value = false;
+    }
+  }
+}
+
+/**
+ * Apply the selected search result to the item.
+ */
+async function applySelectedSearch(result: RemoteSearchResult): Promise<void> {
+  isSaving.value = true;
+
+  if (!item.value) {
+    return;
+  }
+
+  try {
+    await remote.sdk.newUserApi(getItemLookupApi).applySearchCriteria({
+      itemId: getItemIdFromSourceIndex(item.value, props.mediaSourceIndex),
+      remoteSearchResult: result,
+      replaceAllImages: replaceImage.value
+    });
+  } catch (error) {
+    console.error(error);
+
+    useSnackbar(t('identify.applyError'), 'error');
+  } finally {
+    isSaving.value = false;
+    emit('close');
+    tabName.value = 'searchMenu';
+  }
+}
+
+interface MatchPattern {
+  key: string;
+  pattern: RegExp;
+}
+
+/**
+ * Get a pre-filled search data object.
+ */
+function getFilledSearchData(
+  item: BaseItemDto,
+  externals: ExternalIdInfo[]
+): PrefilledSearch[] {
+  const urls = item.ExternalUrls ?? [];
+
+  if (!urls) {
+    return [];
+  }
+
+  const matcher = externals
+    .map((e) => {
+      if (e.UrlFormatString && e.Key) {
+        const pattern = e.UrlFormatString.replace(
+          /{\d+}/g,
+          '([\\w\\d_\\-+.]+)'
+        );
+
+        return {
+          key: e.Key,
+          pattern: new RegExp(`^${pattern}$`)
+        };
+      }
+    })
+    .filter((e): e is MatchPattern => e !== undefined);
+
+  return urls
+    .map((url) => {
+      if (url.Url) {
+        for (const match of matcher) {
+          const result = match.pattern.exec(url.Url);
+
+          if (result) {
+            const last = result[result.length - 1];
+
+            return {
+              key: match.key,
+              value: last
+            };
+          }
+        }
+      }
+    })
+    .filter((e): e is PrefilledSearch => e !== undefined);
+}
+
+watch(
+  () => props.itemId,
+  async () => {
+    tabName.value = 'searchMenu';
+
+    const itemResult = (
+      await remote.sdk.newUserApi(getUserLibraryApi).getItem({
+        itemId: props.itemId,
+        userId: remote.auth.currentUserId ?? ''
+      })
+    ).data;
+
+    item.value = itemResult;
+
+    const results = (
+      await remote.sdk.newUserApi(getItemLookupApi).getExternalIdInfos({
+        itemId: getItemIdFromSourceIndex(itemResult, props.mediaSourceIndex)
+      })
+    ).data;
+
+    externalInfos.value = results;
+
+    const initSearch: IdentifySearchItem[] = [
+      {
+        key: 'search-item-Name',
+        title: t('name'),
+        type: 'string'
+      }
+    ];
+
+    if (!['BoxSet', 'Person'].includes(itemResult.Type || '')) {
+      initSearch.push({
+        key: 'search-item-Year',
+        title: t('year'),
+        type: 'number'
+      });
+    }
+
+    const prefilledSearch = getFilledSearchData(itemResult, results);
+
+    const webCrawlSearch: IdentifySearchItem[] = results.map((info) => {
+      let title = info.Name ?? '';
+
+      if (info.Type) {
+        title += ` ${info.Type.split(/(?=[A-Z])/).join(' ')}`;
+      }
+
+      const prefillValue = prefilledSearch.find(
+        (e) => e.key === info.Key
+      )?.value;
+
+      return {
+        key: info.Key ?? '',
+        value: prefillValue,
+        title: `${title} ID`,
+        type: 'string'
+      };
+    });
+
+    searchData.value = [...initSearch, ...webCrawlSearch];
+  },
+  { immediate: true }
+);
+</script>
diff --git a/frontend/src/components/Item/Identify/PosterBlock.vue b/frontend/src/components/Item/Identify/PosterBlock.vue
new file mode 100644
index 00000000000..7e546dc2035
--- /dev/null
+++ b/frontend/src/components/Item/Identify/PosterBlock.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="poster-block" title="Poster Image">
+    <div
+      class="img-contain"
+      :class="{
+        'square-m': shape === CardShapes.Square,
+        'portrait-m': shape === CardShapes.Portrait,
+        'thumb-m': shape === CardShapes.Thumb || shape === CardShapes.Banner
+      }">
+      <div
+        class="d-flex justify-center align-center img-poster"
+        :style="{
+          backgroundImage: url ? `url(${url})` : undefined
+        }" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
+import { CardShapes, getShapeFromItemType } from '@/utils/items';
+
+const props = defineProps<{ url?: string; itemType?: string }>();
+
+const shape = computed(() =>
+  getShapeFromItemType((props.itemType as BaseItemKind) ?? undefined)
+);
+</script>
+
+<style lang="scss" scoped>
+$maxW: 220px;
+
+.poster-block {
+  contain: layout style;
+  position: relative;
+
+  > .img-contain {
+    width: 100%;
+    display: block;
+    cursor: pointer;
+
+    > .img-poster {
+      contain: strict;
+      height: 100%;
+      width: 100%;
+      background-position: 50%;
+      background-size: cover;
+      background-clip: content-box;
+      background-repeat: no-repeat;
+      position: relative;
+    }
+  }
+}
+
+.square-m {
+  $ar: 1;
+
+  aspect-ratio: $ar;
+  max-height: calc($maxW / $ar);
+  height: calc($maxW / $ar);
+}
+
+.portrait-m {
+  $ar: calc(2 / 3);
+
+  aspect-ratio: $ar;
+  max-height: calc($maxW / $ar);
+  height: calc($maxW / $ar);
+}
+
+.thumb-m {
+  $ar: calc(16 / 9);
+
+  aspect-ratio: $ar;
+  max-height: calc($maxW / $ar);
+  height: calc($maxW / $ar);
+}
+</style>
diff --git a/frontend/src/components/Item/ItemMenu.vue b/frontend/src/components/Item/ItemMenu.vue
index 21504cd6ea0..c68417431b5 100644
--- a/frontend/src/components/Item/ItemMenu.vue
+++ b/frontend/src/components/Item/ItemMenu.vue
@@ -35,28 +35,72 @@
   <metadata-editor-dialog
     v-if="item.Id"
     v-model:dialog="metadataDialog"
-    :item-id="item.Id" />
+    :item-id="item.Id"
+    :media-source-index="mediaSourceIndex" />
+  <refresh-metadata-dialog
+    v-if="item.Id"
+    v-model:dialog="refreshDialog"
+    :item-id="item.Id"
+    @on-refresh="onRefreshExecuted" />
+  <media-detail-dialog
+    v-if="item.Id"
+    v-model:dialog="mediaInfoDialog"
+    :item-id="item.Id"
+    :media-source-index="mediaSourceIndex" />
+  <identify-dialog
+    v-if="item.Id"
+    v-model:dialog="identifyItemDialog"
+    :item-id="item.Id"
+    :media-source-index="mediaSourceIndex" />
+  <confirm-dialog
+    v-if="item.Id"
+    v-model:dialog="deleteDialog"
+    :title="t('deleteItem')"
+    :subtitle="itemDeletionName"
+    :text="t('deleteItemDescription')"
+    :confirm-text="t('delete')"
+    @on-confirm="onDeleteConfirmed" />
 </template>
 
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import { useEventListener } from '@vueuse/core';
 import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { getItemRefreshApi } from '@jellyfin/sdk/lib/utils/api/item-refresh-api';
 import IMdiPlaySpeed from 'virtual:icons/mdi/play-speed';
 import IMdiArrowExpandUp from 'virtual:icons/mdi/arrow-expand-up';
 import IMdiArrowExpandDown from 'virtual:icons/mdi/arrow-expand-down';
+import IMdiCloudSearch from 'virtual:icons/mdi/cloud-search-outline';
+import IMdiContentCopy from 'virtual:icons/mdi/content-copy';
+import IMdiDelete from 'virtual:icons/mdi/delete';
+import IMdiDisc from 'virtual:icons/mdi/disc';
+import IMdiDownload from 'virtual:icons/mdi/download';
+import IMdiDownloadMultiple from 'virtual:icons/mdi/download-multiple';
 import IMdiPlaylistMinus from 'virtual:icons/mdi/playlist-minus';
 import IMdiPlaylistPlus from 'virtual:icons/mdi/playlist-plus';
 import IMdiPencilOutline from 'virtual:icons/mdi/pencil-outline';
+import IMdiInformation from 'virtual:icons/mdi/information';
 import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import IMdiReplay from 'virtual:icons/mdi/replay';
 import IMdiRefresh from 'virtual:icons/mdi/refresh';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { useRemote, useSnackbar } from '@/composables';
-import { canResume } from '@/utils/items';
-import { TaskType } from '@/store/taskManager';
+import {
+  canIdentify,
+  canInstantMix,
+  canResume,
+  getItemSeriesDownloadObjects,
+  getItemSeasonDownloadObjects,
+  getItemDownloadObject,
+  isLocalItem,
+  getItemIdFromSourceIndex
+} from '@/utils/items';
 import { playbackManagerStore, taskManagerStore } from '@/store';
+import { TaskType } from '@/store/taskManager';
+import { isEdgeUWP, isTv, isXbox, isPs4 } from '@/utils/browser-detection';
+import downloadFiles, { DownloadableFile } from '@/utils/file-download';
+import { writeToClipboard } from '@/utils/clipboard';
 
 type MenuOption = {
   title: string;
@@ -67,6 +111,7 @@ type MenuOption = {
 
 const { t } = useI18n();
 const remote = useRemote();
+const router = useRouter();
 
 const menuProps = withDefaults(
   defineProps<{
@@ -75,12 +120,14 @@ const menuProps = withDefaults(
     zIndex?: number;
     rightClick?: boolean;
     queue?: boolean;
+    mediaSourceIndex?: number;
   }>(),
   {
     outlined: false,
     zIndex: 1000,
     rightClick: true,
-    queue: false
+    queue: false,
+    mediaSourceIndex: undefined
   }
 );
 
@@ -88,13 +135,35 @@ const parent = getCurrentInstance()?.parent;
 const show = ref(false);
 const positionX = ref<number | undefined>(undefined);
 const positionY = ref<number | undefined>(undefined);
+const mediaInfoDialog = ref(false);
 const metadataDialog = ref(false);
+const refreshDialog = ref(false);
+const deleteDialog = ref(false);
+const identifyItemDialog = ref(false);
 const playbackManager = playbackManagerStore();
 const taskManager = taskManagerStore();
 const isItemRefreshing = computed(
   () => taskManager.getTask(menuProps.item.Id || '') !== undefined
 );
 
+const itemDeletionName = computed(() => {
+  const parentName = menuProps.item.Name ?? undefined;
+  const mediaSource =
+    menuProps.item.MediaSources?.[menuProps.mediaSourceIndex ?? -1];
+
+  if (mediaSource?.Name) {
+    let name = mediaSource.Name;
+
+    if (parentName) {
+      name = `${parentName} - ${name}`;
+    }
+
+    return name;
+  }
+
+  return parentName;
+});
+
 const playNextAction = {
   title: t('playback.playNext'),
   icon: IMdiPlaySpeed,
@@ -203,46 +272,176 @@ function getPlaybackOptions(): MenuOption[] {
     });
   }
 
+  if (canInstantMix(menuProps.item) && playbackManager.currentItem) {
+    playbackOptions.push({
+      title: t('playback.instantMix'),
+      icon: IMdiDisc,
+      action: async (): Promise<void> => {
+        if (menuProps.item.Id) {
+          try {
+            await playbackManager.instantMixFromItem(menuProps.item.Id);
+            useSnackbar(t('snackbar.instantMixQueued'), 'success');
+          } catch {
+            useSnackbar(t('snackbar.instantMixFailed'), 'error');
+          }
+        }
+      }
+    });
+  }
+
   return playbackOptions;
 }
 
+/**
+ * Check if the browser can download the item
+ */
+function browserCanDownload(): boolean {
+  return (
+    !isEdgeUWP() &&
+    !isTv() &&
+    !isXbox() &&
+    !isPs4() &&
+    menuProps.item.Type !== 'Book'
+  );
+}
+
+/**
+ * Download action for the currently selected item
+ */
+async function downloadAction(): Promise<void> {
+  if (menuProps.item.Id && menuProps.item.Type && menuProps.item.Path) {
+    let downloadURLs: DownloadableFile[] = [];
+
+    switch (menuProps.item.Type) {
+      case 'Season': {
+        downloadURLs = await getItemSeasonDownloadObjects(menuProps.item.Id);
+        break;
+      }
+      case 'Series': {
+        downloadURLs = await getItemSeriesDownloadObjects(menuProps.item.Id);
+        break;
+      }
+      default: {
+        const url = getItemDownloadObject(
+          getItemIdFromSourceIndex(menuProps.item, menuProps.mediaSourceIndex),
+          menuProps.item.Path
+        );
+
+        if (url) {
+          downloadURLs = [url];
+        }
+
+        break;
+      }
+    }
+
+    if (downloadURLs) {
+      await downloadFiles(downloadURLs);
+    } else {
+      useSnackbar(t('failedToGetDownloadUrl'), 'error');
+    }
+  }
+}
+
+/**
+ * Copy action for the current selected item
+ */
+function getCopyDownloadActions(): MenuOption[] {
+  const copyDownloadActions: MenuOption[] = [];
+
+  if (menuProps.item.CanDownload) {
+    copyDownloadActions.push({
+      title: t('download.copyStreamUrl'),
+      icon: IMdiContentCopy,
+      action: async (): Promise<void> => {
+        if (menuProps.item.Id) {
+          const downloadHref = getItemDownloadObject(
+            getItemIdFromSourceIndex(menuProps.item, menuProps.mediaSourceIndex)
+          );
+
+          if (downloadHref) {
+            await copy(downloadHref.url);
+          } else {
+            useSnackbar(t('failedToGetDownloadUrl'), 'error');
+          }
+        }
+      }
+    });
+
+    if (browserCanDownload()) {
+      copyDownloadActions.push({
+        title: t('download.download'),
+        icon: IMdiDownload,
+        action: downloadAction
+      });
+
+      if (['Season', 'Series'].includes(menuProps.item.Type || '')) {
+        copyDownloadActions.push({
+          title: t('download.downloadAll'),
+          icon: IMdiDownloadMultiple,
+          action: downloadAction
+        });
+      }
+    }
+  }
+
+  return copyDownloadActions;
+}
+
+/**
+ * Check if the item and user can refresh the library/metadata.
+ */
+function canRefreshLibrary(): boolean {
+  const invalidRefreshType = ['Timer', 'SeriesTimer', 'Program', 'TvChannel'];
+
+  if (menuProps.item.CollectionType === 'livetv') {
+    return false;
+  }
+
+  const incompleteRecording =
+    menuProps.item.Type === 'Recording' &&
+    menuProps.item.Status !== 'Completed';
+
+  const IsAdministrator =
+    remote.auth.currentUser?.Policy?.IsAdministrator ?? false;
+
+  return (
+    IsAdministrator &&
+    !isLocalItem(menuProps.item) &&
+    !incompleteRecording &&
+    !invalidRefreshType.includes(menuProps.item.Type || '')
+  );
+}
+
 /**
  * Library options for libraries
  */
 function getLibraryOptions(): MenuOption[] {
   const libraryOptions: MenuOption[] = [];
 
-  if (
-    remote.auth.currentUser?.Policy?.IsAdministrator &&
-    ['Folder', 'CollectionFolder', 'UserView'].includes(
+  if (menuProps.item.MediaSources) {
+    libraryOptions.push({
+      title: t('mediaInfo.title'),
+      icon: IMdiInformation,
+      action: (): void => {
+        mediaInfoDialog.value = true;
+      }
+    });
+  }
+
+  if (canRefreshLibrary()) {
+    const isLibrary = ['Folder', 'CollectionFolder', 'UserView'].includes(
       menuProps.item.Type || ''
-    )
-  ) {
+    );
+
+    // XXX: Maybe just merge it together?
+    const title = isLibrary ? t('refreshLibrary') : t('metadata.refresh.title');
+
     libraryOptions.push({
-      title: t('refreshLibrary'),
+      title: title,
       icon: IMdiRefresh,
       action: async (): Promise<void> => {
-        if (remote.sdk.api && menuProps.item.Id) {
-          try {
-            await getItemRefreshApi(remote.sdk.api).refreshItem({
-              itemId: menuProps.item.Id,
-              replaceAllImages: false,
-              replaceAllMetadata: false
-            });
-
-            useSnackbar(t('libraryRefreshQueued'), 'normal');
-            taskManager.startTask({
-              type: TaskType.LibraryRefresh,
-              id: menuProps.item.Id || '',
-              data: menuProps.item.Name || '',
-              progress: 0
-            });
-          } catch (error) {
-            console.error(error);
-
-            useSnackbar(t('unableToRefreshLibrary'), 'error');
-          }
-        }
+        refreshDialog.value = true;
       },
       disabled: isItemRefreshing.value
     });
@@ -256,13 +455,38 @@ function getLibraryOptions(): MenuOption[] {
         metadataDialog.value = true;
       }
     });
+
+    if (canIdentify(menuProps.item)) {
+      libraryOptions.push({
+        title: t('identify.title'),
+        icon: IMdiCloudSearch,
+        action: (): void => {
+          identifyItemDialog.value = true;
+        }
+      });
+    }
+  }
+
+  if (menuProps.item.CanDelete) {
+    libraryOptions.push({
+      title: t('deleteItem'),
+      icon: IMdiDelete,
+      action: (): void => {
+        deleteDialog.value = true;
+      }
+    });
   }
 
   return libraryOptions;
 }
 
 const options = computed(() => {
-  return [getQueueOptions(), getPlaybackOptions(), getLibraryOptions()];
+  return [
+    getQueueOptions(),
+    getPlaybackOptions(),
+    getCopyDownloadActions(),
+    getLibraryOptions()
+  ];
 });
 
 /**
@@ -284,6 +508,59 @@ function onActivatorClick(): void {
   positionY.value = undefined;
 }
 
+/**
+ * Handle when the refresh task is executed
+ */
+function onRefreshExecuted(): void {
+  const isLibrary = ['Folder', 'CollectionFolder', 'UserView'].includes(
+    menuProps.item.Type || ''
+  );
+
+  if (isLibrary) {
+    taskManager.startTask({
+      type: TaskType.LibraryRefresh,
+      id: menuProps.item.Id || '',
+      data: menuProps.item.Name || 'ID ' + menuProps.item.Id,
+      progress: 0
+    });
+  }
+}
+
+/**
+ * Handle deletion of the item
+ */
+async function onDeleteConfirmed(): Promise<void> {
+  if (!menuProps.item.Id) {
+    useSnackbar(t('failedToDeleteItem'), 'error');
+
+    return;
+  }
+
+  const itemId = getItemIdFromSourceIndex(
+    menuProps.item,
+    menuProps.mediaSourceIndex
+  );
+
+  try {
+    await remote.sdk.newUserApi(getLibraryApi).deleteItem({
+      itemId: itemId
+    });
+    router.replace('/');
+  } catch {
+    // failure
+    useSnackbar(t('failedToDeleteItem'), 'error');
+  }
+}
+
+const copy = async (text: string): Promise<void> => {
+  try {
+    await writeToClipboard(text);
+    useSnackbar(t('clipboardSuccess'), 'success');
+  } catch {
+    useSnackbar(t('clipboardFail'), 'error');
+  }
+};
+
 onMounted(() => {
   const parentHtml = parent?.subTree.el;
 
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetail.vue b/frontend/src/components/Item/MediaDetail/MediaDetail.vue
new file mode 100644
index 00000000000..0d6f6dd5f67
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetail.vue
@@ -0,0 +1,100 @@
+<template>
+  <v-card v-if="itemId" height="100%" class="d-flex flex-column media-detail">
+    <v-card-title>{{ t('mediaInfo.title') }}</v-card-title>
+
+    <v-divider />
+
+    <v-card-text
+      v-if="mediaSource.length > 0"
+      class="d-flex flex-column flex-grow-1">
+      <div
+        v-for="(media, idx) in mediaSource"
+        :key="'mediaInfo' + media.Id!!"
+        class="ps-4">
+        <media-detail-content
+          v-if="
+            mediaSourceIndex !== undefined ? mediaSourceIndex === idx : true
+          "
+          :media="media"
+          :parent-name="parentName" />
+        <v-divider v-if="idx < mediaSource.length - 1" class="mt-4 mb-2" />
+      </div>
+    </v-card-text>
+    <v-card-text
+      v-else-if="mediaSource.length === 0 && !isLoading"
+      class="pa-0 flex-grow-1"
+      :class="{
+        'd-flex': !$vuetify.display.mobile,
+        'flex-row': !$vuetify.display.mobile
+      }">
+      <h2 class="no-media">
+        {{ t('NoMediaSourcesAvailable') }}
+      </h2>
+    </v-card-text>
+
+    <v-card-actions
+      class="d-flex align-center pa-3"
+      :class="{
+        'justify-end': !$vuetify.display.mobile,
+        'justify-center': $vuetify.display.mobile
+      }">
+      <v-btn variant="flat" width="8em" color="secondary" @click="emit('hide')">
+        {{ t('close') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { MediaSourceInfo } from '@jellyfin/sdk/lib/generated-client';
+import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
+import { useI18n } from 'vue-i18n';
+import { useRemote } from '@/composables';
+
+const props = defineProps<{
+  itemId: string;
+  mediaSourceIndex?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'hide'): void;
+}>();
+
+const { t } = useI18n();
+const remote = useRemote();
+
+const isLoading = ref(true);
+const parentName = ref<string>();
+const mediaSource = ref<MediaSourceInfo[]>([]);
+
+/**
+ * Fetches the item data from the server
+ */
+async function getData(): Promise<void> {
+  const itemInfo = (
+    await remote.sdk.newUserApi(getUserLibraryApi).getItem({
+      userId: remote.auth.currentUserId ?? '',
+      itemId: props.itemId
+    })
+  ).data;
+
+  mediaSource.value = itemInfo.MediaSources || [];
+
+  if (mediaSource.value.length > 1) {
+    parentName.value = itemInfo.Name ?? undefined;
+  }
+
+  isLoading.value = false;
+}
+
+watch(() => props.itemId, getData, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+.no-media {
+  display: block;
+  margin-left: 1rem;
+  margin-top: 1rem;
+}
+</style>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
new file mode 100644
index 00000000000..5228e036d0f
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="d-flex flex-row">
+    <span class="mdinfo-label">{{ label }}</span>
+    <span class="mdinfo-value">{{ value ?? 'Unknown' }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  value: string | number | null;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.mdinfo-label {
+  display: inline-block;
+  margin-right: 1rem;
+  font-weight: 600;
+}
+.mdinfo-value {
+  display: inline-block;
+  font-weight: 400;
+}
+</style>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailColorSpace.vue b/frontend/src/components/Item/MediaDetail/MediaDetailColorSpace.vue
new file mode 100644
index 00000000000..c2678e04ec1
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailColorSpace.vue
@@ -0,0 +1,31 @@
+<template>
+  <media-detail-attr
+    v-if="stream.ColorSpace"
+    :label="t('mediaInfo.videoCodec.colorSpace')"
+    :value="stream.ColorSpace" />
+  <media-detail-attr
+    v-if="stream.ColorTransfer"
+    :label="t('mediaInfo.videoCodec.colorTransfer')"
+    :value="stream.ColorTransfer" />
+  <media-detail-attr
+    v-if="stream.ColorPrimaries"
+    :label="t('mediaInfo.videoCodec.colorPrimaries')"
+    :value="stream.ColorPrimaries" />
+  <media-detail-attr
+    v-if="stream.ColorRange"
+    :label="t('mediaInfo.videoCodec.colorRange')"
+    :value="stream.ColorRange" />
+  <media-detail-attr
+    v-if="stream.PixelFormat"
+    :label="t('mediaInfo.videoCodec.pixelFormat')"
+    :value="stream.PixelFormat" />
+</template>
+
+<script setup lang="ts">
+import { MediaStream } from '@jellyfin/sdk/lib/generated-client';
+import { useI18n } from 'vue-i18n';
+
+defineProps<{ stream: MediaStream }>();
+
+const { t } = useI18n();
+</script>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue b/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue
new file mode 100644
index 00000000000..066315279f4
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue
@@ -0,0 +1,391 @@
+<template>
+  <div>
+    <h2 v-if="media.Name" class="d-block my-2">
+      <span class="mr-1">{{ displayName }}</span>
+      <media-detail-copy :text="completeMediainfo" />
+    </h2>
+  </div>
+  <div class="d-flex flex-column mt-2">
+    <media-detail-attr
+      v-if="media.Container"
+      :label="t('mediaInfo.generic.container')"
+      :value="media.Container" />
+    <media-detail-attr
+      v-if="media.Path"
+      :label="t('mediaInfo.generic.path')"
+      :value="media.Path" />
+    <media-detail-attr
+      v-if="media.Size"
+      :label="t('mediaInfo.generic.size')"
+      :value="formatFileSize(media.Size)" />
+    <media-detail-attr
+      v-if="media.Bitrate"
+      :label="t('mediaInfo.generic.bitrate')"
+      :value="(media.Bitrate / 1000).toFixed(2) + ' kbps'" />
+  </div>
+
+  <div class="d-flex flex-row flex-wrap mt-5">
+    <div
+      v-for="(stream, idx) in videoStreams"
+      :key="'mdinfo-video-' + stream.Index ?? idx"
+      class="stream-info">
+      <h3 v-if="media.Name" class="d-block my-2">
+        <span class="mr-1">
+          {{ t('mediaInfo.videoCodec.titles', [idx + 1], videoStreams.length) }}
+        </span>
+        <media-detail-copy
+          :text="
+            makeCopyableStreamInfo(stream, idx + 1, videoStreams.length)
+          " />
+      </h3>
+      <media-detail-generic :stream="stream" />
+      <media-detail-attr
+        :label="t('mediaInfo.videoCodec.isAvc')"
+        :value="formatYesOrNo(stream.IsAVC)" />
+      <media-detail-attr
+        v-if="stream.Profile"
+        :label="t('mediaInfo.generic.profile')"
+        :value="stream.Profile" />
+      <media-detail-attr
+        v-if="stream.Level"
+        :label="t('mediaInfo.videoCodec.level')"
+        :value="stream.Level" />
+      <media-detail-attr
+        v-if="stream.Width || stream.Height"
+        :label="t('mediaInfo.videoCodec.resolution')"
+        :value="`${stream.Width}x${stream.Height}`" />
+      <media-detail-attr
+        v-if="stream.AspectRatio"
+        :label="t('mediaInfo.videoCodec.aspectRatio')"
+        :value="stream.AspectRatio" />
+      <media-detail-attr
+        v-if="typeof stream.IsAnamorphic === 'boolean'"
+        :label="t('mediaInfo.videoCodec.isAnamorphic')"
+        :value="formatYesOrNo(stream.IsAnamorphic)" />
+      <media-detail-attr
+        v-if="stream.IsInterlaced"
+        :label="t('mediaInfo.videoCodec.isInterlaced')"
+        :value="formatYesOrNo(stream.IsInterlaced)" />
+      <media-detail-attr
+        v-if="stream.AverageFrameRate || stream.RealFrameRate"
+        :label="t('mediaInfo.videoCodec.frameRate')"
+        :value="`${(stream.AverageFrameRate || stream.RealFrameRate)?.toFixed(
+          3
+        )} fps`" />
+      <media-detail-attr
+        v-if="stream.BitRate"
+        :label="t('mediaInfo.generic.bitrate')"
+        :value="(stream.BitRate / 1000).toFixed(2) + ' kbps'" />
+      <media-detail-attr
+        v-if="stream.BitDepth"
+        :label="t('mediaInfo.videoCodec.bitdepth')"
+        :value="stream.BitDepth + ' bits'" />
+      <media-detail-attr
+        v-if="stream.VideoRange"
+        :label="t('mediaInfo.videoCodec.videoRange')"
+        :value="stream.VideoRange" />
+      <media-detail-attr
+        v-if="stream.VideoRangeType"
+        :label="t('mediaInfo.videoCodec.videoRangeType')"
+        :value="stream.VideoRangeType" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle"
+        :label="t('mediaInfo.videoCodec.DoVi.title')"
+        :value="stream.VideoDoViTitle" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.DvVersionMajor)"
+        :label="t('mediaInfo.videoCodec.DoVi.majorVersion')"
+        :value="stream.DvVersionMajor" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.DvVersionMinor)"
+        :label="t('mediaInfo.videoCodec.DoVi.minorVersion')"
+        :value="stream.DvVersionMinor" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.DvProfile)"
+        :label="t('mediaInfo.videoCodec.DoVi.profile')"
+        :value="stream.DvProfile" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.DvLevel)"
+        :label="t('mediaInfo.videoCodec.DoVi.level')"
+        :value="stream.DvLevel" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.RpuPresentFlag)"
+        :label="t('mediaInfo.videoCodec.DoVi.rpuPresent')"
+        :value="stream.RpuPresentFlag" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.ElPresentFlag)"
+        :label="t('mediaInfo.videoCodec.DoVi.elPresent')"
+        :value="stream.ElPresentFlag" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.BlPresentFlag)"
+        :label="t('mediaInfo.videoCodec.DoVi.blPresent')"
+        :value="stream.BlPresentFlag" />
+      <media-detail-attr
+        v-if="
+          stream.VideoDoViTitle && isNumber(stream.DvBlSignalCompatibilityId)
+        "
+        :label="t('mediaInfo.videoCodec.DoVi.blSignalCompatibilityId')"
+        :value="stream.DvBlSignalCompatibilityId" />
+      <media-detail-color-space :stream="stream" />
+      <media-detail-attr
+        v-if="stream.NalLengthSize"
+        label="NAL"
+        :value="stream.NalLengthSize" />
+    </div>
+    <div
+      v-for="(stream, idx) in audioStreams"
+      :key="'mdinfo-audio-' + stream.Index ?? idx"
+      class="stream-info">
+      <h3 v-if="media.Name" class="d-block my-2">
+        <span class="mr-1">
+          {{ t('mediaInfo.audioCodec.titles', [idx + 1], audioStreams.length) }}
+        </span>
+        <media-detail-copy
+          :text="
+            makeCopyableStreamInfo(stream, idx + 1, audioStreams.length)
+          " />
+      </h3>
+      <media-detail-generic :stream="stream" />
+      <media-detail-attr
+        v-if="stream.Profile"
+        :label="t('mediaInfo.generic.profile')"
+        :value="stream.Profile" />
+      <media-detail-attr
+        v-if="stream.ChannelLayout"
+        :label="t('mediaInfo.audioCodec.layout')"
+        :value="stream.ChannelLayout" />
+      <media-detail-attr
+        v-if="stream.Channels"
+        :label="t('mediaInfo.audioCodec.channels')"
+        :value="`${stream.Channels} ch`" />
+      <media-detail-attr
+        v-if="stream.BitRate"
+        :label="t('mediaInfo.generic.bitrate')"
+        :value="(stream.BitRate / 1000).toFixed(2) + ' kbps'" />
+      <media-detail-attr
+        v-if="stream.BitRate"
+        :label="t('mediaInfo.audioCodec.sampleRate')"
+        :value="`${stream.SampleRate} Hz`" />
+      <media-detail-extras :stream="stream" />
+    </div>
+    <div
+      v-for="(stream, idx) in subsStreams"
+      :key="'mdinfo-subs-' + stream.Index ?? idx"
+      class="stream-info">
+      <h3 v-if="media.Name" class="d-block my-2">
+        <span class="mr-1">
+          {{
+            t('mediaInfo.subtitleCodec.titles', [idx + 1], subsStreams.length)
+          }}
+        </span>
+        <media-detail-copy
+          :text="makeCopyableStreamInfo(stream, idx + 1, subsStreams.length)" />
+      </h3>
+      <media-detail-generic :stream="stream" />
+      <media-detail-extras :stream="stream" />
+    </div>
+    <div
+      v-for="(stream, idx) in embeddedStreams"
+      :key="'mdinfo-embedImg-' + stream.Index ?? idx"
+      class="stream-info">
+      <h3 v-if="media.Name" class="d-block my-2">
+        <span class="mr-1">
+          {{
+            t(
+              'mediaInfo.embeddedImageCodec.titles',
+              [idx + 1],
+              embeddedStreams.length
+            )
+          }}
+        </span>
+        <media-detail-copy
+          :text="
+            makeCopyableStreamInfo(stream, idx + 1, embeddedStreams.length)
+          " />
+      </h3>
+      <media-detail-generic :stream="stream" />
+      <media-detail-attr
+        v-if="stream.Profile"
+        :label="t('mediaInfo.generic.profile')"
+        :value="stream.Profile" />
+      <media-detail-attr
+        v-if="stream.Width || stream.Height"
+        :label="t('mediaInfo.videoCodec.resolution')"
+        :value="`${stream.Width}x${stream.Height}`" />
+      <media-detail-attr
+        v-if="stream.BitDepth"
+        :label="t('mediaInfo.videoCodec.bitdepth')"
+        :value="stream.BitDepth + ' bits'" />
+      <media-detail-color-space :stream="stream" />
+      <media-detail-attr
+        v-if="stream.RefFrames"
+        :label="t('mediaInfo.videoCodec.refFrames')"
+        :value="stream.RefFrames" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  MediaSourceInfo,
+  MediaStream
+} from '@jellyfin/sdk/lib/generated-client';
+import { useI18n } from 'vue-i18n';
+import { formatFileSize, getMediaStreams } from '@/utils/items';
+import {
+  formatYesOrNo,
+  createVideoInformation,
+  createAudioInformation,
+  createSubsInformation,
+  createContainerInformation,
+  createEmbeddedInformation
+} from '@/utils/mediainfo';
+
+const props = defineProps<{
+  media: MediaSourceInfo;
+  parentName?: string;
+}>();
+
+const { t } = useI18n();
+
+const videoStreams = computed<MediaStream[]>(() =>
+  getMediaStreams(props.media.MediaStreams ?? [], 'Video')
+);
+const audioStreams = computed<MediaStream[]>(() =>
+  getMediaStreams(props.media.MediaStreams ?? [], 'Audio')
+);
+const subsStreams = computed<MediaStream[]>(() =>
+  getMediaStreams(props.media.MediaStreams ?? [], 'Subtitle')
+);
+const embeddedStreams = computed<MediaStream[]>(() =>
+  getMediaStreams(props.media.MediaStreams ?? [], 'EmbeddedImage')
+);
+const displayName = computed(() => {
+  if (props.parentName) {
+    return `${props.parentName} - ${props.media.Name}`;
+  }
+
+  return props.media.Name;
+});
+
+/**
+ * Creates a Media info string from a collection of `MediaStream`.
+ *
+ * @param streams - The collection of `MediaStream` to create the string from.
+ * @param type - The type of the stream.
+ * @param stringfier - The function that creates the string for each stream.
+ */
+function makeMediaStreamInfo(
+  streams: MediaStream[],
+  type: string,
+  stringfier: (stream: MediaStream) => string
+): string {
+  let mergedStream = '';
+
+  for (let idx = 1; idx <= streams.length; idx++) {
+    const stream = streams[idx - 1];
+
+    const title = t(`mediaInfo.${type}.titles`, [idx], streams.length);
+
+    mergedStream += `${title}\n`;
+    mergedStream += stringfier(stream) + '\n';
+  }
+
+  return mergedStream;
+}
+
+const completeMediainfo = computed<string>(() => {
+  let mediaInfo = '';
+  const { media } = props;
+
+  if (displayName.value) {
+    mediaInfo += `${displayName.value}\n`;
+  }
+
+  mediaInfo += createContainerInformation(media);
+
+  if (mediaInfo) {
+    mediaInfo += '\n';
+  }
+
+  mediaInfo += makeMediaStreamInfo(
+    videoStreams.value,
+    'videoCodec',
+    createVideoInformation
+  );
+  mediaInfo += makeMediaStreamInfo(
+    audioStreams.value,
+    'audioCodec',
+    createAudioInformation
+  );
+  mediaInfo += makeMediaStreamInfo(
+    subsStreams.value,
+    'subtitleCodec',
+    createSubsInformation
+  );
+  mediaInfo += makeMediaStreamInfo(
+    embeddedStreams.value,
+    'embeddedImageCodec',
+    createEmbeddedInformation
+  );
+
+  return mediaInfo;
+});
+
+const isNumber = (value: unknown): value is number => {
+  return typeof value === 'number' && !Number.isNaN(value);
+};
+
+/**
+ * Make a copyable stream information data
+ */
+function makeCopyableStreamInfo(
+  stream: MediaStream,
+  streamIndex: number,
+  totalLength: number
+): string {
+  switch (stream.Type) {
+    case 'Video': {
+      return (
+        t('mediaInfo.videoCodec.titles', [streamIndex], totalLength) +
+        '\n' +
+        createVideoInformation(stream)
+      );
+    }
+    case 'Audio': {
+      return (
+        t('mediaInfo.audioCodec.titles', [streamIndex], totalLength) +
+        '\n' +
+        createAudioInformation(stream)
+      );
+    }
+    case 'Subtitle': {
+      return (
+        t('mediaInfo.subtitleCodec.titles', [streamIndex], totalLength) +
+        '\n' +
+        createSubsInformation(stream)
+      );
+    }
+    case 'EmbeddedImage': {
+      return (
+        t('mediaInfo.embeddedImageCodec.titles', [streamIndex], totalLength) +
+        '\n' +
+        createEmbeddedInformation(stream)
+      );
+    }
+    default: {
+      return '';
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.stream-info {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 3rem;
+  margin-top: 0.5rem;
+}
+</style>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailCopy.vue b/frontend/src/components/Item/MediaDetail/MediaDetailCopy.vue
new file mode 100644
index 00000000000..9e6a6976dba
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailCopy.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-btn variant="flat" width="1em" color="secondary" @click="copy">
+    <v-icon><i-mdi-content-copy /></v-icon>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useSnackbar } from '@/composables';
+import { writeToClipboard } from '@/utils/clipboard';
+
+const props = defineProps<{
+  text: string;
+}>();
+
+const { t } = useI18n();
+
+const copy = async (): Promise<void> => {
+  try {
+    await writeToClipboard(props.text);
+    useSnackbar(t('clipboardSuccess'), 'success');
+  } catch {
+    useSnackbar(t('clipboardFail'), 'error');
+  }
+};
+</script>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue b/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
new file mode 100644
index 00000000000..bd263e8fac0
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-dialog
+    content-class="media-detail-dialog"
+    :model-value="dialog"
+    :fullscreen="$vuetify.display.mobile"
+    @update:model-value="close">
+    <media-detail
+      :item-id="itemId"
+      :media-source-index="mediaSourceIndex"
+      @hide="close" />
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+defineProps<{ dialog: boolean; itemId: string; mediaSourceIndex?: number }>();
+
+const emit = defineEmits<{
+  (e: 'update:dialog', isOpen: boolean): void;
+}>();
+
+/**
+ * Close the dialog
+ */
+function close(): void {
+  emit('update:dialog', false);
+}
+</script>
+
+<style lang="scss" scoped>
+.media-detail-dialog {
+  height: 60vh;
+}
+</style>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailExtras.vue b/frontend/src/components/Item/MediaDetail/MediaDetailExtras.vue
new file mode 100644
index 00000000000..db4737a10a1
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailExtras.vue
@@ -0,0 +1,21 @@
+<template>
+  <media-detail-attr
+    :label="t('mediaInfo.generic.default')"
+    :value="formatYesOrNo(stream.IsDefault)" />
+  <media-detail-attr
+    :label="t('mediaInfo.generic.forced')"
+    :value="formatYesOrNo(stream.IsForced)" />
+  <media-detail-attr
+    :label="t('mediaInfo.generic.external')"
+    :value="formatYesOrNo(stream.IsExternal)" />
+</template>
+
+<script setup lang="ts">
+import { MediaStream } from '@jellyfin/sdk/lib/generated-client';
+import { useI18n } from 'vue-i18n';
+import { formatYesOrNo } from '@/utils/mediainfo';
+
+defineProps<{ stream: MediaStream }>();
+
+const { t } = useI18n();
+</script>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailGeneric.vue b/frontend/src/components/Item/MediaDetail/MediaDetailGeneric.vue
new file mode 100644
index 00000000000..4993a8db719
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailGeneric.vue
@@ -0,0 +1,27 @@
+<template>
+  <media-detail-attr
+    v-if="stream.DisplayTitle"
+    :label="t('mediaInfo.generic.title')"
+    :value="stream.DisplayTitle" />
+  <media-detail-attr
+    v-if="stream.Language"
+    :label="t('mediaInfo.generic.language')"
+    :value="stream.Language" />
+  <media-detail-attr
+    v-if="stream.Codec"
+    :label="t('mediaInfo.generic.codec')"
+    :value="stream.Codec.toUpperCase()" />
+  <media-detail-attr
+    v-if="stream.CodecTag"
+    :label="t('mediaInfo.generic.codecTag')"
+    :value="stream.CodecTag" />
+</template>
+
+<script setup lang="ts">
+import { MediaStream } from '@jellyfin/sdk/lib/generated-client';
+import { useI18n } from 'vue-i18n';
+
+defineProps<{ stream: MediaStream }>();
+
+const { t } = useI18n();
+</script>
diff --git a/frontend/src/components/Item/Metadata/MetadataEditor.vue b/frontend/src/components/Item/Metadata/MetadataEditor.vue
index e92eb9e977b..5f78e919892 100644
--- a/frontend/src/components/Item/Metadata/MetadataEditor.vue
+++ b/frontend/src/components/Item/Metadata/MetadataEditor.vue
@@ -26,6 +26,14 @@
       </v-tabs>
       <v-window v-model="tabName" class="pa-2 flex-fill">
         <v-window-item value="general">
+          <v-select
+            v-if="contentOptions.length > 1"
+            v-model="contentOption"
+            :items="contentOptions"
+            :label="t('contentType')"
+            item-title="key"
+            item-value="value"
+            return-object />
           <v-text-field
             v-model="metadata.Name"
             variant="outlined"
@@ -217,8 +225,9 @@ import { getGenresApi } from '@jellyfin/sdk/lib/utils/api/genres-api';
 import { getItemUpdateApi } from '@jellyfin/sdk/lib/utils/api/item-update-api';
 import { format, formatISO } from 'date-fns';
 import { useDateFns, useRemote, useSnackbar } from '@/composables';
+import { getItemIdFromSourceIndex } from '@/utils/items';
 
-const props = defineProps<{ itemId: string }>();
+const props = defineProps<{ itemId: string; mediaSourceIndex?: number }>();
 
 const emit = defineEmits<{
   (e: 'save'): void;
@@ -226,6 +235,11 @@ const emit = defineEmits<{
   (e: 'cancel'): void;
 }>();
 
+interface ContentOption {
+  value: string;
+  key: string;
+}
+
 const { t } = useI18n();
 const remote = useRemote();
 
@@ -236,6 +250,9 @@ const genres = ref<string[]>([]);
 const search = ref('');
 const loading = ref(false);
 const tabName = ref<string>();
+const contentOptions = ref<ContentOption[]>([]);
+const contentOption = ref<ContentOption>();
+const contentType = ref<string>();
 
 const premiereDate = computed(() => {
   if (!metadata.value?.PremiereDate) {
@@ -259,13 +276,49 @@ const dateCreated = computed(() => {
  * Fetch data ancestors for the current item
  */
 async function getData(): Promise<void> {
-  const itemInfo = (
+  let itemInfo = (
     await remote.sdk.newUserApi(getUserLibraryApi).getItem({
       userId: remote.auth.currentUserId ?? '',
       itemId: props.itemId
     })
   ).data;
 
+  const sourceId = getItemIdFromSourceIndex(itemInfo, props.mediaSourceIndex);
+
+  if (sourceId !== props.itemId) {
+    // This is another version of the same item, fetch the actual metadata for this.
+    itemInfo = (
+      await remote.sdk.newUserApi(getUserLibraryApi).getItem({
+        userId: remote.auth.currentUserId ?? '',
+        itemId: sourceId
+      })
+    ).data;
+
+    // Fetch metadata editor info for ContentTypeOptions
+
+    const options = (
+      await remote.sdk.newUserApi(getItemUpdateApi).getMetadataEditorInfo({
+        itemId: sourceId
+      })
+    ).data;
+
+    contentOptions.value =
+      options?.ContentTypeOptions?.map((r) => {
+        if (r.Name) {
+          return {
+            // the option name
+            key: r.Name,
+            // the one that will be sent
+            value: r.Value ?? ''
+          };
+        }
+      }).filter((r): r is ContentOption => r !== undefined) ?? [];
+    contentOption.value =
+      contentOptions.value.find((r) => r.value === options.ContentType) ??
+      contentOptions.value[0];
+    contentType.value = options.ContentType ?? contentOption.value.value;
+  }
+
   metadata.value = itemInfo;
 
   if (!metadata.value?.Id) {
@@ -301,6 +354,26 @@ async function getGenres(parentId: string): Promise<void> {
     ) ?? [];
 }
 
+/**
+ * Save metadata content type for the current item
+ */
+async function saveContentType(): Promise<void> {
+  if (!contentOption.value) {
+    return;
+  }
+
+  if (!metadata.value?.Id) {
+    return;
+  }
+
+  if (contentOption.value.value !== contentType.value) {
+    await remote.sdk.newUserApi(getItemUpdateApi).updateItemContentType({
+      itemId: metadata.value.Id,
+      contentType: contentOption.value.value
+    });
+  }
+}
+
 /**
  * Save metadata for the current item
  */
@@ -360,6 +433,7 @@ async function saveMetadata(): Promise<void> {
       itemId: metadata.value?.Id,
       baseItemDto: item
     });
+    await saveContentType();
     emit('save');
     useSnackbar(t('saved'), 'success');
   } catch (error) {
diff --git a/frontend/src/components/Item/Metadata/MetadataEditorDialog.vue b/frontend/src/components/Item/Metadata/MetadataEditorDialog.vue
index f79c5949fd9..94f45be916f 100644
--- a/frontend/src/components/Item/Metadata/MetadataEditorDialog.vue
+++ b/frontend/src/components/Item/Metadata/MetadataEditorDialog.vue
@@ -4,12 +4,16 @@
     :model-value="dialog"
     :fullscreen="$vuetify.display.mobile"
     @update:model-value="close">
-    <metadata-editor :item-id="itemId" @cancel="close" @save="close" />
+    <metadata-editor
+      :item-id="itemId"
+      :media-source-index="mediaSourceIndex"
+      @cancel="close"
+      @save="close" />
   </v-dialog>
 </template>
 
 <script setup lang="ts">
-defineProps<{ dialog: boolean; itemId: string }>();
+defineProps<{ dialog: boolean; itemId: string; mediaSourceIndex?: number }>();
 
 const emit = defineEmits<{
   (e: 'update:dialog', isOpen: boolean): void;
diff --git a/frontend/src/components/Item/Metadata/RefreshMetadata.vue b/frontend/src/components/Item/Metadata/RefreshMetadata.vue
new file mode 100644
index 00000000000..0538b67fbd0
--- /dev/null
+++ b/frontend/src/components/Item/Metadata/RefreshMetadata.vue
@@ -0,0 +1,150 @@
+<template>
+  <v-card
+    v-if="itemId"
+    height="100%"
+    class="d-flex flex-column refresh-metadata">
+    <v-card-title>{{ t('metadata.refresh.title') }}</v-card-title>
+
+    <v-divider />
+
+    <v-select
+      v-model="refreshMethod"
+      :items="refreshMethods"
+      :hint="t('metadata.refresh.methodHint')"
+      item-title="title"
+      item-value="value"
+      single-line
+      persistent-hint
+      return-object />
+
+    <v-spacer v-if="refreshMethod.value !== 'scan'" />
+
+    <v-checkbox
+      v-if="refreshMethod.value !== 'scan'"
+      v-model="replace"
+      :label="t('metadata.refresh.replaceImage')" />
+
+    <v-divider />
+
+    <v-card-actions
+      class="d-flex align-center pa-3"
+      :class="{
+        'justify-end': !$vuetify.display.mobile,
+        'justify-center': $vuetify.display.mobile
+      }">
+      <v-btn
+        variant="flat"
+        width="8em"
+        color="secondary"
+        class="mr-1"
+        @click="emit('cancel')">
+        {{ t('cancel') }}
+      </v-btn>
+      <v-btn
+        variant="flat"
+        width="8em"
+        color="primary"
+        :loading="loading"
+        @click="refreshMetadata">
+        {{ t('refresh') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getItemRefreshApi } from '@jellyfin/sdk/lib/utils/api/item-refresh-api';
+import { MetadataRefreshMode } from '@jellyfin/sdk/lib/generated-client';
+import { useRemote, useSnackbar } from '@/composables';
+
+const props = defineProps<{
+  itemId: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'refresh'): void;
+  (e: 'cancel'): void;
+}>();
+
+interface RefreshMethod {
+  title: string;
+  value: string;
+}
+
+const { t } = useI18n();
+const remote = useRemote();
+const replace = ref(false);
+const refreshMethod = ref<RefreshMethod>({
+  title: t('metadata.refresh.scan'),
+  value: 'scan'
+});
+const loading = ref(false);
+
+const refreshMethods = computed(() => {
+  return [
+    {
+      title: t('metadata.refresh.scan'),
+      value: 'scan'
+    },
+    {
+      title: t('metadata.refresh.missing'),
+      value: 'missing'
+    },
+    {
+      title: t('metadata.refresh.all'),
+      value: 'all'
+    }
+  ] as RefreshMethod[];
+});
+
+/**
+ * Refresh metadata of the current item
+ */
+async function refreshMetadata(): Promise<void> {
+  let refreshMode: MetadataRefreshMode;
+
+  switch (refreshMethod.value.value) {
+    case 'scan': {
+      refreshMode = 'Default';
+      break;
+    }
+    case 'missing': {
+      refreshMode = 'FullRefresh';
+      break;
+    }
+    case 'all': {
+      refreshMode = 'FullRefresh';
+      break;
+    }
+    default: {
+      refreshMode = 'Default';
+      break;
+    }
+  }
+
+  const replaceMetadata = refreshMethod.value.value === 'all';
+
+  try {
+    loading.value = true;
+
+    await remote.sdk.newUserApi(getItemRefreshApi).refreshItem({
+      itemId: props.itemId,
+      metadataRefreshMode: refreshMode,
+      imageRefreshMode: refreshMode,
+      replaceAllMetadata: replaceMetadata,
+      replaceAllImages: replace.value
+    });
+    emit('refresh');
+
+    useSnackbar(t('metadata.refresh.success'), 'success');
+  } catch (error) {
+    console.error(error);
+
+    useSnackbar(t('unableToRefreshLibrary'), 'error');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
diff --git a/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue b/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue
new file mode 100644
index 00000000000..571305265ed
--- /dev/null
+++ b/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue
@@ -0,0 +1,45 @@
+<template>
+  <v-dialog
+    content-class="refresh-dialog"
+    :model-value="dialog"
+    :fullscreen="$vuetify.display.mobile"
+    @update:model-value="close">
+    <refresh-metadata
+      :item-id="itemId"
+      @cancel="close"
+      @refresh="saveAndEmit" />
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  dialog: boolean;
+  itemId: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:dialog', isOpen: boolean): void;
+  (e: 'on-refresh'): void;
+}>();
+
+/**
+ * Close the dialog
+ */
+function close(): void {
+  emit('update:dialog', false);
+}
+
+/**
+ * Save and close the dialog
+ */
+function saveAndEmit(): void {
+  close();
+  emit('on-refresh');
+}
+</script>
+
+<style lang="scss" scoped>
+.refresh-dialog {
+  height: 60vh;
+}
+</style>
diff --git a/frontend/src/components/Layout/AudioControls.vue b/frontend/src/components/Layout/AudioControls.vue
index 06856d6699d..81eebfffc96 100644
--- a/frontend/src/components/Layout/AudioControls.vue
+++ b/frontend/src/components/Layout/AudioControls.vue
@@ -71,7 +71,10 @@
             <div class="hidden-lg-and-down">
               <volume-slider />
             </div>
-            <item-menu :item="playbackManager.currentItem" :z-index="99999" />
+            <item-menu
+              :item="playbackManager.currentItem"
+              :media-source-index="playbackManager.currentMediaSourceIndex"
+              :z-index="99999" />
             <v-btn icon to="/playback/music">
               <v-icon>
                 <i-mdi-fullscreen />
diff --git a/frontend/src/components/Playback/TrackList.vue b/frontend/src/components/Playback/TrackList.vue
index e3b044eb22c..0619464e21a 100644
--- a/frontend/src/components/Playback/TrackList.vue
+++ b/frontend/src/components/Playback/TrackList.vue
@@ -69,7 +69,7 @@
                     </template>
                   </div>
                   <v-spacer />
-                  <item-menu v-show="isHovering" :item="item" />
+                  <item-menu v-show="isHovering" :item="track" />
                 </div>
               </td>
               <td class="text-center">
@@ -86,7 +86,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { groupBy } from 'lodash-es';
-import { BaseItemDto, SortOrder } from '@jellyfin/sdk/lib/generated-client';
+import {
+  BaseItemDto,
+  ItemFields,
+  SortOrder
+} from '@jellyfin/sdk/lib/generated-client';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getItemDetailsLink } from '@/utils/items';
 import { formatTicks } from '@/utils/time';
@@ -108,7 +112,13 @@ async function fetch(): Promise<void> {
       userId: remote.auth.currentUserId || '',
       parentId: props.item.Id,
       sortBy: ['SortName'],
-      sortOrder: [SortOrder.Ascending]
+      sortOrder: [SortOrder.Ascending],
+      fields: [
+        ItemFields.CanDelete,
+        ItemFields.CanDownload,
+        ItemFields.MediaSources,
+        ItemFields.Path
+      ]
     })
   ).data.Items;
 }
diff --git a/frontend/src/pages/item/_itemId/index.vue b/frontend/src/pages/item/_itemId/index.vue
index a8061da9692..1062ab1f9ec 100644
--- a/frontend/src/pages/item/_itemId/index.vue
+++ b/frontend/src/pages/item/_itemId/index.vue
@@ -37,7 +37,7 @@
               :subtitle-track-index="currentSubtitleTrack" />
             <like-button :item="item" class="mr-2" />
             <mark-played-button :item="item" class="mr-2" />
-            <item-menu :item="item" />
+            <item-menu :item="item" :media-source-index="currentSourceIndex" />
           </v-row>
           <v-col cols="12" md="10">
             <v-row
diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
index 4e921eaa985..db0af02bfdd 100644
--- a/frontend/src/store/playbackManager.ts
+++ b/frontend/src/store/playbackManager.ts
@@ -19,6 +19,7 @@ import {
   MediaStreamType
 } from '@jellyfin/sdk/lib/generated-client';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
+import { getInstantMixApi } from '@jellyfin/sdk/lib/utils/api/instant-mix-api';
 import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
 import { getPlaystateApi } from '@jellyfin/sdk/lib/utils/api/playstate-api';
 import { getMediaInfoApi } from '@jellyfin/sdk/lib/utils/api/media-info-api';
@@ -441,6 +442,10 @@ class PlaybackManagerStore {
     return this._state.currentMediaSource;
   }
 
+  public get currentMediaSourceIndex(): number | undefined {
+    return this._state.currentMediaSourceIndex;
+  }
+
   public get isMuted(): boolean {
     return this._state.isRemotePlayer
       ? this._state.isRemoteMuted
@@ -948,6 +953,24 @@ class PlaybackManagerStore {
     this.isMuted = !this.isMuted;
   };
 
+  public instantMixFromItem = async (itemId: string): Promise<void> => {
+    const items = (
+      await remote.sdk.newUserApi(getInstantMixApi).getInstantMixFromItem({
+        id: itemId,
+        userId: remote.auth.currentUserId,
+        limit: 50
+      })
+    ).data.Items;
+
+    if (!items) {
+      throw new Error('No items found');
+    }
+
+    for (const item of items) {
+      this.addToQueue(item);
+    }
+  };
+
   public getItemPlaybackInfo = async (
     item = this.currentItem,
     mediaSourceIndex = this._state.currentMediaSourceIndex,
diff --git a/frontend/src/store/userLibraries.ts b/frontend/src/store/userLibraries.ts
index 55727506078..088cff291fb 100644
--- a/frontend/src/store/userLibraries.ts
+++ b/frontend/src/store/userLibraries.ts
@@ -148,7 +148,13 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getItemsApi).getResumeItems({
           userId: remote.auth.currentUserId || '',
           limit: 24,
-          fields: [ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.CanDownload,
+            ItemFields.CanDelete,
+            ItemFields.MediaSources,
+            ItemFields.Path
+          ],
           imageTypeLimit: 1,
           enableImageTypes: [
             ImageType.Primary,
@@ -174,7 +180,13 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getItemsApi).getResumeItems({
           userId: remote.auth.currentUserId || '',
           limit: 24,
-          fields: [ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.CanDownload,
+            ItemFields.CanDelete,
+            ItemFields.MediaSources,
+            ItemFields.Path
+          ],
           imageTypeLimit: 1,
           enableImageTypes: [
             ImageType.Primary,
@@ -200,7 +212,13 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getTvShowsApi).getNextUp({
           userId: remote.auth.currentUserId,
           limit: 24,
-          fields: [ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.CanDownload,
+            ItemFields.CanDelete,
+            ItemFields.MediaSources,
+            ItemFields.Path
+          ],
           imageTypeLimit: 1,
           enableImageTypes: [
             ImageType.Primary,
@@ -228,7 +246,13 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getUserLibraryApi).getLatestMedia({
           userId: remote.auth.currentUserId || '',
           limit: 24,
-          fields: [ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.CanDownload,
+            ItemFields.CanDelete,
+            ItemFields.MediaSources,
+            ItemFields.Path
+          ],
           imageTypeLimit: 1,
           enableImageTypes: [
             ImageType.Primary,
@@ -253,7 +277,14 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getUserLibraryApi).getLatestMedia({
           userId: remote.auth.currentUserId || '',
           limit: 10,
-          fields: [ItemFields.Overview, ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.Overview,
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.CanDownload,
+            ItemFields.CanDelete,
+            ItemFields.MediaSources,
+            ItemFields.Path
+          ],
           enableImageTypes: [ImageType.Backdrop, ImageType.Logo],
           imageTypeLimit: 1
         })
diff --git a/frontend/src/utils/browser-detection.ts b/frontend/src/utils/browser-detection.ts
index 0fa8d01e535..6dadcc11263 100644
--- a/frontend/src/utils/browser-detection.ts
+++ b/frontend/src/utils/browser-detection.ts
@@ -28,10 +28,16 @@ export function supportsMediaSource(): boolean {
  * @private
  * @static
  * @param key - Key for which to perform a check.
+ * @param caseSensitive - Whether the check should be case sensitive.
  * @returns Determines if user agent of navigator contains a key
  */
-function userAgentContains(key: string): boolean {
-  const userAgent = navigator.userAgent || '';
+function userAgentContains(key: string, caseSensitive = true): boolean {
+  let userAgent = navigator.userAgent || '';
+
+  if (!caseSensitive) {
+    key = key.toLowerCase();
+    userAgent = userAgent.toLowerCase();
+  }
 
   return userAgent.includes(key);
 }
@@ -57,6 +63,22 @@ export function isEdge(): boolean {
   return userAgentContains('Edg/') || userAgentContains('Edge/');
 }
 
+/**
+ * Check if the current platform is Microsoft Edge UWP.
+ *
+ * @static
+ * @returns Determines if browser is Microsoft Edge UWP.
+ */
+export function isEdgeUWP(): boolean {
+  if (!isEdge()) {
+    return false;
+  }
+
+  return (
+    userAgentContains('msapphost', false) || userAgentContains('webview', false)
+  );
+}
+
 /**
  * Check if the current platform is Chromium based.
  *
@@ -302,3 +324,16 @@ export function isPs4(): boolean {
 export function isXbox(): boolean {
   return userAgentContains('xbox');
 }
+
+/**
+ * Guesses if the platform is running on Tauri
+ *
+ * Refer to: https://github.com/tauri-apps/tauri/discussions/2725
+ * @returns Determines if the platform is running on Tauri
+ */
+export function isTauri(): boolean {
+  return (
+    window &&
+    (window.__TAURI__ !== undefined || window.__TAURI_METADATA__ !== undefined)
+  );
+}
diff --git a/frontend/src/utils/clipboard.ts b/frontend/src/utils/clipboard.ts
new file mode 100644
index 00000000000..ca687ed0de5
--- /dev/null
+++ b/frontend/src/utils/clipboard.ts
@@ -0,0 +1,8 @@
+/**
+ * Write text to the clipboard.
+ *
+ * @param text - The text to write to the clipboard.
+ */
+export async function writeToClipboard(text: string): Promise<void> {
+  await navigator.clipboard.writeText(text);
+}
diff --git a/frontend/src/utils/file-download.ts b/frontend/src/utils/file-download.ts
new file mode 100644
index 00000000000..ca4f44eeea3
--- /dev/null
+++ b/frontend/src/utils/file-download.ts
@@ -0,0 +1,78 @@
+// https://github.com/jellyfin/jellyfin-web/blob/master/src/scripts/multiDownload.js
+
+import { isFirefox } from './browser-detection';
+
+export interface DownloadableFile {
+  // The file URL
+  url: string;
+  // The filename, including the file extension
+  fileName: string;
+}
+
+/**
+ * Check if the url is on the same domain as the current page.
+ *
+ * @param url - The url to check.
+ */
+function sameDomain(url: string): boolean {
+  const a = document.createElement('a');
+
+  a.href = url;
+
+  return (
+    window.location.hostname === a.hostname &&
+    window.location.protocol === a.protocol
+  );
+}
+
+/**
+ * Use html <a> tag to download a file.
+ *
+ * @param file - An object with `url` and `fileName` properties.
+ */
+function downloadBrowser(file: DownloadableFile): void {
+  const a = document.createElement('a');
+
+  a.download = file.fileName;
+  a.href = file.url;
+  // firefox doesn't support `a.click()`...
+  a.dispatchEvent(new MouseEvent('click'));
+}
+
+/**
+ * Download multiple files.
+ *
+ * @param filesToDownload - An array of objects with `url` and `fileName` properties.
+ */
+export default async function downloadFiles(
+  filesToDownload: DownloadableFile | DownloadableFile[]
+): Promise<void> {
+  if (!filesToDownload) {
+    throw new Error('`filesToDownload` required');
+  }
+
+  const files = Array.isArray(filesToDownload)
+    ? filesToDownload
+    : [filesToDownload];
+
+  if (files.length === 0) {
+    throw new Error(
+      '`filesToDownload` must be an array with at least one item'
+    );
+  }
+
+  if (document.createElement('a').download === undefined) {
+    throw new Error('Browser does not support downloading files');
+  }
+
+  let delay = 0;
+
+  for (const file of files) {
+    if (isFirefox() && !sameDomain(file.url)) {
+      // the download init has to be sequential for firefox if the urls are not on the same domain
+      setTimeout(downloadBrowser.bind(undefined, file), 100 * ++delay);
+    } else {
+      downloadBrowser(file);
+    }
+  }
+}
diff --git a/frontend/src/utils/items.ts b/frontend/src/utils/items.ts
index f0a3686eed0..d8a73ce1035 100644
--- a/frontend/src/utils/items.ts
+++ b/frontend/src/utils/items.ts
@@ -5,7 +5,9 @@ import {
   BaseItemDto,
   BaseItemKind,
   BaseItemPerson,
-  MediaStream
+  ItemFields,
+  MediaStream,
+  RemoteSearchResult
 } from '@jellyfin/sdk/lib/generated-client';
 import { useRouter } from 'vue-router';
 import type { RouteNamedMap } from 'vue-router/auto/routes';
@@ -26,6 +28,18 @@ import IMdiBookMusic from 'virtual:icons/mdi/book-music';
 import IMdiFolderMultiple from 'virtual:icons/mdi/folder-multiple';
 import IMdiFilmstrip from 'virtual:icons/mdi/filmstrip';
 import IMdiAlbum from 'virtual:icons/mdi/album';
+import { getItemLookupApi } from '@jellyfin/sdk/lib/utils/api/item-lookup-api';
+import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
+import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
+import { DownloadableFile } from './file-download';
+import { useRemote } from '@/composables';
+
+export interface IdentifySearchItem {
+  key: string;
+  value?: string | number;
+  title: string;
+  type: string;
+}
 
 /**
  * A list of valid collections that should be treated as folders.
@@ -81,6 +95,36 @@ export function isValidMD5(input: string): boolean {
   return /[\dA-Fa-f]{32}/.test(input);
 }
 
+/**
+ * Checks if an item is a local item.
+ *
+ * @param item - The item to be checked.
+ * @returns - A boolean representing whether the item is a local item
+ */
+export function isLocalItem(item: BaseItemDto): boolean {
+  return item?.Id?.indexOf('local') === 0;
+}
+
+/**
+ * Get the item ID either from the item itself or from the MediaSource
+ *
+ * @param item - The item to get the ID from
+ * @param sourceIndex - The index of the MediaSource to get the ID from (optional)
+ * @returns The ID of the item or the MediaSource
+ */
+export function getItemIdFromSourceIndex(
+  item: BaseItemDto,
+  sourceIndex?: number
+): string {
+  if (sourceIndex === undefined) {
+    return item.Id ?? '';
+  }
+
+  const mediaSource = item.MediaSources?.[sourceIndex];
+
+  return (mediaSource ? mediaSource.Id : item.Id) ?? '';
+}
+
 /**
  * Get the Material Design Icon name associated with a type of library
  *
@@ -245,6 +289,105 @@ export function canMarkWatched(item: BaseItemDto): boolean {
 
   return !!(item.MediaType === 'Video' && item.Type !== 'TvChannel');
 }
+
+/**
+ * Determine if an item can be identified.
+ *
+ * @param item - The item to be checked.
+ * @returns Whether the item can be identified or not.
+ */
+export function canIdentify(item: BaseItemDto): boolean {
+  const valid: BaseItemKind[] = [
+    'Book',
+    'BoxSet',
+    'Movie',
+    'MusicAlbum',
+    'MusicArtist',
+    'MusicVideo',
+    'Person',
+    'Series',
+    'Trailer'
+  ];
+
+  return (
+    valid.includes((item.Type as BaseItemKind) || '') && !isLocalItem(item)
+  );
+}
+
+/**
+ * Determine if an item can be instant mixed.
+ *
+ * @param item - The item to be checked.
+ * @returns Whether the item can be instant mixed or not.
+ */
+export function canInstantMix(item: BaseItemDto): boolean {
+  return (
+    ['Audio', 'MusicAlbum', 'MusicArtist', 'MusicGenre'].includes(
+      item.Type || ''
+    ) && !isLocalItem(item)
+  );
+}
+
+/**
+ * Determine if an item can be added to a playlist.
+ *
+ * @param item - The item to be checked.
+ * @returns Whether the item can be added to a playlist or not.
+ */
+export function canBeAddedToPlaylist(item: BaseItemDto): boolean {
+  if (item.CollectionType === 'livetv') {
+    return false;
+  }
+
+  if (item.Type === 'Recording' && item.Status !== 'Completed') {
+    return false;
+  }
+
+  if (item.MediaType === 'Photo') {
+    return false;
+  }
+
+  const validItems = ['Genre', 'MusicGenre', 'MusicArtist'];
+
+  return (
+    !isLocalItem(item) &&
+    (Boolean(item.MediaType) ||
+      (item.IsFolder ?? false) ||
+      validItems.includes(item.Type || ''))
+  );
+}
+
+/**
+ * Determine if an item can be added to a collection.
+ *
+ * @param item - The item to be checked.
+ * @returns Whether the item can be added to a collection or not.
+ */
+export function canBeAddedToCollection(item: BaseItemDto): boolean {
+  const invalidTypes = [
+    'Genre',
+    'MusicGenre',
+    'Studio',
+    'UserView',
+    'CollectionFolder',
+    'Audio',
+    'Program',
+    'Timer',
+    'SeriesTimer'
+  ];
+
+  if (item.Type === 'Recording' && item.Status !== 'Completed') {
+    return false;
+  }
+
+  return (
+    !item.CollectionType &&
+    !isLocalItem(item) &&
+    item.MediaType !== 'Photo' &&
+    !invalidTypes.includes(item.Type || '')
+  );
+}
+
 /**
  * Generate a link to the item's details page route
  *
@@ -386,3 +529,279 @@ export function getMediaStreams(
 ): MediaStream[] {
   return mediaStreams.filter((mediaStream) => mediaStream.Type === streamType);
 }
+
+/**
+ * Create an item download object that contains the URL and filename.
+ *
+ * @param itemId - The item ID.
+ * @param itemPath - The item path.
+ * @returns - A download object.
+ */
+export function getItemDownloadObject(
+  itemId: string,
+  itemPath?: string
+): DownloadableFile | undefined {
+  const remote = useRemote();
+
+  const serverAddress = remote.sdk.api?.basePath;
+  const userToken = remote.sdk.api?.accessToken;
+
+  if (!serverAddress || !userToken) {
+    return undefined;
+  }
+
+  const fileName = itemPath?.includes('\\')
+    ? itemPath?.split('\\').pop()
+    : itemPath?.split('/').pop();
+
+  return {
+    url: `${serverAddress}/Items/${itemId}/Download?api_key=${userToken}`,
+    fileName: fileName || ''
+  };
+}
+
+/**
+ * Get multiple download object for seasons.
+ *
+ * @param seasonId - The season ID.
+ * @returns - An array of download objects.
+ */
+export async function getItemSeasonDownloadObjects(
+  seasonId: string
+): Promise<DownloadableFile[]> {
+  const remote = useRemote();
+
+  if (remote.sdk.api === undefined) {
+    return [];
+  }
+
+  const episodes = (
+    await remote.sdk.newUserApi(getItemsApi).getItems({
+      userId: remote.auth.currentUserId,
+      parentId: seasonId,
+      fields: [ItemFields.Overview, ItemFields.CanDownload, ItemFields.Path]
+    })
+  ).data;
+
+  return (
+    episodes.Items?.map((r) => {
+      if (r.Id && r.Path) {
+        return getItemDownloadObject(r.Id, r.Path);
+      }
+    }).filter(
+      (r): r is DownloadableFile =>
+        r !== undefined && r.url.length > 0 && r.fileName.length > 0
+    ) ?? []
+  );
+}
+
+/**
+ * Get download object for a series.
+ * This will fetch every season for all the episodes.
+ *
+ * @param seriesId - The series ID.
+ * @returns - An array of download objects.
+ */
+export async function getItemSeriesDownloadObjects(
+  seriesId: string
+): Promise<DownloadableFile[]> {
+  const remote = useRemote();
+
+  let mergedStreamURLs: DownloadableFile[] = [];
+
+  if (remote.sdk.api === undefined) {
+    return [];
+  }
+
+  const seasons = (
+    await remote.sdk.newUserApi(getTvShowsApi).getSeasons({
+      userId: remote.auth.currentUserId,
+      seriesId: seriesId
+    })
+  ).data;
+
+  for (const season of seasons.Items || []) {
+    const seasonURLs = await getItemSeasonDownloadObjects(season.Id || '');
+
+    mergedStreamURLs = [...mergedStreamURLs, ...seasonURLs];
+  }
+
+  return mergedStreamURLs;
+}
+
+interface SearchBuilder {
+  Name?: string;
+  Year?: number;
+  ProviderIds: {
+    [key: string]: string;
+  };
+}
+
+/**
+ * Get the remote search results for an item and search params.
+ *
+ * @param item - The item to search for.
+ * @param searches - The search params to use.
+ * @returns - An array of remote search results.
+ */
+export async function getItemRemoteSearch(
+  item: BaseItemDto,
+  searches: IdentifySearchItem[]
+): Promise<RemoteSearchResult[] | undefined> {
+  const remote = useRemote();
+
+  const itemId = item.Id;
+
+  if (remote.sdk.api === undefined) {
+    return;
+  }
+
+  if (itemId === undefined) {
+    return;
+  }
+
+  // Split the query to `search-item-` and the rest to provider IDs.
+
+  const queryProviderIDs = searches
+    .map((search) => {
+      if (!search.key.startsWith('search-item-')) {
+        return search;
+      }
+    })
+    .filter((s): s is IdentifySearchItem => s !== undefined);
+  const nameSearch = searches.find(
+    (search) => search.key === 'search-item-Name'
+  );
+  const yearSearch = searches.find(
+    (search) => search.key === 'search-item-Year'
+  );
+
+  const buildSearch: SearchBuilder = {
+    ProviderIds: {}
+  };
+
+  if (nameSearch && nameSearch.value) {
+    buildSearch.Name = nameSearch.value as string;
+  }
+
+  if (yearSearch && yearSearch.value) {
+    buildSearch.Year = yearSearch.value as number;
+  }
+
+  for (const search of queryProviderIDs) {
+    buildSearch.ProviderIds[search.key] = (search.value as string) || '';
+  }
+
+  const searcher = remote.sdk.newUserApi(getItemLookupApi);
+
+  switch (item.Type) {
+    case 'Book': {
+      return (
+        await searcher.getBookRemoteSearchResults({
+          bookInfoRemoteSearchQuery: {
+            ItemId: itemId,
+            SearchInfo: buildSearch
+          }
+        })
+      ).data;
+    }
+    case 'BoxSet': {
+      return (
+        await searcher.getBoxSetRemoteSearchResults({
+          boxSetInfoRemoteSearchQuery: {
+            ItemId: itemId,
+            SearchInfo: buildSearch
+          }
+        })
+      ).data;
+    }
+    case 'Movie': {
+      return (
+        await searcher.getMovieRemoteSearchResults({
+          movieInfoRemoteSearchQuery: {
+            ItemId: itemId,
+            SearchInfo: buildSearch
+          }
+        })
+      ).data;
+    }
+    case 'MusicAlbum': {
+      return (
+        await searcher.getMusicAlbumRemoteSearchResults({
+          albumInfoRemoteSearchQuery: {
+            ItemId: itemId,
+            SearchInfo: buildSearch
+          }
+        })
+      ).data;
+    }
+    case 'MusicArtist': {
+      return (
+        await searcher.getMusicArtistRemoteSearchResults({
+          artistInfoRemoteSearchQuery: {
+            ItemId: itemId,
+            SearchInfo: buildSearch
+          }
+        })
+      ).data;
+    }
+    case 'MusicVideo': {
+      return (
+        await searcher.getMusicVideoRemoteSearchResults({
+          musicVideoInfoRemoteSearchQuery: {
+            ItemId: itemId,
+            SearchInfo: buildSearch
+          }
+        })
+      ).data;
+    }
+    case 'Person': {
+      return (
+        await searcher.getPersonRemoteSearchResults({
+          personLookupInfoRemoteSearchQuery: {
+            ItemId: itemId,
+            SearchInfo: buildSearch
+          }
+        })
+      ).data;
+    }
+    case 'Series': {
+      return (
+        await searcher.getSeriesRemoteSearchResults({
+          seriesInfoRemoteSearchQuery: {
+            ItemId: itemId,
+            SearchInfo: buildSearch
+          }
+        })
+      ).data;
+    }
+    case 'Trailer': {
+      return (
+        await searcher.getTrailerRemoteSearchResults({
+          trailerInfoRemoteSearchQuery: {
+            ItemId: itemId,
+            SearchInfo: buildSearch
+          }
+        })
+      ).data;
+    }
+  }
+}
+
+/**
+ * Format a number of bytes into a human readable string
+ *
+ * @param size - The number of bytes to format
+ * @returns - A human readable string
+ */
+export function formatFileSize(size: number): string {
+  if (size === 0) {
+    return '0 B';
+  }
+
+  const i = Math.floor(Math.log(size) / Math.log(1024));
+
+  return `${(size / Math.pow(1024, i)).toFixed(2)} ${
+    ['B', 'kiB', 'MiB', 'GiB', 'TiB', 'PiB'][i]
+  }`;
+}
diff --git a/frontend/src/utils/mediainfo.ts b/frontend/src/utils/mediainfo.ts
new file mode 100644
index 00000000000..550d48aa951
--- /dev/null
+++ b/frontend/src/utils/mediainfo.ts
@@ -0,0 +1,354 @@
+import {
+  MediaSourceInfo,
+  MediaStream
+} from '@jellyfin/sdk/lib/generated-client';
+import { isBoolean, isNil } from 'lodash-es';
+import { formatFileSize } from './items';
+import { usei18n } from '@/composables';
+
+const { t } = usei18n();
+const profileT = t('mediaInfo.generic.profile');
+
+type MediaItem = string | number | boolean;
+type NoneType = null | undefined;
+
+/**
+ * Format a boolean value into a Yes/No string.
+ * @param value - The boolean value to format.
+ */
+export function formatYesOrNo(value: boolean | NoneType): string {
+  return value ? 'Yes' : 'No';
+}
+
+/**
+ * Check if a value is a valid media item.
+ */
+function checkValidValue(value: MediaItem | NoneType): value is MediaItem {
+  if (isNil(value)) {
+    return false;
+  }
+
+  if (typeof value === 'string') {
+    return value.trim().length > 0;
+  }
+
+  return true;
+}
+
+/**
+ * Format a media attribute into a mediainfo text format.
+ * @param key - The key of the attribute.
+ * @param value - The value of the attribute.
+ * @param suffix - An optional suffix to append to the attribute.
+ */
+function formatMediaAttr(
+  key: string,
+  value: MediaItem | NoneType,
+  suffix?: string
+): string {
+  return checkValidValue(value)
+    ? `${key} ${value} ${suffix ?? ''}`.trimEnd() + '\n'
+    : '';
+}
+
+/**
+ * Create generic information about the media stream.
+ * @param stream - The media stream to create information for.
+ */
+function createGenericInfo(stream: MediaStream): string {
+  let mediaInfo = '';
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.title'),
+    stream.DisplayTitle
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.language'),
+    stream.Language
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.codec'),
+    stream.Codec?.toUpperCase()
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.codecTag'),
+    stream.CodecTag
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Create generic information about the Default/Forced/External status of a stream.
+ * @param stream - The media stream to create information for.
+ */
+function createExtraInformation(stream: MediaStream): string {
+  let mediaInfo = '';
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.default'),
+    formatYesOrNo(stream.IsDefault)
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.forced'),
+    formatYesOrNo(stream.IsForced)
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.external'),
+    formatYesOrNo(stream.IsExternal)
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Create information about Dolby Vision if exist.
+ * @param stream - The media stream to create information for.
+ */
+function createVideoDoViInformation(stream: MediaStream): string {
+  let mediaInfo = '';
+
+  if (typeof stream.VideoDoViTitle !== 'string') {
+    return mediaInfo;
+  }
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.title'),
+    stream.VideoDoViTitle
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.majorVersion'),
+    stream.DvVersionMajor
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.minorVersion'),
+    stream.DvVersionMinor
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.profile'),
+    stream.DvProfile
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.level'),
+    stream.DvLevel
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.rpuPresent'),
+    stream.RpuPresentFlag
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.elPresent'),
+    stream.ElPresentFlag
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.blPresent'),
+    stream.BlPresentFlag
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.blSignalCompatibilityId'),
+    stream.DvBlSignalCompatibilityId
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Create information about the color space used in the video stream.
+ * @param stream - The media stream to create information for.
+ */
+function createVideoColorInformation(stream: MediaStream): string {
+  let mediaInfo = '';
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.colorSpace'),
+    stream.ColorSpace
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.colorTransfer'),
+    stream.ColorTransfer
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.colorPrimaries'),
+    stream.ColorPrimaries
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.colorRange'),
+    stream.ColorRange
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.pixelFormat'),
+    stream.PixelFormat
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Format video media info into a mediainfo text format
+ * @param stream - The media stream to create information for.
+ */
+export function createVideoInformation(stream: MediaStream): string {
+  let mediaInfo = createGenericInfo(stream);
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.isAvc'),
+    formatYesOrNo(stream.IsAVC)
+  );
+  mediaInfo += formatMediaAttr(profileT, stream.Profile);
+  mediaInfo += formatMediaAttr(t('mediaInfo.videoCodec.level'), stream.Level);
+
+  if (stream.Width || stream.Height) {
+    mediaInfo += formatMediaAttr(
+      t('mediaInfo.videoCodec.resolution'),
+      `${stream.Width}x${stream.Height}`
+    );
+  }
+
+  if (stream.AspectRatio) {
+    mediaInfo += formatMediaAttr(
+      t('mediaInfo.videoCodec.aspectRatio'),
+      stream.AspectRatio
+    );
+  }
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.isAnamorphic'),
+    isBoolean(stream.IsAnamorphic)
+      ? formatYesOrNo(stream.IsAnamorphic)
+      : undefined
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.isInterlaced'),
+    formatYesOrNo(stream.IsInterlaced)
+  );
+
+  if (stream.AverageFrameRate || stream.RealFrameRate) {
+    mediaInfo += formatMediaAttr(
+      t('mediaInfo.videoCodec.frameRate'),
+      (stream.AverageFrameRate || stream.RealFrameRate)?.toFixed(3),
+      'fps'
+    );
+  }
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.bitrate'),
+    stream.BitRate ? (stream.BitRate / 1000).toFixed(2) : '',
+    'kbps'
+  );
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.bitdepth'),
+    stream.BitDepth,
+    'bits'
+  );
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.videoRange'),
+    stream.VideoRange
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.videoRangeType'),
+    stream.VideoRangeType
+  );
+
+  mediaInfo += createVideoDoViInformation(stream);
+  mediaInfo += createVideoColorInformation(stream);
+  mediaInfo += formatMediaAttr('NAL', stream.NalLengthSize);
+
+  return mediaInfo;
+}
+
+/**
+ * Format audio media info into a mediainfo text format
+ * @param stream - The media stream to create information for.
+ */
+export function createAudioInformation(stream: MediaStream): string {
+  let mediaInfo = createGenericInfo(stream);
+
+  mediaInfo += formatMediaAttr(profileT, stream.Profile);
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.audioCodec.layout'),
+    stream.ChannelLayout
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.audioCodec.channels'),
+    stream.Channels,
+    'ch'
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.bitrate'),
+    stream.BitRate ? (stream.BitRate / 1000).toFixed(2) : '',
+    'kbps'
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.audioCodec.sampleRate'),
+    stream.SampleRate,
+    'Hz'
+  );
+
+  mediaInfo += createExtraInformation(stream);
+
+  return mediaInfo;
+}
+
+/**
+ * Format subtitle media info into a mediainfo text format
+ * @param stream - The media stream to create information for.
+ */
+export function createSubsInformation(stream: MediaStream): string {
+  let mediaInfo = createGenericInfo(stream);
+
+  mediaInfo += createExtraInformation(stream);
+
+  return mediaInfo;
+}
+
+/**
+ * Format embbedded media info into a mediainfo text format
+ * @param stream - The media stream to create information for.
+ */
+export function createEmbeddedInformation(stream: MediaStream): string {
+  let mediaInfo = createGenericInfo(stream);
+
+  mediaInfo += formatMediaAttr(profileT, stream.Profile);
+
+  if (stream.Width || stream.Height) {
+    mediaInfo += formatMediaAttr(
+      t('mediaInfo.videoCodec.resolution'),
+      `${stream.Width}x${stream.Height}`
+    );
+  }
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.bitdepth'),
+    stream.BitDepth,
+    'bits'
+  );
+  mediaInfo += createVideoColorInformation(stream);
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.refFrames'),
+    stream.RefFrames
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Format container media info into a mediainfo text format
+ * @param media - The media source to create information for.
+ */
+export function createContainerInformation(media: MediaSourceInfo): string {
+  let mediaInfo = '';
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.container'),
+    media.Container
+  );
+  mediaInfo += formatMediaAttr(t('mediaInfo.generic.path'), media.Path);
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.size'),
+    media.Size ? formatFileSize(media.Size) : ''
+  );
+
+  return mediaInfo;
+}
diff --git a/frontend/types/global/components.d.ts b/frontend/types/global/components.d.ts
index 87a93e5c61d..339d861965a 100644
--- a/frontend/types/global/components.d.ts
+++ b/frontend/types/global/components.d.ts
@@ -25,10 +25,14 @@ declare module '@vue/runtime-core' {
     CastButton: typeof import('./../../src/components/Layout/AppBar/Buttons/CastButton.vue')['default']
     CollectionTabs: typeof import('./../../src/components/Item/CollectionTabs.vue')['default']
     CommitLink: typeof import('./../../src/components/Layout/Navigation/CommitLink.vue')['default']
+    ConfirmDialog: typeof import('./../../src/components/Item/ConfirmDialog.vue')['default']
     DateInput: typeof import('./../../src/components/Item/Metadata/DateInput.vue')['default']
     DraggableQueue: typeof import('./../../src/components/Playback/DraggableQueue.vue')['default']
     FilterButton: typeof import('./../../src/components/Buttons/FilterButton.vue')['default']
     HomeSection: typeof import('./../../src/components/Layout/HomeSection.vue')['default']
+    IdentifyDialog: typeof import('./../../src/components/Item/Identify/IdentifyDialog.vue')['default']
+    IdentifyResult: typeof import('./../../src/components/Item/Identify/IdentifyResult.vue')['default']
+    IdentifyTab: typeof import('./../../src/components/Item/Identify/IdentifyTab.vue')['default']
     ImageEditor: typeof import('./../../src/components/Item/Metadata/ImageEditor.vue')['default']
     ImageSearch: typeof import('./../../src/components/Item/Metadata/ImageSearch.vue')['default']
     IMdiAccount: typeof import('~icons/mdi/account')['default']
@@ -49,6 +53,7 @@ declare module '@vue/runtime-core' {
     IMdiClosedCaptionOutline: typeof import('~icons/mdi/closed-caption-outline')['default']
     IMdiCloudDownload: typeof import('~icons/mdi/cloud-download')['default']
     IMdiCog: typeof import('~icons/mdi/cog')['default']
+    IMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     IMdiContentSave: typeof import('~icons/mdi/content-save')['default']
     IMdiDelete: typeof import('~icons/mdi/delete')['default']
     IMdiDisc: typeof import('~icons/mdi/disc')['default']
@@ -94,6 +99,14 @@ declare module '@vue/runtime-core' {
     LocaleSwitcher: typeof import('./../../src/components/System/LocaleSwitcher.vue')['default']
     LoginForm: typeof import('./../../src/components/Forms/LoginForm.vue')['default']
     MarkPlayedButton: typeof import('./../../src/components/Buttons/MarkPlayedButton.vue')['default']
+    MediaDetail: typeof import('./../../src/components/Item/MediaDetail/MediaDetail.vue')['default']
+    MediaDetailAttr: typeof import('./../../src/components/Item/MediaDetail/MediaDetailAttr.vue')['default']
+    MediaDetailColorSpace: typeof import('./../../src/components/Item/MediaDetail/MediaDetailColorSpace.vue')['default']
+    MediaDetailContent: typeof import('./../../src/components/Item/MediaDetail/MediaDetailContent.vue')['default']
+    MediaDetailCopy: typeof import('./../../src/components/Item/MediaDetail/MediaDetailCopy.vue')['default']
+    MediaDetailDialog: typeof import('./../../src/components/Item/MediaDetail/MediaDetailDialog.vue')['default']
+    MediaDetailExtras: typeof import('./../../src/components/Item/MediaDetail/MediaDetailExtras.vue')['default']
+    MediaDetailGeneric: typeof import('./../../src/components/Item/MediaDetail/MediaDetailGeneric.vue')['default']
     MediaInfo: typeof import('./../../src/components/Item/MediaInfo.vue')['default']
     MediaStreamSelector: typeof import('./../../src/components/Item/MediaStreamSelector.vue')['default']
     MetadataEditor: typeof import('./../../src/components/Item/Metadata/MetadataEditor.vue')['default']
@@ -107,8 +120,11 @@ declare module '@vue/runtime-core' {
     PlayButton: typeof import('./../../src/components/Buttons/Playback/PlayButton.vue')['default']
     PlayerElement: typeof import('./../../src/components/Playback/PlayerElement.vue')['default']
     PlayPauseButton: typeof import('./../../src/components/Buttons/Playback/PlayPauseButton.vue')['default']
+    PosterBlock: typeof import('./../../src/components/Item/Identify/PosterBlock.vue')['default']
     PreviousTrackButton: typeof import('./../../src/components/Buttons/Playback/PreviousTrackButton.vue')['default']
     QueueButton: typeof import('./../../src/components/Buttons/QueueButton.vue')['default']
+    RefreshMetadata: typeof import('./../../src/components/Item/Metadata/RefreshMetadata.vue')['default']
+    RefreshMetadataDialog: typeof import('./../../src/components/Item/Metadata/RefreshMetadataDialog.vue')['default']
     RelatedItems: typeof import('./../../src/components/Item/RelatedItems.vue')['default']
     RepeatButton: typeof import('./../../src/components/Buttons/Playback/RepeatButton.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/frontend/types/global/environment.d.ts b/frontend/types/global/environment.d.ts
index 151c9a1bf0a..29eaa53887e 100644
--- a/frontend/types/global/environment.d.ts
+++ b/frontend/types/global/environment.d.ts
@@ -3,3 +3,9 @@
 /// <reference types="vite-plugin-vue-layouts/client" />
 
 declare const __COMMIT_HASH__: string;
+
+// Extend the global Window interface
+interface Window {
+  __TAURI__?: unknown;
+  __TAURI_METADATA__?: unknown;
+}