diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a4b0086..5cfbdda 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,6 +3,7 @@
     <AppShell>
       <RouterView />
     </AppShell>
+    <ImageViewer v-if="modal.isOpen" @close="modal.close()" />
     <AppSnackbar ref="snackbar" />
   </v-app>
 </template>
@@ -11,7 +12,10 @@
 import { onMounted, ref } from 'vue'
 import AppShell from './components/AppShell.vue'
 import AppSnackbar from './components/AppSnackbar.vue'
+import ImageViewer from './components/modal/ImageViewer.vue'
+import { useModalStore } from './stores/modal.js'
 
+const modal = useModalStore()
 const snackbar = ref(null)
 
 onMounted(() => {
diff --git a/frontend/src/views/ArtistView.vue b/frontend/src/views/ArtistView.vue
index 7a363f2..f985e10 100644
--- a/frontend/src/views/ArtistView.vue
+++ b/frontend/src/views/ArtistView.vue
@@ -104,11 +104,13 @@
 import { computed, watch } from 'vue'
 import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useArtistStore } from '../stores/artist.js'
+import { useModalStore } from '../stores/modal.js'
 import MasonryGrid from '../components/discovery/MasonryGrid.vue'
 
 const route = useRoute()
 const router = useRouter()
 const store = useArtistStore()
+const modal = useModalStore()
 
 const slug = computed(() => route.params.slug)
 
@@ -136,7 +138,7 @@ const sparkPoints = computed(() => {
 })
 
 function openImage(id) {
-  router.push({ name: 'gallery', query: { image: id } })
+  modal.open(id)
 }
 function openTag(tagId) {
   router.push({ name: 'gallery', query: { tag_id: tagId } })
diff --git a/frontend/src/views/GalleryView.vue b/frontend/src/views/GalleryView.vue
index 2e2933a..baaa959 100644
--- a/frontend/src/views/GalleryView.vue
+++ b/frontend/src/views/GalleryView.vue
@@ -18,10 +18,6 @@
       <TimelineSidebar v-if="store.images.length > 0" class="fc-gallery-layout__sidebar" />
     </div>
 
-    <ImageViewer
-      v-if="modal.currentImageId !== null"
-      @close="closeImage"
-    />
     <BulkEditorPanel />
   </v-container>
 </template>
@@ -35,7 +31,6 @@ import GalleryGrid from '../components/gallery/GalleryGrid.vue'
 import TimelineSidebar from '../components/gallery/TimelineSidebar.vue'
 import EmptyState from '../components/gallery/EmptyState.vue'
 import PostInfoHeader from '../components/gallery/PostInfoHeader.vue'
-import ImageViewer from '../components/modal/ImageViewer.vue'
 import BulkEditorPanel from '../components/gallery/BulkEditorPanel.vue'
 import { useGallerySelectionStore } from '../stores/gallerySelection.js'
 
diff --git a/frontend/src/views/ShowcaseView.vue b/frontend/src/views/ShowcaseView.vue
index 7a4fa64..df97f7c 100644
--- a/frontend/src/views/ShowcaseView.vue
+++ b/frontend/src/views/ShowcaseView.vue
@@ -26,16 +26,16 @@
 
 <script setup>
 import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useShowcaseStore } from '../stores/showcase.js'
+import { useModalStore } from '../stores/modal.js'
 import MasonryGrid from '../components/discovery/MasonryGrid.vue'
 
 const store = useShowcaseStore()
-const router = useRouter()
+const modal = useModalStore()
 
 onMounted(() => { if (store.images.length === 0) store.fetchPage() })
 
 function openImage(id) {
-  router.push({ name: 'gallery', query: { image: id } })
+  modal.open(id)
 }
 </script>