diff --git a/web/satellite/src/components/modals/AddTeamMemberModal.vue b/web/satellite/src/components/modals/AddTeamMemberModal.vue
index caf517f35..b332487a5 100644
--- a/web/satellite/src/components/modals/AddTeamMemberModal.vue
+++ b/web/satellite/src/components/modals/AddTeamMemberModal.vue
@@ -7,14 +7,22 @@
             <div class="modal">
                 <div class="modal__header">
                     <TeamMembersIcon />
-                    <h1 class="modal__header__title">Invite team member</h1>
+                    <h1 class="modal__header__title">
+                        {{ isPaidTier ? 'Invite team member' : 'Upgrade to Pro' }}
+                    </h1>
                 </div>
 
                 <p class="modal__info">
-                    Add a team member to contribute to this project.
+                    <template v-if="isPaidTier">
+                        Add a team member to contribute to this project.
+                    </template>
+                    <template v-else>
+                        Upgrade now to unlock collaboration and bring your team together in this project.
+                    </template>
                 </p>
 
                 <VInput
+                    v-if="isPaidTier"
                     class="modal__input"
                     label="Email"
                     height="38px"
@@ -35,13 +43,17 @@
                         :on-press="closeModal"
                     />
                     <VButton
-                        label="Invite"
+                        :label="isPaidTier ? 'Invite' : 'Upgrade'"
                         height="48px"
                         font-size="14px"
                         border-radius="10px"
-                        :on-press="onInviteClick"
+                        :on-press="onPrimaryClick"
                         :is-disabled="!!formError || isLoading"
-                    />
+                    >
+                        <template v-if="!isPaidTier" #icon-right>
+                            <ArrowIcon />
+                        </template>
+                    </VButton>
                 </div>
             </div>
         </template>
@@ -60,12 +72,14 @@ import { useAppStore } from '@/store/modules/appStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useLoading } from '@/composables/useLoading';
+import { MODALS } from '@/utils/constants/appStatePopUps';
 
 import VButton from '@/components/common/VButton.vue';
 import VModal from '@/components/common/VModal.vue';
 import VInput from '@/components/common/VInput.vue';
 
 import TeamMembersIcon from '@/../static/images/team/teamMembers.svg';
+import ArrowIcon from '@/../static/images/onboardingTour/arrowRight.svg';
 
 const analyticsStore = useAnalyticsStore();
 const appStore = useAppStore();
@@ -84,6 +98,7 @@ const email = ref<string>('');
  * or a message describing the validation error.
  */
 const formError = computed<string | boolean>(() => {
+    if (!isPaidTier.value) return false;
     if (!email.value) return true;
     if (email.value.toLocaleLowerCase() === usersStore.state.user.email.toLowerCase()) {
         return `You can't add yourself to the project.`;
@@ -95,9 +110,21 @@ const formError = computed<string | boolean>(() => {
 });
 
 /**
- * Tries to add the user with the input email to the current project.
+ * Returns user's paid tier status from store.
  */
-async function onInviteClick(): Promise<void> {
+const isPaidTier = computed<boolean>(() => {
+    return usersStore.state.user.paidTier;
+});
+
+/**
+ * Handles primary button click.
+ */
+async function onPrimaryClick(): Promise<void> {
+    if (!isPaidTier.value) {
+        appStore.updateActiveModal(MODALS.upgradeAccount);
+        return;
+    }
+
     await withLoading(async () => {
         try {
             await pmStore.inviteMember(email.value, projectsStore.state.selectedProject.id);
diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
index c6bf5f77a..b9778c0fc 100644
--- a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -37,7 +37,7 @@
             @update:itemsPerPage="onLimitChange"
         >
             <template #item="{ props: rowProps }">
-                <v-data-table-row class="pos-relative" v-bind="rowProps">
+                <v-data-table-row v-bind="rowProps">
                     <template #item.name="{ item }: ItemSlotProps">
                         <v-btn
                             class="rounded-lg w-100 px-1 justify-start font-weight-bold"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue
index 0b34c685a..b16c5b524 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue
@@ -3,61 +3,68 @@
 
 <template>
     <v-dialog
-        v-model="model"
+        :model-value="model && !isUpgradeDialogShown"
         width="auto"
         max-width="420px"
         transition="fade-transition"
         :persistent="isLoading"
+        :scrim="false"
+        @update:model-value="v => model = v"
     >
         <v-card rounded="xlg">
-            <v-sheet>
-                <v-card-item class="pl-7 py-4">
-                    <template #prepend>
-                        <v-card-title class="font-weight-bold">
-                            Add Member
-                        </v-card-title>
-                    </template>
+            <v-card-item class="pl-7 py-4">
+                <template #prepend>
+                    <img class="d-block" src="@/../static/images/team/teamMembers.svg" alt="Team members">
+                </template>
 
-                    <template #append>
-                        <v-btn
-                            icon="$close"
-                            variant="text"
-                            size="small"
-                            color="default"
-                            :disabled="isLoading"
-                            @click="model = false"
-                        />
-                    </template>
-                </v-card-item>
-            </v-sheet>
+                <v-card-title class="font-weight-bold">
+                    {{ isPaidTier ? 'Add Member' : 'Upgrade to Pro' }}
+                </v-card-title>
+
+                <template #append>
+                    <v-btn
+                        icon="$close"
+                        variant="text"
+                        size="small"
+                        color="default"
+                        :disabled="isLoading"
+                        @click="model = false"
+                    />
+                </template>
+            </v-card-item>
 
             <v-divider />
 
-            <v-form v-model="valid" class="pa-7 pb-4" @submit.prevent="onInviteClick">
+            <v-form v-model="valid" class="pa-7 pb-4" @submit.prevent="onPrimaryClick">
                 <v-row>
-                    <v-col cols="12">
-                        <p class="mb-5">Invite a team member to join you in this project.</p>
-                        <v-alert
-                            variant="tonal"
-                            color="info"
-                            title="Important Information"
-                            text="All team members should use the same passphrase to access the same data."
-                            rounded="lg"
-                            density="comfortable"
-                            border
-                        />
-                    </v-col>
-                    <v-col cols="12">
-                        <v-text-field
-                            v-model="email"
-                            variant="outlined"
-                            :rules="emailRules"
-                            label="Enter e-mail"
-                            hint="Members will have read & write permissions."
-                            required
-                            autofocus
-                            class="my-2"
-                        />
+                    <template v-if="isPaidTier">
+                        <v-col cols="12">
+                            <p class="mb-5">Invite a team member to join you in this project.</p>
+                            <v-alert
+                                variant="tonal"
+                                color="info"
+                                title="Important Information"
+                                text="All team members should use the same passphrase to access the same data."
+                                rounded="lg"
+                                density="comfortable"
+                                border
+                            />
+                        </v-col>
+                        <v-col cols="12">
+                            <v-text-field
+                                v-model="email"
+                                variant="outlined"
+                                :rules="emailRules"
+                                label="Enter e-mail"
+                                hint="Members will have read & write permissions."
+                                required
+                                autofocus
+                                class="my-2"
+                            />
+                        </v-col>
+                    </template>
+                    <v-col v-else>
+                        Upgrade now to unlock collaboration and bring your team together in this project.
                     </v-col>
                 </v-row>
             </v-form>
@@ -70,12 +77,33 @@
                         <v-btn variant="outlined" color="default" block :disabled="isLoading" @click="model = false">Cancel</v-btn>
                     </v-col>
                     <v-col>
-                        <v-btn color="primary" variant="flat" block :loading="isLoading" @click="onInviteClick">Send Invite</v-btn>
+                        <v-btn
+                            color="primary"
+                            variant="flat"
+                            block
+                            :loading="isLoading"
+                            :append-icon="!isPaidTier ? 'mdi-arrow-right' : undefined"
+                            @click="onPrimaryClick"
+                        >
+                            {{ isPaidTier ? 'Send Invite' : 'Upgrade' }}
+                        </v-btn>
                     </v-col>
                 </v-row>
             </v-card-actions>
         </v-card>
     </v-dialog>
+
+    <upgrade-account-dialog
+        :scrim="false"
+        :model-value="model && isUpgradeDialogShown"
+        @update:model-value="v => model = isUpgradeDialogShown = v"
+    />
+
+    <teleport to="body">
+        <v-fade-transition>
+            <div v-show="model" class="v-overlay__scrim custom-scrim" />
+        </v-fade-transition>
+    </teleport>
 </template>
 
 <script setup lang="ts">
@@ -83,7 +111,6 @@ import { computed, ref } from 'vue';
 import {
     VDialog,
     VCard,
-    VSheet,
     VCardItem,
     VCardTitle,
     VBtn,
@@ -94,6 +121,7 @@ import {
     VAlert,
     VTextField,
     VCardActions,
+    VFadeTransition,
 } from 'vuetify/components';
 
 import { RequiredRule, ValidationRule } from '@poc/types/common';
@@ -102,14 +130,17 @@ import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
 import { useNotify } from '@/utils/hooks';
 import { useLoading } from '@/composables/useLoading';
+import { useUsersStore } from '@/store/modules/usersStore';
+
+import UpgradeAccountDialog from '@poc/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
 
 const props = defineProps<{
-    modelValue: boolean,
-    projectId: string,
+    modelValue: boolean;
+    projectId: string;
 }>();
 
 const emit = defineEmits<{
-    'update:modelValue': [value: boolean],
+    'update:modelValue': [value: boolean];
 }>();
 
 const model = computed<boolean>({
@@ -117,6 +148,7 @@ const model = computed<boolean>({
     set: value => emit('update:modelValue', value),
 });
 
+const usersStore = useUsersStore();
 const analyticsStore = useAnalyticsStore();
 const pmStore = useProjectMembersStore();
 const notify = useNotify();
@@ -124,6 +156,7 @@ const { isLoading, withLoading } = useLoading();
 
 const valid = ref<boolean>(false);
 const email = ref<string>('');
+const isUpgradeDialogShown = ref<boolean>(false);
 
 const emailRules: ValidationRule<string>[] = [
     RequiredRule,
@@ -131,9 +164,21 @@ const emailRules: ValidationRule<string>[] = [
 ];
 
 /**
- * Sends a project invitation to the input email.
+ * Returns user's paid tier status from store.
  */
-async function onInviteClick(): Promise<void> {
+const isPaidTier = computed<boolean>(() => {
+    return usersStore.state.user.paidTier;
+});
+
+/**
+ * Handles primary button click.
+ */
+async function onPrimaryClick(): Promise<void> {
+    if (!isPaidTier.value) {
+        isUpgradeDialogShown.value = true;
+        return;
+    }
+
     if (!valid.value) return;
 
     await withLoading(async () => {
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue
index 79b6d3bfc..b3c58887f 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue
@@ -3,10 +3,12 @@
 
 <template>
     <v-dialog
-        v-model="model"
+        :model-value="model && !isUpgradeDialogShown"
         width="410px"
         transition="fade-transition"
         :persistent="isLoading"
+        :scrim="false"
+        @update:model-value="v => model = v"
     >
         <v-card rounded="xlg">
             <v-card-item class="pl-7 py-4">
@@ -95,7 +97,8 @@
                             variant="flat"
                             :loading="isLoading"
                             block
-                            @click="() => !isProjectLimitReached && onCreateClicked()"
+                            :append-icon="isProjectLimitReached ? 'mdi-arrow-right' : undefined"
+                            @click="onPrimaryClick"
                         >
                             {{ !isProjectLimitReached ? 'Create Project' : 'Upgrade' }}
                         </v-btn>
@@ -104,10 +107,22 @@
             </v-card-actions>
         </v-card>
     </v-dialog>
+
+    <upgrade-account-dialog
+        :scrim="false"
+        :model-value="model && isUpgradeDialogShown"
+        @update:model-value="v => model = isUpgradeDialogShown = v"
+    />
+
+    <teleport to="body">
+        <v-fade-transition>
+            <div v-show="model" class="v-overlay__scrim custom-scrim" />
+        </v-fade-transition>
+    </teleport>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, Teleport } from 'vue';
 import { useRouter } from 'vue-router';
 import {
     VDialog,
@@ -121,6 +136,7 @@ import {
     VRow,
     VCol,
     VTextField,
+    VFadeTransition,
 } from 'vuetify/components';
 
 import { RequiredRule, ValidationRule } from '@poc/types/common';
@@ -131,6 +147,8 @@ import { useUsersStore } from '@/store/modules/usersStore';
 import { useNotify } from '@/utils/hooks';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 
+import UpgradeAccountDialog from '@poc/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
+
 const props = defineProps<{
     modelValue: boolean,
 }>();
@@ -155,6 +173,7 @@ const name = ref<string>('');
 const description = ref<string>('');
 const isDescriptionShown = ref<boolean>(false);
 const isProjectLimitReached = ref<boolean>(false);
+const isUpgradeDialogShown = ref<boolean>(false);
 
 const nameRules: ValidationRule<string>[] = [
     RequiredRule,
@@ -166,9 +185,14 @@ const descriptionRules: ValidationRule<string>[] = [
 ];
 
 /**
- * Creates new project.
+ * Handles primary button click.
  */
-async function onCreateClicked(): Promise<void> {
+async function onPrimaryClick(): Promise<void> {
+    if (isProjectLimitReached.value) {
+        isUpgradeDialogShown.value = true;
+        return;
+    }
+
     if (!formValid.value) return;
     await withLoading(async () => {
         let project: Project;
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue
index 4e053e1db..2248f45ab 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue
@@ -9,7 +9,7 @@
         :persistent="isLoading"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4 pos-relative">
+            <v-card-item class="pl-7 py-4">
                 <template #prepend>
                     <v-sheet
                         class="bg-on-surface-variant d-flex justify-center align-center"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue
index 76bbcc4a8..d45c91b09 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue
@@ -8,7 +8,7 @@
         transition="fade-transition"
     >
         <v-card rounded="xlg">
-            <v-card-item class="pl-7 py-4 pos-relative">
+            <v-card-item class="pl-7 py-4">
                 <template #prepend>
                     <v-sheet
                         class="bg-on-surface-variant d-flex justify-center align-center"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue
index 9eb17f603..c3e5938d2 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue
@@ -4,7 +4,7 @@
 <template>
     <v-dialog v-model="model" max-width="420" transition="fade-transition">
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4 pos-relative">
+            <v-card-item class="pl-7 py-4">
                 <template #prepend>
                     <img class="d-block" :src="stepInfo[step].ref.value?.iconSrc || LockIcon">
                 </template>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
index 94c0405b4..a910aab21 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
@@ -9,7 +9,7 @@
         :persistent="isLoading"
     >
         <v-card ref="innerContent" rounded="xlg">
-            <v-card-item class="pl-7 py-4 pos-relative">
+            <v-card-item class="pl-7 py-4">
                 <template #prepend>
                     <v-sheet
                         class="bg-on-surface-variant d-flex justify-center align-center"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue
index b6d51b8bb..c3ec0b630 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue
@@ -10,6 +10,7 @@
         :max-width="step === UpgradeAccountStep.Info || step === UpgradeAccountStep.PricingPlanSelection ? '700px' : '460px'"
         transition="fade-transition"
         :persistent="loading"
+        :scrim="scrim"
     >
         <v-card ref="content" rounded="xlg">
             <v-card-item class="pl-7 py-4">
@@ -123,9 +124,20 @@ const loading = ref<boolean>(false);
 const plan = ref<PricingPlanInfo | null>(null);
 const content = ref<HTMLElement | null>(null);
 
+const props = withDefaults(defineProps<{
+    modelValue: boolean,
+    scrim: boolean,
+}>(), {
+    scrim: true,
+});
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean];
+}>();
+
 const model = computed<boolean>({
-    get: () => appStore.state.isUpgradeFlowDialogShown,
-    set: value => appStore.toggleUpgradeFlow(value),
+    get: () => props.modelValue,
+    set: value => emit('update:modelValue', value),
 });
 
 const stepTitles = computed(() => {
@@ -195,7 +207,7 @@ async function setSecondStep() {
     try {
         pkgAvailable = await payments.pricingPackageAvailable();
     } catch (error) {
-        notify.notifyError(error, null);
+        notify.notifyError(error);
         setStep(UpgradeAccountStep.Options);
         loading.value = false;
         return;
diff --git a/web/satellite/vuetify-poc/src/layouts/default/Account.vue b/web/satellite/vuetify-poc/src/layouts/default/Account.vue
index dfa504cb0..5cd7c5e07 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/Account.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/Account.vue
@@ -8,13 +8,13 @@
             <account-nav />
             <default-view />
 
-            <UpgradeAccountDialog />
+            <UpgradeAccountDialog v-model="appStore.state.isUpgradeFlowDialogShown" />
         </session-wrapper>
     </v-app>
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount } from 'vue';
+import { computed, onBeforeMount } from 'vue';
 import { VApp } from 'vuetify/components';
 
 import DefaultBar from './AppBar.vue';
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
index 4fc9d148a..457f7d39c 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
@@ -7,18 +7,19 @@
             <default-bar />
             <default-view />
 
-            <UpgradeAccountDialog />
+            <UpgradeAccountDialog v-model="appStore.state.isUpgradeFlowDialogShown" />
         </session-wrapper>
     </v-app>
 </template>
 
 <script setup lang="ts">
 import { VApp } from 'vuetify/components';
-import { onBeforeMount } from 'vue';
+import { computed, onBeforeMount } from 'vue';
 
 import DefaultBar from './AppBar.vue';
 import DefaultView from './View.vue';
 
+import { useAppStore } from '@poc/store/appStore';
 import { useUsersStore } from '@/store/modules/usersStore';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { useNotify } from '@/utils/hooks';
@@ -26,6 +27,7 @@ import { useNotify } from '@/utils/hooks';
 import SessionWrapper from '@poc/components/utils/SessionWrapper.vue';
 import UpgradeAccountDialog from '@poc/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue';
 
+const appStore = useAppStore();
 const usersStore = useUsersStore();
 const notify = useNotify();
 
diff --git a/web/satellite/vuetify-poc/src/layouts/default/Default.vue b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
index 5ef069a5b..48f9c0023 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/Default.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
@@ -11,7 +11,7 @@
             <ProjectNav />
             <default-view />
 
-            <UpgradeAccountDialog />
+            <UpgradeAccountDialog v-model="appStore.state.isUpgradeFlowDialogShown" />
         </session-wrapper>
     </v-app>
 </template>
diff --git a/web/satellite/vuetify-poc/src/styles/styles.scss b/web/satellite/vuetify-poc/src/styles/styles.scss
index afbf52b50..6e7516bc2 100644
--- a/web/satellite/vuetify-poc/src/styles/styles.scss
+++ b/web/satellite/vuetify-poc/src/styles/styles.scss
@@ -122,6 +122,10 @@ html {
   opacity: 0.75;
 }
 
+.custom-scrim {
+  z-index: 2000;
+}
+
 // Align the checkboxes in the tables
 .v-selection-control {
   contain: inherit;
@@ -281,4 +285,4 @@ table {
 // text styles
 .text-cursor-pointer {
   cursor: pointer;
-}
\ No newline at end of file
+}