diff --git a/frontend/app.vue b/frontend/app.vue
index 765340146..bd91bc4cd 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -14,6 +14,7 @@
       <ModalCommandPalette
         @closeModal="handleCloseModal"
         :isOpen="modalIsOpen"
+        :modalName="modalName"
       />
       <NuxtPage />
     </NuxtLayout>
@@ -28,15 +29,18 @@ useHead({
     return titleChunk ? `${titleChunk} • activist` : "activist";
   },
 });
-
+const modals = useModals();
+const modalName = "generalModal";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 
 const { isMacOS } = useDevice();
diff --git a/frontend/components/card/CardDetails.vue b/frontend/components/card/CardDetails.vue
index 935b032f2..814922ca5 100644
--- a/frontend/components/card/CardDetails.vue
+++ b/frontend/components/card/CardDetails.vue
@@ -46,17 +46,22 @@
 <script setup lang="ts">
 import type { Event } from "~/types/events/event";
 
-const props = defineProps<{
+defineProps<{
   event?: Event;
 }>();
 
+const modals = useModals();
+const modalName = "ModalEditPageText";
+
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/about/CardAboutEvent.vue b/frontend/components/card/about/CardAboutEvent.vue
index 34cfd8e12..c2d1efb93 100644
--- a/frontend/components/card/about/CardAboutEvent.vue
+++ b/frontend/components/card/about/CardAboutEvent.vue
@@ -93,13 +93,17 @@ function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
 
+const modals = useModals();
+const modalName = "ModalEditAboutEvent";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/about/CardAboutGroup.vue b/frontend/components/card/about/CardAboutGroup.vue
index d6804c5c4..83c702444 100644
--- a/frontend/components/card/about/CardAboutGroup.vue
+++ b/frontend/components/card/about/CardAboutGroup.vue
@@ -119,13 +119,17 @@ function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
 
+const modals = useModals();
+const modalName = "ModalEditAboutGroup";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/about/CardAboutOrganization.vue b/frontend/components/card/about/CardAboutOrganization.vue
index 3b5d368d0..599d203cb 100644
--- a/frontend/components/card/about/CardAboutOrganization.vue
+++ b/frontend/components/card/about/CardAboutOrganization.vue
@@ -118,13 +118,17 @@ function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
 
+const modals = useModals();
+const modalName = "ModalEditAboutOrganization";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/get-involved/CardGetInvolvedEvent.vue b/frontend/components/card/get-involved/CardGetInvolvedEvent.vue
index 873c521be..8090d044f 100644
--- a/frontend/components/card/get-involved/CardGetInvolvedEvent.vue
+++ b/frontend/components/card/get-involved/CardGetInvolvedEvent.vue
@@ -52,13 +52,17 @@ defineProps<{
   disclaimer?: string;
 }>();
 
+const modals = useModals();
+const modalName = "ModalEditAboutEvent";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/get-involved/CardGetInvolvedGroup.vue b/frontend/components/card/get-involved/CardGetInvolvedGroup.vue
index 197e6f538..91658b8a1 100644
--- a/frontend/components/card/get-involved/CardGetInvolvedGroup.vue
+++ b/frontend/components/card/get-involved/CardGetInvolvedGroup.vue
@@ -51,13 +51,17 @@ defineProps<{
   disclaimer?: string;
 }>();
 
+const modals = useModals();
+const modalName = "ModalEditAboutGroup";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue b/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue
index e6b8baa3b..bcca4bed1 100644
--- a/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue
+++ b/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue
@@ -72,13 +72,17 @@ await organizationStore.fetchByID(id);
 
 const { organization } = organizationStore;
 
+const modals = useModals();
+const modalName = "ModalEditAboutOrganization";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/icon/IconOrganizationStatus.vue b/frontend/components/icon/IconOrganizationStatus.vue
index 5ccca89d2..56ee21d26 100644
--- a/frontend/components/icon/IconOrganizationStatus.vue
+++ b/frontend/components/icon/IconOrganizationStatus.vue
@@ -74,14 +74,17 @@ defineProps<{
   status: number;
   organization: Organization;
 }>();
-
+const modals = useModals();
+const modalName = "ModalOrganizationStatus";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/media/image-carousel/MediaImageCarousel.vue b/frontend/components/media/image-carousel/MediaImageCarousel.vue
index 763810e5a..5a8334337 100644
--- a/frontend/components/media/image-carousel/MediaImageCarousel.vue
+++ b/frontend/components/media/image-carousel/MediaImageCarousel.vue
@@ -52,15 +52,18 @@ const imageUrls = [
   `${GET_ORGANIZED_IMAGE_URL}_${imageColor}.png`,
   `${GROW_ORGANIZATION_IMAGE_URL}_${imageColor}.png`,
 ];
-
+const modals = useModals();
+const modalName = "ModalUploadImages";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
 
diff --git a/frontend/components/media/image-carousel/MediaImageCarouselFull.vue b/frontend/components/media/image-carousel/MediaImageCarouselFull.vue
index 9e2f06498..9f10f73f7 100644
--- a/frontend/components/media/image-carousel/MediaImageCarouselFull.vue
+++ b/frontend/components/media/image-carousel/MediaImageCarouselFull.vue
@@ -18,13 +18,18 @@
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
 
+const modals = useModals();
+const modalName = "ModalMediaImage";
+
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/modal/ModalBase.vue b/frontend/components/modal/ModalBase.vue
index dc31320d6..4a3ee7e44 100644
--- a/frontend/components/modal/ModalBase.vue
+++ b/frontend/components/modal/ModalBase.vue
@@ -1,9 +1,5 @@
 <template>
-  <Dialog
-    @close="closeModal()"
-    class="relative z-50"
-    :open="modalShouldClose == false ? modalIsOpen : false"
-  >
+  <Dialog @close="closeModal()" class="relative z-50" :open="modalIsOpen">
     <div
       @click="closeModal()"
       class="fixed inset-0 cursor-pointer bg-light-layer-0/95 dark:bg-dark-layer-0/95"
@@ -66,15 +62,18 @@ import { IconMap } from "~/types/icon-map";
 const props = defineProps<{
   isOpen: boolean;
   imageModal?: boolean;
+  modalName: string;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = props.modalName;
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const closeModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/ModalMediaImageCarousel.vue b/frontend/components/modal/ModalMediaImageCarousel.vue
index 24df87ebb..371c2bfa4 100644
--- a/frontend/components/modal/ModalMediaImageCarousel.vue
+++ b/frontend/components/modal/ModalMediaImageCarousel.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <MediaImageCarousel :fullscreen="true" />
   </ModalBase>
@@ -12,13 +13,15 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalMediaImage";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/ModalOrganizationStatus.vue b/frontend/components/modal/ModalOrganizationStatus.vue
index 93cb6a306..a4fe67eb5 100644
--- a/frontend/components/modal/ModalOrganizationStatus.vue
+++ b/frontend/components/modal/ModalOrganizationStatus.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="max-h-[80vh] px-2 pb-2 pt-1 lg:px-4 lg:pb-4 lg:pt-2">
       <DialogTitle class="font-display">
@@ -40,14 +41,16 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalOrganizationStatus";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 
 const modalOrganizationStatusData = inject<{
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 5e4920325..0f8a41215 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="px-2 pb-2 pt-1 lg:px-4 lg:pb-4 lg:pt-2">
       <DialogTitle class="font-display">
@@ -211,15 +212,16 @@ const props = defineProps<{
   user?: User;
   isOpen: boolean;
 }>();
+const modals = useModals();
+const modalName = "ModalSharePage";
+let modalIsOpen = computed(() => props.isOpen);
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 
 const getEntityType = () => {
diff --git a/frontend/components/modal/command-palette/ModalCommandPalette.vue b/frontend/components/modal/command-palette/ModalCommandPalette.vue
index 1a10dec3a..ab80dbda8 100644
--- a/frontend/components/modal/command-palette/ModalCommandPalette.vue
+++ b/frontend/components/modal/command-palette/ModalCommandPalette.vue
@@ -2,7 +2,8 @@
   <!-- TODO: Transition / animation? Maybe do this in ModalBase? -->
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <!-- MARK: Search Box -->
     <div
@@ -26,7 +27,6 @@
         />
       </div>
     </div>
-
     <!-- MARK: Search Results -->
     <!-- TODO: <CommandPaletteSearchResults results='searchResults' />. -->
     <div v-if="searchTerm != ''">searchTerm: {{ searchTerm }}</div>
@@ -127,18 +127,26 @@ import { IconMap } from "~/types/icon-map";
 // need is the 'closeModal' emit in 'handleCloseModal'.
 const props = defineProps<{
   isOpen: boolean;
+  modalName: string;
 }>();
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+
+const localePath = useLocalePath();
+
+const modals = useModals();
+const modalName = props.modalName;
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
+
+function handleCloseModal() {
+  modals.closeModal(modalName);
+}
 
 const searchTerm = ref("");
 // const searchResults = []
 
-const emit = defineEmits(["closeModal"]);
-const handleCloseModal = () => {
-  emit("closeModal");
-};
-
 // Watch the searchTerm ref variable.
 watch(searchTerm, (newVal) => {
   console.log("searchTerm changed: " + newVal);
diff --git a/frontend/components/modal/edit/ModalEditFaqEntry.vue b/frontend/components/modal/edit/ModalEditFaqEntry.vue
index c7afac1de..84d842c16 100644
--- a/frontend/components/modal/edit/ModalEditFaqEntry.vue
+++ b/frontend/components/modal/edit/ModalEditFaqEntry.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="flex flex-col space-y-7">
       <div
@@ -70,13 +71,15 @@ const translatedTexts = computed(() => {
   });
 });
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalEditFAQEntry";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/edit/about/ModalEditAboutEvent.vue b/frontend/components/modal/edit/about/ModalEditAboutEvent.vue
index 2f843c82b..482664338 100644
--- a/frontend/components/modal/edit/about/ModalEditAboutEvent.vue
+++ b/frontend/components/modal/edit/about/ModalEditAboutEvent.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="flex flex-col space-y-7">
       <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
@@ -78,13 +79,15 @@ async function handleSubmit() {
   }
 }
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalEditAboutEvent";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/edit/about/ModalEditAboutGroup.vue b/frontend/components/modal/edit/about/ModalEditAboutGroup.vue
index c95debec1..7dd4b277b 100644
--- a/frontend/components/modal/edit/about/ModalEditAboutGroup.vue
+++ b/frontend/components/modal/edit/about/ModalEditAboutGroup.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="flex flex-col space-y-7">
       <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
@@ -78,13 +79,15 @@ async function handleSubmit() {
   }
 }
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalEditAboutGroup";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue b/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue
index e21606227..80dd33749 100644
--- a/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue
+++ b/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="flex flex-col space-y-7">
       <div class="flex flex-col space-y-3 text-light-text dark:text-dark-text">
@@ -87,13 +88,15 @@ async function handleSubmit() {
   }
 }
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalEditAboutOrganization";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/image/ModalImage.vue b/frontend/components/modal/image/ModalImage.vue
index 4e07466cb..cf7f1f2e9 100644
--- a/frontend/components/modal/image/ModalImage.vue
+++ b/frontend/components/modal/image/ModalImage.vue
@@ -1,8 +1,9 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
     :imageModal="true"
+    :modalName="modalName"
   >
     <img
       v-if="$colorMode.value == 'light'"
@@ -26,13 +27,15 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalImage";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/qr-code/ModalQRCode.vue b/frontend/components/modal/qr-code/ModalQRCode.vue
index 403c7c7e4..323bd3f21 100644
--- a/frontend/components/modal/qr-code/ModalQRCode.vue
+++ b/frontend/components/modal/qr-code/ModalQRCode.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <DialogTitle class="flex justify-between font-display">
       <p class="md:responsive-h2 text-3xl font-bold">
@@ -136,15 +137,12 @@ const props = defineProps<{
 }>();
 
 const { linkURL } = useLinkURL(props);
+const modals = useModals();
+const modalName = "ModalsQRCode";
+const modalIsOpen = computed(() => modals.modals[modalName]?.isOpen ?? false);
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
-
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 
 const showTooltip = ref(false);
diff --git a/frontend/components/modal/qr-code/ModalQRCodeBtn.vue b/frontend/components/modal/qr-code/ModalQRCodeBtn.vue
index e4ad29544..41c0a5389 100644
--- a/frontend/components/modal/qr-code/ModalQRCodeBtn.vue
+++ b/frontend/components/modal/qr-code/ModalQRCodeBtn.vue
@@ -80,13 +80,17 @@ defineProps<{
   type: "icon" | "meta-tag";
 }>();
 
+const modals = useModals();
+const modalName = "ModalsQRCode";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/modal/upload-images/ModalUploadImages.vue b/frontend/components/modal/upload-images/ModalUploadImages.vue
index 4bd393413..885dd2aad 100644
--- a/frontend/components/modal/upload-images/ModalUploadImages.vue
+++ b/frontend/components/modal/upload-images/ModalUploadImages.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div>
       <DialogTitle>
@@ -112,13 +113,11 @@ const props = withDefaults(defineProps<Props>(), {
   uploadLimit: 10,
 });
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalUploadImages";
+const modalIsOpen = computed(() => modals.modals[modalName]?.isOpen ?? false);
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/sidebar/left/SidebarLeftIndex.vue b/frontend/components/sidebar/left/SidebarLeftIndex.vue
index 2df3e35a2..a69de145e 100644
--- a/frontend/components/sidebar/left/SidebarLeftIndex.vue
+++ b/frontend/components/sidebar/left/SidebarLeftIndex.vue
@@ -107,14 +107,17 @@ const sidebarTypeToDisplay = computed(() => props.sidebarType);
 
 const sidebar = useSidebar();
 const menuEntriesState = useMenuEntriesState();
-
+const modals = useModals();
+const modalName = "ModalUploadImages";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultEvent.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultEvent.vue
index 3b45cc48d..2a046f04d 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultEvent.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultEvent.vue
@@ -50,13 +50,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultGroup.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultGroup.vue
index f458f6190..e6928996a 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultGroup.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultGroup.vue
@@ -55,13 +55,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultOrganization.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultOrganization.vue
index 7a77d786b..aac2e023f 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultOrganization.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultOrganization.vue
@@ -55,13 +55,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultResource.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultResource.vue
index 572fdbe1d..77871ca5d 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultResource.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultResource.vue
@@ -42,13 +42,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultUser.vue b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultUser.vue
index 3cad6269f..00dca7b4c 100644
--- a/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultUser.vue
+++ b/frontend/components/tooltip/menu-search-result/TooltipMenuSearchResultUser.vue
@@ -42,13 +42,17 @@ defineProps<{
 const emit = defineEmits(["tab"]);
 const { handleTabPress } = useTabNavigationEmit(emit);
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/docs/get-active.vue b/frontend/pages/docs/get-active.vue
index 72b493c01..fdc05bd5f 100644
--- a/frontend/pages/docs/get-active.vue
+++ b/frontend/pages/docs/get-active.vue
@@ -126,13 +126,18 @@
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
 
+const modals = useModals();
+const modalName = "ModalImage";
+
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/docs/get-organized.vue b/frontend/pages/docs/get-organized.vue
index 17154358e..8c32a91dc 100644
--- a/frontend/pages/docs/get-organized.vue
+++ b/frontend/pages/docs/get-organized.vue
@@ -99,13 +99,17 @@
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
 
+const modals = useModals();
+const modalName = "ModalImage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/docs/grow-organization.vue b/frontend/pages/docs/grow-organization.vue
index cf6b102e2..12d8d91fb 100644
--- a/frontend/pages/docs/grow-organization.vue
+++ b/frontend/pages/docs/grow-organization.vue
@@ -106,13 +106,17 @@
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
 
+const modals = useModals();
+const modalName = "ModalImage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
index 85084fa0c..85b8f901c 100644
--- a/frontend/pages/events/[id]/about.vue
+++ b/frontend/pages/events/[id]/about.vue
@@ -122,13 +122,17 @@ onUnmounted(() => {
   window.removeEventListener("resize", updateShareBtnLabel);
 });
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue
index abd75e5b7..5c238fd39 100644
--- a/frontend/pages/organizations/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/about.vue
@@ -122,13 +122,17 @@ onUnmounted(() => {
   window.removeEventListener("resize", updateShareBtnLabel);
 });
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/pages/organizations/[id]/groups/[id]/about.vue b/frontend/pages/organizations/[id]/groups/[id]/about.vue
index fa2b8a2b5..905578b28 100644
--- a/frontend/pages/organizations/[id]/groups/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/groups/[id]/about.vue
@@ -134,13 +134,17 @@ onUnmounted(() => {
   window.removeEventListener("resize", updateShareBtnLabel);
 });
 
+const modals = useModals();
+const modalName = "ModalSharePage";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/stores/modals.ts b/frontend/stores/modals.ts
new file mode 100644
index 000000000..d47fe7f22
--- /dev/null
+++ b/frontend/stores/modals.ts
@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+
+interface Modal {
+  isOpen: boolean;
+}
+
+export const useModals = defineStore("modals", {
+  state: () => ({
+    modals: {} as Record<string, Modal>,
+  }),
+
+  actions: {
+    openModal(modalName: string) {
+      const modals = this.modals;
+      for (const key in modals) {
+        modals[key].isOpen = false;
+      }
+      modals[modalName] = { isOpen: true };
+    },
+
+    closeModal(modalName: string) {
+      if (this.modals[modalName]) {
+        this.modals[modalName].isOpen = false;
+      }
+    },
+  },
+});