diff --git a/web/satellite/src/components/dialogs/AppSetupDialog.vue b/web/satellite/src/components/dialogs/AppSetupDialog.vue
index 57c4fd47b48f..60b9ecef73c1 100644
--- a/web/satellite/src/components/dialogs/AppSetupDialog.vue
+++ b/web/satellite/src/components/dialogs/AppSetupDialog.vue
@@ -21,33 +21,70 @@
                             variant="text"
                             size="small"
                             color="default"
+                            :disabled="isCreating"
                             @click="model = false"
                         />
                     </template>
+                    <v-progress-linear height="2px" indeterminate absolute location="bottom" :active="isFetching || isCreating" />
                 </v-card-item>
             </v-sheet>
 
             <v-divider />
 
-            <v-window v-model="step">
+            <v-window
+                v-model="step"
+                class="setup-app__window"
+                :class="{ 'setup-app__window--loading': isFetching }"
+            >
                 <v-window-item :value="SetupStep.ChooseFlowStep">
-                    <ChooseFlowStep @setFlowType="val => flowType = val" />
+                    <choose-flow-step
+                        :ref="stepInfos[SetupStep.ChooseFlowStep].ref"
+                        @setFlowType="val => flowType = val"
+                    />
                 </v-window-item>
 
                 <v-window-item :value="SetupStep.AccessEncryption">
-                    <AccessEncryptionStep @passphraseChanged="val => passphrase = val" />
+                    <access-encryption-step
+                        :ref="stepInfos[SetupStep.AccessEncryption].ref"
+                        @selectOption="val => passphraseOption = val"
+                        @passphraseChanged="val => passphrase = val"
+                    />
+                </v-window-item>
+
+                <v-window-item :value="SetupStep.EnterNewPassphrase">
+                    <enter-passphrase-step
+                        :ref="stepInfos[SetupStep.EnterNewPassphrase].ref"
+                        @passphraseChanged="val => passphrase = val"
+                    />
+                </v-window-item>
+
+                <v-window-item :value="SetupStep.PassphraseGenerated">
+                    <passphrase-generated-step
+                        :ref="stepInfos[SetupStep.PassphraseGenerated].ref"
+                        :name="name"
+                        @passphraseChanged="val => passphrase = val"
+                    />
                 </v-window-item>
 
                 <v-window-item :value="SetupStep.ChoosePermissionsStep">
-                    <ChoosePermissionsStep />
+                    <choose-permissions-step
+                        :ref="stepInfos[SetupStep.ChoosePermissionsStep].ref"
+                        @permissionsChanged="val => permissions = val"
+                    />
                 </v-window-item>
 
                 <v-window-item :value="SetupStep.SelectBucketsStep">
-                    <SelectBucketsStep />
+                    <select-buckets-step
+                        :ref="stepInfos[SetupStep.SelectBucketsStep].ref"
+                        @bucketsChanged="val => buckets = val"
+                    />
                 </v-window-item>
 
                 <v-window-item :value="SetupStep.AccessCreatedStep">
-                    <AccessCreatedStep />
+                    <access-created-step
+                        :ref="stepInfos[SetupStep.AccessCreatedStep].ref"
+                        :credentials="credentials"
+                    />
                 </v-window-item>
             </v-window>
 
@@ -60,9 +97,10 @@
                             variant="outlined"
                             color="default"
                             block
+                            :disabled="isCreating || isFetching"
                             @click="prevStep"
                         >
-                            Cancel
+                            {{ stepInfos[step].prevText }}
                         </v-btn>
                     </v-col>
                     <v-col>
@@ -71,9 +109,11 @@
                             color="primary"
                             variant="flat"
                             block
+                            :loading="isCreating"
+                            :disabled="isFetching"
                             @click="nextStep"
                         >
-                            Next
+                            {{ stepInfos[step].nextText.value }}
                         </v-btn>
                         <v-btn
                             v-else
@@ -94,7 +134,7 @@
 </template>
 
 <script setup lang="ts">
-import { Component, computed, Ref, ref, watch } from 'vue';
+import { Component, computed, Ref, ref, watch, WatchStopHandle } from 'vue';
 import {
     VBtn,
     VCard,
@@ -104,6 +144,7 @@ import {
     VCol,
     VDialog,
     VDivider,
+    VProgressLinear,
     VRow,
     VSheet,
     VWindow,
@@ -118,26 +159,41 @@ import {
 } from '@/types/createAccessGrant';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { getUniqueName, IDialogFlowStep } from '@/types/common';
-import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useNotify } from '@/utils/hooks';
 import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
+import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
+import { useConfigStore } from '@/store/modules/configStore';
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
 import ChooseFlowStep from '@/components/dialogs/appSetupSteps/ChooseFlowStep.vue';
 import ChoosePermissionsStep from '@/components/dialogs/appSetupSteps/ChoosePermissionsStep.vue';
 import SelectBucketsStep from '@/components/dialogs/appSetupSteps/SelectBucketsStep.vue';
 import AccessCreatedStep from '@/components/dialogs/appSetupSteps/AccessCreatedStep.vue';
 import AccessEncryptionStep from '@/components/dialogs/createAccessSteps/AccessEncryptionStep.vue';
+import EnterPassphraseStep from '@/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue';
+import PassphraseGeneratedStep from '@/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue';
+
+type SetupLocation = SetupStep | undefined | (() => (SetupStep | undefined));
 
 class StepInfo {
-    public ref: Ref<IDialogFlowStep | undefined> = ref<IDialogFlowStep>();
+    public ref = ref<IDialogFlowStep>();
+    public prev: Ref<SetupStep | undefined>;
+    public next: Ref<SetupStep | undefined>;
+    public nextText: Ref<string>;
 
     constructor(
-        public nextText: string,
-        public prev?: SetupStep,
-        public next?: SetupStep,
+        nextText: string | (() => string),
+        public prevText: string,
+        prev: SetupLocation = undefined,
+        next: SetupLocation = undefined,
         public beforeNext?: () => Promise<void>,
-    ) { }
+    ) {
+        this.prev = (typeof prev === 'function') ? computed<SetupStep | undefined>(prev) : ref<SetupStep | undefined>(prev);
+        this.next = (typeof next === 'function') ? computed<SetupStep | undefined>(next) : ref<SetupStep | undefined>(next);
+        this.nextText = (typeof nextText === 'function') ? computed<string>(nextText) : ref<string>(nextText);
+    }
 }
 
 const props = defineProps<{
@@ -148,24 +204,25 @@ const props = defineProps<{
 const agStore = useAccessGrantsStore();
 const bucketsStore = useBucketsStore();
 const projectsStore = useProjectsStore();
+const configStore = useConfigStore();
+const analyticsStore = useAnalyticsStore();
 
 const notify = useNotify();
 
-const resets: (() => void)[] = [];
-
 const model = defineModel<boolean>({ required: true });
 
 const innerContent = ref<Component>();
 const isCreating = ref<boolean>(false);
 const isFetching = ref<boolean>(true);
+const worker = ref<Worker | null>(null);
 
+const resets: (() => void)[] = [];
 function resettableRef<T>(value: T): Ref<T> {
     const thisRef = ref<T>(value) as Ref<T>;
     resets.push(() => thisRef.value = value);
     return thisRef;
 }
 
-const worker = ref<Worker | null>(null);
 const step = resettableRef<SetupStep>(SetupStep.ChooseFlowStep);
 const flowType = resettableRef<FlowType>(FlowType.Default);
 const name = resettableRef<string>('');
@@ -173,51 +230,163 @@ const permissions = resettableRef<Permission[]>([]);
 const buckets = resettableRef<string[]>([]);
 const passphrase = resettableRef<string>(bucketsStore.state.passphrase);
 const passphraseOption = resettableRef<PassphraseOption>(PassphraseOption.EnterNewPassphrase);
+const credentials = resettableRef<EdgeCredentials>(new EdgeCredentials());
 
 const promptForPassphrase = computed<boolean>(() => bucketsStore.state.promptForPassphrase);
 
 const stepInfos: Record<SetupStep, StepInfo> = {
     [SetupStep.ChooseFlowStep]: new StepInfo(
-        promptForPassphrase.value || flowType.value === FlowType.Advanced ? 'Next' : 'Create Access',
+        () => promptForPassphrase.value || flowType.value === FlowType.Advanced ? 'Next' : 'Create Access',
+        'Cancel',
         undefined,
-        bucketsStore.state.promptForPassphrase
-            ? SetupStep.AccessEncryption
-            : flowType.value === FlowType.Default
-                ? SetupStep.AccessCreatedStep
-                : SetupStep.ChoosePermissionsStep,
-        !promptForPassphrase.value && flowType.value === FlowType.Default ? createCredentials : undefined,
+        () => {
+            if (promptForPassphrase.value) return SetupStep.AccessEncryption;
+
+            return flowType.value === FlowType.Default ? SetupStep.AccessCreatedStep : SetupStep.ChoosePermissionsStep;
+        },
+        async () => {
+            if (!promptForPassphrase.value && flowType.value === FlowType.Default) {
+                await createCredentials();
+            }
+        },
     ),
     [SetupStep.AccessEncryption]: new StepInfo(
-        'Next',
+        () => flowType.value === FlowType.Default && passphraseOption.value === PassphraseOption.SetMyProjectPassphrase ? 'Create Access' : 'Next',
+        'Back',
         SetupStep.ChooseFlowStep,
-        flowType.value === FlowType.Default
-            ? SetupStep.AccessCreatedStep
-            : passphraseOption.value === PassphraseOption.EnterNewPassphrase
-                ? SetupStep.EnterNewPassphrase
-                : SetupStep.PassphraseGenerated,
-        flowType.value === FlowType.Default ? createCredentials : undefined,
+        () => {
+            if (passphraseOption.value === PassphraseOption.EnterNewPassphrase) return SetupStep.EnterNewPassphrase;
+            if (passphraseOption.value === PassphraseOption.GenerateNewPassphrase) return SetupStep.PassphraseGenerated;
+
+            return flowType.value === FlowType.Default ? SetupStep.AccessCreatedStep : SetupStep.ChoosePermissionsStep;
+        },
+        async () => {
+            if (
+                passphraseOption.value === PassphraseOption.EnterNewPassphrase ||
+                passphraseOption.value === PassphraseOption.GenerateNewPassphrase ||
+                flowType.value === FlowType.Advanced
+            ) return;
+
+            await createCredentials();
+        },
+    ),
+    [SetupStep.PassphraseGenerated]: new StepInfo(
+        () => flowType.value === FlowType.Default ? 'Create Access' : 'Next',
+        'Back',
+        SetupStep.AccessEncryption,
+        () => flowType.value === FlowType.Default ? SetupStep.AccessCreatedStep : SetupStep.ChoosePermissionsStep,
+        async () => {
+            if (flowType.value === FlowType.Default) await createCredentials();
+        },
+    ),
+    [SetupStep.EnterNewPassphrase]: new StepInfo(
+        () => flowType.value === FlowType.Default ? 'Create Access' : 'Next',
+        'Back',
+        SetupStep.AccessEncryption,
+        () => flowType.value === FlowType.Default ? SetupStep.AccessCreatedStep : SetupStep.ChoosePermissionsStep,
+        async () => {
+            if (flowType.value === FlowType.Default) await createCredentials();
+        },
+    ),
+    [SetupStep.ChoosePermissionsStep]: new StepInfo(
+        'Next',
+        'Back',
+        () => {
+            if (bucketsStore.state.promptForPassphrase) {
+                if (passphraseOption.value === PassphraseOption.EnterNewPassphrase) return SetupStep.EnterNewPassphrase;
+                if (passphraseOption.value === PassphraseOption.GenerateNewPassphrase) return SetupStep.PassphraseGenerated;
+
+                return SetupStep.AccessEncryption;
+            }
+
+            return SetupStep.ChooseFlowStep;
+        },
+        SetupStep.SelectBucketsStep,
     ),
-    [SetupStep.ChoosePermissionsStep]: new StepInfo(''),
-    [SetupStep.PassphraseGenerated]: new StepInfo(''),
-    [SetupStep.EnterMyPassphrase]: new StepInfo(''),
-    [SetupStep.EnterNewPassphrase]: new StepInfo(''),
-    [SetupStep.SelectBucketsStep]: new StepInfo(''),
-    [SetupStep.AccessCreatedStep]: new StepInfo(''),
+    [SetupStep.SelectBucketsStep]: new StepInfo(
+        'Create Access',
+        'Back',
+        SetupStep.ChoosePermissionsStep,
+        SetupStep.AccessCreatedStep,
+        createCredentials,
+    ),
+    [SetupStep.AccessCreatedStep]: new StepInfo('', 'Close'),
 };
 
 /**
  * Set unique name of access to be created.
  */
 function setDefaultName(): void {
-    if (props.accessName) {
-        name.value = getUniqueName(props.accessName, agStore.state.allAGNames);
-    }
+    name.value = getUniqueName(props.accessName, agStore.state.allAGNames);
 }
 
 /**
  * Set unique name of access to be created.
  */
-async function createCredentials(): Promise<void> {}
+async function createCredentials(): Promise<void> {
+    if (!worker.value) {
+        throw new Error('Web worker is not initialized.');
+    }
+
+    if (!passphrase.value) throw new Error('Passphrase can\'t be empty');
+
+    const projectID = projectsStore.state.selectedProject.id;
+
+    isCreating.value = true;
+
+    const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(name.value, projectID);
+
+    const noCaveats = flowType.value === FlowType.Default;
+
+    const permissionsMsg = {
+        'type': 'SetPermission',
+        'buckets': JSON.stringify(noCaveats ? [] : buckets.value),
+        'apiKey': cleanAPIKey.secret,
+        'isDownload': noCaveats || permissions.value.includes(Permission.Read),
+        'isUpload': noCaveats || permissions.value.includes(Permission.Write),
+        'isList': noCaveats || permissions.value.includes(Permission.List),
+        'isDelete': noCaveats || permissions.value.includes(Permission.Delete),
+        'notBefore': new Date().toISOString(),
+    };
+
+    worker.value.postMessage(permissionsMsg);
+
+    const grantEvent: MessageEvent = await new Promise(resolve => {
+        if (worker.value) worker.value.onmessage = resolve;
+    });
+    if (grantEvent.data.error) throw new Error(grantEvent.data.error);
+
+    const keyWithCaveats = grantEvent.data.value;
+    const satelliteNodeURL = configStore.state.config.satelliteNodeURL;
+
+    const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
+
+    worker.value.postMessage({
+        'type': 'GenerateAccess',
+        'apiKey': keyWithCaveats,
+        'passphrase': passphrase.value,
+        'salt': salt,
+        'satelliteNodeURL': satelliteNodeURL,
+    });
+
+    const accessEvent: MessageEvent = await new Promise(resolve => {
+        if (worker.value) worker.value.onmessage = resolve;
+    });
+    if (accessEvent.data.error) throw new Error(accessEvent.data.error);
+
+    const accessGrant = accessEvent.data.value;
+
+    credentials.value = await agStore.getEdgeCredentials(accessGrant);
+    analyticsStore.eventTriggered(AnalyticsEvent.GATEWAY_CREDENTIALS_CREATED);
+
+    if (passphraseOption.value === PassphraseOption.SetMyProjectPassphrase) {
+        bucketsStore.setEdgeCredentials(new EdgeCredentials());
+        bucketsStore.setPassphrase(passphrase.value);
+        bucketsStore.setPromptForPassphrase(false);
+    }
+
+    isCreating.value = false;
+}
 
 /**
  * Navigates to the next step.
@@ -227,19 +396,20 @@ async function nextStep(): Promise<void> {
 
     if (isCreating.value || isFetching.value || info.ref.value?.validate?.() === false) return;
 
+    info.ref.value?.onExit?.('next');
+
     if (info.beforeNext) {
         try {
             await info.beforeNext();
         } catch (error) {
-            notify.notifyError(error, AnalyticsErrorEventSource.CREATE_AG_MODAL);
+            notify.notifyError(error, AnalyticsErrorEventSource.SETUP_APPLICATION_MODAL);
+            isCreating.value = false;
             return;
         }
     }
 
-    info.ref.value?.onExit?.('next');
-
-    if (info.next) {
-        step.value = info.next;
+    if (info.next.value) {
+        step.value = info.next.value;
     } else {
         model.value = false;
     }
@@ -253,8 +423,8 @@ function prevStep(): void {
 
     info.ref.value?.onExit?.('prev');
 
-    if (info.prev) {
-        step.value = info.prev;
+    if (info.prev.value) {
+        step.value = info.prev.value;
     } else {
         model.value = false;
     }
@@ -267,12 +437,15 @@ watch(step, newStep => {
     if (!innerContent.value) return;
 
     // Window items are lazy loaded, so the component may not exist yet
+    let unwatch: WatchStopHandle | null = null;
     let unwatchImmediately = false;
-    const unwatch = watch(
+    unwatch = watch(
         () => stepInfos[newStep].ref.value,
         stepComp => {
             if (!stepComp) return;
+
             stepComp.onEnter?.();
+
             if (unwatch) {
                 unwatch();
                 return;
@@ -315,12 +488,23 @@ watch(innerContent, async (comp: Component): Promise<void> => {
         notify.error(`Error fetching bucket grant names. ${err.message}`, AnalyticsErrorEventSource.CREATE_AG_MODAL);
     });
 
-    if (props.accessName) {
-        setDefaultName();
-    }
+    passphrase.value = bucketsStore.state.passphrase;
+    if (props.accessName) setDefaultName();
 
     isFetching.value = false;
 
     stepInfos[step.value].ref.value?.onEnter?.();
 });
 </script>
+
+<style scoped lang="scss">
+.setup-app__window {
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    &--loading {
+        opacity: 0.3;
+        transition: opacity 0s;
+        pointer-events: none;
+    }
+}
+</style>
diff --git a/web/satellite/src/components/dialogs/appSetupSteps/AccessCreatedStep.vue b/web/satellite/src/components/dialogs/appSetupSteps/AccessCreatedStep.vue
index 7718b05e3732..406e6aba4d77 100644
--- a/web/satellite/src/components/dialogs/appSetupSteps/AccessCreatedStep.vue
+++ b/web/satellite/src/components/dialogs/appSetupSteps/AccessCreatedStep.vue
@@ -14,33 +14,42 @@
                     flat
                     density="comfortable"
                     label="Access Key"
-                    model-value="jx5n3ocoloor4ei2qh6jsqstjuqa"
-                    read-only
+                    :model-value="credentials.accessKeyId"
+                    readonly
                     hide-details
-                    append-inner-icon="mdi-content-copy"
-                />
+                >
+                    <template #append-inner>
+                        <input-copy-button :value="credentials.accessKeyId" />
+                    </template>
+                </v-text-field>
             </v-col>
             <v-col cols="12">
                 <v-text-field
                     flat
                     density="comfortable"
                     label="Secret Key"
-                    model-value="j3qlp56mr2oqnu57cx54er7lhfzxkdojmoayoeroqzvb56ihqh246"
-                    read-only
+                    :model-value="credentials.secretKey"
+                    readonly
                     hide-details
-                    append-inner-icon="mdi-content-copy"
-                />
+                >
+                    <template #append-inner>
+                        <input-copy-button :value="credentials.secretKey" />
+                    </template>
+                </v-text-field>
             </v-col>
             <v-col cols="12">
                 <v-text-field
                     flat
                     density="comfortable"
                     label="Endpoint"
-                    model-value="https://apps.storj.io"
-                    read-only
+                    :model-value="credentials.endpoint"
+                    readonly
                     hide-details
-                    append-inner-icon="mdi-content-copy"
-                />
+                >
+                    <template #append-inner>
+                        <input-copy-button :value="credentials.endpoint" />
+                    </template>
+                </v-text-field>
             </v-col>
 
             <v-col>
@@ -55,4 +64,12 @@
 
 <script setup lang="ts">
 import { VForm, VAlert, VCol, VRow, VTextField } from 'vuetify/components';
+
+import { EdgeCredentials } from '@/types/accessGrants';
+
+import InputCopyButton from '@/components/InputCopyButton.vue';
+
+defineProps<{
+    credentials: EdgeCredentials
+}>();
 </script>
diff --git a/web/satellite/src/components/dialogs/appSetupSteps/ChooseFlowStep.vue b/web/satellite/src/components/dialogs/appSetupSteps/ChooseFlowStep.vue
index bf514b7fa36b..b90a421eddc1 100644
--- a/web/satellite/src/components/dialogs/appSetupSteps/ChooseFlowStep.vue
+++ b/web/satellite/src/components/dialogs/appSetupSteps/ChooseFlowStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-7" @submit.prevent>
+    <v-form class="pa-7" @submit.prevent>
         <v-row>
             <v-col>
                 <p>Setup access to third-party applications.</p>
@@ -13,7 +13,7 @@
                     color="primary"
                     mandatory
                     column
-                    @update:model-value="val => emit('setFlowType', val)"
+                    @update:modelValue="val => emit('setFlowType', val)"
                 >
                     <v-chip
                         :key="FlowType.Default"
@@ -62,13 +62,11 @@ const emit = defineEmits<{
     'setFlowType': [flowType: FlowType]
 }>();
 
-const form = ref<VForm>();
 const flowType = ref<FlowType>(FlowType.Default);
 
 defineExpose<IDialogFlowStep>({
-    validate: () => {
-        form.value?.validate();
-        return !!form.value?.isValid;
+    onExit: () => {
+        emit('setFlowType', flowType.value);
     },
 });
 </script>
diff --git a/web/satellite/src/components/dialogs/appSetupSteps/ChoosePermissionsStep.vue b/web/satellite/src/components/dialogs/appSetupSteps/ChoosePermissionsStep.vue
index 416b8bc14a26..114cae096288 100644
--- a/web/satellite/src/components/dialogs/appSetupSteps/ChoosePermissionsStep.vue
+++ b/web/satellite/src/components/dialogs/appSetupSteps/ChoosePermissionsStep.vue
@@ -2,64 +2,66 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form class="pa-7">
+    <v-form class="pa-7" @submit.prevent>
         <v-row>
             <v-col cols="12">
                 <p class="font-weight-bold mb-2">
                     Choose Permissions
                 </p>
                 <p>Select which permissions to give this application.</p>
+                <v-btn
+                    :color="permissions.length === 4 ? 'success' : 'default'"
+                    density="comfortable"
+                    variant="outlined"
+                    size="default"
+                    :prepend-icon="permissions.length === 4 ? mdiCheckCircle : undefined"
+                    class="mt-2"
+                    @click="onAllClick"
+                >
+                    All
+                </v-btn>
                 <v-chip-group
+                    v-model="permissions"
                     filter
                     multiple
                     selected-class="text-primary font-weight-bold"
                     class="mt-2 mb-3"
                 >
                     <v-chip
-                        key="all"
-                        variant="outlined"
-                        filter
-                        value="all"
-                        color="default"
-                    >
-                        All
-                    </v-chip>
-
-                    <v-chip
-                        key="read"
+                        :key="Permission.Read"
                         variant="outlined"
                         filter
-                        value="read"
+                        :value="Permission.Read"
                         color="secondary"
                     >
                         Read
                     </v-chip>
 
                     <v-chip
-                        key="write"
+                        :key="Permission.Write"
                         variant="outlined"
                         filter
-                        value="write"
+                        :value="Permission.Write"
                         color="green"
                     >
                         Write
                     </v-chip>
 
                     <v-chip
-                        key="list"
+                        :key="Permission.List"
                         variant="outlined"
                         filter
-                        value="list"
+                        :value="Permission.List"
                         color="help"
                     >
                         List
                     </v-chip>
 
                     <v-chip
-                        key="delete"
+                        :key="Permission.Delete"
                         variant="outlined"
                         filter
-                        value="delete"
+                        :value="Permission.Delete"
                         color="warning"
                     >
                         Delete
@@ -79,5 +81,31 @@
 </template>
 
 <script setup lang="ts">
-import { VForm, VAlert, VChip, VChipGroup, VCol, VRow } from 'vuetify/components';
+import { ref, watch } from 'vue';
+import { VAlert, VChip, VChipGroup, VCol, VForm, VRow, VBtn } from 'vuetify/components';
+import { mdiCheckCircle } from '@mdi/js';
+
+import { Permission } from '@/types/createAccessGrant';
+
+const emit = defineEmits<{
+    'permissionsChanged': [perms: Permission[]];
+}>();
+
+const permissions = ref<Permission[]>([]);
+
+/**
+ * Selects or deselects all the permissions.
+ */
+function onAllClick(): void {
+    permissions.value = permissions.value.length === 4 ?
+        [] :
+        [
+            Permission.Read,
+            Permission.Write,
+            Permission.List,
+            Permission.Delete,
+        ];
+}
+
+watch(permissions, value => emit('permissionsChanged', value.slice()), { deep: true });
 </script>
diff --git a/web/satellite/src/components/dialogs/appSetupSteps/SelectBucketsStep.vue b/web/satellite/src/components/dialogs/appSetupSteps/SelectBucketsStep.vue
index e38d83193eb6..880db41cfb58 100644
--- a/web/satellite/src/components/dialogs/appSetupSteps/SelectBucketsStep.vue
+++ b/web/satellite/src/components/dialogs/appSetupSteps/SelectBucketsStep.vue
@@ -2,21 +2,24 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form class="pa-7">
+    <v-form class="pa-7" @submit.prevent>
         <v-row>
             <v-col>
                 <p class="font-weight-bold mb-2">Select Buckets</p>
                 <p>Choose buckets you want this application to access.</p>
                 <v-chip-group
+                    v-model="option"
                     filter
+                    mandatory
                     selected-class="text-primary font-weight-bold"
                     class="mt-2 mb-3"
+                    @update:modelValue="onChangeOption"
                 >
                     <v-chip
                         variant="outlined"
                         filter
-                        value="all"
                         color="default"
+                        :value="BucketsOption.All"
                     >
                         All Buckets
                     </v-chip>
@@ -25,36 +28,43 @@
                         variant="outlined"
                         filter
                         color="info"
-                        value="select"
+                        :value="BucketsOption.Select"
                     >
                         Select Buckets
                     </v-chip>
-
-                    <v-chip
-                        variant="outlined"
-                        filter
-                        color="success"
-                        value="new"
-                    >
-                        New Bucket
-                    </v-chip>
                 </v-chip-group>
 
-                <v-alert v-if="buckets === 'all'" variant="tonal" color="default">
+                <v-alert v-if="option === BucketsOption.All" variant="tonal" color="default">
                     <p class="text-subtitle-2 font-weight-bold">All Buckets</p>
                     <p class="text-subtitle-2">The application can access all of the current and future buckets you create in this project.</p>
                 </v-alert>
 
-                <v-alert v-else-if="buckets === 'select'" variant="tonal" color="info">
+                <v-alert v-else variant="tonal" color="info">
                     <p class="text-subtitle-2 font-weight-bold">Select specific buckets</p>
                     <p class="text-subtitle-2">Please select which buckets do you want to share.</p>
-                    <v-select label="Select Buckets" density="comfortable" class="mt-3" hide-details />
-                </v-alert>
-
-                <v-alert v-else variant="tonal" color="success">
-                    <p class="text-subtitle-2 font-weight-bold">Create a new bucket</p>
-                    <p class="text-subtitle-2">New bucket for this access only.</p>
-                    <v-text-field label="Enter a bucket name" density="comfortable" class="mt-3" hide-details />
+                    <v-autocomplete
+                        v-model="buckets"
+                        v-model:search="bucketSearch"
+                        :items="allBucketNames"
+                        class="mt-3"
+                        variant="outlined"
+                        color="default"
+                        label="Select Buckets"
+                        no-data-text="No buckets found."
+                        multiple
+                        chips
+                        closable-chips
+                        :rules="bucketsRules"
+                        :custom-filter="bucketFilter"
+                    >
+                        <template #item="{ props: slotProps }">
+                            <v-list-item v-bind="slotProps" density="compact">
+                                <template #prepend="{ isSelected }">
+                                    <v-checkbox-btn :model-value="isSelected" />
+                                </template>
+                            </v-list-item>
+                        </template>
+                    </v-autocomplete>
                 </v-alert>
             </v-col>
         </v-row>
@@ -62,5 +72,64 @@
 </template>
 
 <script setup lang="ts">
-import { VForm, VAlert, VChip, VChipGroup, VCol, VRow, VSelect, VTextField } from 'vuetify/components';
+import { computed, ref, watch } from 'vue';
+import {
+    VAlert,
+    VAutocomplete,
+    VCheckboxBtn,
+    VChip,
+    VChipGroup,
+    VCol,
+    VForm,
+    VListItem,
+    VRow,
+} from 'vuetify/components';
+
+import { BucketsOption } from '@/types/createAccessGrant';
+import { ValidationRule } from '@/types/common';
+import { useBucketsStore } from '@/store/modules/bucketsStore';
+
+const bucketsStore = useBucketsStore();
+
+const emit = defineEmits<{
+    'bucketsChanged': [buckets: string[]];
+}>();
+
+const option = ref<BucketsOption>(BucketsOption.All);
+const buckets = ref<string[]>([]);
+const bucketSearch = ref<string>('');
+
+const bucketsRules: ValidationRule<string[]>[] = [ v => !!v.length  || 'Required' ];
+
+/**
+ * Returns all bucket names from the store.
+ */
+const allBucketNames = computed<string[]>(() => bucketsStore.state.allBucketNames);
+
+/**
+ * Returns whether the bucket name satisfies the query.
+ */
+function bucketFilter(bucketName: string, query: string): boolean {
+    query = query.trim();
+    if (!query) return true;
+
+    let lastIdx = 0;
+    for (const part of query.split(' ')) {
+        const idx = bucketName.indexOf(part, lastIdx);
+        if (idx === -1) return false;
+        lastIdx = idx + part.length;
+    }
+    return true;
+}
+
+/**
+ * Clears selected buckets.
+ */
+function onChangeOption(): void {
+    buckets.value = [];
+}
+
+watch(buckets, value => {
+    emit('bucketsChanged', value.slice());
+}, { deep: true });
 </script>
diff --git a/web/satellite/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue b/web/satellite/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue
index d749fd6f13fa..2e0dbd575dc9 100644
--- a/web/satellite/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue
+++ b/web/satellite/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue
@@ -63,9 +63,9 @@ const passphrase = ref<string>('');
 const isPassphraseVisible = ref<boolean>(false);
 
 const props = withDefaults(defineProps<{
-    title: string;
-    setOnNext: boolean;
-    ackRequired: boolean;
+    title?: string;
+    setOnNext?: boolean;
+    ackRequired?: boolean;
 }>(), {
     title: 'Enter New Passphrase',
     setOnNext: false,
diff --git a/web/satellite/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue b/web/satellite/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue
index a3cf77aabae7..679a7b82b221 100644
--- a/web/satellite/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue
+++ b/web/satellite/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue
@@ -40,7 +40,7 @@ import SaveButtons from '@/components/dialogs/commonPassphraseSteps/SaveButtons.
 
 import Icon from '@/assets/createAccessGrantFlow/passphraseGenerated.svg';
 
-const props = defineProps<{
+defineProps<{
     name: string;
 }>();
 
diff --git a/web/satellite/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue b/web/satellite/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue
index 6f4112f4c339..dfc17a41b853 100644
--- a/web/satellite/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue
+++ b/web/satellite/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue
@@ -149,9 +149,11 @@ const passphraseRules = computed<ValidationRule<string>[]>(() => {
 defineExpose<DialogStepComponent>({
     title: 'Access Encryption',
     validate: () => {
-        form.value?.validate();
         const passphraseRequired = passphraseOption.value === PassphraseOption.SetMyProjectPassphrase;
-        return !!form.value?.isValid && (!passphraseRequired || !!passphrase.value);
+        if (!passphraseRequired) return true;
+
+        form.value?.validate();
+        return !!form.value?.isValid && !!passphrase.value;
     },
     onEnter: () => {
         if (passphraseOption.value) return;
diff --git a/web/satellite/src/types/createAccessGrant.ts b/web/satellite/src/types/createAccessGrant.ts
index 36ed0663450b..45fab16e19a4 100644
--- a/web/satellite/src/types/createAccessGrant.ts
+++ b/web/satellite/src/types/createAccessGrant.ts
@@ -52,7 +52,6 @@ export enum SetupStep {
     ChooseFlowStep = 'chooseFlowStep',
     AccessEncryption = 'accessEncryption',
     PassphraseGenerated = 'passphraseGenerated',
-    EnterMyPassphrase = 'enterMyPassphrase',
     EnterNewPassphrase = 'enterNewPassphrase',
     ChoosePermissionsStep = 'choosePermission',
     SelectBucketsStep = 'selectBuckets',
@@ -72,6 +71,11 @@ export enum Permission {
     Delete = 'Delete',
 }
 
+export enum BucketsOption {
+    All = 'all',
+    Select = 'select',
+}
+
 export interface AccessGrantEndDate {
     title: string;
     date: Date | null;
diff --git a/web/satellite/src/utils/constants/analyticsEventNames.ts b/web/satellite/src/utils/constants/analyticsEventNames.ts
index f878c150ded6..8301d5c2eebd 100644
--- a/web/satellite/src/utils/constants/analyticsEventNames.ts
+++ b/web/satellite/src/utils/constants/analyticsEventNames.ts
@@ -63,6 +63,7 @@ export enum AnalyticsErrorEventSource {
     BILLING_AREA = 'Billing area',
     BILLING_STORJ_TOKEN_CONTAINER = 'Billing STORJ token container',
     CREATE_AG_MODAL = 'Create access grant modal',
+    SETUP_APPLICATION_MODAL = 'Setup application modal',
     CONFIRM_DELETE_AG_MODAL = 'Confirm delete access grant modal',
     FILE_BROWSER_LIST_CALL = 'File browser - list API call',
     FILE_BROWSER_ENTRY = 'File browser entry',