diff --git a/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue b/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
index dc2fb4950..9c043c4df 100644
--- a/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
+++ b/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
@@ -13,9 +13,9 @@
                 alt="Arrow down (expand)"
             />
         </div>
-        <BucketsDropdown 
-            v-if="isDropdownShown" 
-            :show-scrollbar="showScrollbar" 
+        <BucketsDropdown
+            v-if="isDropdownShown"
+            :show-scrollbar="showScrollbar"
         />
     </div>
 </template>
@@ -24,6 +24,7 @@
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import BucketsDropdown from '@/components/accessGrants/permissions/BucketsDropdown.vue';
 
@@ -43,14 +44,14 @@ export default class BucketsSelection extends Vue {
      * Toggles dropdown visibility.
      */
     public toggleDropdown(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_BUCKET_NAMES_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.BUCKET_NAMES);
     }
 
     /**
      * Indicates if dropdown is shown.
      */
     public get isDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isBucketNamesDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.BUCKET_NAMES;
     }
 
     /**
diff --git a/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue b/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue
index ec186bab2..c8f26355e 100644
--- a/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue
+++ b/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue
@@ -26,6 +26,7 @@
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import DurationPicker from '@/components/accessGrants/permissions/DurationPicker.vue';
 
@@ -65,7 +66,7 @@ export default class DurationSelection extends Vue {
      * Toggles duration picker.
      */
     public togglePicker(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_AG_DATEPICKER_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.AG_DATE_PICKER);
     }
 
     /**
@@ -79,7 +80,7 @@ export default class DurationSelection extends Vue {
      * Indicates if date picker is shown.
      */
     public get isDurationPickerVisible(): boolean {
-        return this.$store.state.appStateModule.appState.isAGDatePickerShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.AG_DATE_PICKER;
     }
 
     /**
diff --git a/web/satellite/src/components/account/SettingsArea.vue b/web/satellite/src/components/account/SettingsArea.vue
index 2025859f1..a49224792 100644
--- a/web/satellite/src/components/account/SettingsArea.vue
+++ b/web/satellite/src/components/account/SettingsArea.vue
@@ -87,10 +87,12 @@ import { computed, onMounted } from 'vue';
 
 import { USER_ACTIONS } from '@/store/modules/users';
 import { User } from '@/types/users';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useNotify, useStore } from '@/utils/hooks';
 import { useLoading } from '@/composables/useLoading';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 
@@ -120,35 +122,35 @@ const avatarLetter = computed((): string => {
  * Toggles enable MFA modal visibility.
  */
 function toggleEnableMFAModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_ENABLE_MFA_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enableMFA);
 }
 
 /**
  * Toggles disable MFA modal visibility.
  */
 function toggleDisableMFAModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_DISABLE_MFA_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.disableMFA);
 }
 
 /**
  * Toggles MFA recovery codes modal visibility.
  */
 function toggleMFACodesModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
 }
 
 /**
  * Opens change password popup.
  */
 function toggleChangePasswordModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.changePassword);
 }
 
 /**
  * Opens edit account info modal.
  */
 function toggleEditProfileModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.editProfile);
 }
 
 /**
diff --git a/web/satellite/src/components/account/billing/BillingArea.vue b/web/satellite/src/components/account/billing/BillingArea.vue
index 18d7f02a1..48852ed76 100644
--- a/web/satellite/src/components/account/billing/BillingArea.vue
+++ b/web/satellite/src/components/account/billing/BillingArea.vue
@@ -97,6 +97,7 @@ import { AccountBalance } from '@/types/payments';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import PeriodSelection from '@/components/account/billing/depositAndBillingHistory/PeriodSelection.vue';
 import SmallDepositHistory from '@/components/account/billing/depositAndBillingHistory/SmallDepositHistory.vue';
@@ -157,14 +158,14 @@ export default class BillingArea extends Vue {
      * Indicates if free credits dropdown shown.
      */
     public get isCreditsDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isFreeCreditsDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.FREE_CREDITS;
     }
 
     /**
      * Indicates if available balance dropdown shown.
      */
     public get isBalanceDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isAvailableBalanceDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.AVAILABLE_BALANCE;
     }
 
     /**
@@ -222,7 +223,7 @@ export default class BillingArea extends Vue {
      * Toggles available balance dropdown visibility.
      */
     public toggleBalanceDropdown(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.AVAILABLE_BALANCE);
     }
 
     /**
@@ -231,7 +232,7 @@ export default class BillingArea extends Vue {
     public closeDropdown(): void {
         if (!this.isCreditsDropdownShown && !this.isBalanceDropdownShown) return;
 
-        this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
     }
 
     /**
diff --git a/web/satellite/src/components/account/billing/billingTabs/Coupons.vue b/web/satellite/src/components/account/billing/billingTabs/Coupons.vue
index 600f1d63e..ebc4c2c27 100644
--- a/web/satellite/src/components/account/billing/billingTabs/Coupons.vue
+++ b/web/satellite/src/components/account/billing/billingTabs/Coupons.vue
@@ -53,8 +53,9 @@ import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { Coupon } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useNotify, useStore } from '@/utils/hooks';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VLoader from '@/components/common/VLoader.vue';
 
@@ -126,7 +127,7 @@ const expirationHelper = computed((): string => {
  */
 function toggleCreateModal(): void {
     analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_BILLING_ADD_COUPON_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newBillingAddCoupon);
 }
 
 /**
diff --git a/web/satellite/src/components/account/billing/coupons/CouponArea.vue b/web/satellite/src/components/account/billing/coupons/CouponArea.vue
index 0aa035294..846f05011 100644
--- a/web/satellite/src/components/account/billing/coupons/CouponArea.vue
+++ b/web/satellite/src/components/account/billing/coupons/CouponArea.vue
@@ -57,8 +57,10 @@ import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { Coupon, CouponDuration } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useNotify, useStore } from '@/utils/hooks';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -73,6 +75,14 @@ const notify = useNotify();
 
 const isCouponFetching = ref<boolean>(true);
 
+/**
+     * Opens Add Coupon modal.
+     */
+function onCreateClick(): void {
+    analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addCoupon);
+}
+
 /**
  * Returns the coupon applied to the user's account.
  */
@@ -138,14 +148,6 @@ const expiration = computed((): string => {
     }
 });
 
-/**
- * Opens Add Coupon modal.
- */
-function onCreateClick(): void {
-    analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN);
-}
-
 /**
  * Lifecycle hook after initial render.
  * Fetches coupon.
diff --git a/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue b/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue
index 313a01be9..b1b91d998 100644
--- a/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue
+++ b/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue
@@ -37,6 +37,7 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useNotify, useRouter, useStore } from '@/utils/hooks';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import DatePickerIcon from '@/../static/images/account/billing/datePicker.svg';
 import SelectedIcon from '@/../static/images/account/billing/selected.svg';
@@ -59,8 +60,8 @@ const currentOption = ref<string>(periodOptions[0]);
 /**
  * Indicates if periods dropdown is shown.
  */
-const isDropdownShown = computed((): Date => {
-    return store.state.appStateModule.appState.isPeriodsDropdownShown;
+const isDropdownShown = computed((): boolean => {
+    return store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.PERIODS;
 });
 
 /**
@@ -98,7 +99,7 @@ function closeDropdown(): void {
  * Toggles dropdown visibility.
  */
 function toggleDropdown(): void {
-    store.dispatch(APP_STATE_ACTIONS.TOGGLE_PERIODS_DROPDOWN);
+    store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.PERIODS);
 }
 
 /**
diff --git a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
index 1ef43c6a7..aed74c169 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
@@ -93,11 +93,13 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { Wallet } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -179,7 +181,7 @@ export default class AddTokenCardNative extends Vue {
      */
     public onAddTokensClick(): void {
         this.analytics.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TOKEN_FUNDS_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTokenFunds);
     }
 
     /**
diff --git a/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue b/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
index 909936cf9..695a15c16 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
@@ -64,6 +64,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 
 import { PaymentAmountOption } from '@/types/payments';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 // @vue/component
 @Component
@@ -102,14 +103,14 @@ export default class TokenDepositSelection3 extends Vue {
      * isSelectionShown flag that indicate is token amount selection shown.
      */
     public get isSelectionShown(): boolean {
-        return this.$store.state.appStateModule.appState.isPaymentSelectionShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.PAYMENT_SELECTION;
     }
 
     /**
      * opens token amount selection.
      */
     public open(): void {
-        setTimeout(() => this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION, true), 0);
+        setTimeout(() => this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.PAYMENT_SELECTION), 0);
     }
 
     /**
@@ -340,7 +341,7 @@ export default class TokenDepositSelection3 extends Vue {
         }
 
         &__custom-input::placeholder {
-            font-size: 14;
+            font-size: 14px;
         }
 
         &__custom-input::-webkit-inner-spin-button,
diff --git a/web/satellite/src/components/browser/FileBrowser.vue b/web/satellite/src/components/browser/FileBrowser.vue
index 67755940e..b7c5e50b7 100644
--- a/web/satellite/src/components/browser/FileBrowser.vue
+++ b/web/satellite/src/components/browser/FileBrowser.vue
@@ -214,10 +214,11 @@ import { AnalyticsHttpApi } from '@/api/analytics';
 import { BrowserFile } from '@/types/browser';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { RouteConfig } from '@/router';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { useNotify, useRouter, useStore } from '@/utils/hooks';
 import eventBus from '@/utils/eventBus';
 import { Bucket } from '@/types/buckets';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
@@ -432,7 +433,7 @@ function closeModalDropdown(): void {
  * Toggle the folder creation modal in the store.
  */
 function toggleFolderCreationModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_FOLDER_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newFolder);
 }
 
 /**
diff --git a/web/satellite/src/components/browser/FileEntry.vue b/web/satellite/src/components/browser/FileEntry.vue
index 12d3edc78..79c94b3ae 100644
--- a/web/satellite/src/components/browser/FileEntry.vue
+++ b/web/satellite/src/components/browser/FileEntry.vue
@@ -109,9 +109,11 @@ import { computed, ref } from 'vue';
 import prettyBytes from 'pretty-bytes';
 
 import type { BrowserFile } from '@/types/browser';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { useNotify, useRouter, useStore } from '@/utils/hooks';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import TableItem from '@/components/common/TableItem.vue';
 
@@ -202,7 +204,7 @@ const fileTypeIsFile = computed((): boolean => {
  */
 function openModal(): void {
     store.commit('files/setObjectPathForModal', props.path + props.file.Key);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_OBJECT_DETAILS_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.objectDetails);
     store.dispatch('files/closeDropdown');
 }
 
@@ -372,7 +374,7 @@ function setShiftSelectedFiles(): void {
 function share(): void {
     store.dispatch('files/closeDropdown');
     store.commit('files/setObjectPathForModal', props.path + props.file.Key);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_SHARE_OBJECT_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.SHARE_OBJECT);
 }
 
 /**
diff --git a/web/satellite/src/components/modals/AddCouponCodeModal.vue b/web/satellite/src/components/modals/AddCouponCodeModal.vue
index 88b6451c2..4225e7e10 100644
--- a/web/satellite/src/components/modals/AddCouponCodeModal.vue
+++ b/web/satellite/src/components/modals/AddCouponCodeModal.vue
@@ -15,6 +15,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { RouteConfig } from '@/router';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
@@ -37,7 +38,7 @@ export default class AddCouponCodeModal extends Vue {
     */
     public onCloseClick(): void {
         this.analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Billing).path);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addCoupon);
     }
 }
 </script>
diff --git a/web/satellite/src/components/modals/AddPaymentMethodModal.vue b/web/satellite/src/components/modals/AddPaymentMethodModal.vue
index 5a8e54050..58d7822c1 100644
--- a/web/satellite/src/components/modals/AddPaymentMethodModal.vue
+++ b/web/satellite/src/components/modals/AddPaymentMethodModal.vue
@@ -130,11 +130,12 @@ import { Component, Vue } from 'vue-property-decorator';
 import { RouteConfig } from '@/router';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { USER_ACTIONS } from '@/store/modules/users';
 import { MetaUtils } from '@/utils/meta';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VModal from '@/components/common/VModal.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -222,7 +223,7 @@ export default class AddPaymentMethodModal extends Vue {
      * Closes add payment method modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/AddTeamMemberModal.vue b/web/satellite/src/components/modals/AddTeamMemberModal.vue
index 719948603..7ede129b8 100644
--- a/web/satellite/src/components/modals/AddTeamMemberModal.vue
+++ b/web/satellite/src/components/modals/AddTeamMemberModal.vue
@@ -84,11 +84,12 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import { RouteConfig } from '@/router';
 import { EmailInput } from '@/types/EmailInput';
-import { PM_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
 import { Validator } from '@/utils/validation';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import VModal from '@/components/common/VModal.vue';
@@ -233,7 +234,7 @@ export default class AddTeamMemberModal extends Vue {
      * Closes modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TEAM_MEMBERS_MODAL);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/AddTokenFundsModal.vue b/web/satellite/src/components/modals/AddTokenFundsModal.vue
index 59e1109b6..974361be8 100644
--- a/web/satellite/src/components/modals/AddTokenFundsModal.vue
+++ b/web/satellite/src/components/modals/AddTokenFundsModal.vue
@@ -75,9 +75,11 @@
 import QRCode from 'qrcode';
 import { Component, Vue } from 'vue-property-decorator';
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { Wallet } from '@/types/payments';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import VModal from '@/components/common/VModal.vue';
@@ -118,7 +120,7 @@ export default class AddTokenFundsModal extends Vue {
      * Closes create project prompt modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TOKEN_FUNDS_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTokenFunds);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/AllModals.vue b/web/satellite/src/components/modals/AllModals.vue
index 515c49616..86a348c2d 100644
--- a/web/satellite/src/components/modals/AllModals.vue
+++ b/web/satellite/src/components/modals/AllModals.vue
@@ -2,29 +2,8 @@
 // See LICENSE for copying information.
 
 <template>
-    <div>
-        <CreateProjectPromptModal v-if="isCreateProjectPromptModal" />
-        <CreateProjectModal v-if="isCreateProjectModal" />
-        <AddPaymentMethodModal v-if="isAddPMModal" />
-        <OpenBucketModal v-if="isOpenBucketModal" />
-        <MFARecoveryCodesModal v-if="isMFARecoveryModal" />
-        <EnableMFAModal v-if="isEnableMFAModal" />
-        <DisableMFAModal v-if="isDisableMFAModal" />
-        <EditProfileModal v-if="isEditProfileModal" />
-        <ChangePasswordModal v-if="isChangePasswordModal" />
-        <AddTeamMemberModal v-if="isAddTeamMembersModal" />
-        <AddTokenFundsModal v-if="isAddTokenFundsModal" />
-        <ShareBucketModal v-if="isShareBucketModal" />
-        <ShareObjectModal v-if="isShareObjectModal" />
-        <ObjectDetailsModal v-if="isObjectDetailsModal" />
-        <NewFolderModal v-if="isNewFolderModal" />
-        <DeleteBucketModal v-if="isDeleteBucketModal" />
-        <AddCouponCodeModal v-if="isAddCouponModal" />
-        <NewBillingAddCouponCodeModal v-if="isNewBillingAddCouponModal" />
-        <CreateProjectPassphraseModal v-if="isCreateProjectPassphraseModal" />
-        <ManageProjectPassphraseModal v-if="isManageProjectPassphraseModal" />
-        <CreateBucketModal v-if="isCreateBucketModal" />
-        <EnterPassphraseModal v-if="isEnterPassphraseModal" />
+    <div v-if="activeModal">
+        <component :is="activeModal" />
     </div>
 </template>
 
@@ -83,158 +62,13 @@ import EnterPassphraseModal from '@/components/modals/EnterPassphraseModal.vue';
 })
 export default class AllModals extends Vue {
     // TODO: add active modal indicator.
-    /**
-     * Indicates if create project prompt modal is shown.
-     */
-    public get isCreateProjectPromptModal(): boolean {
-        return this.$store.state.appStateModule.appState.isCreateProjectPromptModalShown;
-    }
 
     /**
-     * Indicates if create project prompt modal is shown.
-     */
-    public get isCreateProjectModal(): boolean {
-        return this.$store.state.appStateModule.appState.isCreateProjectModalShown;
-    }
-
-    /**
-     * Indicates if add payment method modal is shown.
-     */
-    public get isAddPMModal(): boolean {
-        return this.$store.state.appStateModule.appState.isAddPMModalShown;
-    }
-
-    /**
-     * Indicates if open bucket modal is shown.
-     */
-    public get isOpenBucketModal(): boolean {
-        return this.$store.state.appStateModule.appState.isOpenBucketModalShown;
-    }
-
-    /**
-     * Indicates if MFA recovery modal is shown.
-     */
-    public get isMFARecoveryModal(): boolean {
-        return this.$store.state.appStateModule.appState.isMFARecoveryModalShown;
-    }
-
-    /**
-     * Indicates if enable MFA modal is shown.
-     */
-    public get isEnableMFAModal(): boolean {
-        return this.$store.state.appStateModule.appState.isEnableMFAModalShown;
-    }
-
-    /**
-     * Indicates if disable MFA modal is shown.
-     */
-    public get isDisableMFAModal(): boolean {
-        return this.$store.state.appStateModule.appState.isDisableMFAModalShown;
-    }
-
-    /**
-     * Indicates if edit profile modal is shown.
-     */
-    public get isEditProfileModal(): boolean {
-        return this.$store.state.appStateModule.appState.isEditProfileModalShown;
-    }
-
-    /**
-     * Indicates if change password modal is shown.
-     */
-    public get isChangePasswordModal(): boolean {
-        return this.$store.state.appStateModule.appState.isChangePasswordModalShown;
-    }
-
-    /**
-     * Indicates if add team members modal is shown.
-     */
-    public get isAddTeamMembersModal(): boolean {
-        return this.$store.state.appStateModule.appState.isAddTeamMembersModalShown;
-    }
-
-    /**
-     * Indicates if add token funds modal is shown.
-     */
-    public get isAddTokenFundsModal(): boolean {
-        return this.$store.state.appStateModule.appState.isAddTokenFundsModalShown;
-    }
-
-    /**
-     * Indicates if share bucket modal is shown.
-     */
-    public get isShareBucketModal(): boolean {
-        return this.$store.state.appStateModule.appState.isShareBucketModalShown;
-    }
-
-    /**
-     * Indicates if share object modal is shown.
-     */
-    public get isShareObjectModal(): boolean {
-        return this.$store.state.appStateModule.appState.isShareObjectModalShown;
-    }
-
-    /**
-     * Indicates if delete bucket modal is shown.
-     */
-    public get isDeleteBucketModal(): boolean {
-        return this.$store.state.appStateModule.appState.isDeleteBucketModalShown;
-    }
-
-    /**
-     * Indicates if object details modal is shown.
-     */
-    public get isObjectDetailsModal(): boolean {
-        return this.$store.state.appStateModule.appState.isObjectDetailsModalShown;
-    }
-
-    /**
-     * Indicates if new folder modal is shown.
-     */
-    public get isNewFolderModal(): boolean {
-        return this.$store.state.appStateModule.appState.isNewFolderModalShown;
-    }
-
-    /**
-     * Indicates if add coupon modal is shown.
-     */
-    public get isAddCouponModal(): boolean {
-        return this.$store.state.appStateModule.appState.isAddCouponModalShown;
-    }
-
-    /**
-     * Indicates if new add coupon modal is shown.
-     */
-    public get isNewBillingAddCouponModal(): boolean {
-        return this.$store.state.appStateModule.appState.isNewBillingAddCouponModalShown;
-    }
-
-    /**
-     * Indicates if create project passphrase modal is shown.
-     */
-    public get isCreateProjectPassphraseModal(): boolean {
-        return this.$store.state.appStateModule.appState.isCreateProjectPassphraseModalShown;
-    }
-
-    /**
-     * Indicates if manage project passphrase modal is shown.
-     */
-    public get isManageProjectPassphraseModal(): boolean {
-        return this.$store.state.appStateModule.appState.isManageProjectPassphraseModalShown;
-    }
-
-    /**
-     * Indicates if create bucket modal is shown.
-     */
-    public get isCreateBucketModal(): boolean {
-        return this.$store.state.appStateModule.appState.isCreateBucketModalShown;
-    }
-
-    /**
-     * Indicates if enter passphrase modal is shown.
-     */
-    public get isEnterPassphraseModal(): boolean {
-        return this.$store.state.appStateModule.appState.isEnterPassphraseModalShown;
+   * Indicates the current active modal.
+   */
+    public get activeModal(): unknown | null {
+        // modal could be of VueConstructor type or Object (for composition api components).
+        return this.$store.state.appStateModule.appState.activeModal;
     }
 }
 </script>
diff --git a/web/satellite/src/components/modals/ChangePasswordModal.vue b/web/satellite/src/components/modals/ChangePasswordModal.vue
index 7e96ab46b..b6bb04cf2 100644
--- a/web/satellite/src/components/modals/ChangePasswordModal.vue
+++ b/web/satellite/src/components/modals/ChangePasswordModal.vue
@@ -69,6 +69,7 @@ import { Validator } from '@/utils/validation';
 import { RouteConfig } from '@/router';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import PasswordStrength from '@/components/common/PasswordStrength.vue';
@@ -203,7 +204,7 @@ export default class ChangePasswordModal extends Vue {
      * Closes popup.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.changePassword);
     }
 }
 </script>
diff --git a/web/satellite/src/components/modals/CreateBucketModal.vue b/web/satellite/src/components/modals/CreateBucketModal.vue
index 3e4b3e488..f094f54eb 100644
--- a/web/satellite/src/components/modals/CreateBucketModal.vue
+++ b/web/satellite/src/components/modals/CreateBucketModal.vue
@@ -52,7 +52,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { RouteConfig } from '@/router';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
@@ -65,6 +64,8 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { MetaUtils } from '@/utils/meta';
 import { LocalData } from '@/utils/localData';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VLoader from '@/components/common/VLoader.vue';
 import VInput from '@/components/common/VInput.vue';
@@ -262,7 +263,7 @@ function setBucketName(name: string): void {
  * Closes create bucket modal.
  */
 function closeModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
 }
 
 /**
diff --git a/web/satellite/src/components/modals/CreateProjectModal.vue b/web/satellite/src/components/modals/CreateProjectModal.vue
index 20e6df9ef..c8acd9cf0 100644
--- a/web/satellite/src/components/modals/CreateProjectModal.vue
+++ b/web/satellite/src/components/modals/CreateProjectModal.vue
@@ -62,7 +62,6 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { RouteConfig } from '@/router';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { ProjectFields } from '@/types/projects';
@@ -70,6 +69,8 @@ import { LocalData } from '@/utils/localData';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VLoader from '@/components/common/VLoader.vue';
 import VInput from '@/components/common/VInput.vue';
@@ -169,19 +170,11 @@ export default class CreateProjectModal extends Vue {
         LocalData.setSelectedProjectId(this.createdProjectId);
     }
 
-    /**
-     * Holds on button click logic.
-     * Closes this modal and opens create project modal.
-     */
-    public onClick(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
-    }
-
     /**
      * Closes create project modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
     }
 }
 </script>
diff --git a/web/satellite/src/components/modals/CreateProjectPromptModal.vue b/web/satellite/src/components/modals/CreateProjectPromptModal.vue
index 51b067e3a..aef2675ff 100644
--- a/web/satellite/src/components/modals/CreateProjectPromptModal.vue
+++ b/web/satellite/src/components/modals/CreateProjectPromptModal.vue
@@ -33,6 +33,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
@@ -51,15 +52,15 @@ export default class CreateProjectPromptModal extends Vue {
      * Closes this modal and opens upgrade account modal.
      */
     public onClick(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
     }
 
     /**
      * Closes create project prompt modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
     }
 }
 </script>
diff --git a/web/satellite/src/components/modals/DeleteBucketModal.vue b/web/satellite/src/components/modals/DeleteBucketModal.vue
index 12472781f..f98793aed 100644
--- a/web/satellite/src/components/modals/DeleteBucketModal.vue
+++ b/web/satellite/src/components/modals/DeleteBucketModal.vue
@@ -31,7 +31,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { OBJECTS_ACTIONS } from '@/store/modules/objects';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { AnalyticsHttpApi } from '@/api/analytics';
@@ -40,6 +40,8 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { MetaUtils } from '@/utils/meta';
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VModal from '@/components/common/VModal.vue';
 import VButton from '@/components/common/VButton.vue';
@@ -171,7 +173,7 @@ export default class DeleteBucketModal extends Vue {
      * Closes modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_BUCKET_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.deleteBucket);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/DisableMFAModal.vue b/web/satellite/src/components/modals/DisableMFAModal.vue
index 9b933fb26..9f8a7c9c3 100644
--- a/web/satellite/src/components/modals/DisableMFAModal.vue
+++ b/web/satellite/src/components/modals/DisableMFAModal.vue
@@ -45,8 +45,10 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import { USER_ACTIONS } from '@/store/modules/users';
 import { DisableMFARequest } from '@/types/users';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
 import VButton from '@/components/common/VButton.vue';
@@ -78,7 +80,7 @@ export default class DisableMFAModal extends Vue {
      * Closes disable MFA modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_DISABLE_MFA_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.disableMFA);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/EditProfileModal.vue b/web/satellite/src/components/modals/EditProfileModal.vue
index d1c888fb1..278062c47 100644
--- a/web/satellite/src/components/modals/EditProfileModal.vue
+++ b/web/satellite/src/components/modals/EditProfileModal.vue
@@ -45,6 +45,8 @@ import { USER_ACTIONS } from '@/store/modules/users';
 import { UpdatedUser } from '@/types/users';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VModal from '@/components/common/VModal.vue';
@@ -104,7 +106,7 @@ export default class EditProfileModal extends Vue {
      * Closes modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.editProfile);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/EnableMFAModal.vue b/web/satellite/src/components/modals/EnableMFAModal.vue
index 9839109bb..49ed81379 100644
--- a/web/satellite/src/components/modals/EnableMFAModal.vue
+++ b/web/satellite/src/components/modals/EnableMFAModal.vue
@@ -81,9 +81,10 @@ import QRCode from 'qrcode';
 import { Component, Vue } from 'vue-property-decorator';
 
 import { USER_ACTIONS } from '@/store/modules/users';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
 import VButton from '@/components/common/VButton.vue';
@@ -137,7 +138,7 @@ export default class EnableMFAModal extends Vue {
      * Closes enable MFA modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ENABLE_MFA_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enableMFA);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/EnterPassphraseModal.vue b/web/satellite/src/components/modals/EnterPassphraseModal.vue
index da0ae0717..84628b6d7 100644
--- a/web/satellite/src/components/modals/EnterPassphraseModal.vue
+++ b/web/satellite/src/components/modals/EnterPassphraseModal.vue
@@ -180,7 +180,7 @@ export default class EnterPassphraseModal extends Vue {
     public closeModal(): void {
         if (this.isLoading) return;
 
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ENTER_PASSPHRASE_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/MFARecoveryCodesModal.vue b/web/satellite/src/components/modals/MFARecoveryCodesModal.vue
index db661c0da..d933215d6 100644
--- a/web/satellite/src/components/modals/MFARecoveryCodesModal.vue
+++ b/web/satellite/src/components/modals/MFARecoveryCodesModal.vue
@@ -32,6 +32,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
@@ -49,7 +50,7 @@ export default class MFARecoveryCodesModal extends Vue {
      * Closes modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/NewBillingAddCouponCodeModal.vue b/web/satellite/src/components/modals/NewBillingAddCouponCodeModal.vue
index b6b4233bc..d4d37c7b2 100644
--- a/web/satellite/src/components/modals/NewBillingAddCouponCodeModal.vue
+++ b/web/satellite/src/components/modals/NewBillingAddCouponCodeModal.vue
@@ -19,6 +19,8 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import NewBillingAddCouponCodeInput from '@/components/common/NewBillingAddCouponCodeInput.vue';
@@ -42,7 +44,7 @@ export default class NewBillingAddCouponCodeModal extends Vue {
     */
     public onCloseClick(): void {
         this.analytics.eventTriggered(AnalyticsEvent.COUPON_CODE_APPLIED);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_BILLING_ADD_COUPON_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newBillingAddCoupon);
     }
 }
 </script>
diff --git a/web/satellite/src/components/modals/NewFolderModal.vue b/web/satellite/src/components/modals/NewFolderModal.vue
index 84fb3c9b6..57b609ab9 100644
--- a/web/satellite/src/components/modals/NewFolderModal.vue
+++ b/web/satellite/src/components/modals/NewFolderModal.vue
@@ -41,8 +41,9 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import { BrowserFile } from '@/types/browser';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VModal from '@/components/common/VModal.vue';
 import VButton from '@/components/common/VButton.vue';
@@ -72,7 +73,7 @@ export default class NewFolderModal extends Vue {
      * Close the NewFolderModal.
      */
     public close(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_FOLDER_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newFolder);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/ObjectDetailsModal.vue b/web/satellite/src/components/modals/ObjectDetailsModal.vue
index ac86bd57c..6d622905c 100644
--- a/web/satellite/src/components/modals/ObjectDetailsModal.vue
+++ b/web/satellite/src/components/modals/ObjectDetailsModal.vue
@@ -118,8 +118,9 @@ import { Component, Vue, Watch } from 'vue-property-decorator';
 import prettyBytes from 'pretty-bytes';
 
 import { BrowserFile } from '@/types/browser';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VModal from '@/components/common/VModal.vue';
 import VButton from '@/components/common/VButton.vue';
@@ -294,7 +295,7 @@ export default class ObjectDetailsModal extends Vue {
      * Close the current opened file details modal.
      */
     public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OBJECT_DETAILS_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.objectDetails);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/OpenBucketModal.vue b/web/satellite/src/components/modals/OpenBucketModal.vue
index 26d0a111c..4bd86f4d8 100644
--- a/web/satellite/src/components/modals/OpenBucketModal.vue
+++ b/web/satellite/src/components/modals/OpenBucketModal.vue
@@ -53,7 +53,6 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { RouteConfig } from '@/router';
 import { OBJECTS_ACTIONS, OBJECTS_MUTATIONS } from '@/store/modules/objects';
 import { MetaUtils } from '@/utils/meta';
@@ -63,6 +62,8 @@ import { AnalyticsHttpApi } from '@/api/analytics';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { Bucket } from '@/types/buckets';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VModal from '@/components/common/VModal.vue';
 import VInput from '@/components/common/VInput.vue';
@@ -213,7 +214,7 @@ export default class OpenBucketModal extends Vue {
     public closeModal(): void {
         if (this.isLoading) return;
 
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.openBucket);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/ShareBucketModal.vue b/web/satellite/src/components/modals/ShareBucketModal.vue
index d9101b7c6..7259c0937 100644
--- a/web/satellite/src/components/modals/ShareBucketModal.vue
+++ b/web/satellite/src/components/modals/ShareBucketModal.vue
@@ -38,12 +38,14 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { MetaUtils } from '@/utils/meta';
 import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VModal from '@/components/common/VModal.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -173,7 +175,7 @@ export default class ShareBucketModal extends Vue {
     public closeModal(): void {
         if (this.isLoading) return;
 
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_SHARE_BUCKET_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareBucket);
     }
 
     /**
diff --git a/web/satellite/src/components/modals/ShareObjectModal.vue b/web/satellite/src/components/modals/ShareObjectModal.vue
index 22782f79d..b58b2a23c 100644
--- a/web/satellite/src/components/modals/ShareObjectModal.vue
+++ b/web/satellite/src/components/modals/ShareObjectModal.vue
@@ -38,6 +38,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VModal from '@/components/common/VModal.vue';
@@ -104,7 +106,7 @@ export default class ShareObjectModal extends Vue {
     public closeModal(): void {
         if (this.isLoading) return;
 
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_SHARE_OBJECT_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareObject);
     }
 }
 </script>
diff --git a/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue b/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue
index 59cbbc8e6..099acf001 100644
--- a/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue
+++ b/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue
@@ -61,14 +61,16 @@ import { computed, onMounted, ref } from 'vue';
 import { generateMnemonic } from 'bip39';
 
 import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
 import { OBJECTS_ACTIONS, OBJECTS_MUTATIONS } from '@/store/modules/objects';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { MetaUtils } from '@/utils/meta';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { RouteConfig } from '@/router';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VModal from '@/components/common/VModal.vue';
 import VButton from '@/components/common/VButton.vue';
@@ -168,7 +170,7 @@ function toggleSaved(): void {
  * Closes modal.
  */
 function closeModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
 }
 
 /**
diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue b/web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue
index 5b4845a1d..ea158a8c5 100644
--- a/web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue
+++ b/web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue
@@ -28,8 +28,10 @@
 
 <script setup lang="ts">
 import { useStore } from '@/utils/hooks';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 
@@ -46,7 +48,7 @@ const store = useStore();
  */
 function onClear(): void {
     store.commit(OBJECTS_MUTATIONS.CLEAR);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
 }
 </script>
 
diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue b/web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue
index e0adf7fa7..4a381e18f 100644
--- a/web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue
+++ b/web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue
@@ -28,6 +28,8 @@
 
 <script setup lang="ts">
 import { useStore } from '@/utils/hooks';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
@@ -44,8 +46,8 @@ const store = useStore();
  * Starts create new passphrase flow.
  */
 function onNext(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
 }
 </script>
 
diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue b/web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue
index ba1fec576..f6f219477 100644
--- a/web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue
+++ b/web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue
@@ -33,6 +33,8 @@
 import { computed, onMounted, ref } from 'vue';
 
 import { useNotify, useStore } from '@/utils/hooks';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
 
@@ -88,7 +90,7 @@ function setManageOptions(): void {
  * Closes modal.
  */
 function closeModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
 }
 
 onMounted(() => {
diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue b/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
index 2706ca082..f37742a2a 100644
--- a/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
+++ b/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
@@ -39,7 +39,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { useNotify, useStore } from '@/utils/hooks';
 import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
@@ -47,6 +47,8 @@ import { OBJECTS_ACTIONS, OBJECTS_MUTATIONS } from '@/store/modules/objects';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { MetaUtils } from '@/utils/meta';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import VInput from '@/components/common/VInput.vue';
@@ -191,7 +193,7 @@ async function onSwitch(): Promise<void> {
         store.dispatch(OBJECTS_ACTIONS.SET_PASSPHRASE, passphrase.value);
 
         notify.success('Passphrase was switched successfully');
-        store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+        store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
     } catch (error) {
         await notify.error(error.message, AnalyticsErrorEventSource.SWITCH_PROJECT_LEVEL_PASSPHRASE_MODAL);
     } finally {
diff --git a/web/satellite/src/components/navigation/AccountArea.vue b/web/satellite/src/components/navigation/AccountArea.vue
index ccbaa4b01..8ab9ba057 100644
--- a/web/satellite/src/components/navigation/AccountArea.vue
+++ b/web/satellite/src/components/navigation/AccountArea.vue
@@ -62,10 +62,11 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { OBJECTS_ACTIONS } from '@/store/modules/objects';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { MetaUtils } from '@/utils/meta';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
+import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import BillingIcon from '@/../static/images/navigation/billing.svg';
 import InfoIcon from '@/../static/images/navigation/info.svg';
@@ -169,7 +170,7 @@ export default class AccountArea extends Vue {
         this.dropdownYPos = accountContainer.bottom - DROPDOWN_HEIGHT - SIXTEEN_PIXELS;
         this.dropdownXPos = accountContainer.right - TWENTY_PIXELS;
 
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACCOUNT);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.ACCOUNT);
         this.$store.commit(APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION);
     }
 
@@ -199,7 +200,7 @@ export default class AccountArea extends Vue {
      * Indicates if account dropdown is visible.
      */
     public get isDropdown(): boolean {
-        return this.$store.state.appStateModule.appState.isAccountDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.ACCOUNT;
     }
 
     /**
diff --git a/web/satellite/src/components/navigation/MobileNavigation.vue b/web/satellite/src/components/navigation/MobileNavigation.vue
index 13c0eae10..8be84bd45 100644
--- a/web/satellite/src/components/navigation/MobileNavigation.vue
+++ b/web/satellite/src/components/navigation/MobileNavigation.vue
@@ -171,7 +171,6 @@ import { OBJECTS_ACTIONS } from '@/store/modules/objects';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { USER_ACTIONS } from '@/store/modules/users';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { NavigationLink } from '@/types/navigation';
 import { Project } from '@/types/projects';
 import { User } from '@/types/users';
@@ -180,6 +179,8 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
 import { LocalData } from '@/utils/localData';
 import { MetaUtils } from '@/utils/meta';
 import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
 import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@@ -346,7 +347,7 @@ export default class MobileNavigation extends Vue {
      * Toggles manage passphrase modal shown.
      */
     public onManagePassphraseClick(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
     }
 
     /**
@@ -434,10 +435,10 @@ export default class MobileNavigation extends Vue {
             const ownProjectsCount: number = this.$store.getters.projectsCount;
 
             if (!user.paidTier && user.projectLimit === ownProjectsCount) {
-                this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
+                this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
             } else {
                 this.analytics.pageVisit(RouteConfig.CreateProject.path);
-                this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
+                this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
             }
         }
 
diff --git a/web/satellite/src/components/navigation/NavigationArea.vue b/web/satellite/src/components/navigation/NavigationArea.vue
index 665aa8542..829d75df4 100644
--- a/web/satellite/src/components/navigation/NavigationArea.vue
+++ b/web/satellite/src/components/navigation/NavigationArea.vue
@@ -81,7 +81,7 @@ import { AnalyticsHttpApi } from '@/api/analytics';
 import { RouteConfig } from '@/router';
 import { NavigationLink } from '@/types/navigation';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import ProjectSelection from '@/components/navigation/ProjectSelection.vue';
 import GuidesDropdown from '@/components/navigation/GuidesDropdown.vue';
@@ -224,7 +224,7 @@ export default class NavigationArea extends Vue {
     public toggleResourcesDropdown(): void {
         this.setResourcesDropdownYPos();
         this.setResourcesDropdownXPos();
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_RESOURCES_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.RESOURCES);
     }
 
     /**
@@ -233,7 +233,7 @@ export default class NavigationArea extends Vue {
     public toggleQuickStartDropdown(): void {
         this.setQuickStartDropdownYPos();
         this.setQuickStartDropdownXPos();
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_QUICK_START_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.QUICK_START);
     }
 
     /**
@@ -247,14 +247,14 @@ export default class NavigationArea extends Vue {
      * Indicates if resources dropdown shown.
      */
     public get isResourcesDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isResourcesDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.RESOURCES;
     }
 
     /**
      * Indicates if quick start dropdown shown.
      */
     public get isQuickStartDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isQuickStartDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.QUICK_START;
     }
 
     /**
diff --git a/web/satellite/src/components/navigation/ProjectSelection.vue b/web/satellite/src/components/navigation/ProjectSelection.vue
index c7a9fef4d..8d23b6758 100644
--- a/web/satellite/src/components/navigation/ProjectSelection.vue
+++ b/web/satellite/src/components/navigation/ProjectSelection.vue
@@ -67,10 +67,11 @@ import { LocalData } from '@/utils/localData';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { Project } from '@/types/projects';
 import { User } from '@/types/users';
 import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
+import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VLoader from '@/components/common/VLoader.vue';
 
@@ -138,7 +139,7 @@ export default class ProjectSelection extends Vue {
      * Toggles project dropdown visibility.
      */
     public toggleDropdown(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SELECT_PROJECT_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.SELECT_PROJECT);
     }
 
     /**
@@ -223,8 +224,8 @@ export default class ProjectSelection extends Vue {
     /**
      * Indicates if dropdown is shown.
      */
-    public get isDropdownShown(): string {
-        return this.$store.state.appStateModule.appState.isSelectProjectDropdownShown;
+    public get isDropdownShown(): boolean {
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.SELECT_PROJECT;
     }
 
     /**
@@ -265,7 +266,7 @@ export default class ProjectSelection extends Vue {
      * Toggles manage passphrase modal shown.
      */
     public onManagePassphraseClick(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
 
         this.closeDropdown();
     }
@@ -281,10 +282,10 @@ export default class ProjectSelection extends Vue {
             const ownProjectsCount: number = this.$store.getters.projectsCount;
 
             if (!user.paidTier && user.projectLimit === ownProjectsCount) {
-                this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
+                this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
             } else {
                 this.analytics.pageVisit(RouteConfig.CreateProject.path);
-                this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
+                this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
             }
         }
 
diff --git a/web/satellite/src/components/navigation/QuickStartLinks.vue b/web/satellite/src/components/navigation/QuickStartLinks.vue
index b7683f0ce..5e5d58535 100644
--- a/web/satellite/src/components/navigation/QuickStartLinks.vue
+++ b/web/satellite/src/components/navigation/QuickStartLinks.vue
@@ -47,9 +47,10 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { RouteConfig } from '@/router';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { User } from '@/types/users';
 import { AccessType } from '@/types/createAccessGrant';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import NewProjectIcon from '@/../static/images/navigation/newProject.svg';
 import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg';
@@ -151,10 +152,10 @@ export default class QuickStartLinks extends Vue {
             const ownProjectsCount: number = this.$store.getters.projectsCount;
 
             if (!user.paidTier && user.projectLimit === ownProjectsCount) {
-                this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
+                this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
             } else {
                 this.analytics.pageVisit(RouteConfig.CreateProject.path);
-                this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
+                this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
             }
         }
 
diff --git a/web/satellite/src/components/notifications/BillingNotification.vue b/web/satellite/src/components/notifications/BillingNotification.vue
index 2176db028..c0105c0cb 100644
--- a/web/satellite/src/components/notifications/BillingNotification.vue
+++ b/web/satellite/src/components/notifications/BillingNotification.vue
@@ -20,6 +20,7 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import { RouteConfig } from '@/router';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import InfoIcon from '@/../static/images/notifications/info.svg';
diff --git a/web/satellite/src/components/objects/BucketDetails.vue b/web/satellite/src/components/objects/BucketDetails.vue
index e1a86d671..cb77755a8 100644
--- a/web/satellite/src/components/objects/BucketDetails.vue
+++ b/web/satellite/src/components/objects/BucketDetails.vue
@@ -27,6 +27,8 @@ import { RouteConfig } from '@/router';
 import { MONTHS_NAMES } from '@/utils/constants/date';
 import { OBJECTS_ACTIONS } from '@/store/modules/objects';
 import { AnalyticsHttpApi } from '@/api/analytics';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import BucketDetailsOverview from '@/components/objects/BucketDetailsOverview.vue';
@@ -93,7 +95,7 @@ export default class BucketDetails extends Vue {
             return;
         }
 
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.openBucket);
     }
 
     /**
diff --git a/web/satellite/src/components/objects/BucketItem.vue b/web/satellite/src/components/objects/BucketItem.vue
index e0df8e5ef..271e8bcd0 100644
--- a/web/satellite/src/components/objects/BucketItem.vue
+++ b/web/satellite/src/components/objects/BucketItem.vue
@@ -31,6 +31,7 @@ import { Component, Prop } from 'vue-property-decorator';
 import { RouteConfig } from '@/router';
 import { Bucket } from '@/types/buckets';
 import { LocalData } from '@/utils/localData';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import TableItem from '@/components/common/TableItem.vue';
@@ -119,7 +120,7 @@ export default class BucketItem extends Resizable {
      * Holds on delete click logic.
      */
     public onDeleteClick(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_BUCKET_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.deleteBucket);
         this.closeDropdown();
     }
 
diff --git a/web/satellite/src/components/objects/BucketSettingsNav.vue b/web/satellite/src/components/objects/BucketSettingsNav.vue
index d8280624e..e1a33b310 100644
--- a/web/satellite/src/components/objects/BucketSettingsNav.vue
+++ b/web/satellite/src/components/objects/BucketSettingsNav.vue
@@ -2,11 +2,11 @@
 // See LICENSE for copying information.
 
 <template>
-    <div 
+    <div
         class="bucket-settings-nav"
-        @click.stop.prevent="isDropdownOpen = !isDropdownOpen" 
-        @mouseenter="isHoveredOver = true" 
-        @mouseleave="isHoveredOver = false"  
+        @click.stop.prevent="isDropdownOpen = !isDropdownOpen"
+        @mouseenter="isHoveredOver = true"
+        @mouseleave="isHoveredOver = false"
     >
         <div class="bucket-settings-nav__button">
             <GearIcon class="bucket-settings-nav__button__icon" :class="{active: isHoveredOver || isDropdownOpen}" />
@@ -30,8 +30,10 @@
 import { computed, ref } from 'vue';
 
 import { RouteConfig } from '@/router';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { useRoute, useRouter, useStore } from '@/utils/hooks';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
 import DetailsIcon from '@/../static/images/objects/details.svg';
@@ -81,7 +83,7 @@ function onDetailsClick(): void {
  * Toggles share bucket modal.
  */
 function onShareBucketClick(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_SHARE_BUCKET_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareBucket);
     isDropdownOpen.value = false;
 }
 </script>
diff --git a/web/satellite/src/components/objects/BucketsTable.vue b/web/satellite/src/components/objects/BucketsTable.vue
index b5d0a1643..98cdeb947 100644
--- a/web/satellite/src/components/objects/BucketsTable.vue
+++ b/web/satellite/src/components/objects/BucketsTable.vue
@@ -70,12 +70,14 @@ import { computed, onBeforeUnmount, ref } from 'vue';
 
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { OBJECTS_ACTIONS } from '@/store/modules/objects';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { BucketPage } from '@/types/buckets';
 import { RouteConfig } from '@/router';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { useNotify, useRouter, useStore } from '@/utils/hooks';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VTable from '@/components/common/VTable.vue';
 import BucketItem from '@/components/objects/BucketItem.vue';
@@ -147,14 +149,15 @@ const promptForPassphrase = computed((): boolean => {
  * Toggles set passphrase modal visibility.
  */
 function onSetClick() {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.CREATE_PROJECT_PASSPHRASE);
+
 }
 
 /**
  * Toggles create bucket modal visibility.
  */
 function onCreateBucketClick(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.CREATE_BUCKET);
 }
 
 /**
@@ -211,7 +214,7 @@ function openBucket(bucketName: string): void {
         return;
     }
 
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.openBucket);
 }
 
 onBeforeUnmount(() => {
diff --git a/web/satellite/src/components/objects/BucketsView.vue b/web/satellite/src/components/objects/BucketsView.vue
index 5956f75f3..6be0c488c 100644
--- a/web/satellite/src/components/objects/BucketsView.vue
+++ b/web/satellite/src/components/objects/BucketsView.vue
@@ -27,6 +27,8 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { BucketPage } from '@/types/buckets';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import EncryptionBanner from '@/components/objects/EncryptionBanner.vue';
@@ -81,7 +83,7 @@ export default class BucketsView extends Vue {
             }
 
             if (!this.bucketsPage.buckets.length && !wasDemoBucketCreated && !this.promptForPassphrase) {
-                this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
+                this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
             }
         } catch (error) {
             await this.$notify.error(`Failed to setup Buckets view. ${error.message}`, AnalyticsErrorEventSource.BUCKET_PAGE);
@@ -101,11 +103,18 @@ export default class BucketsView extends Vue {
         }
     }
 
+    /**
+     * Toggles create project passphrase modal visibility.
+     */
+    public onSetClick(): void {
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
+    }
+
     /**
      * Toggles create bucket modal visibility.
      */
     public onCreateBucketClick(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
     }
 
     /**
diff --git a/web/satellite/src/components/objects/UploadCancelPopup.vue b/web/satellite/src/components/objects/UploadCancelPopup.vue
index 422ac05ab..8cba679de 100644
--- a/web/satellite/src/components/objects/UploadCancelPopup.vue
+++ b/web/satellite/src/components/objects/UploadCancelPopup.vue
@@ -29,8 +29,9 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsHttpApi } from '@/api/analytics';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 
@@ -60,7 +61,7 @@ export default class UploadCancelPopup extends Vue {
      * Close upload cancel info popup.
      */
     public closePopup(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_UPLOAD_CANCEL_POPUP);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.uploadCancelPopup);
     }
 
     /**
diff --git a/web/satellite/src/components/objects/UploadFile.vue b/web/satellite/src/components/objects/UploadFile.vue
index 6fe3cfa76..384928af2 100644
--- a/web/satellite/src/components/objects/UploadFile.vue
+++ b/web/satellite/src/components/objects/UploadFile.vue
@@ -19,6 +19,7 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { MetaUtils } from '@/utils/meta';
 import { BucketPage } from '@/types/buckets';
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
@@ -189,7 +190,7 @@ export default class UploadFile extends Vue {
      * Indicates if upload cancel popup is visible.
      */
     public get isCancelUploadPopupVisible(): boolean {
-        return this.$store.state.appStateModule.appState.isUploadCancelPopupVisible;
+        return this.$store.state.appStateModule.appState.activeModal == MODALS.uploadCancelPopup;
     }
 
     /**
diff --git a/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue b/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
index 8c6d5337c..7e97f0ffa 100644
--- a/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
+++ b/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
@@ -34,6 +34,7 @@ import { RouteConfig } from '@/router';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { MetaUtils } from '@/utils/meta';
 import { PartneredSatellite } from '@/types/common';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import OverviewContainer from '@/components/onboardingTour/steps/common/OverviewContainer.vue';
@@ -78,7 +79,7 @@ export default class OverviewStep extends Vue {
      */
     public onSkip(): void {
         this.$router.push(this.projectDashboardPath);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
     }
 
     /**
@@ -95,7 +96,7 @@ export default class OverviewStep extends Vue {
      * Redirects to buckets page.
      */
     public onUploadInBrowserClick(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
     }
 
     /**
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue
index 0aa10d8ec..acb57758c 100644
--- a/web/satellite/src/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue
@@ -46,6 +46,7 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import { ACCESS_GRANTS_MUTATIONS } from '@/store/modules/accessGrants';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
 
 import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
 
@@ -62,7 +63,7 @@ export default class PermissionsSelect extends Vue {
      * Toggles dropdown visibility.
      */
     public toggleDropdown(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PERMISSIONS_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.PERMISSIONS);
     }
 
     /**
@@ -104,7 +105,7 @@ export default class PermissionsSelect extends Vue {
      * Indicates if dropdown is visible.
      */
     public get isDropdownVisible(): boolean {
-        return this.$store.state.appStateModule.appState.isPermissionsDropdownShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.PERMISSIONS;
     }
 
     /**
diff --git a/web/satellite/src/components/project/newProjectDashboard/DashboardFunctionalHeader.vue b/web/satellite/src/components/project/newProjectDashboard/DashboardFunctionalHeader.vue
index 350178c95..6db7a07cf 100644
--- a/web/satellite/src/components/project/newProjectDashboard/DashboardFunctionalHeader.vue
+++ b/web/satellite/src/components/project/newProjectDashboard/DashboardFunctionalHeader.vue
@@ -63,11 +63,12 @@
 import { computed } from 'vue';
 
 import { useRouter, useStore } from '@/utils/hooks';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { BucketPage } from '@/types/buckets';
 import { ProjectLimits } from '@/types/projects';
 import { RouteConfig } from '@/router';
 import { LocalData } from '@/utils/localData';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VButton from '@/components/common/VButton.vue';
 import VLoader from '@/components/common/VLoader.vue';
@@ -118,14 +119,14 @@ const bucketsPage = computed((): BucketPage => {
  * Toggles create project passphrase modal visibility.
  */
 function onSetClick() {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.CREATE_PROJECT_PASSPHRASE);
 }
 
 /**
  * Toggles create bucket modal visibility.
  */
 function onCreateBucketClick() {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
 }
 
 /**
diff --git a/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue b/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
index 9c17a02ac..da677874e 100644
--- a/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
+++ b/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
@@ -156,7 +156,6 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { RouteConfig } from '@/router';
 import { DataStamp, ProjectLimits } from '@/types/projects';
 import { Dimensions, Size } from '@/utils/bytesSize';
@@ -164,6 +163,8 @@ import { ChartUtils } from '@/utils/chart';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { LocalData } from '@/utils/localData';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import VLoader from '@/components/common/VLoader.vue';
 import InfoContainer from '@/components/project/newProjectDashboard/InfoContainer.vue';
@@ -235,12 +236,12 @@ export default class NewProjectDashboard extends Vue {
             await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
             if (this.hasJustLoggedIn) {
                 if (this.limits.objectCount > 0) {
-                    this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ENTER_PASSPHRASE_MODAL_SHOWN);
+                    this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enterPassphrase);
                     if (!this.bucketWasCreated) {
                         LocalData.setBucketWasCreatedStatus();
                     }
                 } else {
-                    this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+                    this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
                 }
 
                 this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN);
@@ -292,7 +293,7 @@ export default class NewProjectDashboard extends Vue {
      * Holds on upgrade button click logic.
      */
     public onUpgradeClick(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
     }
 
     /**
@@ -314,7 +315,7 @@ export default class NewProjectDashboard extends Vue {
      * toggleChartsDatePicker holds logic for toggling charts date picker.
      */
     public toggleChartsDatePicker(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.CHART_DATE_PICKER);
     }
 
     /**
@@ -338,7 +339,7 @@ export default class NewProjectDashboard extends Vue {
      * Indicates if charts date picker is shown.
      */
     public get isChartsDatePicker(): boolean {
-        return this.$store.state.appStateModule.appState.isChartsDatePickerShown;
+        return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.CHART_DATE_PICKER;
     }
 
     /**
diff --git a/web/satellite/src/components/projectsList/ProjectsList.vue b/web/satellite/src/components/projectsList/ProjectsList.vue
index 554c7e073..4cf6ab178 100644
--- a/web/satellite/src/components/projectsList/ProjectsList.vue
+++ b/web/satellite/src/components/projectsList/ProjectsList.vue
@@ -54,12 +54,13 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { Project, ProjectsPage } from '@/types/projects';
-import { PM_ACTIONS } from '@/utils/constants/actionNames';
+import { APP_STATE_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
 import { LocalData } from '@/utils/localData';
 import { AnalyticsHttpApi } from '@/api/analytics';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { User } from '@/types/users';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
 import VTable from '@/components/common/VTable.vue';
@@ -124,10 +125,10 @@ export default class Projects extends Vue {
         const ownProjectsCount: number = this.$store.getters.projectsCount;
 
         if (!user.paidTier && user.projectLimit === ownProjectsCount) {
-            this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
+            this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
         } else {
             this.analytics.pageVisit(RouteConfig.CreateProject.path);
-            this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
+            this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
         }
     }
 
@@ -137,9 +138,9 @@ export default class Projects extends Vue {
      */
     public async onProjectSelected(project: Project): Promise<void> {
         if (this.isLoading) return;
-        
+
         this.isLoading = true;
-        
+
         const projectID = project.id;
         await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
         LocalData.setSelectedProjectId(projectID);
diff --git a/web/satellite/src/components/team/HeaderArea.vue b/web/satellite/src/components/team/HeaderArea.vue
index 806921197..1239e423d 100644
--- a/web/satellite/src/components/team/HeaderArea.vue
+++ b/web/satellite/src/components/team/HeaderArea.vue
@@ -86,8 +86,9 @@ import { ProjectMemberHeaderState } from '@/types/projectMembers';
 import { Project } from '@/types/projects';
 import { PM_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsHttpApi } from '@/api/analytics';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 
 import VInfo from '@/components/common/VInfo.vue';
 import VHeader from '@/components/common/VHeader.vue';
@@ -146,7 +147,7 @@ export default class HeaderArea extends Vue {
      * Opens add team members modal.
      */
     public toggleTeamMembersModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TEAM_MEMBERS_MODAL);
+        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
     }
 
     public onFirstDeleteClick(): void {
diff --git a/web/satellite/src/store/index.ts b/web/satellite/src/store/index.ts
index 3f48e7e32..1a7d24ddc 100644
--- a/web/satellite/src/store/index.ts
+++ b/web/satellite/src/store/index.ts
@@ -26,6 +26,7 @@ import { FilesState, makeFilesModule } from '@/store/modules/files';
 import { NavigationLink } from '@/types/navigation';
 import { ABTestingState, makeABTestingModule } from '@/store/modules/abTesting';
 import { ABHttpApi } from '@/api/abtesting';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 Vue.use(Vuex);
@@ -113,7 +114,7 @@ router.beforeEach(async (to, from, next) => {
         store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN);
     }
 
-    if (!to.path.includes(RouteConfig.UploadFile.path) && !store.state.appStateModule.appState.isUploadCancelPopupVisible) {
+    if (!to.path.includes(RouteConfig.UploadFile.path) && (store.state.appStateModule.appState.activeModal !== MODALS.uploadCancelPopup)) {
         const areUploadsInProgress: boolean = await store.dispatch(OBJECTS_ACTIONS.CHECK_ONGOING_UPLOADS, to.path);
         if (areUploadsInProgress) return;
     }
diff --git a/web/satellite/src/store/modules/appState.ts b/web/satellite/src/store/modules/appState.ts
index 687438362..36d0657e2 100644
--- a/web/satellite/src/store/modules/appState.ts
+++ b/web/satellite/src/store/modules/appState.ts
@@ -1,57 +1,19 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
-import { OnboardingOS, PartneredSatellite } from '@/types/common';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
+import { OnboardingOS, PartneredSatellite } from '@/types/common';
 import { AppState } from '@/utils/constants/appStateEnum';
 import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 // Object that contains all states of views
 class ViewsState {
     constructor(
         public fetchState = AppState.LOADING,
-        public isAddTeamMembersModalShown = false,
-        public isAccountDropdownShown = false,
-        public isSelectProjectDropdownShown = false,
-        public isResourcesDropdownShown = false,
-        public isQuickStartDropdownShown = false,
-        public isSettingsDropdownShown = false,
-        public isEditProjectDropdownShown = false,
-        public isFreeCreditsDropdownShown = false,
-        public isAvailableBalanceDropdownShown = false,
-        public isPeriodsDropdownShown = false,
-        public isBucketNamesDropdownShown = false,
-        public isAGDatePickerShown = false,
-        public isChartsDatePickerShown = false,
-        public isPermissionsDropdownShown = false,
-        public isEditProfileModalShown = false,
-        public isChangePasswordModalShown = false,
-        public isPaymentSelectionShown = false,
-        public isUploadCancelPopupVisible = false,
         public isSuccessfulPasswordResetShown = false,
-        public isCreateProjectPromptModalShown = false,
-        public isCreateProjectModalShown = false,
-        public isCreateBucketModalShown = false,
-        public isAddPMModalShown = false,
-        public isOpenBucketModalShown = false,
-        public isEnterPassphraseModalShown = false,
-        public isMFARecoveryModalShown = false,
-        public isEnableMFAModalShown = false,
-        public isDisableMFAModalShown = false,
-        public isAddTokenFundsModalShown = false,
-        public isShareBucketModalShown = false,
-        public isShareObjectModalShown = false,
-        public isDeleteBucketModalShown = false,
-        public isNewFolderModalShown = false,
-        public isCreateProjectPassphraseModalShown = false,
-        public isManageProjectPassphraseModalShown = false,
-        public isObjectDetailsModalShown = false,
-        public isAddCouponModalShown = false,
-        public isNewBillingAddCouponModalShown = false,
         public isBillingNotificationShown = true,
         public hasJustLoggedIn = false,
-
         public onbAGStepBackRoute = '',
         public onbAPIKeyStepBackRoute = '',
         public onbCleanApiKey = '',
@@ -60,6 +22,9 @@ class ViewsState {
         public deletePaymentMethodID = '',
         public onbSelectedOs: OnboardingOS | null = null,
         public managePassphraseStep: ManageProjectPassphraseStep | undefined = undefined,
+        public activeDropdown = 'none',
+        // activeModal could be of VueConstructor type or Object (for composition api components).
+        public activeModal: unknown | null = null,
     ) {}
 }
 
@@ -84,127 +49,12 @@ interface AppContext {
 export const appStateModule = {
     state: new State(),
     mutations: {
-        [APP_STATE_MUTATIONS.TOGGLE_ADD_TEAM_MEMBERS_MODAL](state: State): void {
-            state.appState.isAddTeamMembersModalShown = !state.appState.isAddTeamMembersModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_ACCOUNT_DROPDOWN](state: State): void {
-            state.appState.isAccountDropdownShown = !state.appState.isAccountDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_SELECT_PROJECT_DROPDOWN](state: State): void {
-            state.appState.isSelectProjectDropdownShown = !state.appState.isSelectProjectDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_RESOURCES_DROPDOWN](state: State): void {
-            state.appState.isResourcesDropdownShown = !state.appState.isResourcesDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_QUICK_START_DROPDOWN](state: State): void {
-            state.appState.isQuickStartDropdownShown = !state.appState.isQuickStartDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_SETTINGS_DROPDOWN](state: State): void {
-            state.appState.isSettingsDropdownShown = !state.appState.isSettingsDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_EDIT_PROJECT_DROPDOWN](state: State): void {
-            state.appState.isEditProjectDropdownShown = !state.appState.isEditProjectDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_FREE_CREDITS_DROPDOWN](state: State): void {
-            state.appState.isFreeCreditsDropdownShown = !state.appState.isFreeCreditsDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN](state: State): void {
-            state.appState.isAvailableBalanceDropdownShown = !state.appState.isAvailableBalanceDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void {
-            state.appState.isPeriodsDropdownShown = !state.appState.isPeriodsDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_AG_DATEPICKER_DROPDOWN](state: State): void {
-            state.appState.isAGDatePickerShown = !state.appState.isAGDatePickerShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN](state: State): void {
-            state.appState.isChartsDatePickerShown = !state.appState.isChartsDatePickerShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_BUCKET_NAMES_DROPDOWN](state: State): void {
-            state.appState.isBucketNamesDropdownShown = !state.appState.isBucketNamesDropdownShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_PERMISSIONS_DROPDOWN](state: State): void {
-            state.appState.isPermissionsDropdownShown = !state.appState.isPermissionsDropdownShown;
-        },
         [APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET](state: State): void {
             state.appState.isSuccessfulPasswordResetShown = !state.appState.isSuccessfulPasswordResetShown;
         },
-        [APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_MODAL_SHOWN](state: State): void {
-            state.appState.isChangePasswordModalShown = !state.appState.isChangePasswordModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_MODAL_SHOWN](state: State): void {
-            state.appState.isEditProfileModalShown = !state.appState.isEditProfileModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_UPLOAD_CANCEL_POPUP](state: State): void {
-            state.appState.isUploadCancelPopupVisible = !state.appState.isUploadCancelPopupVisible;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP](state: State): void {
-            state.appState.isCreateProjectPromptModalShown = !state.appState.isCreateProjectPromptModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP](state: State): void {
-            state.appState.isCreateProjectModalShown = !state.appState.isCreateProjectModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN](state: State): void {
-            state.appState.isAddPMModalShown = !state.appState.isAddPMModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN](state: State): void {
-            state.appState.isOpenBucketModalShown = !state.appState.isOpenBucketModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_ENTER_PASSPHRASE_MODAL_SHOWN](state: State): void {
-            state.appState.isEnterPassphraseModalShown = !state.appState.isEnterPassphraseModalShown;
-        },
         [APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN](state: State): void {
             state.appState.hasJustLoggedIn = !state.appState.hasJustLoggedIn;
         },
-        [APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN](state: State): void {
-            state.appState.isCreateProjectPassphraseModalShown = !state.appState.isCreateProjectPassphraseModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN](state: State, step?: ManageProjectPassphraseStep): void {
-            if (step) {
-                state.appState.managePassphraseStep = step;
-            }
-
-            state.appState.isManageProjectPassphraseModalShown = !state.appState.isManageProjectPassphraseModalShown;
-        },
-        [APP_STATE_MUTATIONS.CLEAR_MANAGE_PASSPHRASE_STEP](state: State): void {
-            state.appState.managePassphraseStep = undefined;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN](state: State): void {
-            state.appState.isCreateBucketModalShown = !state.appState.isCreateBucketModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN](state: State): void {
-            state.appState.isMFARecoveryModalShown = !state.appState.isMFARecoveryModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_ENABLE_MFA_MODAL_SHOWN](state: State): void {
-            state.appState.isEnableMFAModalShown = !state.appState.isEnableMFAModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_DISABLE_MFA_MODAL_SHOWN](state: State): void {
-            state.appState.isDisableMFAModalShown = !state.appState.isDisableMFAModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_ADD_TOKEN_FUNDS_MODAL_SHOWN](state: State): void {
-            state.appState.isAddTokenFundsModalShown = !state.appState.isAddTokenFundsModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_SHARE_BUCKET_MODAL_SHOWN](state: State): void {
-            state.appState.isShareBucketModalShown = !state.appState.isShareBucketModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_SHARE_OBJECT_MODAL_SHOWN](state: State): void {
-            state.appState.isShareObjectModalShown = !state.appState.isShareObjectModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_DELETE_BUCKET_MODAL_SHOWN](state: State): void {
-            state.appState.isDeleteBucketModalShown = !state.appState.isDeleteBucketModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_OBJECT_DETAILS_MODAL_SHOWN](state: State): void {
-            state.appState.isObjectDetailsModalShown = !state.appState.isObjectDetailsModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN](state: State): void {
-            state.appState.isAddCouponModalShown = !state.appState.isAddCouponModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_NEW_BILLING_ADD_COUPON_MODAL_SHOWN](state: State): void {
-            state.appState.isNewBillingAddCouponModalShown = !state.appState.isNewBillingAddCouponModalShown;
-        },
-        [APP_STATE_MUTATIONS.TOGGLE_NEW_FOLDER_MODAL_SHOWN](state: State): void {
-            state.appState.isNewFolderModalShown = !state.appState.isNewFolderModalShown;
-        },
         [APP_STATE_MUTATIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP](state: State, id: string): void {
             state.appState.setDefaultPaymentMethodID = id;
         },
@@ -214,47 +64,10 @@ export const appStateModule = {
         [APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION](state: State): void {
             state.appState.isBillingNotificationShown = false;
         },
-        [APP_STATE_MUTATIONS.CLOSE_ALL](state: State): void {
-            state.appState.isAccountDropdownShown = false;
-            state.appState.isSelectProjectDropdownShown = false;
-            state.appState.isResourcesDropdownShown = false;
-            state.appState.isQuickStartDropdownShown = false;
-            state.appState.isSettingsDropdownShown = false;
-            state.appState.isEditProjectDropdownShown = false;
-            state.appState.isFreeCreditsDropdownShown = false;
-            state.appState.isAvailableBalanceDropdownShown = false;
-            state.appState.isPermissionsDropdownShown = false;
-            state.appState.isPeriodsDropdownShown = false;
-            state.appState.isPaymentSelectionShown = false;
-            state.appState.isAGDatePickerShown = false;
-            state.appState.isChartsDatePickerShown = false;
-            state.appState.isBucketNamesDropdownShown = false;
-        },
         [APP_STATE_MUTATIONS.CLEAR](state: State): void {
-            state.appState.isAddTeamMembersModalShown = false;
-            state.appState.isEditProfileModalShown = false;
-            state.appState.isChangePasswordModalShown = false;
-            state.appState.isUploadCancelPopupVisible = false;
+            state.appState.activeModal = null;
             state.appState.isSuccessfulPasswordResetShown = false;
-            state.appState.isCreateProjectPromptModalShown = false;
-            state.appState.isCreateProjectModalShown = false;
-            state.appState.isAddPMModalShown = false;
-            state.appState.isOpenBucketModalShown = false;
-            state.appState.isMFARecoveryModalShown = false;
-            state.appState.isEnableMFAModalShown = false;
-            state.appState.isDisableMFAModalShown = false;
-            state.appState.isAddTokenFundsModalShown = false;
-            state.appState.isShareBucketModalShown = false;
-            state.appState.isShareObjectModalShown = false;
-            state.appState.isDeleteBucketModalShown = false;
-            state.appState.isNewFolderModalShown = false;
-            state.appState.isCreateProjectPassphraseModalShown = false;
-            state.appState.isManageProjectPassphraseModalShown = false;
-            state.appState.isObjectDetailsModalShown = false;
-            state.appState.isEnterPassphraseModalShown = false;
             state.appState.hasJustLoggedIn = false;
-            state.appState.isAddCouponModalShown = false;
-            state.appState.isNewBillingAddCouponModalShown = false;
             state.appState.onbAGStepBackRoute = '';
             state.appState.onbAPIKeyStepBackRoute = '';
             state.appState.onbCleanApiKey = '';
@@ -267,9 +80,6 @@ export const appStateModule = {
         [APP_STATE_MUTATIONS.CHANGE_STATE](state: State, newFetchState: AppState): void {
             state.appState.fetchState = newFetchState;
         },
-        [APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION](state: State, value: boolean): void {
-            state.appState.isPaymentSelectionShown = value;
-        },
         [APP_STATE_MUTATIONS.SET_SATELLITE_NAME](state: State, satelliteName: string): void {
             state.satelliteName = satelliteName;
         },
@@ -306,136 +116,58 @@ export const appStateModule = {
         [APP_STATE_MUTATIONS.SET_ONB_OS](state: State, os: OnboardingOS): void {
             state.appState.onbSelectedOs = os;
         },
+        [APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN](state: State, dropdown: string): void {
+            state.appState.activeDropdown = dropdown;
+        },
+        [APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL](state: State, modal: unknown): void {
+            // modal could be of VueConstructor type or Object (for composition api components).
+            if (state.appState.activeModal === modal) {
+                state.appState.activeModal = null;
+                return;
+            }
+            state.appState.activeModal = modal;
+        },
+        [APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL](state: State): void {
+            state.appState.activeModal = null;
+        },
     },
     actions: {
-        [APP_STATE_ACTIONS.TOGGLE_ACCOUNT]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isAccountDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
+        [APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN]: function ({ commit, state }: AppContext, dropdown: string): void {
+            if (state.appState.activeDropdown === dropdown) {
+                commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
+                return;
             }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_ACCOUNT_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_SELECT_PROJECT_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isSelectProjectDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_SELECT_PROJECT_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_RESOURCES_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isResourcesDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_RESOURCES_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_QUICK_START_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isQuickStartDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_QUICK_START_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_SETTINGS_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isSettingsDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_SETTINGS_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_EDIT_PROJECT_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isEditProjectDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROJECT_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_FREE_CREDITS_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isFreeCreditsDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_FREE_CREDITS_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isAvailableBalanceDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_PERIODS_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isPeriodsDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_AG_DATEPICKER_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isAGDatePickerShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_AG_DATEPICKER_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isChartsDatePickerShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_BUCKET_NAMES_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isBucketNamesDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_BUCKET_NAMES_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_PERMISSIONS_DROPDOWN]: function ({ commit, state }: AppContext): void {
-            if (!state.appState.isPermissionsDropdownShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_PERMISSIONS_DROPDOWN);
-        },
-        [APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION]: function ({ commit, state }: AppContext, value: boolean): void {
-            if (!state.appState.isPaymentSelectionShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION, value);
+            commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, dropdown);
         },
         [APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET]: function ({ commit, state }: AppContext): void {
             if (!state.appState.isSuccessfulPasswordResetShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
+                commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET);
         },
-        [APP_STATE_ACTIONS.TOGGLE_UPLOAD_CANCEL_POPUP]: function ({ commit }: AppContext): void {
-            commit(APP_STATE_MUTATIONS.TOGGLE_UPLOAD_CANCEL_POPUP);
-        },
         [APP_STATE_ACTIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP]: function ({ commit, state }: AppContext, methodID: string): void {
+
             if (!state.appState.setDefaultPaymentMethodID) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
+                commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
             }
 
             commit(APP_STATE_MUTATIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP, methodID);
         },
         [APP_STATE_ACTIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP]: function ({ commit, state }: AppContext, methodID: string): void {
+
             if (!state.appState.deletePaymentMethodID) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
+                commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
             }
 
             commit(APP_STATE_MUTATIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP, methodID);
         },
         [APP_STATE_ACTIONS.CLOSE_POPUPS]: function ({ commit }: AppContext): void {
-            commit(APP_STATE_MUTATIONS.CLOSE_ALL);
+            commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
         },
         [APP_STATE_ACTIONS.CLEAR]: function ({ commit }: AppContext): void {
-            commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             commit(APP_STATE_MUTATIONS.CLEAR);
+            commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
         },
         [APP_STATE_ACTIONS.CHANGE_STATE]: function ({ commit }: AppContext, newFetchState: AppState): void {
             commit(APP_STATE_MUTATIONS.CHANGE_STATE, newFetchState);
diff --git a/web/satellite/src/store/modules/files.ts b/web/satellite/src/store/modules/files.ts
index 44558251f..51043001a 100644
--- a/web/satellite/src/store/modules/files.ts
+++ b/web/satellite/src/store/modules/files.ts
@@ -4,8 +4,9 @@
 import S3, { CommonPrefix } from 'aws-sdk/clients/s3';
 
 import { StoreModule } from '@/types/store';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 const listCache = new Map();
 
diff --git a/web/satellite/src/store/modules/objects.ts b/web/satellite/src/store/modules/objects.ts
index 671ce35ac..65c58bbbf 100644
--- a/web/satellite/src/store/modules/objects.ts
+++ b/web/satellite/src/store/modules/objects.ts
@@ -4,9 +4,10 @@
 import S3, { Bucket, ObjectList } from 'aws-sdk/clients/s3';
 
 import { EdgeCredentials } from '@/types/accessGrants';
-import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { FilesState } from '@/store/modules/files';
 import { StoreModule } from '@/types/store';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 
 export const OBJECTS_ACTIONS = {
     CLEAR: 'clearObjects',
@@ -256,7 +257,7 @@ export function makeObjectsModule(): StoreModule<ObjectsState, ObjectsContext> {
                 }
 
                 commit(SET_LEAVE_ROUTE, leaveRoute);
-                dispatch(APP_STATE_ACTIONS.TOGGLE_UPLOAD_CANCEL_POPUP, null, { root: true });
+                commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.uploadCancelPopup, null, { root: true });
 
                 return true;
             },
diff --git a/web/satellite/src/store/mutationConstants.ts b/web/satellite/src/store/mutationConstants.ts
index 97d66167a..816acf3fd 100644
--- a/web/satellite/src/store/mutationConstants.ts
+++ b/web/satellite/src/store/mutationConstants.ts
@@ -51,7 +51,6 @@ export const APP_STATE_MUTATIONS = {
     TOGGLE_CREATE_BUCKET_MODAL_SHOWN: 'TOGGLE_CREATE_BUCKET_MODAL_SHOWN',
     SHOW_DELETE_PAYMENT_METHOD_POPUP: 'SHOW_DELETE_PAYMENT_METHOD_POPUP',
     SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP: 'SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP',
-    CLOSE_ALL: 'CLOSE_ALL',
     CLEAR: 'CLEAR_APPSTATE',
     CLOSE_BILLING_NOTIFICATION: 'closeBillingNotification',
     CHANGE_STATE: 'CHANGE_STATE',
@@ -69,4 +68,7 @@ export const APP_STATE_MUTATIONS = {
     SET_ONB_CLEAN_API_KEY: 'SET_ONB_CLEAN_API_KEY',
     SET_ONB_OS: 'SET_ONB_OS',
     CLEAR_MANAGE_PASSPHRASE_STEP: 'CLEAR_MANAGE_PASSPHRASE_STEP',
+    TOGGLE_ACTIVE_DROPDOWN: 'TOGGLE_ACTIVE_DROPDOWN',
+    UPDATE_ACTIVE_MODAL: 'UPDATE_ACTIVE_MODAL',
+    REMOVE_ACTIVE_MODAL: 'REMOVE_ACTIVE_MODAL',
 };
diff --git a/web/satellite/src/utils/constants/actionNames.ts b/web/satellite/src/utils/constants/actionNames.ts
index 54d24a384..2fd2aad4b 100644
--- a/web/satellite/src/utils/constants/actionNames.ts
+++ b/web/satellite/src/utils/constants/actionNames.ts
@@ -32,6 +32,8 @@ export const APP_STATE_ACTIONS = {
     SET_COUPON_CODE_BILLING_UI_STATUS: 'SET_COUPON_CODE_BILLING_UI_STATUS',
     SET_COUPON_CODE_SIGNUP_UI_STATUS: 'SET_COUPON_CODE_SIGNUP_UI_STATUS',
     SET_PROJECT_DASHBOARD_STATUS: 'SET_PROJECT_DASHBOARD_STATUS',
+    SET_ENCRYPTION_PASSPHRASE_FLOW_STATUS: 'SET_ENCRYPTION_PASSPHRASE_FLOW_STATUS',
+    TOGGLE_ACTIVE_DROPDOWN: 'TOGGLE_ACTIVE_DROPDOWN',
 };
 
 export const NOTIFICATION_ACTIONS = {
diff --git a/web/satellite/src/utils/constants/appStatePopUps.ts b/web/satellite/src/utils/constants/appStatePopUps.ts
new file mode 100644
index 000000000..a8132f7d6
--- /dev/null
+++ b/web/satellite/src/utils/constants/appStatePopUps.ts
@@ -0,0 +1,97 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import AddTeamMemberModal from '@/components/modals/AddTeamMemberModal.vue';
+import EditProfileModal from '@/components/modals/EditProfileModal.vue';
+import ChangePasswordModal from '@/components/modals/ChangePasswordModal.vue';
+import CreateProjectModal from '@/components/modals/CreateProjectModal.vue';
+import AddPaymentMethodModal from '@/components/modals/AddPaymentMethodModal.vue';
+import OpenBucketModal from '@/components/modals/OpenBucketModal.vue';
+import MFARecoveryCodesModal from '@/components/modals/MFARecoveryCodesModal.vue';
+import EnableMFAModal from '@/components/modals/EnableMFAModal.vue';
+import DisableMFAModal from '@/components/modals/DisableMFAModal.vue';
+import AddTokenFundsModal from '@/components/modals/AddTokenFundsModal.vue';
+import ShareBucketModal from '@/components/modals/ShareBucketModal.vue';
+import ShareObjectModal from '@/components/modals/ShareObjectModal.vue';
+import DeleteBucketModal from '@/components/modals/DeleteBucketModal.vue';
+import CreateBucketModal from '@/components/modals/CreateBucketModal.vue';
+import NewFolderModal from '@/components/modals/NewFolderModal.vue';
+import CreateProjectPassphraseModal
+    from '@/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue';
+import ManageProjectPassphraseModal
+    from '@/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue';
+import AddCouponCodeModal from '@/components/modals/AddCouponCodeModal.vue';
+import NewBillingAddCouponCodeModal
+    from '@/components/modals/NewBillingAddCouponCodeModal.vue';
+import CreateProjectPromptModal from '@/components/modals/CreateProjectPromptModal.vue';
+import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
+import ObjectDetailsModal from '@/components/modals/ObjectDetailsModal.vue';
+import EnterPassphraseModal from '@/components/modals/EnterPassphraseModal.vue';
+
+export const APP_STATE_DROPDOWNS = {
+    ACCOUNT: 'isAccountDropdownShown',
+    SELECT_PROJECT: 'isSelectProjectDropdownShown',
+    RESOURCES: 'isResourcesDropdownShown',
+    QUICK_START: 'isQuickStartDropdownShown',
+    FREE_CREDITS: 'isFreeCreditsDropdownShown',
+    AVAILABLE_BALANCE: 'isAvailableBalanceDropdownShown',
+    PERIODS: 'isPeriodsDropdownShown',
+    BUCKET_NAMES: 'isBucketNamesDropdownShown',
+    AG_DATE_PICKER: 'isAGDatePickerShown',
+    CHART_DATE_PICKER: 'isChartsDatePickerShown',
+    PERMISSIONS: 'isPermissionsDropdownShown',
+    PAYMENT_SELECTION: 'isPaymentSelectionShown',
+};
+
+enum Modals {
+    ADD_TEAM_MEMBER= 'addTeamMember',
+    EDIT_PROFILE= 'editProfile',
+    CHANGE_PASSWORD= 'changePassword',
+    CREATE_PROJECT= 'createProject',
+    ADD_PAYMENT_METHOD= 'addPaymentMethod',
+    OPEN_BUCKET= 'openBucket',
+    MFA_RECOVERY= 'mfaRecovery',
+    ENABLE_MFA= 'enableMFA',
+    DISABLE_MFA= 'disableMFA',
+    ADD_TOKEN_FUNDS= 'addTokenFunds',
+    SHARE_BUCKET= 'shareBucket',
+    SHARE_OBJECT= 'shareObject',
+    DELETE_BUCKET= 'deleteBucket',
+    CREATE_BUCKET= 'createBucket',
+    NEW_FOLDER= 'newFolder',
+    CREATE_PROJECT_PASSPHRASE= 'createProjectPassphrase',
+    MANAGE_PROJECT_PASSPHRASE= 'manageProjectPassphrase',
+    ADD_COUPON= 'addCoupon',
+    NEW_BILLING_ADD_COUPON= 'newBillingAddCoupon',
+    CREATE_PROJECT_PROMPT= 'createProjectPrompt',
+    UPLOAD_CANCEL_POPUP= 'uploadCancelPopup',
+    OBJECT_DETAILS= 'objectDetails',
+    ENTER_PASSPHRASE= 'enterPassphrase',
+}
+
+// modals could be of VueConstructor type or Object (for composition api components).
+export const MODALS: Record<Modals, unknown> = {
+    [Modals.ADD_TEAM_MEMBER]: AddTeamMemberModal,
+    [Modals.EDIT_PROFILE]: EditProfileModal,
+    [Modals.CHANGE_PASSWORD]: ChangePasswordModal,
+    [Modals.CREATE_PROJECT]: CreateProjectModal,
+    [Modals.ADD_PAYMENT_METHOD]: AddPaymentMethodModal,
+    [Modals.OPEN_BUCKET]: OpenBucketModal,
+    [Modals.MFA_RECOVERY]: MFARecoveryCodesModal,
+    [Modals.ENABLE_MFA]: EnableMFAModal,
+    [Modals.DISABLE_MFA]: DisableMFAModal,
+    [Modals.ADD_TOKEN_FUNDS]: AddTokenFundsModal,
+    [Modals.SHARE_BUCKET]: ShareBucketModal,
+    [Modals.SHARE_OBJECT]: ShareObjectModal,
+    [Modals.DELETE_BUCKET]: DeleteBucketModal,
+    [Modals.CREATE_BUCKET]: CreateBucketModal,
+    [Modals.NEW_FOLDER]: NewFolderModal,
+    [Modals.CREATE_PROJECT_PASSPHRASE]: CreateProjectPassphraseModal,
+    [Modals.MANAGE_PROJECT_PASSPHRASE]: ManageProjectPassphraseModal,
+    [Modals.ADD_COUPON]: AddCouponCodeModal,
+    [Modals.NEW_BILLING_ADD_COUPON]: NewBillingAddCouponCodeModal,
+    [Modals.CREATE_PROJECT_PROMPT]: CreateProjectPromptModal,
+    [Modals.UPLOAD_CANCEL_POPUP]: UploadCancelPopup,
+    [Modals.OBJECT_DETAILS]: ObjectDetailsModal,
+    [Modals.ENTER_PASSPHRASE]: EnterPassphraseModal,
+};
diff --git a/web/satellite/src/views/DashboardArea.vue b/web/satellite/src/views/DashboardArea.vue
index 71bfd1548..b1df9b665 100644
--- a/web/satellite/src/views/DashboardArea.vue
+++ b/web/satellite/src/views/DashboardArea.vue
@@ -89,7 +89,6 @@ import { CouponType } from '@/types/coupons';
 import { CreditCard } from '@/types/payments';
 import { Project } from '@/types/projects';
 import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 import { AppState } from '@/utils/constants/appStateEnum';
 import { LocalData } from '@/utils/localData';
 import { User } from '@/types/users';
@@ -102,6 +101,8 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { OBJECTS_ACTIONS } from '@/store/modules/objects';
 import { useNotify, useRouter, useStore } from '@/utils/hooks';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import ProjectInfoBar from '@/components/infoBars/ProjectInfoBar.vue';
 import BillingNotification from '@/components/notifications/BillingNotification.vue';
@@ -476,7 +477,7 @@ function setIsLimitModalShown(value: boolean): void {
  * Toggles MFA recovery modal visibility.
  */
 function toggleMFARecoveryModal(): void {
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
 }
 
 /**
@@ -496,7 +497,7 @@ async function generateNewMFARecoveryCodes(): Promise<void> {
  */
 function togglePMModal(): void {
     isLimitModalShown.value = false;
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
 }
 
 /**
diff --git a/web/satellite/tests/unit/ignore/account/billing/coupons/CouponArea.spec.ts b/web/satellite/tests/unit/ignore/account/billing/coupons/CouponArea.spec.ts
index ff4f26ac7..5d6bd542d 100644
--- a/web/satellite/tests/unit/ignore/account/billing/coupons/CouponArea.spec.ts
+++ b/web/satellite/tests/unit/ignore/account/billing/coupons/CouponArea.spec.ts
@@ -10,6 +10,7 @@ import { appStateModule } from '@/store/modules/appState';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { makePaymentsModule } from '@/store/modules/payments';
 import { Coupon, CouponDuration } from '@/types/payments';
+import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
 
 import CouponArea from '@/components/account/billing/coupons/CouponArea.vue';
 
@@ -30,7 +31,7 @@ paymentsApi.setMockCoupon(new Coupon(
 ));
 
 const store = new Vuex.Store({ modules: { paymentsModule, appStateModule } });
-store.commit(APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS, true);
+store.commit(APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS, true);
 
 describe('CouponArea', (): void => {
     it('renders correctly', async (): Promise<void> => {