diff --git a/web/satellite/src/components/accessGrants/ProgressBar.vue b/web/satellite/src/components/accessGrants/ProgressBar.vue
index f34af557b..391ca7ccb 100644
--- a/web/satellite/src/components/accessGrants/ProgressBar.vue
+++ b/web/satellite/src/components/accessGrants/ProgressBar.vue
@@ -4,24 +4,25 @@
 <template>
     <div class="progress-bar">
         <div class="progress-bar__item">
-            <div class="progress-bar__item__circle" :class="{ blue: isNameStep || isPermissionsStep || isPassphraseStep || isResultStep }"/>
-            <p class="progress-bar__item__label" :class="{ checked: isNameStep || isPermissionsStep || isPassphraseStep || isResultStep }">Name Access</p>
+            <div class="progress-bar__item__line" :class="{ blue: isNameStep }"/>
+            <p class="progress-bar__item__label" :class="{ checked: isNameStep }">Name Access</p>
         </div>
-        <div class="progress-bar__progress" :class="{ blue: isPermissionsStep || isPassphraseStep || isResultStep }"/>
         <div class="progress-bar__item">
-            <div class="progress-bar__item__circle" :class="{ blue: isPermissionsStep || isPassphraseStep || isResultStep }"/>
-            <p class="progress-bar__item__label" :class="{ checked: isPermissionsStep || isPassphraseStep || isResultStep }">Permissions</p>
+            <div class="progress-bar__item__line" :class="{ blue: isPermissionsStep }"/>
+            <p class="progress-bar__item__label" :class="{ checked: isPermissionsStep }">Permissions</p>
         </div>
-        <div class="progress-bar__progress" :class="{ blue: isPassphraseStep || isResultStep }"/>
         <div class="progress-bar__item">
-            <div class="progress-bar__item__circle" :class="{ blue: isPassphraseStep || isResultStep }"/>
-            <p class="progress-bar__item__label" :class="{ checked: isPassphraseStep || isResultStep }">Passphrase</p>
+            <div class="progress-bar__item__line" :class="{ blue: isPassphraseStep }"/>
+            <p class="progress-bar__item__label" :class="{ checked: isPassphraseStep }">Passphrase</p>
         </div>
-        <div class="progress-bar__progress" :class="{ blue: isResultStep }"/>
         <div class="progress-bar__item">
-            <div class="progress-bar__item__circle" :class="{ blue: isResultStep }"/>
+            <div class="progress-bar__item__line" :class="{ blue: isResultStep }"/>
             <p class="progress-bar__item__label" :class="{ checked: isResultStep }">Access Grant</p>
         </div>
+        <div class="progress-bar__item" v-if="isGatewayStep">
+            <div class="progress-bar__item__line" :class="{ blue: isGatewayStep }"/>
+            <p class="progress-bar__item__label" :class="{ checked: isGatewayStep }">S3 Gateway</p>
+        </div>
     </div>
 </template>
 
@@ -59,6 +60,13 @@ export default class ProgressBar extends Vue {
     public get isResultStep(): boolean {
         return this.$route.name === RouteConfig.ResultStep.name || this.$route.name === RouteConfig.AccessGrantResult.name;
     }
+
+    /**
+     * Indicates if current route is on gateway step.
+     */
+    public get isGatewayStep(): boolean {
+        return this.$route.name === RouteConfig.GatewayStep.name || this.$route.name === RouteConfig.AccessGrantGateway.name;
+    }
 }
 </script>
 
@@ -70,19 +78,18 @@ export default class ProgressBar extends Vue {
         align-items: flex-start;
         justify-content: flex-start;
         background: #f5f6fa;
-        height: 380px;
         border-radius: 6px 0 0 6px;
 
         &__item {
             display: flex;
             align-items: center;
 
-            &__circle {
-                width: 20px;
-                height: 20px;
-                border-radius: 10px;
+            &__line {
+                width: 7px;
+                height: 75px;
+                border-radius: 40px;
                 background: #dcdde1;
-                margin-right: 10px;
+                margin-right: 20px;
             }
 
             &__label {
@@ -95,13 +102,6 @@ export default class ProgressBar extends Vue {
                 white-space: nowrap;
             }
         }
-
-        &__progress {
-            background: #dcdde1;
-            width: 4px;
-            height: 33%;
-            margin-left: 8px;
-        }
     }
 
     .checked {
diff --git a/web/satellite/src/components/accessGrants/steps/CreateAccessNameStep.vue b/web/satellite/src/components/accessGrants/steps/CreateAccessNameStep.vue
deleted file mode 100644
index 099d03506..000000000
--- a/web/satellite/src/components/accessGrants/steps/CreateAccessNameStep.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-	<div>TESTING</div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-@Component
-
-export default class CreateAccessNameStep extends Vue {
-}
-</script>
diff --git a/web/satellite/src/components/accessGrants/steps/CreateAccessPassphraseStep.vue b/web/satellite/src/components/accessGrants/steps/CreateAccessPassphraseStep.vue
deleted file mode 100644
index 338dbd2ff..000000000
--- a/web/satellite/src/components/accessGrants/steps/CreateAccessPassphraseStep.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-@Component
-
-export default class CreateAccessPassphraseStep extends Vue {
-}
-</script>
diff --git a/web/satellite/src/components/accessGrants/steps/CreateAccessPermissionsStep.vue b/web/satellite/src/components/accessGrants/steps/CreateAccessPermissionsStep.vue
deleted file mode 100644
index e9baf8c13..000000000
--- a/web/satellite/src/components/accessGrants/steps/CreateAccessPermissionsStep.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-@Component
-
-export default class CreateAccessPermissionsStep extends Vue {
-}
-</script>
diff --git a/web/satellite/src/components/accessGrants/steps/CreateAccessUplinkStep.vue b/web/satellite/src/components/accessGrants/steps/CreateAccessUplinkStep.vue
deleted file mode 100644
index e5f0c9acf..000000000
--- a/web/satellite/src/components/accessGrants/steps/CreateAccessUplinkStep.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-<template>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-@Component
-
-export default class CreateAccessUplinkStep extends Vue {
-}
-</script>
diff --git a/web/satellite/src/components/accessGrants/steps/GatewayStep.vue b/web/satellite/src/components/accessGrants/steps/GatewayStep.vue
new file mode 100644
index 000000000..03b0d4b0b
--- /dev/null
+++ b/web/satellite/src/components/accessGrants/steps/GatewayStep.vue
@@ -0,0 +1,389 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="gateway" :class="{ 'border-radius': isOnboardingTour }">
+        <BackIcon class="gateway__back-icon" @click="onBackClick"/>
+        <h1 class="gateway__title">S3 Gateway</h1>
+        <div class="gateway__container">
+            <h3 class="gateway__container__title">
+                Generate S3 Gateway Credentials
+            </h3>
+            <p class="gateway__container__disclaimer">
+                By generating gateway credentials, you are opting in to Server-side encryption
+            </p>
+            <VButton
+                v-if="!areKeysVisible"
+                class="gateway__container__button"
+                label="Generate Credentials"
+                width="calc(100% - 4px)"
+                height="48px"
+                :is-blue-white="true"
+                :on-press="onGenerateCredentialsClick"
+                :is-disabled="isLoading"
+            />
+            <div class="gateway__container__keys-area" v-else>
+                <div class="gateway__container__keys-area__label-area">
+                    <h3 class="gateway__container__keys-area__label-area__label">Access Key</h3>
+                    <VInfo
+                        class="gateway__container__keys-area__label-area__info-button"
+                        bold-text="The access key ID uniquely identifies your account.">
+                        <InfoIcon class="gateway__container__keys-area__label-area__info-button__image"/>
+                    </VInfo>
+                </div>
+                <div class="gateway__container__keys-area__key">
+                    <p class="gateway__container__keys-area__key__value">{{ gatewayCredentials.accessKeyId }}</p>
+                    <VButton
+                        class="gateway__container__keys-area__key__button"
+                        label="Copy"
+                        width="66px"
+                        height="30px"
+                        :on-press="onCopyAccessClick"
+                    />
+                </div>
+                <div class="gateway__container__keys-area__label-area">
+                    <h3 class="gateway__container__keys-area__label-area__label">Secret Key</h3>
+                    <VInfo
+                        class="gateway__container__keys-area__label-area__info-button"
+                        bold-text="Secret access keys are—as the name implies—secrets, like your password.">
+                        <InfoIcon class="gateway__container__keys-area__label-area__info-button__image"/>
+                    </VInfo>
+                </div>
+                <div class="gateway__container__keys-area__key">
+                    <p class="gateway__container__keys-area__key__value">{{ gatewayCredentials.secretKey }}</p>
+                    <VButton
+                        class="gateway__container__keys-area__key__button"
+                        label="Copy"
+                        width="66px"
+                        height="30px"
+                        :on-press="onCopySecretClick"
+                    />
+                </div>
+                <div class="gateway__container__keys-area__label-area">
+                    <h3 class="gateway__container__keys-area__label-area__label">End Point</h3>
+                    <VInfo
+                        class="gateway__container__keys-area__label-area__info-button"
+                        bold-text="The service to which you want to establish the connection.">
+                        <InfoIcon class="gateway__container__keys-area__label-area__info-button__image"/>
+                    </VInfo>
+                </div>
+                <div class="gateway__container__keys-area__key">
+                    <p class="gateway__container__keys-area__key__value">{{ gatewayCredentials.endpoint }}</p>
+                    <VButton
+                        class="gateway__container__keys-area__key__button"
+                        label="Copy"
+                        width="66px"
+                        height="30px"
+                        :on-press="onCopyEndpointClick"
+                    />
+                </div>
+            </div>
+        </div>
+        <VButton
+            label="Done"
+            width="100%"
+            height="48px"
+            :on-press="onDoneClick"
+            :is-disabled="!gatewayCredentials.accessKeyId"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import VButton from '@/components/common/VButton.vue';
+import VInfo from '@/components/common/VInfo.vue';
+
+import BackIcon from '@/../static/images/accessGrants/back.svg';
+import InfoIcon from '@/../static/images/accessGrants/info.svg';
+import WarningIcon from '@/../static/images/accessGrants/warning.svg';
+import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
+import HideIcon from '@/../static/images/common/BlackArrowHide.svg';
+
+import { RouteConfig } from '@/router';
+import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
+import { GatewayCredentials } from '@/types/accessGrants';
+
+@Component({
+    components: {
+        BackIcon,
+        WarningIcon,
+        VButton,
+        ExpandIcon,
+        HideIcon,
+        VInfo,
+        InfoIcon,
+    },
+})
+export default class GatewayStep extends Vue {
+    private key: string = '';
+    private restrictedKey: string = '';
+    private access: string = '';
+
+    public areKeysVisible: boolean = false;
+    public isLoading: boolean = false;
+
+    /**
+     * Lifecycle hook after initial render.
+     * Sets local access from props value.
+     */
+    public mounted(): void {
+        if (!this.$route.params.access && !this.$route.params.key && !this.$route.params.resctrictedKey) {
+            this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
+
+            return;
+        }
+
+        this.access = this.$route.params.access;
+        this.key = this.$route.params.key;
+        this.restrictedKey = this.$route.params.restrictedKey;
+    }
+
+    /**
+     * Holds on copy access key button click logic.
+     * Copies key to clipboard.
+     */
+    public onCopyAccessClick(): void {
+        this.$copyText(this.gatewayCredentials.accessKeyId);
+        this.$notify.success('Key was copied successfully');
+    }
+
+    /**
+     * Holds on copy secret key button click logic.
+     * Copies secret to clipboard.
+     */
+    public onCopySecretClick(): void {
+        this.$copyText(this.gatewayCredentials.secretKey);
+        this.$notify.success('Secret was copied successfully');
+    }
+
+    /**
+     * Holds on copy endpoint button click logic.
+     * Copies endpoint to clipboard.
+     */
+    public onCopyEndpointClick(): void {
+        this.$copyText(this.gatewayCredentials.endpoint);
+        this.$notify.success('Endpoint was copied successfully');
+    }
+
+    /**
+     * Holds on back button click logic.
+     * Redirects to previous step.
+     */
+    public onBackClick(): void {
+        if (this.isOnboardingTour) {
+            this.$router.push({
+                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantResult)).name,
+                params: {
+                    access: this.access,
+                    key: this.key,
+                    restrictedKey: this.restrictedKey,
+                },
+            });
+
+            return;
+        }
+
+        this.$router.push({
+            name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.ResultStep)).name,
+            params: {
+                access: this.access,
+                key: this.key,
+                restrictedKey: this.restrictedKey,
+            },
+        });
+    }
+
+    /**
+     * Holds on done button click logic.
+     * Proceed to upload data step.
+     */
+    public onDoneClick(): void {
+        this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
+    }
+
+    /**
+     * Holds on generate credentials button click logic.
+     * Generates gateway credentials.
+     */
+    public async onGenerateCredentialsClick(): Promise<void> {
+        if (this.isLoading) return;
+
+        this.isLoading = true;
+
+        try {
+            await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, {accessGrant: this.access});
+
+            await this.$notify.success('Gateway credentials were generated successfully');
+
+            this.areKeysVisible = true;
+        } catch (error) {
+            await this.$notify.error(error.message);
+        }
+
+        this.isLoading = false;
+    }
+
+    /**
+     * Indicates if current route is onboarding tour.
+     */
+    public get isOnboardingTour(): boolean {
+        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
+    }
+
+    /**
+     * Returns generated gateway credentials from store.
+     */
+    public get gatewayCredentials(): GatewayCredentials {
+        return this.$store.state.accessGrantsModule.gatewayCredentials;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .gateway {
+        height: calc(100% - 60px);
+        padding: 30px 65px;
+        max-width: 475px;
+        min-width: 475px;
+        font-family: 'font_regular', sans-serif;
+        font-style: normal;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        background-color: #fff;
+        border-radius: 0 6px 6px 0;
+
+        &__back-icon {
+            position: absolute;
+            top: 30px;
+            left: 65px;
+            cursor: pointer;
+        }
+
+        &__title {
+            font-family: 'font_bold', sans-serif;
+            font-weight: bold;
+            font-size: 22px;
+            line-height: 27px;
+            color: #000;
+            margin: 0;
+        }
+
+        &__container {
+            background: #f5f6fa;
+            border-radius: 6px;
+            padding: 50px;
+            margin: 55px 0 40px 0;
+            width: calc(100% - 100px);
+
+            &__title {
+                font-family: 'font_bold', sans-serif;
+                font-size: 22px;
+                line-height: 27px;
+                color: #000;
+                margin: 0 0 25px 0;
+                text-align: center;
+            }
+
+            &__disclaimer {
+                font-size: 16px;
+                line-height: 28px;
+                color: #000;
+                margin: 0 0 25px 0;
+                text-align: center;
+            }
+
+            &__keys-area {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+
+                &__label-area {
+                    display: flex;
+                    align-items: center;
+                    margin: 20px 0 10px 0;
+
+                    &__label {
+                        font-family: 'font_bold', sans-serif;
+                        font-size: 16px;
+                        line-height: 21px;
+                        color: #354049;
+                        margin: 0;
+                    }
+
+                    &__info-button {
+                        max-height: 20px;
+                        cursor: pointer;
+                        margin-left: 10px;
+
+                        &:hover {
+
+                            .ag-info-rect {
+                                fill: #fff;
+                            }
+
+                            .ag-info-path {
+                                fill: #2683ff;
+                            }
+                        }
+                    }
+                }
+
+                &__key {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    border-radius: 9px;
+                    padding: 10px;
+                    width: calc(100% - 20px);
+                    max-width: calc(100% - 20px);
+                    border: 1px solid rgba(56, 75, 101, 0.4);
+                    background-color: #fff;
+
+                    &__value {
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        margin: 0;
+                    }
+
+                    &__button {
+                        min-width: 66px;
+                        min-height: 30px;
+                        margin-left: 10px;
+                    }
+                }
+            }
+        }
+    }
+
+    .border-radius {
+        border-radius: 6px;
+    }
+
+    /deep/ .info__message-box {
+        background-image: url('../../../../static/images/accessGrants/MessageBox.png');
+        background-repeat: no-repeat;
+        min-height: 65px;
+        min-width: 200px;
+        width: 200px;
+        bottom: 23px;
+        left: 59px;
+        padding: 10px 20px 20px 20px;
+        word-break: break-word;
+
+        &__text {
+            text-align: left;
+            font-size: 13px;
+            line-height: 17px;
+
+            &__bold-text {
+                font-family: 'font_medium', sans-serif;
+                color: #354049;
+            }
+        }
+    }
+</style>
diff --git a/web/satellite/src/components/accessGrants/steps/ResultStep.vue b/web/satellite/src/components/accessGrants/steps/ResultStep.vue
index 14e96e300..79084e195 100644
--- a/web/satellite/src/components/accessGrants/steps/ResultStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/ResultStep.vue
@@ -27,86 +27,16 @@
                 />
             </div>
         </div>
-        <div class="generate-grant__gateway-area" v-if="isGatewayDropdownVisible">
-            <div class="generate-grant__gateway-area__toggle" @click="toggleCredentialsVisibility">
-                <h3 class="generate-grant__gateway-area__toggle__label">Gateway Credentials</h3>
-                <ExpandIcon v-if="!areGatewayCredentialsVisible"/>
-                <HideIcon v-else/>
-            </div>
-            <div class="generate-grant__gateway-area__container" v-if="areGatewayCredentialsVisible">
-                <div class="generate-grant__gateway-area__container__beta">
-                    <p class="generate-grant__gateway-area__container__beta__message">This feature is currently in Beta</p>
-                    <a
-                        class="generate-grant__gateway-area__container__beta__link"
-                        href="https://forum.storj.io/t/gateway-mt-beta-looking-for-testers/11324"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Learn More >
-                    </a>
-                </div>
-                <div class="generate-grant__gateway-area__container__warning" v-if="!areKeysVisible">
-                    <h3 class="generate-grant__gateway-area__container__warning__title">
-                        Using Gateway Credentials Enables Server-Side Encryption.
-                    </h3>
-                    <p class="generate-grant__gateway-area__container__warning__disclaimer">
-                        By generating gateway credentials, you are opting in to Server-side encryption
-                    </p>
-                    <VButton
-                        class="generate-grant__gateway-area__container__warning__button"
-                        label="Generate Gateway Credentials"
-                        width="calc(100% - 4px)"
-                        height="48px"
-                        :is-blue-white="true"
-                        :on-press="onGenerateCredentialsClick"
-                        :is-disabled="isLoading"
-                    />
-                </div>
-                <div class="generate-grant__gateway-area__container__keys-area" v-else>
-                    <h3 class="generate-grant__gateway-area__container__keys-area__label">Access Key</h3>
-                    <div class="generate-grant__gateway-area__container__keys-area__key">
-                        <p class="generate-grant__gateway-area__container__keys-area__key__value">{{ gatewayCredentials.accessKeyId }}</p>
-                        <VButton
-                            class="generate-grant__gateway-area__container__keys-area__key__button"
-                            label="Copy"
-                            width="66px"
-                            height="30px"
-                            :on-press="onCopyAccessClick"
-                        />
-                    </div>
-                    <h3 class="generate-grant__gateway-area__container__keys-area__label">Secret Key</h3>
-                    <div class="generate-grant__gateway-area__container__keys-area__key">
-                        <p class="generate-grant__gateway-area__container__keys-area__key__value">{{ gatewayCredentials.secretKey }}</p>
-                        <VButton
-                            class="generate-grant__gateway-area__container__keys-area__key__button"
-                            label="Copy"
-                            width="66px"
-                            height="30px"
-                            :on-press="onCopySecretClick"
-                        />
-                    </div>
-                    <h3 class="generate-grant__gateway-area__container__keys-area__label">End Point</h3>
-                    <div class="generate-grant__gateway-area__container__keys-area__key">
-                        <p class="generate-grant__gateway-area__container__keys-area__key__value">{{ gatewayCredentials.endpoint }}</p>
-                        <VButton
-                            class="generate-grant__gateway-area__container__keys-area__key__button"
-                            label="Copy"
-                            width="66px"
-                            height="30px"
-                            :on-press="onCopyEndpointClick"
-                        />
-                    </div>
-                </div>
-            </div>
-        </div>
         <VButton
             class="generate-grant__done-button"
-            :class="{ 'extra-margin-top': !(isOnboardingTour || areGatewayCredentialsVisible) }"
             label="Done"
             width="100%"
             height="48px"
             :on-press="onDoneClick"
         />
+        <p class="generate-grant__gateway-link" v-if="isGatewayLinkVisible" @click="navigateToGatewayStep">
+            Generate S3 Gateway Credentials
+        </p>
     </div>
 </template>
 
@@ -121,9 +51,6 @@ import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
 import HideIcon from '@/../static/images/common/BlackArrowHide.svg';
 
 import { RouteConfig } from '@/router';
-import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
-import { GatewayCredentials } from '@/types/accessGrants';
-import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
 import { MetaUtils } from '@/utils/meta';
 
 @Component({
@@ -140,10 +67,7 @@ export default class ResultStep extends Vue {
     private restrictedKey: string = '';
 
     public access: string = '';
-    public isGatewayDropdownVisible: boolean = false;
-    public areGatewayCredentialsVisible: boolean = false;
-    public areKeysVisible: boolean = false;
-    public isLoading: boolean = false;
+    public isGatewayLinkVisible: boolean = false;
 
     /**
      * Lifecycle hook after initial render.
@@ -161,14 +85,7 @@ export default class ResultStep extends Vue {
         this.restrictedKey = this.$route.params.restrictedKey;
 
         const requestURL = MetaUtils.getMetaContent('gateway-credentials-request-url');
-        if (requestURL) this.isGatewayDropdownVisible = true;
-    }
-
-    /**
-     * Toggles gateway credentials section visibility.
-     */
-    public toggleCredentialsVisibility(): void {
-        this.areGatewayCredentialsVisible = !this.areGatewayCredentialsVisible;
+        if (requestURL) this.isGatewayLinkVisible = true;
     }
 
     /**
@@ -180,33 +97,6 @@ export default class ResultStep extends Vue {
         this.$notify.success('Token was copied successfully');
     }
 
-    /**
-     * Holds on copy access key button click logic.
-     * Copies key to clipboard.
-     */
-    public onCopyAccessClick(): void {
-        this.$copyText(this.gatewayCredentials.accessKeyId);
-        this.$notify.success('Key was copied successfully');
-    }
-
-    /**
-     * Holds on copy secret key button click logic.
-     * Copies secret to clipboard.
-     */
-    public onCopySecretClick(): void {
-        this.$copyText(this.gatewayCredentials.secretKey);
-        this.$notify.success('Secret was copied successfully');
-    }
-
-    /**
-     * Holds on copy endpoint button click logic.
-     * Copies endpoint to clipboard.
-     */
-    public onCopyEndpointClick(): void {
-        this.$copyText(this.gatewayCredentials.endpoint);
-        this.$notify.success('Endpoint was copied successfully');
-    }
-
     /**
      * Holds on back button click logic.
      * Redirects to previous step.
@@ -254,30 +144,31 @@ export default class ResultStep extends Vue {
     }
 
     /**
-     * Holds on generate credentials button click logic.
-     * Generates gateway credentials.
+     * Holds on link click logic.
+     * Proceed to gateway step.
      */
-    public async onGenerateCredentialsClick(): Promise<void> {
-        this.isLoading = true;
-
-        try {
-            await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, {accessGrant: this.access});
-
-            await this.$notify.success('Gateway credentials were generated successfully');
-            this.areKeysVisible = true;
-
-            const satelliteName: string = MetaUtils.getMetaContent('satellite-name');
-
-            this.$segment.track(SegmentEvent.GENERATE_GATEWAY_CREDENTIALS_CLICKED, {
-                satelliteName: satelliteName,
-                email: this.$store.getters.user.email,
+    public navigateToGatewayStep(): void {
+        if (this.isOnboardingTour) {
+            this.$router.push({
+                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantGateway)).name,
+                params: {
+                    access: this.access,
+                    key: this.key,
+                    restrictedKey: this.restrictedKey,
+                },
             });
 
-            this.isLoading = false;
-        } catch (error) {
-            await this.$notify.error(error.message);
-            this.isLoading = false;
+            return;
         }
+
+        this.$router.push({
+            name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.GatewayStep)).name,
+            params: {
+                access: this.access,
+                key: this.key,
+                restrictedKey: this.restrictedKey,
+            },
+        });
     }
 
     /**
@@ -287,13 +178,6 @@ export default class ResultStep extends Vue {
         return this.$route.path.includes(RouteConfig.OnboardingTour.path);
     }
 
-    /**
-     * Returns generated gateway credentials from store.
-     */
-    public get gatewayCredentials(): GatewayCredentials {
-        return this.$store.state.accessGrantsModule.gatewayCredentials;
-    }
-
     /**
      * Returns amount of access grants from store.
      */
@@ -398,130 +282,26 @@ export default class ResultStep extends Vue {
             }
         }
 
-        &__gateway-area {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 100%;
-
-            &__toggle {
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                justify-content: center;
-
-                &__label {
-                    font-family: 'font_bold', sans-serif;
-                    font-size: 16px;
-                    line-height: 23px;
-                    color: #49515c;
-                    margin: 0 15px 0 0;
-                }
-            }
-
-            &__container {
-                width: 100%;
-
-                &__beta {
-                    background-color: #effff9;
-                    border: 1px solid #1a9666;
-                    border-radius: 6px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    padding: 12px 20px;
-                    margin-top: 20px;
-
-                    &__message {
-                        font-weight: bold;
-                        font-size: 14px;
-                        line-height: 19px;
-                        color: #000;
-                        margin: 0;
-                    }
-
-                    &__link {
-                        font-weight: bold;
-                        font-size: 14px;
-                        line-height: 19px;
-                        color: #1a9666;
-                    }
-                }
-
-                &__warning {
-                    margin-top: 20px;
-                    background: #f5f6fa;
-                    border-radius: 6px;
-                    padding: 40px 50px;
-                    width: calc(100% - 100px);
-
-                    &__title {
-                        font-family: 'font_bold', sans-serif;
-                        font-size: 18px;
-                        line-height: 24px;
-                        color: #000;
-                        margin: 0 0 20px 0;
-                        text-align: center;
-                    }
-
-                    &__disclaimer {
-                        font-size: 16px;
-                        line-height: 28px;
-                        color: #000;
-                        margin: 0 0 25px 0;
-                        text-align: center;
-                    }
-                }
-
-                &__keys-area {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: flex-start;
-
-                    &__label {
-                        font-family: 'font_bold', sans-serif;
-                        font-size: 16px;
-                        line-height: 21px;
-                        color: #354049;
-                        margin: 20px 0 10px 0;
-                    }
-
-                    &__key {
-                        display: flex;
-                        align-items: center;
-                        justify-content: space-between;
-                        border-radius: 9px;
-                        padding: 10px;
-                        width: calc(100% - 20px);
-                        border: 1px solid rgba(56, 75, 101, 0.4);
-
-                        &__value {
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                            white-space: nowrap;
-                            margin: 0;
-                        }
-
-                        &__button {
-                            min-width: 66px;
-                            min-height: 30px;
-                            margin-left: 10px;
-                        }
-                    }
-                }
-            }
-        }
-
         &__done-button {
             margin-top: 20px;
         }
+
+        &__gateway-link {
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 23px;
+            text-align: center;
+            color: #0068dc;
+            margin: 30px 0 0 0;
+            cursor: pointer;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
     }
 
     .border-radius {
         border-radius: 6px;
     }
-
-    .extra-margin-top {
-        margin-top: 76px;
-    }
 </style>
diff --git a/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue b/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
index f1c0b9231..a0c48c589 100644
--- a/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
+++ b/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
@@ -90,7 +90,7 @@ export default class CreateAccessGrantStep extends Vue {
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-left: -195px;
+            margin-left: -205px;
         }
     }
 
@@ -99,11 +99,11 @@ export default class CreateAccessGrantStep extends Vue {
     }
 
     .passphrase-margin {
-        margin-left: -180px;
+        margin-left: -190px;
     }
 
     .result-margin {
-        margin-left: -175px;
+        margin-left: -195px;
     }
 
     .cli-margin {
diff --git a/web/satellite/src/components/project/ProjectDashboard.vue b/web/satellite/src/components/project/ProjectDashboard.vue
index e8f8e4eac..ce81eb7d1 100644
--- a/web/satellite/src/components/project/ProjectDashboard.vue
+++ b/web/satellite/src/components/project/ProjectDashboard.vue
@@ -81,7 +81,7 @@ export default class ProjectDashboard extends Vue {
 
 <style scoped lang="scss">
     .dashboard-area {
-        padding: 50px 30px 30px 30px;
+        padding: 50px 30px 60px 30px;
         font-family: 'font_regular', sans-serif;
 
         &__title {
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index 1a19ecf92..4ab0c3e51 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -9,6 +9,7 @@ import CreateAccessGrant from '@/components/accessGrants/CreateAccessGrant.vue';
 import CLIStep from '@/components/accessGrants/steps/CLIStep.vue';
 import CreatePassphraseStep from '@/components/accessGrants/steps/CreatePassphraseStep.vue';
 import EnterPassphraseStep from '@/components/accessGrants/steps/EnterPassphraseStep.vue';
+import GatewayStep from '@/components/accessGrants/steps/GatewayStep.vue';
 import NameStep from '@/components/accessGrants/steps/NameStep.vue';
 import PermissionsStep from '@/components/accessGrants/steps/PermissionsStep.vue';
 import ResultStep from '@/components/accessGrants/steps/ResultStep.vue';
@@ -78,6 +79,7 @@ export abstract class RouteConfig {
     public static CreatePassphraseStep = new NavigationLink('create-passphrase', 'Access Grant Create Passphrase');
     public static EnterPassphraseStep = new NavigationLink('enter-passphrase', 'Access Grant Enter Passphrase');
     public static ResultStep = new NavigationLink('result', 'Access Grant Result');
+    public static GatewayStep = new NavigationLink('gateway', 'Access Grant Gateway');
     public static CLIStep = new NavigationLink('cli', 'Access Grant In CLI');
 
     // onboarding tour child paths
@@ -89,6 +91,7 @@ export abstract class RouteConfig {
     public static AccessGrantCLI = new NavigationLink('cli', 'Onboarding Access Grant CLI');
     public static AccessGrantPassphrase = new NavigationLink('create-passphrase', 'Onboarding Access Grant Create Passphrase');
     public static AccessGrantResult = new NavigationLink('result', 'Onboarding Access Grant Result');
+    public static AccessGrantGateway = new NavigationLink('gateway', 'Onboarding Access Grant Gateway');
 
     // objects child paths.
     public static CreatePassphrase = new NavigationLink('create-passphrase', 'Objects Create Passphrase');
@@ -236,6 +239,12 @@ export const router = new Router({
                                     component: ResultStep,
                                     props: true,
                                 },
+                                {
+                                    path: RouteConfig.AccessGrantGateway.path,
+                                    name: RouteConfig.AccessGrantGateway.name,
+                                    component: GatewayStep,
+                                    props: true,
+                                },
                             ],
                         },
                     ],
@@ -289,6 +298,12 @@ export const router = new Router({
                                     component: ResultStep,
                                     props: true,
                                 },
+                                {
+                                    path: RouteConfig.GatewayStep.path,
+                                    name: RouteConfig.GatewayStep.name,
+                                    component: GatewayStep,
+                                    props: true,
+                                },
                                 {
                                     path: RouteConfig.CLIStep.path,
                                     name: RouteConfig.CLIStep.name,
diff --git a/web/satellite/static/images/accessGrants/MessageBox.png b/web/satellite/static/images/accessGrants/MessageBox.png
new file mode 100644
index 000000000..3b060d04d
Binary files /dev/null and b/web/satellite/static/images/accessGrants/MessageBox.png differ
diff --git a/web/satellite/static/images/accessGrants/info.svg b/web/satellite/static/images/accessGrants/info.svg
new file mode 100644
index 000000000..97ef00793
--- /dev/null
+++ b/web/satellite/static/images/accessGrants/info.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect class="ag-info-rect" width="18" height="18" rx="9" fill="#93A1AF"/>
+    <path class="ag-info-path" fill-rule="evenodd" clip-rule="evenodd" d="M9.00293 13.333C9.55522 13.333 10.0029 12.8853 10.0029 12.333L10.0029 8.99968C10.0029 8.44739 9.55522 7.99968 9.00293 7.99968C8.45065 7.99968 8.00293 8.44739 8.00293 8.99968L8.00293 12.333C8.00293 12.8853 8.45065 13.333 9.00293 13.333ZM8.99902 6.99975C9.68938 6.99975 10.249 6.44011 10.249 5.74975C10.249 5.0594 9.68938 4.49975 8.99902 4.49975C8.30867 4.49975 7.74902 5.0594 7.74902 5.74975C7.74902 6.44011 8.30867 6.99975 8.99902 6.99975Z" fill="white"/>
+</svg>