diff --git a/apps/app-frontend/eslint.config.mjs b/apps/app-frontend/eslint.config.mjs
index 05f559424b..76db133ffb 100644
--- a/apps/app-frontend/eslint.config.mjs
+++ b/apps/app-frontend/eslint.config.mjs
@@ -17,6 +17,7 @@ export default createConfigForNuxt().append([
     rules: {
       'vue/html-self-closing': 'off',
       'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
 ])
diff --git a/apps/app-frontend/src/components/ui/ScreenshotCard.vue b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
new file mode 100644
index 0000000000..f671bceccf
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
@@ -0,0 +1,190 @@
+<template>
+  <div
+    ref="wrapperContainer"
+    class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <div
+      v-if="loaded"
+      class="absolute top-2 right-2 flex gap-1 transition-opacity duration-200 z-10"
+      :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
+    >
+      <Button v-tooltip="'Copy'" icon-only title="Copy" @click="copyImageToClipboard">
+        <ClipboardCopyIcon />
+      </Button>
+      <Button v-tooltip="'View in folder'" icon-only title="View in folder" @click="viewInFolder">
+        <ExternalIcon />
+      </Button>
+      <Button v-tooltip="'Delete'" color="red" icon-only title="Delete" @click="deleteScreenshot">
+        <TrashIcon />
+      </Button>
+    </div>
+
+    <div class="aspect-video bg-bg-raised overflow-hidden">
+      <div v-if="!loaded" class="absolute inset-0 skeleton"></div>
+      <img
+        v-else
+        :alt="getScreenshotFileName(screenshot.path)"
+        :src="blobUrl"
+        class="w-full h-full object-cover transition-opacity duration-700"
+        :class="{ 'opacity-0': !loaded, 'opacity-100': loaded }"
+        @load="onLoad"
+        @click="
+          imagePreviewModal.show(blobUrl, getScreenshotFileName(screenshot.path), {
+            ...screenshot,
+            title: getScreenshotFileName(screenshot.path),
+            description: `Taken on ${dayjs(screenshot.creation_date).format('MMMM Do, YYYY')}`,
+          })
+        "
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ClipboardCopyIcon, TrashIcon, ExternalIcon } from '@modrinth/assets'
+import type { ImagePreviewModal } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
+import {
+  type Screenshot,
+  deleteProfileScreenshot,
+  openProfileScreenshot,
+  getScreenshotData,
+  getScreenshotFileName,
+} from '@/helpers/screenshots'
+import { useNotifications } from '@/store/state'
+import dayjs from 'dayjs'
+
+const props = defineProps<{
+  screenshot: Screenshot
+  profilePath: string
+  imagePreviewModal: typeof ImagePreviewModal
+}>()
+const emit = defineEmits(['deleted'])
+const notifications = useNotifications()
+
+const loaded = ref(false)
+const blobUrl = ref<string>('')
+const isHovered = ref(false)
+const wrapperContainer = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
+
+function onLoad() {
+  loaded.value = true
+}
+
+async function loadData(): Promise<void> {
+  try {
+    const base64 = await getScreenshotData(props.profilePath, props.screenshot)
+    if (!base64) {
+      notifications.addNotification({
+        title: 'Failed to load screenshot:',
+        text: props.screenshot.path,
+        type: 'error',
+      })
+      return
+    }
+
+    const binary = atob(base64)
+    const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0))
+    const blob = new Blob([bytes], { type: 'image/png' })
+
+    blobUrl.value = URL.createObjectURL(blob)
+    loaded.value = true
+  } catch (err: any) {
+    notifications.addNotification({
+      title: 'Error fetching screenshot',
+      text: err.message,
+      type: 'error',
+    })
+  }
+}
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          loadData()
+          if (observer && wrapperContainer.value) {
+            observer.unobserve(wrapperContainer.value)
+          }
+        }
+      }
+    },
+    { rootMargin: '100px', threshold: 0.1 },
+  )
+  if (wrapperContainer.value) observer.observe(wrapperContainer.value)
+})
+
+onBeforeUnmount(() => {
+  if (observer && wrapperContainer.value) {
+    observer.unobserve(wrapperContainer.value)
+  }
+
+  if (blobUrl.value) {
+    URL.revokeObjectURL(blobUrl.value)
+  }
+})
+
+async function copyImageToClipboard() {
+  try {
+    const resp = await fetch(blobUrl.value)
+    const blob = await resp.blob()
+    await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])
+    notifications.addNotification({
+      title: 'Copied to clipboard',
+      text: 'The screenshot has been copied successfully.',
+      type: 'success',
+    })
+  } catch (error: any) {
+    notifications.addNotification({ title: 'Copy failed', text: error.message, type: 'error' })
+  }
+}
+
+async function deleteScreenshot() {
+  try {
+    const ok = await deleteProfileScreenshot(props.profilePath, props.screenshot)
+    if (!ok) throw new Error('Delete returned false')
+    notifications.addNotification({ title: 'Successfully deleted screenshot', type: 'success' })
+    emit('deleted')
+  } catch (err: any) {
+    notifications.addNotification({
+      title: 'Error deleting screenshot',
+      text: err.message,
+      type: 'error',
+    })
+  }
+}
+
+async function viewInFolder() {
+  const ok = await openProfileScreenshot(props.profilePath, props.screenshot)
+  if (!ok) {
+    notifications.addNotification({ title: 'Unable to open screenshot in folder.', type: 'error' })
+  }
+}
+</script>
+
+<style scoped>
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-bg) 25%,
+    var(--color-raised-bg) 50%,
+    var(--color-bg) 75%
+  );
+  background-size: 200% 100%;
+  animation: wave 1500ms infinite linear;
+}
+
+@keyframes wave {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+</style>
diff --git a/apps/app-frontend/src/helpers/screenshots.ts b/apps/app-frontend/src/helpers/screenshots.ts
new file mode 100644
index 0000000000..11dd6fcd76
--- /dev/null
+++ b/apps/app-frontend/src/helpers/screenshots.ts
@@ -0,0 +1,47 @@
+import { invoke } from '@tauri-apps/api/core'
+
+export type Screenshot = {
+  path: string
+  creation_date: string
+}
+
+export async function getAllProfileScreenshots(profilePath: string): Promise<Screenshot[]> {
+  return await invoke<Screenshot[]>('plugin:screenshots|get_all_profile_screenshots', {
+    path: profilePath,
+  })
+}
+
+export async function deleteProfileScreenshot(
+  profilePath: string,
+  screenshot: Screenshot,
+): Promise<boolean> {
+  return await invoke<boolean>('plugin:screenshots|delete_profile_screenshot', {
+    path: profilePath,
+    screenshot,
+  })
+}
+
+export async function openProfileScreenshot(
+  profilePath: string,
+  screenshot: Screenshot,
+): Promise<boolean> {
+  return await invoke<boolean>('plugin:screenshots|open_profile_screenshot', {
+    path: profilePath,
+    screenshot,
+  })
+}
+
+export async function getScreenshotData(
+  profilePath: string,
+  screenshot: Screenshot,
+): Promise<string | undefined> {
+  return await invoke<string | undefined>('plugin:screenshots|get_screenshot_data', {
+    path: profilePath,
+    screenshot,
+  })
+}
+
+export function getScreenshotFileName(path: string | undefined) {
+  if (!path) return 'Untitled'
+  return path.split('/').pop()!
+}
diff --git a/apps/app-frontend/src/helpers/types.d.ts b/apps/app-frontend/src/helpers/types.d.ts
index aa60ec2f74..8fd9a041d1 100644
--- a/apps/app-frontend/src/helpers/types.d.ts
+++ b/apps/app-frontend/src/helpers/types.d.ts
@@ -1,4 +1,5 @@
 import type { ModrinthId } from '@modrinth/utils'
+import type { Screenshot } from '@/helpers/screenshots.ts'
 
 type GameInstance = {
   path: string
@@ -140,3 +141,25 @@ export type InstanceSettingsTabProps = {
   instance: GameInstance
   offline?: boolean
 }
+
+export type ServersUpdatedEvent = { event: 'servers_updated' }
+export type WorldUpdatedEvent = { event: 'world_updated'; world: string }
+export type ServerJoinedEvent = {
+  event: 'server_joined'
+  host: string
+  port: number
+  timestamp: string
+}
+export type ScreenshotChangedEvent = {
+  event: 'screenshot_changed'
+  screenshot: Screenshot
+  file_exists: boolean
+}
+
+// TODO: Refactor events.js -> events.ts with proper types for all the events.
+export type ProfileEvent = { profile_path_id: string } & (
+  | ServersUpdatedEvent
+  | WorldUpdatedEvent
+  | ServerJoinedEvent
+  | ScreenshotChangedEvent
+)
diff --git a/apps/app-frontend/src/helpers/worlds.ts b/apps/app-frontend/src/helpers/worlds.ts
index 89f98d7d72..a389275904 100644
--- a/apps/app-frontend/src/helpers/worlds.ts
+++ b/apps/app-frontend/src/helpers/worlds.ts
@@ -4,6 +4,7 @@ import { openPath } from '@/helpers/utils'
 import { autoToHTML } from '@geometrically/minecraft-motd-parser'
 import dayjs from 'dayjs'
 import type { GameVersion } from '@modrinth/ui'
+import type { ProfileEvent } from '@/helpers/types'
 
 type BaseWorld = {
   name: string
@@ -309,19 +310,3 @@ export function hasQuickPlaySupport(gameVersions: GameVersion[], currentVersion:
 
   return versionIndex !== -1 && targetIndex !== -1 && versionIndex <= targetIndex
 }
-
-export type ProfileEvent = { profile_path_id: string } & (
-  | {
-      event: 'servers_updated'
-    }
-  | {
-      event: 'world_updated'
-      world: string
-    }
-  | {
-      event: 'server_joined'
-      host: string
-      port: number
-      timestamp: string
-    }
-)
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 65bfbf68f3..64f693db56 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -272,6 +272,10 @@ const tabs = computed(() => [
     label: 'Worlds',
     href: `${basePath.value}/worlds`,
   },
+  {
+    label: 'Screenshots',
+    href: `${basePath.value}/screenshots`,
+  },
   {
     label: 'Logs',
     href: `${basePath.value}/logs`,
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
new file mode 100644
index 0000000000..a8f66f9c86
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { GameInstance, ProfileEvent } from '@/helpers/types'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import { DropdownIcon } from '@modrinth/assets'
+import type { Version } from '@modrinth/utils'
+import { computed, onUnmounted, ref } from 'vue'
+import dayjs from 'dayjs'
+import advancedFormat from 'dayjs/plugin/advancedFormat.js'
+import type { Screenshot } from '@/helpers/screenshots.ts'
+import {
+  getScreenshotData,
+  getScreenshotFileName,
+  getAllProfileScreenshots,
+  openProfileScreenshot,
+} from '@/helpers/screenshots.ts'
+import ScreenshotCard from '@/components/ui/ScreenshotCard.vue'
+import type {
+  GalleryEntry,
+  NavigationFunction,
+  OpenExternallyFunction,
+} from '@modrinth/ui/src/components/modal/ImagePreviewModal.vue'
+import ImagePreviewModal from '@modrinth/ui/src/components/modal/ImagePreviewModal.vue'
+import { useNotifications } from '@/store/state'
+import { profile_listener } from '@/helpers/events'
+
+dayjs.extend(advancedFormat)
+
+const props = defineProps<{
+  instance: GameInstance
+  options: InstanceType<typeof ContextMenu> | null
+  offline: boolean
+  playing: boolean
+  versions: Version[]
+  installed: boolean
+}>()
+
+const notifications = useNotifications()
+const screenshots = ref<Screenshot[]>((await getAllProfileScreenshots(props.instance.path)) ?? [])
+const imagePreviewModal = ref<typeof ImagePreviewModal>()
+
+function groupAndSortByDate(items: Screenshot[]): readonly [string, Screenshot[]][] {
+  const todayTS = dayjs().startOf('day').valueOf()
+  const yesterdayTS = dayjs().subtract(1, 'day').startOf('day').valueOf()
+
+  const groups = new Map<number, Screenshot[]>()
+  for (const shot of items) {
+    const ts = dayjs(shot.creation_date).startOf('day').valueOf()
+    const bucket = groups.get(ts)
+    if (bucket) bucket.push(shot)
+    else groups.set(ts, [shot])
+  }
+
+  const sortedTS = Array.from(groups.keys()).sort((a, b) => b - a)
+  return sortedTS.map((ts) => {
+    let label: string
+    if (ts === todayTS) label = 'Today'
+    else if (ts === yesterdayTS) label = 'Yesterday'
+    else label = dayjs(ts).format('MMMM Do, YYYY')
+
+    return [label, groups.get(ts)!] as const
+  })
+}
+
+function markDeleted(s: Screenshot): void {
+  screenshots.value = screenshots.value.filter((shot) => shot.path !== s.path)
+}
+
+async function navigateScreenshot(screenshot: Screenshot, offset: number): Promise<GalleryEntry> {
+  const list = screenshots.value
+  const idx = list.findIndex((s) => s.path === screenshot.path)
+  const newIdx = (idx + offset + list.length) % list.length
+  const next = list[newIdx]
+
+  return {
+    src: `data:image/png;base64,${await getScreenshotData(props.instance.path, next)}`,
+    alt: getScreenshotFileName(next.path),
+    key: {
+      ...next,
+      title: getScreenshotFileName(next.path),
+      description: `Taken on ${dayjs(next.creation_date).format('MMMM Do, YYYY')}`,
+    },
+  }
+}
+
+const viewNextScreenshot: NavigationFunction = ((s) =>
+  navigateScreenshot(s, 1)) as NavigationFunction
+
+const viewPreviousScreenshot: NavigationFunction = ((s) =>
+  navigateScreenshot(s, -1)) as NavigationFunction
+
+const openExternally: OpenExternallyFunction = (async (src: string, screenshot: Screenshot) => {
+  const result = await openProfileScreenshot(props.instance.path, screenshot)
+  if (!result) {
+    notifications.addNotification({
+      title: 'Unable to open screenshot in folder.',
+      type: 'error',
+    })
+  }
+}) as OpenExternallyFunction
+
+const screenshotsByDate = computed(() => groupAndSortByDate(screenshots.value))
+const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label === 'Today'))
+
+const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
+  if (e.profile_path_id !== props.instance.path) return
+
+  console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
+
+  if (e.event === 'screenshot_changed') {
+    const exists = screenshots.value.some((shot) => shot.path === e.screenshot.path)
+    if (e.file_exists && !exists) {
+      screenshots.value = [e.screenshot, ...screenshots.value]
+    }
+
+    if (!e.file_exists && exists) {
+      screenshots.value = screenshots.value.filter((shot) => shot.path !== e.screenshot.path)
+    }
+  }
+})
+
+onUnmounted(() => {
+  unlistenProfile()
+})
+</script>
+
+<template>
+  <div>
+    <ImagePreviewModal
+      ref="imagePreviewModal"
+      :next="viewNextScreenshot"
+      :prev="viewPreviousScreenshot"
+      :open-externally="openExternally"
+      :open-externally-tooltip="'Open in containing folder'"
+    />
+    <div class="w-full p-5">
+      <div
+        v-if="!screenshots.length"
+        class="flex flex-col items-center justify-center py-12 text-center"
+      >
+        <div class="text-lg font-medium mb-2">No screenshots yet</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+          Screenshots taken in-game will appear here
+        </div>
+      </div>
+
+      <div v-else class="space-y-8">
+        <template v-if="!hasToday">
+          <details class="group space-y-2" open>
+            <summary class="cursor-pointer flex items-center justify-between">
+              <h2
+                class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
+              >
+                Today
+              </h2>
+              <DropdownIcon
+                class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
+              />
+            </summary>
+            <p class="text-lg font-medium mb-2">You haven't taken any screenshots today.</p>
+          </details>
+        </template>
+
+        <template v-for="[date, shots] in screenshotsByDate" :key="date">
+          <details class="group space-y-2" open>
+            <summary class="cursor-pointer flex items-center justify-between">
+              <h2
+                class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
+              >
+                {{ date }}
+              </h2>
+              <DropdownIcon
+                class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
+              />
+            </summary>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
+              <ScreenshotCard
+                v-for="s in shots"
+                :key="s.path"
+                :screenshot="s"
+                :profile-path="instance.path"
+                :image-preview-modal="imagePreviewModal!"
+                @deleted="markDeleted(s)"
+              />
+            </div>
+          </details>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/app-frontend/src/pages/instance/index.js b/apps/app-frontend/src/pages/instance/index.js
index fa77df524e..1413e12b28 100644
--- a/apps/app-frontend/src/pages/instance/index.js
+++ b/apps/app-frontend/src/pages/instance/index.js
@@ -3,5 +3,6 @@ import Overview from './Overview.vue'
 import Worlds from './Worlds.vue'
 import Mods from './Mods.vue'
 import Logs from './Logs.vue'
+import Screenshots from './Screenshots.vue'
 
-export { Index, Overview, Worlds, Mods, Logs }
+export { Index, Overview, Worlds, Mods, Logs, Screenshots }
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index 6d5e4e3726..c7bbfb58cd 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -132,6 +132,15 @@ export default new createRouter({
             breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Worlds' }],
           },
         },
+        {
+          path: 'screenshots',
+          name: 'Screenshots',
+          component: Instance.Screenshots,
+          meta: {
+            useRootContext: true,
+            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Screenshots' }],
+          },
+        },
         {
           path: '',
           name: 'Mods',
diff --git a/apps/app/build.rs b/apps/app/build.rs
index 644d22b681..2b3cc81298 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -264,6 +264,19 @@ fn main() {
                     .default_permission(
                         DefaultPermissionRule::AllowAllCommands,
                     ),
+            )
+            .plugin(
+                "screenshots",
+                InlinedPlugin::new()
+                    .commands(&[
+                        "get_all_profile_screenshots",
+                        "get_screenshot_data",
+                        "delete_profile_screenshot",
+                        "open_profile_screenshot",
+                    ])
+                    .default_permission(
+                        DefaultPermissionRule::AllowAllCommands,
+                    ),
             ),
     )
     .expect("Failed to run tauri-build");
diff --git a/apps/app/capabilities/plugins.json b/apps/app/capabilities/plugins.json
index b9777b6d9f..7a196d09e0 100644
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -36,6 +36,7 @@
     "utils:default",
     "ads:default",
     "friends:default",
-    "worlds:default"
+    "worlds:default",
+    "screenshots:default"
   ]
 }
diff --git a/apps/app/src/api/mod.rs b/apps/app/src/api/mod.rs
index 09d37e87ab..c2d08c210e 100644
--- a/apps/app/src/api/mod.rs
+++ b/apps/app/src/api/mod.rs
@@ -19,6 +19,7 @@ pub mod utils;
 pub mod ads;
 pub mod cache;
 pub mod friends;
+pub mod screenshots;
 pub mod worlds;
 
 pub type Result<T> = std::result::Result<T, TheseusSerializableError>;
diff --git a/apps/app/src/api/screenshots.rs b/apps/app/src/api/screenshots.rs
new file mode 100644
index 0000000000..6a7d675d31
--- /dev/null
+++ b/apps/app/src/api/screenshots.rs
@@ -0,0 +1,56 @@
+use tauri::{AppHandle, Runtime};
+use tauri_plugin_opener::OpenerExt;
+use theseus::profile::get_full_path;
+use theseus::screenshots::{self, Screenshot, get_valid_screenshot_path};
+
+pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
+    tauri::plugin::Builder::new("screenshots")
+        .invoke_handler(tauri::generate_handler![
+            get_all_profile_screenshots,
+            get_screenshot_data,
+            delete_profile_screenshot,
+            open_profile_screenshot
+        ])
+        .build()
+}
+
+#[tauri::command]
+pub async fn get_all_profile_screenshots(
+    path: &str,
+) -> crate::api::Result<Vec<Screenshot>> {
+    Ok(screenshots::get_all_profile_screenshots(path).await?)
+}
+
+#[tauri::command]
+pub async fn get_screenshot_data(
+    path: &str,
+    screenshot: Screenshot,
+) -> crate::api::Result<Option<String>> {
+    let profile_dir = get_full_path(path).await?;
+    Ok(screenshots::get_screenshot_data(&profile_dir, &screenshot).await?)
+}
+
+#[tauri::command]
+pub async fn delete_profile_screenshot(
+    path: &str,
+    screenshot: Screenshot,
+) -> crate::api::Result<bool> {
+    Ok(screenshots::delete_profile_screenshot(path, &screenshot).await?)
+}
+
+#[tauri::command]
+pub async fn open_profile_screenshot<R: Runtime>(
+    app: AppHandle<R>,
+    path: &str,
+    screenshot: Screenshot,
+) -> crate::api::Result<bool> {
+    let profile_dir = get_full_path(path).await?;
+    if let Some(path) =
+        get_valid_screenshot_path(&profile_dir, &screenshot).await?
+    {
+        app.opener().reveal_item_in_dir(path).unwrap();
+        Ok(true)
+    } else {
+        Ok(false)
+    }
+}
diff --git a/apps/app/src/main.rs b/apps/app/src/main.rs
index 4291431df8..e19b3e239a 100644
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -260,6 +260,7 @@ fn main() {
         .plugin(api::ads::init())
         .plugin(api::friends::init())
         .plugin(api::worlds::init())
+        .plugin(api::screenshots::init())
         .invoke_handler(tauri::generate_handler![
             initialize_state,
             is_dev,
diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue
index 4f355236ce..6a54dcc871 100644
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -129,72 +129,12 @@
       proceed-label="Delete"
       @proceed="deleteGalleryImage"
     />
-    <div
-      v-if="expandedGalleryItem != null"
-      class="expanded-image-modal"
-      @click="expandedGalleryItem = null"
-    >
-      <div class="content">
-        <img
-          class="image"
-          :class="{ 'zoomed-in': zoomedIn }"
-          :src="
-            expandedGalleryItem.raw_url
-              ? expandedGalleryItem.raw_url
-              : 'https://cdn.modrinth.com/placeholder-banner.svg'
-          "
-          :alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
-          @click.stop
-        />
-
-        <div class="floating" @click.stop>
-          <div class="text">
-            <h2 v-if="expandedGalleryItem.title">
-              {{ expandedGalleryItem.title }}
-            </h2>
-            <p v-if="expandedGalleryItem.description">
-              {{ expandedGalleryItem.description }}
-            </p>
-          </div>
-          <div class="controls">
-            <div class="buttons">
-              <button class="close circle-button" @click="expandedGalleryItem = null">
-                <XIcon aria-hidden="true" />
-              </button>
-              <a
-                class="open circle-button"
-                target="_blank"
-                :href="
-                  expandedGalleryItem.raw_url
-                    ? expandedGalleryItem.raw_url
-                    : 'https://cdn.modrinth.com/placeholder-banner.svg'
-                "
-              >
-                <ExternalIcon aria-hidden="true" />
-              </a>
-              <button class="circle-button" @click="zoomedIn = !zoomedIn">
-                <ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-                <ContractIcon v-else aria-hidden="true" />
-              </button>
-              <button
-                v-if="project.gallery.length > 1"
-                class="previous circle-button"
-                @click="previousImage()"
-              >
-                <LeftArrowIcon aria-hidden="true" />
-              </button>
-              <button
-                v-if="project.gallery.length > 1"
-                class="next circle-button"
-                @click="nextImage()"
-              >
-                <RightArrowIcon aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ImagePreviewModal
+      ref="imageModal"
+      :next="getNextEntry"
+      :prev="getPrevEntry"
+      :open-externally="openExternally"
+    />
     <div v-if="currentMember" class="card header-buttons">
       <FileInput
         :max-size="524288000"
@@ -218,7 +158,7 @@
     </div>
     <div class="items">
       <div v-for="(item, index) in project.gallery" :key="index" class="card gallery-item">
-        <a class="gallery-thumbnail" @click="expandImage(item, index)">
+        <a class="gallery-thumbnail" @click="openImage(item, index)">
           <img
             :src="item.url ? item.url : 'https://cdn.modrinth.com/placeholder-banner.svg'"
             :alt="item.title ? item.title : 'gallery-image'"
@@ -285,17 +225,12 @@ import {
   SaveIcon,
   StarIcon,
   XIcon,
-  RightArrowIcon,
-  LeftArrowIcon,
-  ExternalIcon,
-  ExpandIcon,
-  ContractIcon,
   UploadIcon,
   InfoIcon,
   ImageIcon,
   TransferIcon,
 } from "@modrinth/assets";
-import { ConfirmModal } from "@modrinth/ui";
+import { ConfirmModal, ImagePreviewModal } from "@modrinth/ui";
 import FileInput from "~/components/ui/FileInput.vue";
 import DropArea from "~/components/ui/DropArea.vue";
 import Modal from "~/components/ui/Modal.vue";
@@ -358,41 +293,40 @@ export default defineNuxtComponent({
       return "image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp";
     },
   },
-  mounted() {
-    this._keyListener = function (e) {
-      if (this.expandedGalleryItem) {
-        e.preventDefault();
-        if (e.key === "Escape") {
-          this.expandedGalleryItem = null;
-        } else if (e.key === "ArrowLeft") {
-          this.previousImage();
-        } else if (e.key === "ArrowRight") {
-          this.nextImage();
-        }
-      }
-    };
-
-    document.addEventListener("keydown", this._keyListener.bind(this));
-  },
   methods: {
-    nextImage() {
-      this.expandedGalleryIndex++;
-      if (this.expandedGalleryIndex >= this.project.gallery.length) {
-        this.expandedGalleryIndex = 0;
-      }
-      this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex];
+    openImage(item, index) {
+      const src = item.raw_url || item.url;
+      const alt = item.title || "gallery-image";
+      this.$refs.imageModal.show(src, alt, {
+        index,
+        title: item.title,
+        description: item.description,
+      });
     },
-    previousImage() {
-      this.expandedGalleryIndex--;
-      if (this.expandedGalleryIndex < 0) {
-        this.expandedGalleryIndex = this.project.gallery.length - 1;
-      }
-      this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex];
+    getGalleryEntry(key, offset) {
+      const gallery = this.project.gallery;
+      const len = gallery.length;
+      const i = (key.index + offset + len) % len;
+      const item = gallery[i];
+
+      return {
+        src: item.raw_url || item.url,
+        alt: item.title || "gallery-image",
+        key: {
+          index: i,
+          title: item.title,
+          description: item.description,
+        },
+      };
+    },
+    getNextEntry(key) {
+      return this.getGalleryEntry(key, 1);
+    },
+    getPrevEntry(key) {
+      return this.getGalleryEntry(key, -1);
     },
-    expandImage(item, index) {
-      this.expandedGalleryItem = item;
-      this.expandedGalleryIndex = index;
-      this.zoomedIn = false;
+    openExternally(src) {
+      window.open(src, "_blank");
     },
     resetEdit() {
       this.editIndex = -1;
@@ -539,137 +473,6 @@ export default defineNuxtComponent({
   }
 }
 
-.expanded-image-modal {
-  position: fixed;
-  z-index: 20;
-  overflow: auto;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000000;
-  background-color: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .content {
-    position: relative;
-    width: calc(100vw - 2 * var(--spacing-card-lg));
-    height: calc(100vh - 2 * var(--spacing-card-lg));
-
-    .circle-button {
-      padding: 0.5rem;
-      line-height: 1;
-      display: flex;
-      max-width: 2rem;
-      color: var(--color-button-text);
-      background-color: var(--color-button-bg);
-      border-radius: var(--size-rounded-max);
-      margin: 0;
-      box-shadow: inset 0px -1px 1px rgb(17 24 39 / 10%);
-
-      &:not(:last-child) {
-        margin-right: 0.5rem;
-      }
-
-      &:hover {
-        background-color: var(--color-button-bg-hover) !important;
-
-        svg {
-          color: var(--color-button-text-hover) !important;
-        }
-      }
-
-      &:active {
-        background-color: var(--color-button-bg-active) !important;
-
-        svg {
-          color: var(--color-button-text-active) !important;
-        }
-      }
-
-      svg {
-        height: 1rem;
-        width: 1rem;
-      }
-    }
-
-    .image {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      max-width: calc(100vw - 2 * var(--spacing-card-lg));
-      max-height: calc(100vh - 2 * var(--spacing-card-lg));
-      border-radius: var(--size-rounded-card);
-
-      &.zoomed-in {
-        object-fit: cover;
-        width: auto;
-        height: calc(100vh - 2 * var(--spacing-card-lg));
-        max-width: calc(100vw - 2 * var(--spacing-card-lg));
-      }
-    }
-    .floating {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: var(--spacing-card-md);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--spacing-card-sm);
-      transition: opacity 0.25s ease-in-out;
-      opacity: 1;
-      padding: 2rem 2rem 0 2rem;
-
-      &:not(&:hover) {
-        opacity: 0.4;
-        .text {
-          transform: translateY(2.5rem) scale(0.8);
-          opacity: 0;
-        }
-        .controls {
-          transform: translateY(0.25rem) scale(0.9);
-        }
-      }
-
-      .text {
-        display: flex;
-        flex-direction: column;
-        max-width: 40rem;
-        transition:
-          opacity 0.25s ease-in-out,
-          transform 0.25s ease-in-out;
-        text-shadow: 1px 1px 10px #000000d4;
-        margin-bottom: 0.25rem;
-        gap: 0.5rem;
-
-        h2 {
-          color: var(--dark-color-text-dark);
-          font-size: 1.25rem;
-          text-align: center;
-          margin: 0;
-        }
-
-        p {
-          color: var(--dark-color-text);
-          margin: 0;
-        }
-      }
-      .controls {
-        background-color: var(--color-raised-bg);
-        padding: var(--spacing-card-md);
-        border-radius: var(--size-rounded-card);
-        transition:
-          opacity 0.25s ease-in-out,
-          transform 0.25s ease-in-out;
-      }
-    }
-  }
-}
-
 .buttons {
   display: flex;
 
diff --git a/packages/app-lib/src/api/mod.rs b/packages/app-lib/src/api/mod.rs
index 421d805c1f..169fc40c29 100644
--- a/packages/app-lib/src/api/mod.rs
+++ b/packages/app-lib/src/api/mod.rs
@@ -10,6 +10,7 @@ pub mod mr_auth;
 pub mod pack;
 pub mod process;
 pub mod profile;
+pub mod screenshots;
 pub mod settings;
 pub mod tags;
 pub mod worlds;
diff --git a/packages/app-lib/src/api/screenshots.rs b/packages/app-lib/src/api/screenshots.rs
new file mode 100644
index 0000000000..0613ce93ea
--- /dev/null
+++ b/packages/app-lib/src/api/screenshots.rs
@@ -0,0 +1,128 @@
+use crate::profile::get_full_path;
+use crate::util::io::{metadata, read_dir};
+use base64::{Engine, engine::general_purpose::STANDARD};
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+use std::ffi::OsStr;
+use std::path::{Path, PathBuf};
+use tokio::fs::{canonicalize, read, remove_file};
+
+#[derive(Deserialize, Serialize, Debug, Clone)]
+pub struct Screenshot {
+    pub path: String,
+    pub creation_date: DateTime<Utc>,
+}
+
+pub async fn get_all_profile_screenshots(
+    profile_path: &str,
+) -> crate::Result<Vec<Screenshot>> {
+    let full = get_full_path(profile_path).await?;
+    get_all_screenshots_in_profile(&full).await
+}
+
+pub async fn delete_profile_screenshot(
+    profile_path: &str,
+    screenshot: &Screenshot,
+) -> crate::Result<bool> {
+    let full = get_full_path(profile_path).await?;
+    delete_screenshot_in_profile(&full, screenshot).await
+}
+
+async fn delete_screenshot_in_profile(
+    profile_dir: &Path,
+    screenshot: &Screenshot,
+) -> crate::Result<bool> {
+    if let Some(path) =
+        get_valid_screenshot_path(profile_dir, screenshot).await?
+    {
+        remove_file(path).await?;
+        Ok(true)
+    } else {
+        Ok(false)
+    }
+}
+
+async fn get_all_screenshots_in_profile(
+    profile_dir: &Path,
+) -> crate::Result<Vec<Screenshot>> {
+    let screenshots_dir = profile_dir.join("screenshots");
+    if metadata(&screenshots_dir).await.is_err() {
+        return Ok(Vec::new());
+    }
+
+    let mut dir = read_dir(&screenshots_dir).await?;
+    let mut screenshots = Vec::new();
+
+    while let Some(entry) = dir.next_entry().await? {
+        if !entry.file_type().await?.is_file() {
+            continue;
+        }
+
+        let path = entry.path();
+        if path
+            .extension()
+            .and_then(OsStr::to_str)
+            .map(|ext| ext.eq_ignore_ascii_case("png"))
+            != Some(true)
+        {
+            continue;
+        }
+
+        let abs_path: PathBuf = canonicalize(&path).await?;
+        let full_path = abs_path.to_string_lossy().into_owned();
+
+        let meta = entry.metadata().await?;
+        let created_time = meta.created().unwrap_or(meta.modified()?);
+        let creation_date = DateTime::<Utc>::from(created_time);
+
+        screenshots.push(Screenshot {
+            path: full_path,
+            creation_date,
+        });
+    }
+
+    screenshots.sort_by_key(|s| s.creation_date);
+    Ok(screenshots)
+}
+
+pub async fn get_screenshot_data(
+    profile_dir: &Path,
+    screenshot: &Screenshot,
+) -> crate::Result<Option<String>> {
+    if let Some(valid_path) =
+        get_valid_screenshot_path(profile_dir, screenshot).await?
+    {
+        let bytes = read(&valid_path).await?;
+        let encoded = STANDARD.encode(&bytes);
+        Ok(Some(encoded))
+    } else {
+        Ok(None)
+    }
+}
+
+pub async fn get_valid_screenshot_path(
+    profile_dir: &Path,
+    screenshot: &Screenshot,
+) -> crate::Result<Option<PathBuf>> {
+    let screenshots_dir = profile_dir.join("screenshots");
+    if metadata(&screenshots_dir).await.is_err() {
+        return Ok(None);
+    }
+
+    let canonical_dir = match canonicalize(&screenshots_dir).await {
+        Ok(d) => d,
+        Err(_) => return Ok(None),
+    };
+
+    let requested = PathBuf::from(&screenshot.path);
+    let canonical_req = match canonicalize(&requested).await {
+        Ok(p) => p,
+        Err(_) => return Ok(None),
+    };
+
+    if canonical_req.starts_with(&canonical_dir) {
+        Ok(Some(canonical_req))
+    } else {
+        Ok(None)
+    }
+}
diff --git a/packages/app-lib/src/event/mod.rs b/packages/app-lib/src/event/mod.rs
index 0c2b22df8b..b72ce89275 100644
--- a/packages/app-lib/src/event/mod.rs
+++ b/packages/app-lib/src/event/mod.rs
@@ -1,4 +1,5 @@
 //! Theseus state management system
+use crate::screenshots::Screenshot;
 use ariadne::users::{UserId, UserStatus};
 use chrono::{DateTime, Utc};
 use dashmap::DashMap;
@@ -252,6 +253,10 @@ pub enum ProfilePayloadType {
         port: u16,
         timestamp: DateTime<Utc>,
     },
+    ScreenshotChanged {
+        file_exists: bool,
+        screenshot: Screenshot,
+    },
     Edited,
     Removed,
 }
diff --git a/packages/app-lib/src/state/fs_watcher.rs b/packages/app-lib/src/state/fs_watcher.rs
index 347a7a38e4..fbb27e45be 100644
--- a/packages/app-lib/src/state/fs_watcher.rs
+++ b/packages/app-lib/src/state/fs_watcher.rs
@@ -1,10 +1,13 @@
+use std::path::Path;
 use crate::State;
 use crate::event::ProfilePayloadType;
 use crate::event::emit::{emit_profile, emit_warning};
+use crate::screenshots::Screenshot;
 use crate::state::{
     DirectoryInfo, ProfileInstallStage, ProjectType, attached_world_data,
 };
 use crate::worlds::WorldType;
+use chrono::{DateTime, Utc};
 use futures::{SinkExt, StreamExt, channel::mpsc::channel};
 use notify::{RecommendedWatcher, RecursiveMode};
 use notify_debouncer_mini::{DebounceEventResult, Debouncer, new_debouncer};
@@ -116,6 +119,34 @@ pub async fn init_watcher() -> crate::Result<FileWatcher> {
                                         });
                                     }
                                     Some(ProfilePayloadType::WorldUpdated { world })
+                                } else if first_file_name
+                                    .filter(|x| *x == "screenshots")
+                                    .is_some()
+                                    && e.path
+                                    .extension()
+                                    .and_then(|ext| ext.to_str())
+                                    .filter(|s| *s == "png")
+                                    .is_some()
+                                {
+                                    let path_str = e.path.to_string_lossy().into_owned();
+                                    let file_exists = Path::new(&e.path).exists();
+
+                                    let creation_date = if file_exists {
+                                        let meta = std::fs::metadata(&e.path).unwrap();
+                                        let created_time = meta.created()
+                                            .unwrap_or_else(|_| meta.modified().unwrap());
+                                        DateTime::<Utc>::from(created_time)
+                                    } else { 
+                                        Utc::now()
+                                    };
+
+                                    Some(ProfilePayloadType::ScreenshotChanged {
+                                        file_exists,
+                                        screenshot: Screenshot {
+                                            path: path_str,
+                                            creation_date,
+                                        },
+                                    })
                                 } else if first_file_name
                                     .filter(|x| *x == "saves")
                                     .is_none()
@@ -177,6 +208,7 @@ pub(crate) async fn watch_profile(
         for sub_path in ProjectType::iterator().map(|x| x.get_folder()).chain([
             "crash-reports",
             "saves",
+            "screenshots",
             "servers.dat",
         ]) {
             let full_path = profile_path.join(sub_path);
diff --git a/packages/ui/eslint.config.mjs b/packages/ui/eslint.config.mjs
index 05f559424b..76db133ffb 100644
--- a/packages/ui/eslint.config.mjs
+++ b/packages/ui/eslint.config.mjs
@@ -17,6 +17,7 @@ export default createConfigForNuxt().append([
     rules: {
       'vue/html-self-closing': 'off',
       'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
 ])
diff --git a/packages/ui/src/components/base/AutoLink.vue b/packages/ui/src/components/base/AutoLink.vue
index 3c883fc32a..f6413205ec 100644
--- a/packages/ui/src/components/base/AutoLink.vue
+++ b/packages/ui/src/components/base/AutoLink.vue
@@ -12,7 +12,6 @@
 
 <script setup lang="ts">
 defineProps<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   to: any
 }>()
 
diff --git a/packages/ui/src/components/content/ContentListItem.vue b/packages/ui/src/components/content/ContentListItem.vue
index 8592bb9bba..9b8cb3a079 100644
--- a/packages/ui/src/components/content/ContentListItem.vue
+++ b/packages/ui/src/components/content/ContentListItem.vue
@@ -9,14 +9,14 @@ export interface ContentCreator {
   type: 'user' | 'organization'
   id: string
   link?: string | RouteLocationRaw
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   linkProps?: any
 }
 
 export interface ContentProject {
   id: string
   link?: string | RouteLocationRaw
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   linkProps?: any
 }
 
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 901b482c6d..02af7b312b 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -60,6 +60,7 @@ export { default as ContentListPanel } from './content/ContentListPanel.vue'
 
 // Modals
 export { default as NewModal } from './modal/NewModal.vue'
+export { default as ImagePreviewModal } from './modal/ImagePreviewModal.vue'
 export { default as Modal } from './modal/Modal.vue'
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
 export { default as ShareModal } from './modal/ShareModal.vue'
diff --git a/packages/ui/src/components/modal/ImagePreviewModal.vue b/packages/ui/src/components/modal/ImagePreviewModal.vue
new file mode 100644
index 0000000000..a5d928bab6
--- /dev/null
+++ b/packages/ui/src/components/modal/ImagePreviewModal.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computedAsync } from '@vueuse/core'
+import { ref, defineProps, defineExpose, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import {
+  ContractIcon,
+  ExpandIcon,
+  ExternalIcon,
+  LeftArrowIcon,
+  RightArrowIcon,
+  XIcon,
+} from '@modrinth/assets'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import Button from '../base/Button.vue'
+import { pxOf } from '@modrinth/utils'
+
+export type GalleryEntry = {
+  src: string
+  key: GalleryKey
+  alt: string
+}
+export type NavigationFunction = (key: GalleryKey) => GalleryEntry | Promise<GalleryEntry>
+export type OpenExternallyFunction = (src: string, key: GalleryKey) => void | Promise<void>
+export type GalleryKey = any & {
+  title?: string
+  description?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    next: NavigationFunction
+    prev: NavigationFunction
+    openExternally: OpenExternallyFunction
+    openExternallyTooltip?: string
+    disableZoom?: boolean
+  }>(),
+  {
+    disableZoom: false,
+    openExternallyTooltip: 'Open externally',
+  },
+)
+
+const src = ref<string>()
+const alt = ref<string>()
+const key = ref<GalleryKey>()
+const shown = ref(false)
+const scale = ref(1)
+const imageRef = ref<HTMLImageElement | null>(null)
+
+function show(_src: string, _alt: string, _key: GalleryKey) {
+  shown.value = true
+  src.value = _src
+  alt.value = _alt
+  key.value = _key
+}
+function hide() {
+  shown.value = false
+}
+
+const nextImageData = computedAsync(() => props.next(key.value))
+const prevImageData = computedAsync(() => props.prev(key.value))
+
+async function nextImage() {
+  const data = nextImageData.value
+  if (data) show(data.src, data.alt, data.key)
+}
+async function prevImage() {
+  const data = prevImageData.value
+  if (data) show(data.src, data.alt, data.key)
+}
+async function handleOpenExternally() {
+  if (src.value && key.value) await props.openExternally(src.value, key.value)
+}
+
+async function toggleZoom() {
+  if (scale.value === 1 && imageRef.value) {
+    await nextTick()
+
+    const vpW = window.innerWidth
+    const vpH = window.innerHeight
+
+    const gapPx = pxOf('--gap-lg')
+
+    const rect = imageRef.value.getBoundingClientRect()
+    const baseW = rect.width
+    const baseH = rect.height
+
+    const maxScaleW = (vpW - 2 * gapPx) / baseW
+    const maxScaleH = (vpH - 2 * gapPx) / baseH
+
+    scale.value = Math.min(maxScaleW, maxScaleH, 3)
+  } else {
+    scale.value = 1
+  }
+}
+
+function keyListener(e: KeyboardEvent) {
+  if (!shown.value) return
+
+  e.preventDefault()
+
+  switch (e.key) {
+    case 'Escape':
+      hide()
+      break
+    case 'ArrowLeft':
+      prevImage()
+      break
+    case 'ArrowRight':
+      nextImage()
+      break
+  }
+}
+
+defineExpose({ show, hide, nextImage, prevImage })
+
+onMounted(() => {
+  document.addEventListener('keydown', keyListener)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', keyListener)
+})
+</script>
+
+<template>
+  <div
+    v-if="shown"
+    class="fixed inset-0 z-20 flex items-center justify-center bg-black/70"
+    @click="hide"
+  >
+    <img
+      v-if="src"
+      ref="imageRef"
+      :src="src"
+      :alt="alt"
+      class="object-contain origin-[center_center] transform transition-transform duration-300 ease-in-out rounded-[var(--radius-lg)]"
+      style="
+        max-width: calc(100vw - 2 * var(--gap-lg));
+        max-height: calc(100vh - 2 * var(--gap-lg));
+      "
+      :style="{ transform: `scale(${scale})` }"
+      @click.stop
+    />
+
+    <div
+      class="fixed left-1/2 bottom-4 -translate-x-1/2 flex flex-col items-center gap-[var(--gap-sm)] transition-all duration-250 ease-in-out group"
+      @click.stop
+    >
+      <div
+        v-if="key?.title || key?.description"
+        class="flex flex-col max-w-[40rem] mb-1 gap-2 transition-all duration-250 ease-in-out group-hover:opacity-100 opacity-0 group-hover:translate-y-0 translate-y-5 group-hover:scale-100 scale-80"
+      >
+        <h2
+          v-if="key?.title"
+          class="text-shadow text-[var(--dark-color-text-dark)] text-xl text-center m-0"
+        >
+          {{ key.title }}
+        </h2>
+        <p
+          v-if="key?.description"
+          class="text-shadow text-[var(--dark-color-text)] m-0 text-center"
+        >
+          {{ key.description }}
+        </p>
+      </div>
+
+      <div
+        class="card !p-3 transition-all duration-250 ease-in-out group-hover:opacity-100 opacity-40 group-hover:translate-y-0 translate-y-1 group-hover:scale-100 scale-90"
+      >
+        <div class="flex items-center gap-2">
+          <ButtonStyled v-tooltip="'Close'" circular icon-only @click="hide">
+            <Button><XIcon /><span class="sr-only">Close</span></Button>
+          </ButtonStyled>
+
+          <ButtonStyled
+            v-tooltip="openExternallyTooltip"
+            circular
+            icon-only
+            @click="handleOpenExternally"
+          >
+            <Button
+              ><ExternalIcon /><span class="sr-only">{{ openExternallyTooltip }}</span></Button
+            >
+          </ButtonStyled>
+
+          <template v-if="!disableZoom">
+            <ButtonStyled v-tooltip="'Toggle zoom'" circular icon-only @click="toggleZoom">
+              <Button>
+                <ExpandIcon v-if="scale <= 1" /><ContractIcon v-else />
+                <span class="sr-only">Toggle zoom</span>
+              </Button>
+            </ButtonStyled>
+          </template>
+
+          <template v-if="prevImageData">
+            <ButtonStyled v-tooltip="'Previous'" circular icon-only @click="prevImage">
+              <Button><LeftArrowIcon /><span class="sr-only">Previous</span></Button>
+            </ButtonStyled>
+          </template>
+
+          <template v-if="nextImageData">
+            <ButtonStyled v-tooltip="'Next'" circular icon-only @click="nextImage">
+              <Button><RightArrowIcon /><span class="sr-only">Next</span></Button>
+            </ButtonStyled>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text-shadow {
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 1)) drop-shadow(0 0 4px rgba(0, 0, 0, 1));
+}
+</style>
diff --git a/packages/ui/src/components/modal/TabbedModal.vue b/packages/ui/src/components/modal/TabbedModal.vue
index bc3f2f763b..a5cd099bba 100644
--- a/packages/ui/src/components/modal/TabbedModal.vue
+++ b/packages/ui/src/components/modal/TabbedModal.vue
@@ -12,7 +12,6 @@ export type Tab<Props> = {
 }
 
 defineProps<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tabs: Tab<any>[]
 }>()
 
diff --git a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
index 1e99f94e43..7f64e9a022 100644
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -94,7 +94,7 @@ defineProps<{
     loaders: string[]
     client_side: EnvironmentValue
     server_side: EnvironmentValue
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
     versions: any[]
   }
   tags: {
diff --git a/packages/ui/src/components/search/BrowseFiltersPanel.vue b/packages/ui/src/components/search/BrowseFiltersPanel.vue
index b2a6ec3df2..dc552b6198 100644
--- a/packages/ui/src/components/search/BrowseFiltersPanel.vue
+++ b/packages/ui/src/components/search/BrowseFiltersPanel.vue
@@ -69,7 +69,6 @@ const props = defineProps<{
 }>()
 
 const filters = computed(() => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const filters: FilterType<any>[] = [
     {
       id: 'platform',
diff --git a/packages/ui/src/composables/how-ago.ts b/packages/ui/src/composables/how-ago.ts
index a9ef7e5200..bf5a1a85d4 100644
--- a/packages/ui/src/composables/how-ago.ts
+++ b/packages/ui/src/composables/how-ago.ts
@@ -3,7 +3,6 @@ import type { IntlController } from '@vintl/vintl/controller'
 import { useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const formatters = new WeakMap<IntlController<any>, Formatter>()
 
 export function useRelativeTime(): Formatter {
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index 56f34523a5..9a4d02fe79 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -341,3 +341,14 @@ export const getArrayOrString = (x: string[] | string): string[] => {
     return x
   }
 }
+
+export function pxOf(varName: string) {
+  const el = document.createElement('div')
+  el.style.visibility = 'hidden'
+  el.style.position = 'absolute'
+  el.style.marginLeft = `var(${varName})`
+  document.body.appendChild(el)
+  const px = parseFloat(getComputedStyle(el).marginLeft)
+  document.body.removeChild(el)
+  return px
+}